实验一：类微信界面设计

要求：根据课堂展示结果设计APP门户界面，包含四个Tab切换效果。

最实验结果：

要点难点：切换四个Tab
实验思路：首先构思布局整个页面，实现视图层，再考虑实现逻辑层。
实验步骤：

1 将整个页面划分为三个部分：顶部top，底部bottom、中间content

首先是布局，将页面划分为三个部分。
划分思路：
根据想要达到的切换效果，显然顶部是静态的，只需要布局就可以实现了。底部和中间有一层逻辑，也就是底部点击相应的按钮，就要切换成相应的界面。那么中间content部分就得达到一个切换页面的效果，而且里面得有四个xml对应相关的页面，所以可以考虑使用FragmentTransaction这个类。而底部按钮则需要达到点击一个切换为点亮图片，而其他图片变灰，并且切换到相应的页面，这里显然得监听四个按钮，然后对监听的四个按钮绑定触发事件。

2 完成页面布局

2.1 顶部页面效果

<?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:background="#000000"
    android:gravity="center"
    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="@string/app_name"
        android:textColor="#ffffff"
        android:textSize="20sp" />
</LinearLayout>

2.2 底部页面效果

<?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:baselineAligned="false"
    android:orientation="horizontal">

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

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

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="微信"
            android:textColor="#ffffff"
            android:textSize="15sp" />
    </LinearLayout>

    <LinearLayout
        android:id