首页 > 学院 > 开发设计 > 正文

TabLayout简单使用

2019-11-09 15:35:39
字体:
来源:转载
供稿:网友

平常在看Android书的时候,觉得这个知识点我已经掌握不需要记录,或者在看别人写的blog的时候,发现他所讲的知识我已经有了一个印象,下次要用到这个知识的时候,我只有找到这篇blog就可以了,但是往往,这些基础的部分,因为内容多且杂,很长时间不用就会忘记,blog上的知识点也是,往往就是这篇blog找不到。so,我还是把在使用过程中遇到的知识点简单的记录一下,方便之后如果在忘记的回顾。

从官方教程开始

在官网的TabLayout官方API中对这个TabLayout控件的使用有简单的说明。我们可以单独得为TabLayout添加Tab控件:

TabLayout tabLayout = ...; tabLayout.addTab(tabLayout.newTab().setText("Tab 1")); tabLayout.addTab(tabLayout.newTab().setText("Tab 2")); tabLayout.addTab(tabLayout.newTab().setText("Tab 3"))

这样的效果如图:

我们能够,看到在上面三个Tab显示。但是我们在一般情况下都是和ViewPager这个控件一起使用。在官方指导文档中,也提供了对应的布局提示:

<android.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="top" /> </android.support.v4.view.ViewPager>

但是在个人使用的时候,也可以使用如下布局:

<android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="wrap_content"></android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager>

这两种布局简单的实现出来的效果看起来都是差不多的,具体有什么不同暂时还不清楚。等之后什么时候弄清楚了在另行说明。但在仅仅这样写布局还是实现不了上面图片所示的效果。在官方的文档上有说需要调用setupWithViewPager(ViewPager)来为TabLayout设置ViewPager。在调用这个方法后,需要使用setAdapter(PageAdapter)来为ViewPager设置适配器。

适配器代码:(比较简单的实现)

public class ViewPagerAdapter extends FragmentPagerAdapter { PRivate List<Fragment> fragments; private List<String> titles; /** * 构造方法 * @param manager * @param fragments */ public ViewPagerAdapter(FragmentManager manager, List<Fragment> fragments,List<String> titles){ super(manager); this.fragments=fragments; this.titles=titles; } @Override public int getCount() { if (fragments!=null){ return fragments.size(); } return 0; } @Override public Fragment getItem(int position) { if (fragments!=null){ return fragments.get(position); } return null; } @Override public CharSequence getPageTitle(int position) { if (titles!=null){ return titles.get(position); } return ""; }}

MainActivity代码:

public class MainActivity extends AppCompatActivity { private ViewPager mViewPager; private TabLayout mTabLayout; private FragmentPagerAdapter mAdapter; private List<Fragment> fragments; private List<String> titles; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mViewPager = (ViewPager) findViewById(R.id.viewpager); mTabLayout = (TabLayout) findViewById(R.id.tablayout); mTabLayout.setupWithViewPager(mViewPager); fragments = new ArrayList<Fragment>(); Fragment aFragment = AFragment.getInstance(); Fragment bFragment = BFragment.getInstance(); Fragment cFragment = CFragment.getInstance(); Fragment dFragment = DFragment.getInstance(); Fragment eFragment = EFragment.getInstance(); fragments.add(aFragment); fragments.add(bFragment); fragments.add(cFragment); fragments.add(dFragment); fragments.add(eFragment); titles = new ArrayList<String>(); titles.add("A"); titles.add("B"); titles.add("C"); titles.add("D"); titles.add("E"); mAdapter = new ViewPagerAdapter(getSupportFragmentManager(), fragments, titles); mViewPager.setAdapter(mAdapter); mTabLayout.setTabMode(TabLayout.MODE_FIXED); }}

所有的Fragment的的布局非常简单,就是一个居中的TextView,这样简单的代码就能够实现如下动图的效果

so easy !不是吗?

错误

因为很久没有用这个控件了,我一直记得是ViewPagerTabLayout两个控件的嵌套使用,因此我尝试把ViewPager嵌套在TabLayout中使用,很高兴的去运行了一把,以为能够成功,自己还是too young too simple。studio立马就给我报如下的错误:

Binary xml file line #11: Only TabItem instances can be added to TabLayout

错误的信息也说得很明白了,在TabLayout控件中只能够放TabItem控件。

其他姿势

之前也写过一片关于FragmentTabLayout控件的简单使用,在那篇文章中,我说道,在FragmentTabLayout中的Fragment不需要进行懒加载,因为FragmentTabLayout没有预加载这一个概念,但是在这个情况下,如果每个界面都有大量的请求,最好还是使用Fragment的懒加载。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表