這個專案是我自己學習時寫出來的，所以難免有些瑕疵或者種種不足，歡迎各位大佬挑刺，也歡迎其他菜鳥們一起學習。

先放張程式結構圖，大致結構還是比較清晰的

1. 首先可以建好xml佈局檔案，一個主佈局（存放四個切換圖示），四個分佈局fragment 程式碼貼上： `

<android.support.v4.view.ViewPager
    android:id="@+id/vp"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

</android.support.v4.view.ViewPager>
<TextView
    android:layout_width="match_parent"
    android:layout_height="1px"
    
    //這個FenGex是我寫的顏色資原始檔
    
    android:background="@color/FenGex"
    android:layout_marginBottom="5dp"/>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="horizontal">
    
    //第一個微信元件
    
    <LinearLayout
        android:id="@+id/wc"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        
        //這個1，設定權重，讓他們四個linearlayout自行分配空間大小
        
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/im_wc"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/wc"/>
        <TextView
            android:id="@+id/tv_wc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"/>
    </LinearLayout>
    
    //第二個，通訊錄
    
    <LinearLayout
        android:id="@+id/txl"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/im_txl"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/txl"/>
        <TextView
            android:id="@+id/tv_txl"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="通訊錄"/>
    </LinearLayout>
    
    //第三個，發現
    
    <LinearLayout
        android:id="@+id/fx"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/im_fx"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/fx"/>
        <TextView
            android:id="@+id/tv_fx"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="發現"/>
    </LinearLayout>
    //第四個，我
    
    <LinearLayout
        android:id="@+id/my"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/im_my"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/my"/>
        <TextView
            android:id="@+id/tv_my"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我"/>
    </LinearLayout>
</LinearLayout>
 

`

1. 2.四個fragment 如果只是單純學習fragment用法，這個可以先不寫 微信這個fragment中我用了listview佈局，所以需要兩個佈局檔案，一個主頁面frag_wc,一個控制元件頁面wc_item（檔案中有我自己寫的一部分顏色，字型資原始檔） 這裡我只貼一個，後面的四個大致也是這樣。 程式碼：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
   <ListView
       android:id="@+id/wc_lv"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:dividerHeight="1px"
       android:divider="@drawable/layerlist">
   </ListView>

</LinearLayout>

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:padding="10dp">

        <ImageView
            android:id="@+id/wc_tx"
            android:layout_width="40dp"
            android:layout_height="40dp" />

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp">
            <TextView
                android:id="@+id/wc_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/wc_name"
                android:textSize="@dimen/wc_name"/>
            <TextView
                android:id="@+id/wc_content"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/wc_content"
                android:textSize="@dimen/wc_content"/>
        </LinearLayout>
        <TextView
            android:id="@+id/wc_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="@dimen/wc_time"
            android:textColor="@color/wc_time"
            />

</LinearLayout>
 

今天先寫到這，下次再寫。