TabLayout 解析

2019-11-10 18:14:40

字體：大中小

來源：轉載

供稿：網友

1. 簡介

我們在應用viewpager的時候，經常會使用TabPageIndicator來與其配合，達到很漂亮的效果。

但是TabPageIndicator是第三方的，而且比較老了，當然了現在很多大神都已經開始自己寫TabPageIndicator來滿足自己的需求

在2015年的google大會上，google發布了新的Android Support Design庫，里面包含了幾個新的控件，其中就有一個TabLayout，它就可以完成TabPageIndicator的效果，而且還是官方的，最好的是它可以兼容到2.2以上版本，包括2.2

這里寫圖片描述

2. 使用指南與Demo

2.1 添加依賴

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

2.2 xml

2.3 定義和創建Fragment

public class MyTabFragment extends Fragment { //標題 PRivate final String title; //內容 private final String content; /** * 得到內容 * @return */ public String getContent() { return content; } /** * 得到標題 * @return */ public String getTitle() { return title; } Context mContext; TextView textView; public MyTabFragment(String title, String content){ super(); this.title = title; this.content = content; } @Override public void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); //上下文 mContext = getContext(); } /** * 創建視圖 * @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(25); textView.setGravity(Gravity.CENTER); return textView; } /** * 綁定數據，傳過來的數據，在構造方法中 * @param savedInstanceState */ @Override public void onActivityCreated(@Nullable Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); //設置內容 textView.setText(content); }}

2.4 設置 ViewPager 適配器

public class ViewPagerAdapter extends FragmentPagerAdapter { private final ArrayList<MyTabFragment> fragments; public ViewPagerAdapter(FragmentManager fm, ArrayList<MyTabFragment> 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(); }}

2.5 設置 TabLayout

//布局設置<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/holo_red_dark" app:tabSelectedTextColor="@android:color/holo_red_dark" app:tabTextColor="@android:color/white" />//代碼//設置TabLayouttabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);tabLayout.setupWithViewPager(viewpager);//public class TabLayoutMainActivity extends AppCompatActivity { ViewPager viewPager; TextView tv_title; TabLayout tabLayout; ArrayList<MyTabFragment> fragments; @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=0;i<12;i++){ fragments.add(new MyTabFragment("標題 "+i,"內容 "+i)); } viewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager(),fragments)); //關聯ViewPager tabLayout.setupWithViewPager(viewPager); //設置固定的// tabLayout.setTabMode(TabLayout.MODE_FIXED); tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); }}