【微信】运用fragment和viewpage实现主页面和副页面切换效果

这个项目是我自己学习时写出来的，所以难免有些瑕疵或者种种不足，欢迎各位大佬挑刺，也欢迎其他菜鸟们一起学习。

先放张程序结构图，大致结构还是比较清晰的

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>

今天先写到这，下次再写。