您现在的位置是：首页 > 文章详情

1-VVI-材料设计之-TabLayout上标签

日期：2018-08-28点击：433收藏

[1].既然ViewPager和Fragment都总结完了，那就插一个材料设计中的TabLayout控件吧,这三者关系挺好
[2].TabLayout在上面就是曾经的ViewPager指示器,想当年都是自己封装来用，现在条件好了，安卓给了。
[3].引入包：implementation 'com.android.support:design:26.1.0'
[4].在此之前，你应该知道ViewPager和Fragment的组合使用,如果不清楚，可以看一下：Fragment与ViewPager结合

TableLayout.gif

1.Activity的布局

 <android.support.design.widget.TabLayout android:id="@+id/tl_tab" android:layout_width="match_parent" android:layout_height="@dimen/dp_48" android:background="@color/colorPrimary"> </android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:id="@+id/vp_content" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager>

2.Fragment：使用了我的封装类,详情可见：Fragment简单封装

public class V01_ContentV4Fragment extends BaseV4Fragment { /** * * @param str Activity向Fragment的数据 * @return ViewPagerFragment对象 */ public static V01_ContentV4Fragment newInstance(String str) { Bundle arguments = new Bundle(); arguments.putString("name_data", str); V01_ContentV4Fragment instance = new V01_ContentV4Fragment(); instance.setArguments(arguments); return instance; } @Override protected void render(View rootView) { String name = getArguments().getString("name_data"); setTextView(R.id.tv_content, name); } @Override protected int setLayoutId() { return R.layout.fg_v01_tab_content; } }

3.Activity

public class V01_TopActivity extends AppCompatActivity { private TabLayout mTabTl; private ViewPager mContentVp; private List<String> tabDatas; private List<Fragment> tabFragments; private FragmentPagerAdapter contentAdapter; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.a01_top); mTabTl = findViewById(R.id.tl_tab); mContentVp = findViewById(R.id.vp_content); initFragment(); initTab(); } private void initTab() { //MODE_FIXED:均匀分布,排不下挤一挤 //MODE_SCROLLABLE:可以滑动,从左向右排 mTabTl.setTabMode(TabLayout.MODE_SCROLLABLE); mTabTl.setBackgroundColor(Color.GRAY); //设置颜色：(未选中的,选中的) mTabTl.setTabTextColors(Color.BLACK, Color.WHITE); //设置指示器的颜色 mTabTl.setSelectedTabIndicatorColor(Color.BLUE); //设置底线高 mTabTl.setSelectedTabIndicatorHeight(5); //设置阴影 ViewCompat.setElevation(mTabTl, 10); //TabLayout设置mContentVp mTabTl.setupWithViewPager(mContentVp); } private void initFragment() { //随机产生4个名字 tabDatas = DataUtils.getRandomName(4, true); //承载Fragment的集合 tabFragments = new ArrayList<>(); for (String name : tabDatas) { tabFragments.add(V01_ContentV4Fragment.newInstance(name)); } //创建适配器对象 contentAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int position) { return tabFragments.get(position); } @Override public int getCount() { return tabDatas.size(); } @Override public CharSequence getPageTitle(int position) { return tabDatas.get(position); } }; //为ViewPager设置适配器 mContentVp.setAdapter(contentAdapter); } //菜单栏点击 @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_tab_layout, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.tab_add: //创建随机名字 String addName = ZRandom.randomCnName(); //标签集合增加 tabDatas.add(addName); //Fragment集合增加 tabFragments.add(V01_ContentV4Fragment.newInstance(addName)); //刷新， contentAdapter.notifyDataSetChanged(); mTabTl.setupWithViewPager(mContentVp); return true; case R.id.tab_mode_fixed: mTabTl.setTabMode(TabLayout.MODE_FIXED); return true; case R.id.tab_mode_scrollable: mTabTl.setTabMode(TabLayout.MODE_SCROLLABLE); break; } return super.onOptionsItemSelected(item); } }