Android高级UI开发（十六）TabLayout
【摘要】 TabLayout是Material Design设计原则中推出的一个新型标题栏，最常见的例子就是结合Viewpager来使用，当滑动Viewpager时，标题栏会跟随着切换，反过来当选中某一个标题栏时Viewpager页面也会跟随着切换到指定内容。 拒绝所谓的民间高手的自定义Tablayout滑动效果，让我们接受谷歌大牛的稳定控件吧。
下面是Tablayout...
TabLayout是Material Design设计原则中推出的一个新型标题栏，最常见的例子就是结合Viewpager来使用，当滑动Viewpager时，标题栏会跟随着切换，反过来当选中某一个标题栏时Viewpager页面也会跟随着切换到指定内容。 拒绝所谓的民间高手的自定义Tablayout滑动效果，让我们接受谷歌大牛的稳定控件吧。
下面是Tablayout的运行效果：
1. 布局文件
-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-
xmlns:app="http://schemas.android.com/apk/res-auto"
-
android:layout_width="match_parent"
-
android:layout_height="match_parent"
-
android:orientation="vertical">
-
-
<android.support.design.widget.TabLayout
-
android:id="@+id/tablayout"
-
android:layout_width="fill_parent"
-
android:layout_height="wrap_content"
-
app:tabIndicatorColor="@color/colorPrimary"
-
app:tabTextColor="@color/colorPrimary"
-
app:tabSelectedTextColor="@color/colorPrimaryDark"
-
app:tabMode="scrollable"
-
app:tabGravity="fill"
-
/>
-
<android.support.v4.view.ViewPager
-
android:id="@+id/vp"
-
android:layout_width="fill_parent"
-
android:layout_height="fill_parent"
-
/>
-
-
</LinearLayout>
这里提一下这两个属性：
app:tabMode="scrollable"
app:tabGravity="fill"
表示tab页很多的时候，可以滚动。fill表示让TAB标签占满屏幕宽度。
如果你只有少数几个TAB，
想让各TAB平分宽度，你可以设置app:tabMode:= "fixed", app:tabGravity="fill".
想让各TAB居中，则设置app:tabMode ="fixed", app:tabGravity="center"
2. 实现TabLayout与Viewpager的滑动联动：
有两种方法，第一种方法1行代码就能把两者的切换关联起来，MainActivity.java代码如下：
-
package com.example.administrator.tablayout;
-
-
import android.animation.ObjectAnimator;
-
import android.animation.ValueAnimator;
-
import android.os.Build;
-
import android.os.Bundle;
-
import android.renderscript.Sampler;
-
import android.support.annotation.RequiresApi;
-
import android.support.design.widget.TabLayout;
-
import android.support.v4.app.Fragment;
-
import android.support.v4.app.FragmentManager;
-
import android.support.v4.app.FragmentPagerAdapter;
-
import android.support.v4.view.ViewPager;
-
import android.support.v4.view.ViewPager.OnPageChangeListener;
-
import android.support.v7.app.AppCompatActivity;
-
import android.util.Log;
-
import android.view.View;
-
import android.widget.TextView;
-
-
public class MainActivity extends AppCompatActivity {
-
-
private TabLayout tabLayout;
-
private String[] title = {
-
"推荐",
-
"分类",
-
"排行榜",
-
"必备",
-
"福利",
-
"应用圈",
-
"娱乐",
-
"汽车",
-
"房子",
-
"科技"
-
};
-
-
@Override
-
protected void onCreate(Bundle savedInstanceState) {
-
super.onCreate(savedInstanceState);
-
setContentView(R.layout.activity_main);
-
-
final ViewPager viewPager = (ViewPager) findViewById(R.id.vp);
-
tabLayout = (TabLayout)findViewById(R.id.tablayout);
-
MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
-
viewPager.setAdapter(adapter);
-
tabLayout.setupWithViewPager(viewPager);
-
}
-
-
class MyPagerAdapter extends FragmentPagerAdapter{
-
-
public MyPagerAdapter(FragmentManager fm) {
-
super(fm);
-
// TODO Auto-generated constructor stub
-
}
-
-
@Override
-
public CharSequence getPageTitle(int position) {
-
// TODO Auto-generated method stub
-
return title[position];
-
}
-
-
@Override
-
public Fragment getItem(int position) {
-
Fragment f = new DetailFragment();
-
Bundle bundle = new Bundle();
-
bundle.putString("title", title[position]);
-
f.setArguments(bundle);
-
return f;
-
}
-
-
@Override
-
public int getCount() {
-
// TODO Auto-generated method stub
-
return title.length;
-
}
-
}
-
}
核心代码就这是以下这1行代码，其余的我们都没必要在这里解释了，因为这里是高级进阶：
-
-
tabLayout.setupWithViewPager(viewPager);
就是这1行代码将TabLayout与Viewpager关联了起来，达到了我们所要的滑动关联效果。
第二种方法，MainActivity代码如下：
-
package com.example.administrator.tablayout;
-
-
import android.animation.ObjectAnimator;
-
import android.animation.ValueAnimator;
-
import android.os.Build;
-
import android.os.Bundle;
-
import android.renderscript.Sampler;
-
import android.support.annotation.RequiresApi;
-
import android.support.design.widget.TabLayout;
-
import android.support.v4.app.Fragment;
-
import android.support.v4.app.FragmentManager;
-
import android.support.v4.app.FragmentPagerAdapter;
-
import android.support.v4.view.ViewPager;
-
import android.support.v4.view.ViewPager.OnPageChangeListener;
-
import android.support.v7.app.AppCompatActivity;
-
import android.util.Log;
-
import android.view.View;
-
import android.widget.TextView;
-
-
public class MainActivity extends AppCompatActivity {
-
-
private TabLayout tabLayout;
-
private String[] title = {
-
"头条",
-
"新闻",
-
"娱乐",
-
"体育",
-
"科技",
-
"美女",
-
"财经",
-
"汽车",
-
"房子",
-
"头条"
-
};
-
-
@Override
-
protected void onCreate(Bundle savedInstanceState) {
-
super.onCreate(savedInstanceState);
-
setContentView(R.layout.activity_main);
-
-
final ViewPager viewPager = (ViewPager) findViewById(R.id.vp);
-
tabLayout = (TabLayout)findViewById(R.id.tablayout);
-
MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
-
-
//1.TabLayout和Viewpager关联
-
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
-
-
@Override
-
public void onTabUnselected(TabLayout.Tab arg0) {
-
// TODO Auto-generated method stub
-
-
}
-
-
@Override
-
public void onTabSelected(TabLayout.Tab tab) {
-
// 被选中的时候回调
-
viewPager.setCurrentItem(tab.getPosition(),true);
-
}
-
-
@Override
-
public void onTabReselected(TabLayout.Tab arg0) {
-
// TODO Auto-generated method stub
-
-
}
-
});
-
//2.ViewPager滑动关联tabLayout
-
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
-
-
-
//设置tabLayout的标签来自于PagerAdapter
-
tabLayout.setTabsFromPagerAdapter(adapter);
-
viewPager.setAdapter(adapter);
-
-
-
}
-
-
class MyPagerAdapter extends FragmentPagerAdapter{
-
-
public MyPagerAdapter(FragmentManager fm) {
-
super(fm);
-
// TODO Auto-generated constructor stub
-
}
-
-
@Override
-
public CharSequence getPageTitle(int position) {
-
// TODO Auto-generated method stub
-
return title[position];
-
}
-
-
@Override
-
public Fragment getItem(int position) {
-
Fragment f = new DetailFragment();
-
Bundle bundle = new Bundle();
-
bundle.putString("title", title[position]);
-
f.setArguments(bundle);
-
return f;
-
}
-
-
@Override
-
public int getCount() {
-
// TODO Auto-generated method stub
-
return title.length;
-
}
-
-
}
-
-
-
-
}
tabLayout.setOnTabSelectedListener中重写了以下函数：
-
@Override
-
public void onTabSelected(TabLayout.Tab tab) {
-
// 被选中的时候回调
-
viewPager.setCurrentItem(tab.getPosition(),true);
-
}
当选中TAB表签时，根据TAB的位置切换ViewPager对应的页面，因为Viewpager的页面内容与Tab标签是一 一对应的。
那么反过来，滑动ViewPager如何让TAB标签跟着关联切换呢，以下1行代码可以搞定：
-
//2.ViewPager滑动关联tabLayout
-
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
-
-
//设置tabLayout的标签来自于FragmentPagerAdapter中的getPageTitle
-
tabLayout.setTabsFromPagerAdapter(adapter);
-
viewPager.setAdapter(adapter);
至此，Tablayout+viewpager滑动联动的 讲解就到这里，其实相比较我们从网上搜到的开源项目简单多了，GOOGLE为我们在Material design设计中推出的这些好用的控件，我们要知道它，运用它。必定谷歌工程师比民间的那些程序员水平高多了，开发 出的控件也稳定多了。
最后源码下载地址：https://download.csdn.net/download/gaoxiaoweiandy/10821642
文章来源: blog.csdn.net，作者：冉航--小虾米，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/gaoxiaoweiandy/article/details/84677127
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）