ViewPager+Fragment的一般用法

ViewPager+Fragment的一般用法
当今主流App，导航栏最流行的样式，莫过于微信的样子了，想要做出这种效果，我推荐大家一种比较方便的做法。

看题目！没错，就是ViewPager

在这里小弟为广大新手们提供一下这个东西的写法，欢迎批评指正

程序员不多说话直接上代码

主界面的xml文件：

<LinearLayout 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"
android:background="@color/white"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".MainActivity">

<android.support.v4.view.ViewPager
    android:id="@+id/mainViewPager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">
</android.support.v4.view.ViewPager>
<ImageView
    android:layout_width="match_parent"
    android:layout_height="0.5dp"
    android:background="@color/gray" />

<RadioGroup
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:paddingTop="10dp"
    android:orientation="horizontal"
    android:background="@color/white"
    android:gravity="center">

    <RadioButton
        android:id="@+id/homeRadioButton"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:checked="true"
        android:button="@null"
        android:drawableTop="@drawable/selector_tab_btn_home"
        android:gravity="center"
        android:text="首页"
        android:textSize="@dimen/text_size_small"
        android:textColor="@color/selector_tab_text"/>

    <RadioButton
        android:id="@+id/customerRadioButton"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:button="@null"
        android:drawableTop="@drawable/selector_tab_btn_customer"
        android:gravity="center"
        android:text="客户管理"
        android:textSize="@dimen/text_size_small"
        android:textColor="@color/selector_tab_text"/>

    <RadioButton
        android:id="@+id/circleRadioButton"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:button="@null"
        android:drawableTop="@drawable/selector_tab_btn_circle"
        android:gravity="center"
        android:text="职业圈"
        android:textSize="@dimen/text_size_small"
        android:textColor="@color/selector_tab_text"
        />

    <RadioButton
        android:id="@+id/workbenchRadioButton"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:button="@null"
        android:drawableTop="@drawable/selector_tab_btn_workbench"
        android:gravity="center"
        android:text="工作台"
        android:textSize="@dimen/text_size_small"
        android:textColor="@color/selector_tab_text"
        />

    <RadioButton
        android:id="@+id/meRadioButton"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:button="@null"
        android:drawableTop="@drawable/selector_tab_btn_me"
        android:gravity="center"
        android:text="我"
        android:textSize="@dimen/text_size_small"
        android:textColor="@color/selector_tab_text"
        />
</RadioGroup>
</LinearLayout>

自己添加下资源文件图片就好了

各个Fragment很简单，就按最基本的方法创建就好了
我这里重点说下Activity的写法

public class MainActivity extends BaseFragmentActivity {
    private static int TAB_COUNT = 5;

    @InjectView(R.id.mainViewPager)
    private ViewPager mainViewPager;
    @InjectView(R.id.homeRadioButton)
    private RadioButton homeRadioButton;
    @InjectView(R.id.customerRadioButton)
    private RadioButton customerRadioButton;
    @InjectView(R.id.circleRadioButton)
    private RadioButton circleRadioButton;
    @InjectView(R.id.workbenchRadioButton)
    private RadioButton workbenchRadioButton;
    @InjectView(R.id.meRadioButton)
    private RadioButton meRadioButton;

    private HomeTab homeTab;
    private CustomerTab customerTab;
    private CircleTab circleTab;
    private WorkbenchTab workbenchTab;
    private MeTab meTab;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //按钮点击事件
        buttonClick();
        //初始化viewpager
        initViewPager();
    }

    /**
     * 初始化ViewPager设置
     */
    private void initViewPager() {
        final RadioButton[] tittles = {homeRadioButton, customerRadioButton, circleRadioButton, workbenchRadioButton, meRadioButton};
        //设置缓存页数
        mainViewPager.setOffscreenPageLimit(4);
        mainViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                //直接创建Fragment对象并返回
                switch (position) {
                    case 0:
                        if (homeTab == null) {
                            homeTab = new HomeTab();
                        }
                        return homeTab;
                    case 1:
                        if (customerTab == null) {
                            customerTab = new CustomerTab();
                        }
                        return customerTab;
                    case 2:
                        if (circleTab == null) {
                            circleTab = new CircleTab();
                        }
                        return circleTab;
                    case 3:
                        if (workbenchTab == null) {
                            workbenchTab = new WorkbenchTab();
                        }
                        return workbenchTab;
                    case 4:
                        if (meTab == null) {
                            meTab = new MeTab();
                        }
                        return meTab;
                }
                return null;
            }

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

        //监听ViewPager滑动事件
        mainViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //滑动页面时牵动tab按钮
                tittles[position].setChecked(true);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    private void buttonClick(){
        homeRadioButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //可通过添加参数控制是否平滑滚动
                mainViewPager.setCurrentItem(0);
            }
        });
        customerRadioButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mainViewPager.setCurrentItem(1);
            }
        });
        circleRadioButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mainViewPager.setCurrentItem(2);
            }
        });
        workbenchRadioButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mainViewPager.setCurrentItem(3);
            }
        });
        meRadioButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mainViewPager.setCurrentItem(4);
            }
        });
    }
}

其他fragment的页面只需要配置好对应的xml布局文件就行了，是不是很简单，希望能帮到需要的人，OK。欢迎大家指责批评。