ViewPager+FragmentPagerAdapter实现Tab/模仿微信界面（推荐使用）

转载请注明出处：ViewPager+FragmentPagerAdapter实现Tab/模仿微信界面（推荐使用）_Mr_Leixiansheng的博客-CSDN博客

推荐关联文章：ViewPager实现Tab/模仿微信界面

推荐关联文章： Fragment实现Tab/模仿微信界面

步骤：

1、新建4个继承Fragment的类和4个布局，分别将布局添加到新建的类中 

2、初始化时将4个Fragment存入到List集合（作为适配器资源）

3、设置适配器FragmentPagerAdapter

4、添加适配器

5、设置按键监听、滑动监听

代码如下：

1、设置好4个Fragment碎片（4个相似，只贴出一个碎片步骤）

<?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"
    android:gravity="center">

    <TextView
        android:text="第一页"
        android:textSize="50dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

package com.example.leixiansheng.weixin3.fragment;


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;

import com.example.leixiansheng.weixin3.R;

/**
 * Created by Leixiansheng on 2017/3/30.
 */

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

2、主界面

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.leixiansheng.weixin3.MainActivity">

    <include layout="@layout/top"/>

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

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

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="#000000">

        <LinearLayout
            android:gravity="center"
            android:layout_margin="5dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/icon"
                android:src="@drawable/actionbar_icon"
                android:layout_width="40dp"
                android:layout_height="40dp" />
            <TextView
                android:id="@+id/title"
                android:text="微信"
                android:textSize="20dp"
                android:textColor="#ffffff"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>

        <LinearLayout
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <ImageView
                android:src="@drawable/actionbar_search_icon"
                android:layout_width="40dp"
                android:layout_height="40dp" />
            <ImageView
                android:src="@drawable/actionbar_add_icon"
                android:layout_width="40dp"
                android:layout_height="40dp" />
            <ImageView
                android:src="@drawable/actionbar_more_icon"
                android:layout_width="40dp"
                android:layout_height="40dp" />

        </LinearLayout>


</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="50dp"
    android:gravity="center"
    android:background="#000000">

    <LinearLayout
        android:id="@+id/mes"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/mes_imag"
            android:src="@drawable/tab_weixin_pressed"
            android:layout_width="30dp"
            android:layout_height="30dp" />
        <TextView
            android:textColor="#ffffffff"
            android:text="消息"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/friend"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/friend_imag"
            android:src="@drawable/tab_find_frd_normal"
            android:layout_width="30dp"
            android:layout_height="30dp" />
        <TextView
            android:textColor="#ffffffff"
            android:text="朋友"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/address"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/address_imag"
            android:src="@drawable/tab_address_normal"
            android:layout_width="30dp"
            android:layout_height="30dp" />
        <TextView
            android:text="联系人"
            android:textColor="#ffffffff"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/setting"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/setting_imag"
            android:src="@drawable/tab_settings_normal"
            android:layout_width="30dp"
            android:layout_height="30dp" />
        <TextView
            android:text="设置"
            android:textColor="#ffffffff"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>

3、主程序实现功能（初始化、监听、适配）

package com.example.leixiansheng.weixin3;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.example.leixiansheng.weixin3.fragment.AddressFragment;
import com.example.leixiansheng.weixin3.fragment.FriendFragment;
import com.example.leixiansheng.weixin3.fragment.MesFragment;
import com.example.leixiansheng.weixin3.fragment.SettingFragment;

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


/**
 * ViewPager + FragmentPagerAdapter 实现 Tab  （最好使用这个，不要单独使用ViewPager）
 */

public class MainActivity extends FragmentActivity implements View.OnClickListener {

    private LinearLayout mes;
    private LinearLayout friend;
    private LinearLayout address;
    private LinearLayout setting;

    private ImageView mesImag;
    private ImageView friendImag;
    private ImageView addressImag;
    private ImageView settingImag;

    private MesFragment mesFragment;
    private FriendFragment friendFragment;
    private AddressFragment addressFragment;
    private SettingFragment settingFragment;

    private ViewPager viewPager;
    private FragmentPagerAdapter adapter;
    private List<Fragment> fragmentList;


    @Override

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        init();
        initClick();
        //默认选中第1个
        setSelect(0);
    }

    //初始化元素
    private void init() {

        mes = (LinearLayout) findViewById(R.id.mes);
        friend = (LinearLayout) findViewById(R.id.friend);
        address = (LinearLayout) findViewById(R.id.address);
        setting = (LinearLayout) findViewById(R.id.setting);

        mesImag = (ImageView) findViewById(R.id.mes_imag);
        friendImag = (ImageView) findViewById(R.id.friend_imag);
        addressImag = (ImageView) findViewById(R.id.address_imag);
        settingImag = (ImageView) findViewById(R.id.setting_imag);

        viewPager = (ViewPager) findViewById(R.id.view_pager);

        fragmentList = new ArrayList<>();
        mesFragment = new MesFragment();
        friendFragment = new FriendFragment();
        addressFragment = new AddressFragment();
        settingFragment = new SettingFragment();

        fragmentList.add(mesFragment);
        fragmentList.add(friendFragment);
        fragmentList.add(addressFragment);
        fragmentList.add(settingFragment);

        //设置适配器
        adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return fragmentList.get(position);
            }

            @Override
            public int getCount() {
                return fragmentList.size();
            }
        };
        viewPager.setAdapter(adapter);
    }

    //初始化监听
    private void initClick() {
        mes.setOnClickListener(this);
        friend.setOnClickListener(this);
        address.setOnClickListener(this);
        setting.setOnClickListener(this);

        //滑动监听
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                int currentItem = viewPager.getCurrentItem();
                switch (currentItem) {
                    case 0:
                        setSelect(0);
                        break;
                    case 1:
                        setSelect(1);
                        break;
                    case 2:
                        setSelect(2);
                        break;
                    case 3:
                        setSelect(3);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    /**
     *  取消动画效果，消除跨页动画（比如0到3会经过1，2页面） viewPager.setCurrentItem(index,false);
     *  具备动画效果  viewPager.setCurrentItem(index);
     * @param view
     */

    @Override
    public void onClick(View view) {
        resetImages();
        switch (view.getId()) {
            case R.id.mes:
                viewPager.setCurrentItem(0,false);
                setSelect(0);
                break;
            case R.id.friend:
                viewPager.setCurrentItem(1,false);
                setSelect(1);
                break;
            case R.id.address:
                viewPager.setCurrentItem(2,false);
                setSelect(2);
                break;
            case R.id.setting:
                viewPager.setCurrentItem(3,false);
                setSelect(3);
                break;
        }

    }

    //全部图片设为暗色
    private void resetImages() {
        mesImag.setImageResource(R.drawable.tab_weixin_normal);
        friendImag.setImageResource(R.drawable.tab_find_frd_normal);
        addressImag.setImageResource(R.drawable.tab_address_normal);
        settingImag.setImageResource(R.drawable.tab_settings_normal);
    }

    //点亮选中图片
    private void setSelect(int i) {
        resetImages();
        switch (i) {
            case 0:
                mesImag.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                friendImag.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                addressImag.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                settingImag.setImageResource(R.drawable.tab_settings_pressed);
                break;
        }
    }

}