界面设计

（1）创建新项目之后在其中创建.xml文件，分别为top和bottom两个文件，然后在其中插入插件，修改其属性。 top控件示例如下：

<?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:layout_weight="1"
        android:text="WeChat"
        android:textColor="#ffffff"
        android:textSize="40sp" />
</LinearLayout>

bottom控件示例如下：

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="100dp"
    android:layout_weight="1"
    android:background="@color/black"
    android:orientation="vertical">

    <ImageButton
        android:id="@+id/id_tab_WeChat_img"
        android:layout_width="match_parent"
        android:layout_height="63dp"
        android:background="#000000"
        android:clickable="false"
        app:srcCompat="@android:drawable/ic_dialog_email" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_horizontal"
        android:saveEnabled="false"
        android:text="微信"
        android:textColor="#ffffff"
        android:textSize="20sp" />
</LinearLayout>

最后top和bottom结果分别如下：

（2）合并top与bottom 在layout中的activity_main.xml文件中插入一个framelayout控件，编辑代码

<?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="match_parent"
        android:layout_weight="1">

    </FrameLayout>

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

可以得到界面如下：

监听控制

在layout中创建四个xml文件，tab01,tab02,tab03,tab04，每个文件里添加一个textview，内容为“这里是微信/朋友/通讯录/设置界面”。然后在java文件夹中创建四个Fragment文件，WeChatBlankFragment、FrdBlankFragment、ContactBlankFragment、SettingsBlankFragment。然后在MainActivity文件中写出函数，最后运行结果如下图：