Fragment+ViewPager 實現仿微信

一、效果圖

    

二、代碼

佈局文件

       

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <!-- 底部四個導航按鈕 -->
    <LinearLayout
        android:id="@+id/ll_tabs"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        >
        <LinearLayout
            android:id="@+id/lin_one"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_gravity="center_horizontal"
            android:background="#ffffff"
            >
            <ImageView
                android:layout_width="50dp"
                android:src="@drawable/bird"
                android:layout_gravity="center_horizontal"
                android:layout_height="50dp" />
            <TextView
                android:id="@+id/tv_weixin"
                android:layout_width="match_parent"
                android:text="微信"
                android:gravity="center_horizontal"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/lin_two"
            android:layout_width="0dp"
            android:orientation="vertical"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#ffffff"
            >
            <ImageView
                android:layout_width="50dp"
                android:src="@drawable/cat"
                android:layout_gravity="center_horizontal"
                android:layout_height="50dp" />
            <TextView
                android:id="@+id/tv_contact"
                android:layout_width="match_parent"
                android:text="好友"
                android:gravity="center_horizontal"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/lin_three"
            android:layout_width="0dp"
            android:orientation="vertical"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#ffffff"
            >

            <ImageView
                android:layout_width="50dp"
                android:src="@drawable/chicken"
                android:layout_gravity="center_horizontal"
                android:layout_height="50dp" />
            <TextView
                android:id="@+id/tv_find"
                android:layout_width="match_parent"
                android:text="發現"
                android:gravity="center_horizontal"
                android:layout_height="wrap_content" />

        </LinearLayout>
        <LinearLayout
            android:id="@+id/lin_four"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:background="#ffffff"
            >
            <ImageView
                android:layout_width="50dp"
                android:src="@drawable/cow"
                android:layout_gravity="center_horizontal"
                android:layout_height="50dp" />
            <TextView
                android:id="@+id/tv_my"
                android:layout_width="match_parent"
                android:text="我的"
                android:gravity="center_horizontal"
                android:layout_height="wrap_content" />
        </LinearLayout>

    </LinearLayout>

    <!-- 導航和視圖的分割線 -->
    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="#0eefff"
        android:layout_above="@id/ll_tabs"
        />


    <!-- VIewPager 主要是加載內容的 -->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_above="@id/ll_tabs"
        android:layout_marginBottom="2dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

    三、java代碼

   

package com.example.g160628_11_02;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends FragmentActivity implements OnClickListener{
    /**
     * 四個導航
     */
    private LinearLayout lintonOne;
    private LinearLayout lintonTwo;
    private LinearLayout lintonThree;
    private  LinearLayout lintonFour;
    /**
     * 作爲頁面容器的ViewPager
     */
    private ViewPager mViewPager;
    /**
     * 頁面集合
     */
    private List<Fragment> fragmentList;
    /**
     * 四個Fragment（頁面）
     */
    private WeiXinFragment oneFragment;
    private ContactsFragment twoFragment;
    private FindFragment threeFragment;
    private MyFragment fourFragment;
    //當前選中的項
    private int currenttab;
    private TextView tvweixin;
    private TextView tvcontact;
    private TextView tvfind;
    private TextView tvmy;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        lintonOne= (LinearLayout) findViewById(R.id.lin_one);
        lintonTwo=(LinearLayout) findViewById(R.id.lin_two);
        lintonThree=(LinearLayout) findViewById(R.id.lin_three);
        lintonFour=(LinearLayout) findViewById(R.id.lin_four);

        tvweixin = (TextView) findViewById(R.id.tv_weixin);
        tvcontact = (TextView) findViewById(R.id.tv_contact);
        tvfind = (TextView) findViewById(R.id.tv_find);
        tvmy = (TextView) findViewById(R.id.tv_my);

        lintonOne.setOnClickListener(this);
        lintonTwo.setOnClickListener(this);
        lintonThree.setOnClickListener(this);
        lintonFour.setOnClickListener(this);

        mViewPager=(ViewPager) findViewById(R.id.viewpager);

        fragmentList=new ArrayList<Fragment>();
        oneFragment=new WeiXinFragment();
        twoFragment=new ContactsFragment();
        threeFragment=new FindFragment();
        fourFragment=new MyFragment();

        fragmentList.add(oneFragment);
        fragmentList.add(twoFragment);
        fragmentList.add(threeFragment);
        fragmentList.add(fourFragment);

        mViewPager.setAdapter(new MyFrageStatePagerAdapter(getSupportFragmentManager()));

        tvweixin.setTextColor(Color.RED);
    }


    /**
     * 定義自己的ViewPager適配器。
     * 也可以使用FragmentPagerAdapter。關於這兩者之間的區別，可以自己去搜一下。
     */
    class MyFrageStatePagerAdapter extends FragmentStatePagerAdapter {

        public MyFrageStatePagerAdapter(FragmentManager fm) {
            super(fm);
        }
        @Override
        public Fragment getItem(int position) {
            return fragmentList.get(position);
        }
        @Override
        public int getCount() {
            return fragmentList.size();
        }
        /**
         * 每次更新完成ViewPager的內容後，調用該接口，此處複寫主要是爲了讓導航按鈕上層的覆蓋層能夠動態的移動
         */
        @Override
        public void finishUpdate(ViewGroup container) {
            super.finishUpdate(container);//這句話要放在最前面，否則會報錯
            //獲取當前的視圖是位於ViewGroup的第幾個位置，用來更新對應的覆蓋層所在的位置
           // mViewPager.getCurrentItem();   獲取當前第幾頁
/*            int currentItem=mViewPager.getCurrentItem();
            if (currentItem==currenttab) {
                return ;
            }*/
            //    imageMove(mViewPager.getCurrentItem());
            currenttab=mViewPager.getCurrentItem();
            if (currenttab==0){
                tvweixin.setTextColor(Color.RED);
            }else{
                tvweixin.setTextColor(Color.BLACK);
            }
            if (currenttab==1){
                tvcontact.setTextColor(Color.RED);
            }else{
                tvcontact.setTextColor(Color.BLACK);
            }
            if (currenttab==2){
                tvfind.setTextColor(Color.RED);
            }else{
                tvfind.setTextColor(Color.BLACK);
            }
            if (currenttab==3){
                tvmy.setTextColor(Color.RED);
            }else{
                tvmy.setTextColor(Color.BLACK);
            }
        }
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.lin_one:
                changeView(0);
                break;
            case R.id.lin_two:
                changeView(1);
                break;
            case R.id.lin_three:
                changeView(2);
                break;
            case R.id.lin_four:
                changeView(3);
                break;
            default:
                break;
        }
    }
    //手動設置ViewPager要顯示的視圖
    private void changeView(int desTab) {
        mViewPager.setCurrentItem(desTab, true);
    }
}

四、碎片佈局文件（放一個，其他三個一樣）

    

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="這是微信界面(聊天曆史)"
        android:background="#66ff0000"
        />
</LinearLayout>

五、碎片對應Java

package com.example.g160628_11_02;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by Administrator on 2017/6/15 0015.
 */

public class WeiXinFragment extends Fragment{
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_weixin,null);
    }
}