类似“网易新闻”UI设计就很好,顶部是导航,下面是各个页面。如图

这种效果使用design包中的TabLayout可以轻松的实现。
 

一、分析TabLayout 常见 UI

上图效果可以用如下代码实现:
         //设置背景色
mTabLayout.setBackgroundColor(Color.LTGRAY);
//设置填满TabLayout,或者居中
mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
//设置tabLayout是可以滑动的,或者固定大小
mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
//设置选中的Tab指示器为蓝色
mTabLayout.setSelectedTabIndicatorColor(Color.RED);
//设置正常字体颜色和被选中字体颜色
mTabLayout.setTabTextColors(Color.WHITE,Color.RED);
//添加Tab条目
mTabLayout.addTab(mTabLayout.newTab().setText("头条"));
mTabLayout.addTab(mTabLayout.newTab().setText("热点"));
mTabLayout.addTab(mTabLayout.newTab().setText("娱乐"));
mTabLayout.addTab(mTabLayout.newTab().setText("体育"));
mTabLayout.addTab(mTabLayout.newTab().setText("奥运"));

二、分析Tab

Tab中的set方法都会返回Tab本身,也就是说这是链式调用。修改代码效果,如下所示:
代码如下所示:
         //设置背景色
mTabLayout.setBackgroundColor(Color.LTGRAY);
//设置填满TabLayout,或者居中
mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
//设置tabLayout是可以滑动的,或者固定大小
mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
//设置选中的Tab指示器为蓝色
mTabLayout.setSelectedTabIndicatorColor(Color.RED);
//设置正常字体颜色和被选中字体颜色
mTabLayout.setTabTextColors(Color.WHITE,Color.RED);
//添加Tab条目
//添加图标
mTabLayout.addTab(mTabLayout.newTab().setText("头条").setIcon(R.drawable.th_languages));
//添加自定义View作为Tab
ImageView redian = new ImageView(this);
redian.setImageResource(R.drawable.th_lastfm);
mTabLayout.addTab(mTabLayout.newTab().setText("热点").setCustomView(redian));
ImageView yule = new ImageView(this);
yule.setImageResource(R.drawable.th_lexitron);
mTabLayout.addTab(mTabLayout.newTab().setCustomView(yule));
mTabLayout.addTab(mTabLayout.newTab().setText("体育"));
mTabLayout.addTab(mTabLayout.newTab().setText("奥运"));

三、TabLayout的回调

 mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//选中的Tab
Log.d("MainActivity", "onTabSelected position:" + tab.getPosition() + "\t text:" + tab.getText());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
//取消选中的Tab,即上一个选中的Tab
Log.d("MainActivity", "onTabUnselected position:" + tab.getPosition() + "\t text:" + tab.getText());
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
//再次选择某个选项卡,即选择当前选中的Tab会调用;而不是选中之前选过的Tab
Log.d("MainActivity", "onTabReselected position:" + tab.getPosition() + "\t text:" + tab.getText());
}
});

注意:1-当前是“头条”,重复点击会调用onTabReselected回调。
          2-点击“热点”,所以上一个是“头条”,当前是“热点”。
          3-再点击“头条”,不会调用onTabReselected回调。

四、和Viewpager结合使用

TabLayout中提供了一个Viewpager页面切换的监听器,如下源码。
 /**
* A {@link ViewPager.OnPageChangeListener} class which contains the
* necessary calls back to the provided {@link TabLayout} so that the tab position is
* kept in sync.
*
* <p>This class stores the provided TabLayout weakly, meaning that you can use
* {@link ViewPager#addOnPageChangeListener(ViewPager.OnPageChangeListener)
* addOnPageChangeListener(OnPageChangeListener)} without removing the listener and
* not cause a leak.
*/
public static class TabLayoutOnPageChangeListener implements ViewPager.OnPageChangeListener {
private final WeakReference<TabLayout> mTabLayoutRef;
private int mPreviousScrollState;
private int mScrollState;
public TabLayoutOnPageChangeListener(TabLayout tabLayout) {
mTabLayoutRef = new WeakReference<>(tabLayout);
}
@Override
public void onPageScrollStateChanged(int state) {
mPreviousScrollState = mScrollState;
mScrollState = state;
}
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
final TabLayout tabLayout = mTabLayoutRef.get();
if (tabLayout != null) {
// Only update the text selection if we're not settling, or we are settling after
// being dragged
final boolean updateText = mScrollState != SCROLL_STATE_SETTLING ||
mPreviousScrollState == SCROLL_STATE_DRAGGING;
// Update the indicator if we're not settling after being idle. This is caused
// from a setCurrentItem() call and will be handled by an animation from
// onPageSelected() instead.
final boolean updateIndicator = !(mScrollState == SCROLL_STATE_SETTLING
&& mPreviousScrollState == SCROLL_STATE_IDLE);
tabLayout.setScrollPosition(position, positionOffset, updateText, updateIndicator);
}
}
@Override
public void onPageSelected(int position) {
final TabLayout tabLayout = mTabLayoutRef.get();
if (tabLayout != null && tabLayout.getSelectedTabPosition() != position) {
// Select the tab, only updating the indicator if we're not being dragged/settled
// (since onPageScrolled will handle that).
final boolean updateIndicator = mScrollState == SCROLL_STATE_IDLE
|| (mScrollState == SCROLL_STATE_SETTLING
&& mPreviousScrollState == SCROLL_STATE_IDLE);
tabLayout.selectTab(tabLayout.getTabAt(position), updateIndicator);
}
}
private void reset() {
mPreviousScrollState = mScrollState = SCROLL_STATE_IDLE;
}
}
所以,在使用过程中很简单:
 tabLayout.addTab(tabLayout.newTab().setText("全部订单"));
tabLayout.addTab(tabLayout.newTab().setText("待发货"));
tabLayout.addTab(tabLayout.newTab().setText("配送/自提"));
tabLayout.addTab(tabLayout.newTab().setText("配送/自提"));
tabLayout.addTab(tabLayout.newTab().setText("已完成"));
PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(adapter);
//使用TabLayout提供的监听
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//设置ViewPager联动
mViewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
});
}
 
 

design包 TabLayout使用的更多相关文章

  1. 安卓Design包之TabLayout控件的简单使用

    Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个supp ...

  2. 安卓Design包之TabLayout控件的使用

    转自: 安卓Design包之TabLayout控件的简单使用 Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android ...

  3. 带你实现开发者头条APP(四)---首页优化(加入design包)

    title: 带你实现开发者头条APP(四)---首页优化(加入design包) tags: design,Toolbar,TabLayout,RecyclerView grammar_cjkRuby ...

  4. 使用Design包实现QQ动画侧滑效果和滑动菜单导航

    Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个supp ...

  5. 安卓Design包之超强控件CoordinatorLayout与SnackBar的简单使用

    在前面的Design中,学习使用了TabLayout,NavigationView与DrawerLayout实现的神奇效果,今天就带来本次Design包中我认为最有意义的控件CoordinatorLa ...

  6. 安卓官方ViewPager与android.support.design.widget.TabLayout双向交互联动切换 。

    该TabLayout的功用,简单的说,就是当用户在该TabLayout的选项卡子item中选择触摸时候,文字和下方的指示器横条滑动指示.android.support.design.widget.Ta ...

  7. 安卓Design包之CollapsingToolbarLayout(可折叠的工具栏布局)的简单使用

    转自: CollapsingToolbarLayout的使用 注意:使用前需要添加Design依赖包,使用toolbar时需要隐藏标题头 CollapsingToolbarLayout作用是提供了一个 ...

  8. 安卓Design包之CoordinatorLayout配合AppBarLayout,ToolBar,TabLaout的使用

    转载: CoordinatorLayout配合AppBarLayout,Toolbar和TabLayout的使用 控件的简单介绍: AppBarLayout:它是继承LinerLayout实现的一个V ...

  9. Android Material Design:滑动指示选项卡android.support.design.widget.TabLayout的简单使用

    该TabLayout的功用,简单的说,就是当用户在该TabLayout的选项卡子item中选择触摸时候,文字和下方的指示器横条滑动指示.这个功能就是以前APP开发常用的选项卡某一卡片被切换.选中时候的 ...

随机推荐

  1. noip2012 开车旅行

    此题100分的解法就是先预处理出每个点的下一个点之后倍增就好了.其实并没有太大难度. pbihao用双向链表写过了此题.在本地上我treap狂操他,but在rqnoj上,我依靠反复提交才A掉此题(最后 ...

  2. JS-自制提速小工具:开发页面时需要按比例计算宽高值的快速计算器

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name= ...

  3. jvascript 顺序查找和二分查找法

    第一种:顺序查找法 中心思想:和数组中的值逐个比对! /* * 参数说明: * array:传入数组 * findVal:传入需要查找的数 */ function Orderseach(array,f ...

  4. highcharts总结

    //tooptip此属性表达的是鼠标移那个位置显示的值 tooptip:{ formatter: function (){ //this.point.name 表达显示名字 //this.x 表达显示 ...

  5. p/invoke碎片--对类的封送处理

    主要是看默认封送处理行为 按类成员的类型是否为“可直接传递到非托管内存”的类型来分类;按照成员中是否有“可直接传递到非托管内存”的类型来讨论. 所有成员都是“可直接传递到非托管内存”的类型 托管代码和 ...

  6. ECSHOP 商品字段增加新字段的方法

    结合ecshop后台“商品编辑”.“商品录入”来谈谈如何给ecshop商品增加一个新字段,假设我们将这个新字段命名为 new_add 1.首先要修改数据表结构,给表 ecs_goods 增加新字段:n ...

  7. 微信小程序内训笔记

    2016年9月22日凌晨微信官方正式宣布“小程序”开始内测,有“微信之父”之称.腾讯集团高级执行副总裁张小龙在2016年末对外宣布“小程序“应用将于2017年1月9日正式推出 这一次微信还是按照惯例, ...

  8. android App使用新浪微博sdk的使用总结

    问题1:注册app的key 问题2:在微博开放平台,我的应用中心中,设置应用的基本信息的时候其中有一项,是设置你的应用的签名,签名是需要在安卓设备上安装一个生成签名的app(这个app界面很丑,这点我 ...

  9. Spring Boot 乐观锁加锁失败 - 使用AOP恢复错误

    之前写了一些辅助工作相关的Spring Boot怎么使用AOP.这里继续正题,怎么减少Spring Boot 乐观锁加锁报错的情况(基本可以解决). 1. 包依赖 spring-boot-starte ...

  10. CSS3动画第二式--组合动画

    接第一式之后的进阶招式,加入一些组合动画,剧情.动画啥的都是随意瞎想的,纯粹是为了熟悉2D.3D和过渡等css3代码写法.效果见下图: 代码如下(有点长,折叠一下): <!DOCTYPE htm ...