Android SlidingTabLayout的使用--替代ActionBar的Tab导航
最近在使用ActionBar的时候,如果使用的是最新版V7包或者最新的SDK平台,就会发现 ActionBar的导航功能已经不建议使用了。主要的原因是ActionBar自带Tab导航自定义性差(只能通过style修改),而且不再建议使用ActionBar。SlidingTabLayout就是ActionBar导航的替代品,使用它可以轻松的实现导航功能。
使用SlidingTabLayout需要准备2个类,分别是 SlidingTabLayout,与SlidingTabStrip。点击下载 ,放进项目中时只用修改下包名即可。
SlidingTabLayout主要配合ViewPager实现Tab导航,且需要在ActionBarActivity中使用,具体代码如下:
public class MainActivity extends ActionBarActivity { @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager pager= (ViewPager) findViewById(R.id.pager);
SlidingTabLayout tab= (SlidingTabLayout) findViewById(R.id.tab); MyAdapte adapter= new MyAdapte();
pager.setAdapter(adapter);
tab.setViewPager(pager);
} int[] colors={0xFF123456,0xFF654321,0xFF336699}; class MyAdapte extends PagerAdapter{
String[] titles={"AA","BB","CC"}; ArrayList<LinearLayout> layouts=new ArrayList<LinearLayout>();
MyAdapte() { for (int i = ; i < ; i++) {
LinearLayout l=new LinearLayout(MainActivity.this);
l.setBackgroundColor(colors[i]);
l.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT));
layouts.add(l);
} } @Override
public int getCount() {
return layouts.size();
} @Override
public boolean isViewFromObject(View view, Object o) {
return view==o;
} @Override
public Object instantiateItem(ViewGroup container, int position) {
LinearLayout l=layouts.get(position);
container.addView(l);
return l;
} @Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(layouts.get(position));
}
<span style="white-space:pre"> </span>//Tab上显示的文字
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
}
}
布局如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity"> <com.example.wanggang.slindingtablayouttest001.SlidingTabLayout
android:id="@+id/tab"
android:layout_width="match_parent"
android:layout_height="wrap_content" /> <android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/pager" />
</LinearLayout>
运行效果如下:
如果要修改 选中效果 的颜色,或者加上选中颜色过度效果,或者 分割线的颜色,可以为 SlidingTabLayout设置属性
tab.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
@Override
public int getIndicatorColor(int position) {
return colors[position];//每个选项卡所对应的颜色
}
<span style="white-space:pre"> </span> //分割线颜色
@Override
public int getDividerColor(int position) {
return 0x00FFFFFF;
}
});
效果如下:
根据以上的运行效果可以看出,每个Tab上面显示的内容都是文本。如果要显示图片,就需要将图片变成 ImageSpan,通过PagerAdapter 的 getPageTitle() 返回到 SlidingTabLayout。
<span style="white-space:pre"> </span>int[] imageResId = {
R.drawable.ic_launcher,
R.drawable.ic_launcher,
R.drawable.ic_launcher
}; @Override
public CharSequence getPageTitle(int position) {
Drawable image = getResources().getDrawable(imageResId[position]);
image.setBounds(, , image.getIntrinsicWidth(), image.getIntrinsicHeight());
SpannableString sb = new SpannableString(" ");
ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
sb.setSpan(imageSpan, , , Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
return sb;
//return titles[position];
}
但是由于SlidingTabLayout自带的TextView会调用 setAllCaps(true),会取消所有的 ImageSpan 的效果。所以需要自定义TabView。
res/layout/custom_tab.xml
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:gravity="center"
android:textStyle="bold"
android:padding="16dp" />
然后在 tab.setViewPager(pager) 之前调用 tab.setCustomTabView(R.layout.custom_tab,0) 设置自定义TabView
tab.setCustomTabView(R.layout.custom_tab,);
tab.setViewPager(pager);
运行效果如下:
最后,我们会发现,所有的TabView都没有铺满屏幕宽度。如果要每个TabView都平分屏幕宽度,只需在自定义的TextView 上加上权重属性即可。
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_weight=""
android:layout_height="wrap_content"
android:textSize="12sp"
android:gravity="center"
android:textStyle="bold"
android:padding="16dp" />
效果如下:
Android SlidingTabLayout的使用--替代ActionBar的Tab导航的更多相关文章
- Android入门之ActionBar实现Tab导航
效果图: <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android=&qu ...
- 使用ActionBar实现Tab导航
ActionBar还有常用的功能,实现Tab导航.ActionBar在顶端生成多个Tab标签,当用户单击点击某个Tab标签时,系统根据用户点击事件导航指定Tab页面. 为了使用ActionBar实现T ...
- 使用ActionBar实现Tab导航(快速生成Tab样式)
效果如图: MainActivity.java具体实现: package com.rainmer.actionbartab; import android.app.ActionBar; import ...
- Android开源框架ViewPageIndicator和ViewPager实现Tab导航
前言: 关于使用ViewPageIndicator和ViewPager实现Tab导航,在开发社区里已经有一堆的博客对其进行了介绍,假设我还在这里写怎样去实现.那简直就是老生常谈,毫无新奇感,并且.我也 ...
- Android tab导航的几种方法:ActionBar tab +fragment,Viewpager+pagerTitleStrip,开源框架ViewPageIndicator 和 ViewPager
action来实现tab标签 并跟fragment结合 因为要写新闻客户端这个tab导航是必须的 这里我写几个小练习,希望大家融会贯通. 1actionbar设置tab +fragment 布局是个l ...
- Android源码:(一) 安卓2.1到4.4操作系统通用的Actionbar实现的tab导航例子。
说一下我在完成这个例子之前的尝试吧 一,修改“actionbarsherlock”的导航例子.我在实现这个例子之前,尝试过“actionbarsherlock”,修改它的一个tab导航的例子,修改成功 ...
- Android ActionBar 关于tab的应用 以及 TabListener的方法详解
actionBar的tab标签应用以及TabListener的方法详解 package com.example.actionBarTest.actionBarTab; import android.a ...
- Android典型界面设计(6)——ActionBar Tab+ViewPager+Fagment实现滑动导航
一.问题描述 在Android典型界面设计一文中,实现典型滑动导航界面,其实使用ActionBar 也可以轻松实现这一效果,甚至也可实现类似Android典型界面设计(3)的双导航效果.可见Actio ...
- (转)Android SlidingTabLayout定制分割线和指示条颜色
本文转载与:http://blog.csdn.net/zhangphil/article/details/48863347 Android SlidingTabLayout默认的滑动指示条是系统默认的 ...
随机推荐
- Couldn't connect to host, port: smtp.163.com, 25; timeout -1;
运行出现以下报错: Couldn't connect to host, port: smtp.163.com, 25; timeout -1; 也要设置端口 spring.mail.port=25
- java24点算法
输入任意的四个数,求出所有能得到二十四点的算式,不过我是菜鸟,可能性能方面不好,希望各位多多指教1. [代码][Java]代码 import java.util.ArrayList;impo ...
- 【AC自动机&&Trie图】积累
以前KMP和后缀系列(主要是后缀数组,后缀自动机),都刷了一定数量的题,但是对于AC自动机,却有些冷落,罪过. 但是我感觉,在蓝桥杯比赛中AC自动机出现的概率比后缀系列大,简单的会考匹配,稍难一点会考 ...
- [Selenium] common functions comparison
1.Wait for element in default time or self defined time When the element need some time to be prese ...
- Python3中使用PyMongo的方法详解
前言 本文主要给大家介绍的是关于在Python3使用PyMongo的方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细介绍: MongoDB存储 在这里我们来看一下Python3下Mongo ...
- bzoj 2836 魔法树 —— 树链剖分
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2836 树链剖分裸题: 写码五分钟,调码两小时,RE不断,狂交二十五遍,终于找到一处小细节—— ...
- 多线程-threading模块3
超级播放器 #coding:utf-8 import threading from time import sleep,ctime #超级播放器 def super_player(file,time) ...
- E20180427-hm
创建: 2018/04/27 dissolve vi. 溶解; 融化,液化; 解散,散去; 分裂,分解; vt. 使溶解; 使(固态物)溶解为液体,使液化; 使消失,使消逝,消除; 使终止; c ...
- C++笔试题(七)
微软研究院是一个听起来就牛B的地方啊,反正我是进不去,不过不妨碍我看看他的笔试题到底是怎么样的.下面四道题就是微软研究院的笔试题目,题后附有我的解答.微软研究院(亚洲)的网址是:http://rese ...
- hdoj5402 【模拟/构造】
题意: 给你一个矩阵,每个值都是非负,然后让你从左上角走到右下角,每个点只能走一次,求到终点的最大值,还要输出一条路径 思路: 一开始拿到还以为搜索之类的,但是发现神特么暴力+麻烦(因为路径这个东西. ...