android studio实现类微信界面

目录

一、需要实现的功能：

二、top布局

三、bottom布局

四、中间布局

五、activity_main.xml

六、所需java文件

七、运行界面：

---

一、需要实现的功能：

1.可展示出四个可切换界面：微信、通讯录、发现、我（个人界面）；
2.上方栏标题居中，界面中间显示内容，内容随下方栏的选择而切换，下方栏可点击切换；
3.主要从top、bottom、中间布局以及MainActivity四个方面分析。

二、top布局

在res文件夹的layout中新建top.xml，将标题栏的内容居中，并将背景色调为黑色，文字调为白色。

代码如下：

<?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="65dp"
    android:gravity="center"
    android:background="#000000"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="MyWeChat"
        android:textColor="#ffffff"
        android:textSize="20sp" />
</LinearLayout>

效果：

 

三、bottom布局

1.将图标文件夹粘贴到drawable中；
2.在res文件夹的layout中新建bottom.xml，拖入TextView拖入ImageButton后会调用drawable，选取所需的图标；
3.复制粘贴四个并调整水平平铺布局。

代码在后面仓库中有

效果：

四、中间布局

设置了四个tab.xml文件分别显示不同的文本内容，来区分是否能切换

以下给出第一个tab.xml文件，其余类同

代码：

<?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:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:text="这是微信界面"
        android:textSize="25sp" />

</LinearLayout>

效果：

五、activity_main.xml

activity_main.xml里需要加上FrameLayout(重叠布局)和include

代码：

<?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="0dp"
        android:layout_weight="1">
        
    </FrameLayout>

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

效果：

六、所需java文件

 

 代码在文章末尾的代码仓库中

MainActivity函数主要是监听哪个按钮被点击，然后实现切换功能

其余四个分别管理并调用四个界面

七、运行界面：

1.微信界面

 2.通讯录界面

 

3.发现界面

 

4.个人界面

 

代码仓库地址：查看代码点这里