微信界面布局

使用Android Studio做一个类似于微信界面布局的项目

大致可以分成以下几个方面

top界面

buttom界面

中间界面

主界面

MainActivity

top界面布局

``

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:background="@color/black"
    android:layout_height="70dp">

    <TextView
        android:id="@+id/textView5"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="MyWechat"
        android:textColor="#ffffff"
        android:textSize="34sp" />

</LinearLayout>

这里是对top部分调整格式和背景颜色，同时调整文字大小，完成上半页面的制作

buttom界面布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:layout_gravity="bottom"
    android:background="@color/black">


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            app:srcCompat="@android:drawable/ic_dialog_email" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="微信"
            android:textColor="@color/white"
            android:textSize="30sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            tools:srcCompat="@android:drawable/ic_dialog_email" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="信息"
            android:textColor="@color/white"
            android:textSize="30sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            app:srcCompat="@android:drawable/ic_menu_call"
            tools:srcCompat="@android:drawable/ic_menu_call" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="联系人"
            android:textColor="@color/white"
            android:textSize="30sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@android:drawable/ic_dialog_email"
            tools:srcCompat="@android:drawable/ic_menu_camera" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="设置"
            android:textColor="@color/white"
            android:textSize="30sp" />
    </LinearLayout>

</LinearLayout>

buttom界面涉及到的控件较多，要调整LinearLayout，TextView和imageview的位置和布局，成为微信界面的下半部分

主界面

将top和buttom界面结合起来

代码如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include layout="@layout/top" />

    <FrameLayout
        android:id="@+id/id_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">

    </FrameLayout>
    <include layout="@layout/bottom" />

</LinearLayout>

这里用include调用了top和buttom界面，中间是framlayout控件

中间界面

需要有四个中间界面，这里是其中的一个

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    android:gravity="center"
    android:orientation="horizontal">


    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:text="这是微信信息界面"
        android:textSize="25sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    android:text="TextView" />
</androidx.constraintlayout.widget.ConstraintLayout>

同样类似的还有三个tab界面有设置等等。

其余地方展示

MainActivity

initFragment() //fragment的切换

selectfragment() //显示选中界面的内容，选中界面图标为绿色

hideFragment() //把没有使用的界面的内容隐藏

onClick() //监听函数，监听到底是哪一个图标被击中从而显示哪一个界面的内容

具体可看项目仓库代码

这里我的监听函数出现问题，无法正确的切换下面图标

代码仓库：[gitee.com/zhan-zhan/a…]