Android架構之TableLayout的使用

1.簡介

          我們在應用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'即可。

2.引用庫

compile 'com.android.support:design:24.2.1'      

布局      

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    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_blue_bright"
        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      

/**
 * 項目名：Software_Framework
 * 包名：com.chengdong.software_framework.TableLayout.Fragmnet
 * 檔案名：MyFragment
 * 建立者：周成東
 * 建立時間:2017/9/15 22:46
 * 描述：ToDo
 */

public class MyFragment extends Fragment {
 private String title;

    public String getTitle() {
        return title;
    }

    public String getContent() {
        return content;
    }

    private String content;
    private TextView textView;

    private Context context;

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

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.context = getActivity();
    }

    /**
     * 綁定數據
     *
     * @param savedInstanceState
     */
    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        textView.setText(content);
        super.onActivityCreated(savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        textView = new TextView(context);
        textView.setTextSize(18);
        textView.setTextColor(Color.RED);
        textView.setGravity(Gravity.CENTER);
        return textView;
    }
}
      

設定viewpager擴充卡      

public class TalbeLayoutAdapter extends FragmentPagerAdapter {
    private final ArrayList<MyFragment> mFragments;

    public TalbeLayoutAdapter(FragmentManager fm, ArrayList<MyFragment> myFragments) {
        super(fm);
        this.mFragments=myFragments;
    }

    @Override
    public Fragment getItem(int position) {

        return mFragments.get(position);

    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragments.get(position).getTitle();
    }
}
      

設定TableLayoutActivity       

public class TableLayoutActivity extends FragmentActivity {
    @Bind(R.id.tv_title)
    TextView tvTitle;
    @Bind(R.id.tabLayout)
    TabLayout tabLayout;
    @Bind(R.id.viewPager)
    ViewPager viewPager;
    private ArrayList<MyFragment> myFragments;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout_main);
        ButterKnife.bind(this);
        tvTitle.setText("TableLayout的使用");
        myFragments = new ArrayList<>();

        for(int i=0;i<12;i++){
            myFragments.add(new MyFragment("标題"+i,"内容"+i));
        }
        TalbeLayoutAdapter adapter=new TalbeLayoutAdapter(getSupportFragmentManager(),myFragments);
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
    }
}