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。歡迎大家指責批評。