ViewPager+Fragment实现滑动切换页面

1.实现思路

主界面四个导航按钮使用RadioButton，通过Selector 设置它的drawableTop属性来设置所显示的图片。通过 FragmentPagerAdapter 实现切换。

2.实现

（1）资源文件编写

主界面布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tiger.a20180115_wechat.MainActivity">

    <RadioGroup
        android:id="@+id/rg_menu_bar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:background="@color/myWhite"
        android:orientation="horizontal">
        <RadioButton
            android:id="@+id/rb_weChat"
            style="@style/menu_item"
            android:drawableTop="@drawable/menu_chat"
            android:text="WeChat"/>
        <RadioButton
            android:id="@+id/rb_contacts"
            style="@style/menu_item"
            android:drawableTop="@drawable/menu_contacts"
            android:text="Contacts"/>
        <RadioButton
            android:id="@+id/rb_discovery"
            style="@style/menu_item"
            android:drawableTop="@drawable/menu_discovery"
            android:text="Discovery"/>
        <RadioButton
            android:id="@+id/rb_me"
            style="@style/menu_item"
            android:drawableTop="@drawable/menu_me"
            android:text="Me"/>
    </RadioGroup>

    <View
        android:id="@+id/div_menu_bar"
        android:layout_width="match_parent"
        android:layout_height="3px"
        android:layout_above="@id/rg_menu_bar"
        android:background="@color/divColor"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/div_menu_bar"/>
</RelativeLayout>

（2）因为四个RadioButton 都一样所以抽出一个Style

<style name="menu_item">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_weight">1</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:background">@android:color/transparent</item>
    <item name="android:button">@null</item>
    <item name="android:gravity">center</item>
    <item name="android:paddingTop">3dp</item>
    <item name="android:textColor">@drawable/menu_text</item>
    <item name="android:textSize">18sp</item>
</style>

（3）文本颜色设置 Selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/txtGreen" android:state_checked="true" />
    <item android:color="@color/txtGray" />
</selector>

（4）还有就是四个资源文件 Selector ，就是选中和不选中显示的图片，贴出一个，其他三个类似

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/chat_press" android:state_checked="true" />
    <item android:drawable="@mipmap/chat_normal" />
</selector>

（5）接下来就是编写四个Fragment及对应布局

3.FragmentPagerAdapter

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyFragmentAdapter extends FragmentPagerAdapter{

    private FragmentWeChat fgWeChat;
    private FragmentContacts fgContacts;
    private FragmentDiscovery fgDiscovery;
    private FragmentMe fgMe;

    public MyFragmentAdapter(FragmentManager fm) {

        super(fm);
        fgWeChat=new FragmentWeChat();
        fgContacts=new FragmentContacts();
        fgDiscovery=new FragmentDiscovery();
        fgMe=new FragmentMe();
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment=null;

        switch (position){
            case 0:
                fragment=fgWeChat;
                break;
            case 1:
                fragment=fgContacts;
                break;
            case 2:
                fragment=fgDiscovery;
                break;
            case 3:
                fragment=fgMe;
                break;
        }

        return fragment;
    }

    @Override
    public int getCount() {
        return 4;
    }
}

4. MainActivity

import android.support.v4.view.ViewPager;

public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener
        , ViewPager.OnPageChangeListener {

    private RadioGroup radioGroup;
    private RadioButton rBtnChat;
    private RadioButton rBtnContacts;
    private RadioButton rBtnDiscovery;
    private RadioButton rBtnMe;
    private ViewPager viewPager;

    private MyFragmentAdapter fragementAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();
    }

    void init() {

        rBtnChat = (RadioButton) findViewById(R.id.rb_weChat);
        rBtnContacts = (RadioButton) findViewById(R.id.rb_contacts);
        rBtnDiscovery = (RadioButton) findViewById(R.id.rb_discovery);
        rBtnMe = (RadioButton) findViewById(R.id.rb_me);

        viewPager = (ViewPager) findViewById(R.id.viewPager);
        radioGroup = (RadioGroup) findViewById(R.id.rg_menu_bar);
        radioGroup.setOnCheckedChangeListener(this);

        fragementAdapter = new MyFragmentAdapter(getSupportFragmentManager());

        viewPager.setAdapter(fragementAdapter);
        viewPager.setCurrentItem(0);
        viewPager.setOnPageChangeListener(this);

        rBtnChat.setChecked(true); // set default choose
    }

    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {

        switch (checkedId) {
            case R.id.rb_weChat:
                viewPager.setCurrentItem(0);
                break;
            case R.id.rb_contacts:
                viewPager.setCurrentItem(1);
                break;
            case R.id.rb_discovery:
                viewPager.setCurrentItem(2);
                break;
            case R.id.rb_me:
                viewPager.setCurrentItem(3);
                break;
        }
    }

	//重写ViewPager页面切换的处理方法
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {
	//state的状态有三个，0表示什么都没做，1正在滑动，2滑动完成
        if (state == 2) {
         //对应值需要与 FragmentPagerAdapter 中的对应
            switch (viewPager.getCurrentItem()) {
                case 0:
                    rBtnChat.setChecked(true);
                    break;
                case 1:
                    rBtnContacts.setChecked(true);
                    break;
                case 2:
                    rBtnDiscovery.setChecked(true);
                    break;
                case 3:
                    rBtnMe.setChecked(true);
                    break;
            }
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.menu,menu);
        return true;
    }
}

主要代码就是以上这些。

参考自：http://www.runoob.com/w3cnote/android-tutorial-fragment-demo4.html