Android studio制作类微信界面步骤

一、头尾布局

1.在/res/layout文件夹下新建top和bottom两个xml文件，用来进行类微信界面的头尾设置

2.在/res/layout文件夹下，新建四个button对应界面的xml文件，复制粘贴四个所需的图标，并调整水平平铺布局

3.top.xml文件就是普通的TextView文件，居中放置，自定义字体颜色和背景颜色

 

二、主界面布局

1.在activity_main里，首先在最外面设置垂直，配置orientation。然后将头部和button放入，用include导入top和button，然后中间放入一个FrameLayout

三、Java布局

本次实验中，需要控制的是在底部点击后，中间的fragment能够相应的进行轮转

四、界面显示

 

补充：

app最上面有一个框，我们不需要显示他，那么就打开/res/values文件夹下的style.xml文件，将style标签里的parent的配置信息改为Theme.AppCompat.Light.NoActionBar就行了 （转载于Android studio制作简单微信界面_Freak的博客-CSDN博客_android studio制作微信界面）

由于git仓库连接github和码云遇到点问题，本次无代码仓库链接，代码直接在博客中展示

参考代码如下：

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="WeChat"
        android:textColor="#ffffff"
        android:textSize="20sp" />
</LinearLayout>

bottom.xml

<?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:layout_height="100dp"
    android:background="@drawable/bottom_bar"
    android:orientation="horizontal"
    android:baselineAligned="false">

    <LinearLayout
        android:id="@+id/id_tab_weixin"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_weixin_img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            android:background="#000000"
            app:srcCompat="@drawable/tab_weixin_pressed" />