最近在使用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导航的更多相关文章

  1. Android入门之ActionBar实现Tab导航

    效果图: <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android=&qu ...

  2. 使用ActionBar实现Tab导航

    ActionBar还有常用的功能,实现Tab导航.ActionBar在顶端生成多个Tab标签,当用户单击点击某个Tab标签时,系统根据用户点击事件导航指定Tab页面. 为了使用ActionBar实现T ...

  3. 使用ActionBar实现Tab导航(快速生成Tab样式)

    效果如图: MainActivity.java具体实现: package com.rainmer.actionbartab; import android.app.ActionBar; import ...

  4. Android开源框架ViewPageIndicator和ViewPager实现Tab导航

    前言: 关于使用ViewPageIndicator和ViewPager实现Tab导航,在开发社区里已经有一堆的博客对其进行了介绍,假设我还在这里写怎样去实现.那简直就是老生常谈,毫无新奇感,并且.我也 ...

  5. Android tab导航的几种方法:ActionBar tab +fragment,Viewpager+pagerTitleStrip,开源框架ViewPageIndicator 和 ViewPager

    action来实现tab标签 并跟fragment结合 因为要写新闻客户端这个tab导航是必须的 这里我写几个小练习,希望大家融会贯通. 1actionbar设置tab +fragment 布局是个l ...

  6. Android源码:(一) 安卓2.1到4.4操作系统通用的Actionbar实现的tab导航例子。

    说一下我在完成这个例子之前的尝试吧 一,修改“actionbarsherlock”的导航例子.我在实现这个例子之前,尝试过“actionbarsherlock”,修改它的一个tab导航的例子,修改成功 ...

  7. Android ActionBar 关于tab的应用 以及 TabListener的方法详解

    actionBar的tab标签应用以及TabListener的方法详解 package com.example.actionBarTest.actionBarTab; import android.a ...

  8. Android典型界面设计(6)——ActionBar Tab+ViewPager+Fagment实现滑动导航

    一.问题描述 在Android典型界面设计一文中,实现典型滑动导航界面,其实使用ActionBar 也可以轻松实现这一效果,甚至也可实现类似Android典型界面设计(3)的双导航效果.可见Actio ...

  9. (转)Android SlidingTabLayout定制分割线和指示条颜色

    本文转载与:http://blog.csdn.net/zhangphil/article/details/48863347 Android SlidingTabLayout默认的滑动指示条是系统默认的 ...

随机推荐

  1. 关于苹果iPhone手机对页面margin属性无效的解决方法一(如有错误,请留言批评)

    这个问题,是在给商城网站底部footer设置margin属性的时候发现的,先把出现问题的截图发出来看一下 ​安卓手机,打开正常 ​iphone6 p 打开出现的问题(无视margin-bottom:6 ...

  2. 怎么往mac中finder个人收藏里添加文件夹

    1.打开Finder,点击左上角finder偏好设置 2.选择边栏 3.如果侧栏中没有的文件夹,直接长按文件夹直接拖入.

  3. SpringMVC将url生成二维码图片直接展示在页面上

    利用google的开源包zxing生成二维码 第一步:maven项目的zxing依赖 <!-- google zxing 生成二维码 --> <dependency> < ...

  4. 廖雪峰ES6的箭头函数

    http://www.liaoxuefeng.com/ wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014385659690576 ...

  5. 聊聊Java SPI机制

    一.Java SPI机制 SPI(Service Provider Interface)是JDK内置的服务发现机制,用在不同模块间通过接口调用服务,避免对具体服务服务接口具体实现类的耦合.比如JDBC ...

  6. bzoj 4260 REBXOR —— Trie树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4260 用 Trie 树可以找出前缀异或的最大值和后缀异或的最大值,拼起来即可: 注意要先加入 ...

  7. CoreGpaphics

    CoreGpaphics基本应用 CGAffineTransformMake开头的函数 是基于最初始的位置来变化的 带有CGAffineTransform参数是基于CGAffineTransform的 ...

  8. java链接sqlserver数据库

    需要用到sqljdbc.jar包 JSP代码 <%@ page language="java" import="java.sql.*" import=&q ...

  9. Collection View Programming Guide for iOS---(四)---Using the Flow Layout

      Using the Flow Layout使用流布局 The UICollectionViewFlowLayout class is a concrete layout object that y ...

  10. 个人项目开发PSP实践-MyWCprj

    MyWCprj.exe Github仓库地址 1. What is MyWCprj.exe? wc是linux下一个非常好用的代码统计小工具,可以通过 -c .-w .-l等选项分别进行对指定文件的代 ...