TabLayout + ViewPage 使用
步骤:
- 创建TabLayout
- 创建ViewPage 添加xml布局
- TabLayout.setupWithViewPager(viewPager); 连接
TabLayout的基本使用方式
1.在 xml 布局中加入该控件:
//创建TabLayout
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
// 创建viewPage
<android.support.v4.view.ViewPager
android:id="@+id/friend_viewpager"
android:layout_width="wrap_content
android:layout_height="wrap_conten
android:layout_gravity="center" />
2.在代码中
//TabLayout
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("朋友圈"));
tabLayout.addTab(tabLayout.newTab().setText("朋友"));
tabLayout.setupWithViewPager(viewPager);
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
tabLayout.getTabAt(0).setText("朋友圈");
tabLayout.getTabAt(1).setText("朋友");
//ViewPage
ViewPager viewPager = (ViewPager) findViewById(R.id.friend_viewpager);
LayoutInflater inflater = getLayoutInflater();
// 首先需要创建xml 布局
// 然后加载view
View view01 = inflater.inflate(R.layout.viewpage_friend,null);
View view02 = inflater.inflate(R.layout.viewpage_friendcircle,null);
final List<View> viewList = new ArrayList<View>();
viewList.add(view01);
viewList.add(view02);
PagerAdapter pagerAdapter = new PagerAdapter() {
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return viewList.size();
}
@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
// TODO Auto-generated method stub
container.removeView(viewList.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
container.addView(viewList.get(position));
return viewList.get(position);
}
};
viewPager.setAdapter(pagerAdapter);
TabLayout xml布局 属性
1.改变选中字体的颜色
app:tabSelectedTextColor="@android:color/holo_orange_light"
2.改变未选中字体的颜色
app:tabTextColor="@color/colorPrimary"
3.改变指示器下标的颜色
app:tabIndicatorColor="@android:color/holo_orange_light"
4.改变整个TabLayout的颜色
app:tabBackground="color"
TabLayout 方法
监听事件
选中了某个tab的监听事件OnTabSelectedListener():
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
//监听事件
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
关于 关联ViewPage 后 TabLayout 标签 消失
见http://www.cnblogs.com/donghaifeng-2016/p/6369729.html
网友评论