2-5 TabLayout控件
通过选项卡的方式切换View并不是MD中才有的新概念,它们和顶层导航模式或者组织app中不同分组内容(比如,不同风格的音乐)是同一个概念。 Design library的TabLayout 既实现了固定的选项卡(View的宽度平均分配),也实现了可滚动的选项卡(View宽度不固定同时可以横向滚动)。如果你使用ViewPager在 tab之间横向切换,你可以直接从PagerAdapter的getPageTitle() 中创建选项卡,然后使用setupWithViewPager()将两者联系在一起。它可以使tab的选中事件能更新ViewPager,同时 ViewPager
的页面改变能更新tab的选中状态。
注意项:
如果你使用ViewPager在tab之间横向切换,切记可以直接从PagerAdapter的getPageTitle() 中创建选项卡,然后使用setupWithViewPager()将两者联系在一起。
实例代码:
页面:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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" tools:context="bw.com.bw_day13.demo04.TabLayoutActivity"> <!-- app:tabIndicatorColor="@color/colorAccent" 选中的颜色 app:tabIndicatorHeight="4dp" 选中的高度 app:tabSelectedTextColor="@color/colorAccent" 选中的文字颜色 app:tabTextColor="#000000" 默认的文字颜色 --> <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="80dp" android:id="@+id/tab_layout_id" android:background="#00ffff" app:tabIndicatorColor="@color/colorAccent" app:tabIndicatorHeight="4dp" app:tabSelectedTextColor="@color/colorAccent" app:tabTextColor="#000000" /> <android.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/tab_layout_id" android:id="@+id/view_pager_id"/> </RelativeLayout>
<FrameLayout 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" tools:context="bw.com.bw_day13.demo04.MyFragment"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="@string/hello_blank_fragment" /> </FrameLayout>
代码:
public class TabLayoutActivity extends AppCompatActivity { private TabLayout mTab; private ViewPager mVp; private List<Fragment> data; private MyAdapter adapter; private List<String> titles = new ArrayList<>();//一系列标题 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tab_layout); initView(); data = new ArrayList<>(); for(int i=0;i<8;i++) { MyFragment fragment = new MyFragment(); data.add(fragment); titles.add("第" +(i+1)+"项"); } adapter = new MyAdapter(getSupportFragmentManager(),data); mVp.setAdapter(adapter); //TabLayout和ViewPager 的结合 //1, 联系在一起 mTab.setupWithViewPager(mVp); //2, 设置TabLayout的互动模式 mTab.setTabMode(TabLayout.MODE_SCROLLABLE); //3, 在适配器中, 增加方法getPagerTitle(), 设置标题 } private void initView() { mTab = (TabLayout) findViewById(R.id.tab_layout_id); mVp = (ViewPager) findViewById(R.id.view_pager_id); } class MyAdapter extends FragmentPagerAdapter { private List<Fragment> data; public MyAdapter(FragmentManager fm,List<Fragment> data) { super(fm); this.data = data; } @Override public Fragment getItem(int position) { return data.get(position); } @Override public int getCount() { return data.size(); } @Override public CharSequence getPageTitle(int position) { return titles.get(position); } } }
Fragment:
public class MyFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_my, container, false); } }