【Android 基礎】ViewPager&TabLayout使用簡例

前言：

應用viewpager的時候，一般會使用TabPageIndicator來與其配合，達到很漂亮的效果。但是TabPageIndicator是第三方的，而且比較老了，當然了現在很多大神都已經開始自己寫TabPageIndicator來滿足自己的需求，在2015年的google大會上，google釋出了新的Android Support Design庫，裡面包含了幾個新的控件，其中就有一個TabLayout，它就可以完成TabPageIndicator的效果，而且還是官方的，最好的是它可以相容到2.2以上版本，包括2.2。

現在一般都是 android studio進行開發的，是以引用TabLayout很簡單，隻要在build.gradle中加入

compile ‘com.android.support:design:23.3.0’即可。

demo示範：

直接上代碼：

直接看代碼應該更好了解,說多反而亂。

布局檔案：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <include layout="@layout/titlebar"/>
    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_red_dark"
        app:tabIndicatorColor="@android:color/background_dark"
        app:tabSelectedTextColor="@android:color/background_dark"
        app:tabTextColor="@android:color/white" />


    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>
           

MyFragment.java

public class MyFragment extends Fragment {

    /**
     * 标題
     */
    private final String title;
    /**
     * 内容
     */
    private final String content;
    Context mContext;
    TextView textView;

    /**
     * 得到内容
     * @return
     */
    public String getContent() {
        return content;
    }

    /**
     * 得到标題
     * @return
     */
    public String getTitle() {
        return title;
    }

    public MyFragment(String title, String content){
        super();
        this.title = title;
        this.content = content;
    }


    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //上下文
        mContext = getActivity();
    }

    /**
     * 建立視圖
     * @param inflater
     * @param container
     * @param savedInstanceState
     * @return
     */
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        //建立視圖
        textView = new TextView(mContext);
        textView.setTextColor(Color.RED);
        textView.setTextSize();
        textView.setGravity(Gravity.CENTER);
        return textView;
    }

    /**
     * 綁定資料
     * @param savedInstanceState
     */
    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        //設定内容
        textView.setText(content);
    }
}
           

ViewPagerAdapter.java

public class ViewPagerAdapter extends FragmentPagerAdapter {
    private final ArrayList<MyFragment> fragments;

    public ViewPagerAdapter(FragmentManager fm, ArrayList<MyFragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }

    /**
     * 根據位置傳回對應的Fragment
     * @param position
     * @return
     */
    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }

    /**
     * 得到頁面的标題
     * @param position
     * @return
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return fragments.get(position).getTitle();
    }
}
           

TabLayoutMainActivity .java

public class TabLayoutMainActivity extends AppCompatActivity {

    ViewPager viewPager;
    TextView tv_title;
    TabLayout tabLayout;

    ArrayList<MyFragment> fragments;

    ViewPagerAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout_main);
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        tv_title = (TextView) findViewById(R.id.tv_title);

        tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        tv_title.setText("TabLayout的使用");

        //初始化資料
        fragments = new ArrayList<>();
        for (int i=;i<;i++){
            fragments.add(new MyFragment("标題"+i,"内容"+i));
        }
        //設定ViewPager的擴充卡
        adapter = new ViewPagerAdapter(getSupportFragmentManager(),fragments);
        viewPager.setAdapter(adapter);
        //關聯ViewPager
        tabLayout.setupWithViewPager(viewPager);
        //設定固定的
        //tabLayout.setTabMode(TabLayout.MODE_FIXED);
//設定滑動的。
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
    }
}
           

以上權當學習案例歸納，友善以後回顧以及代碼重用。