PagerSlidingTabStrip制作Android带标签的多界面滑动切换

这里我们用到了两个库,一个是Android SDK里自带的android-support-v4,另一个是PagerSlidingTabStrip,开源项目地址是https://github.com/astuetz/PagerSlidingTabStrip
用v4是需要用到他的ViewPager以及Fragment,而PagerSlidingTabStrip就是应用上边的标签。

成果预览:

下面,开工~
布局

创建Activity什么的就不说了,喜欢ActionBar就创建一个ActionBarActivity,需要v7 support包。
这里直接给出此Activity的布局:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <com.astuetz.PagerSlidingTabStrip
    android:id="@+id/tabstrip"
    android:layout_height="48dp"
    android:layout_width="match_parent" />
  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:overScrollMode="never"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:layout_below="@id/tabstrip" />
</RelativeLayout>

com.astuetz.PagerSlidingTabStrip这货就是界面上方那几个标签。这里我指定了高度为48dp,这个高度也是Android Design里强烈建议的可反馈区域的高度。
之前有同事在合作开发App的时候看到他使用RadioGroup做这几个标签,又要再加一个View来做下边的能活动的Indicator,容易出错不说,代码复杂度绝对比我下边要贴出的高很多了。并非是我懒,不愿意自己去实现,而是我觉得世上已经有了那么多别人已经好心好意帮你做完了等你来用的美好的东西,非要自己扭自己搞一套的话,未免有些得不偿失。人人都想牛逼,都想做出些比别人更牛逼的东西,但是我认为,如果能把现有的一些好东西完美的结合到一起就已经很不易了。

说了一些无关的观点,回到正题。很简单的上下结构布局,不用多说。至于ViewPager中android:overScrollMode="never"是一个小tip,我是不太喜欢ViewPager的越界效果的(fadingEdge="none"并不能生效),这个layout parameter可以使ViewPager的越界效果失效。

代码

众所周知,ViewPager中的成员必须是Fragment,所以在配置ViewPager以及PagerSlidingTabStrip之前需要先创建一个简单的Fragment做ViewPager中的显示。

package com.airk.myapplication.viewdemo.app.fragments;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import com.airk.myapplication.simplechat.app.widget.MyTextView; //我自定义的TextView,只是修改了默认字体,最近觉得Roboto-Light/Thin特别好看
/**
 * Simple Fragment which only has one TextView
 */
public class NumberFragment extends Fragment {
  private String content; //Fragment中显示的内容
  public static NumberFragment newInstance(String content) { //对外提供创建实例的方法,你给我需要显示的内容,我给你Fragment实例
    return new NumberFragment(content);
  }
  private NumberFragment(String content) {
    this.content = content;
  }
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    MyTextView tv = new MyTextView(getActivity());
    tv.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.MATCH_PARENT));
    tv.setGravity(Gravity.CENTER);
    tv.setTextSize(26.0f);
    tv.setText(this.content);
    return tv; //只有一个全屏显示、居中的Roboto字体的TextView
  }
}

Fragment创建完了,注释都写到了代码里边,浅显易懂,非常简单。下边是Activity的代码:

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main_activity);
    getSupportActionBar().setDisplayShowHomeEnabled(false); //ActionBar不显示应用Icon
    ViewPager viewpager = (ViewPager) findViewById(R.id.viewpager); //获取ViewPager
    viewpager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { //简单创建一个FragmentPagerAdapter
      @Override
      public CharSequence getPageTitle(int position) { //必须复写这个方法,开源控件PagerSlidingTabStrip需要通过它获取标签标题
        return "Title " + (position + 1);
      }
      @Override
      public Fragment getItem(int i) {
        return NumberFragment.newInstance("Content " + (i + 1)); //返回刚刚我们创建的那个Fragment,显示内容为Content X
      }
      @Override
      public int getCount() {
        return 3; //测试只用3个标签
      }
    });
    PagerSlidingTabStrip strip = (PagerSlidingTabStrip) findViewById(R.id.tabstrip); //获取PagerSlidingTabStrip控件对象
    strip.setShouldExpand(true); //设置标签自动扩展——当标签们的总宽度不够屏幕宽度时,自动扩展使每个标签宽度递增匹配屏幕宽度,注意!这一条代码必须在setViewPager前方可生效
    strip.setViewPager(viewpager); //这是其所handle的ViewPager
    strip.setDividerColor(Color.TRANSPARENT); //设置每个标签之间的间隔线颜色 ->透明
    strip.setUnderlineHeight(3); //设置标签栏下边的间隔线高度,单位像素
    strip.setIndicatorHeight(6); //设置Indicator 游标 高度,单位像素
  }

PagerSlidingTabStrip这个控件有很多可自定义属性,包括每个标签的颜色,字符颜色,间隔的Drawable等等。如果大家有需求可以去仔细看看其github主页以及官方给出的sample学习一下。

总结
结合开源控件PagerSlidingTabStrip我们很方便的就做到了带标签可滑动的多个界面开发,从代码量上看说实话已经很少了,而且逻辑上也浅显易懂,甚至都没有注册什么Listener就已经实现了标签与每个界面的互动(点击标签切换界面 or 滑动界面切换标签),而且Indicator游标也已经被设计成了随用户滑动而滑动的,节省了很多开发时间。

时间: 2016-04-24

android配合viewpager实现可滑动的标签栏示例分享

复制代码 代码如下: package com.example.playtabtest.view; import com.example.playtabtest.R; import android.app.Activity;import android.content.Context;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;impor

Android实现网易严选标签栏滑动效果

标签栏是一个非常常见的控件,似乎也是一个比较简单的控件,但如果在标签下方加个下划线的话,就还是可以玩出挺多花来的. 网易严选的标签栏就做的很不错,里面隐藏着诸多细节: 手动滑动页面,下划线会跟着滑动. 选择一个标签后,下划线会有滑动过去的动画. 选择最左端或最右端的标签,标签栏会进行滑动,使得标签向中间靠拢(如果可以滑的话). 仔细分析下,需要在简单标签栏的基础上实现以下逻辑: 画出下划线. 监听手动滑动页面事件,实时更新下划线位置. 切换标签时,开始下划线滑动的动画,并判断是否要同时滑动标签栏

Android Navigation TabBar控件实现多彩标签栏

先看看效果图: 源码下载:Android Navigation TabBar控件实现多彩标签栏 代码: MainActivity.java package com.bzu.gxs.meunguide; import android.app.Activity; import android.graphics.Color; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; im

Android中Spinner控件之键值对用法实例分析

本文实例讲述了Android中Spinner控件之键值对用法.分享给大家供大家参考.具体如下: 一.字典表,用来存放键值对信息 package com.ljq.activity; import java.io.Serializable; @SuppressWarnings("serial") public class Dict implements Serializable { private Integer id; private String text; public Dict()

Android编程布局控件之AbsoluteLayout用法实例分析

本文实例讲述了Android编程布局控件之AbsoluteLayout用法.分享给大家供大家参考,具体如下: AbsoluteLayout是绝对布局管理器,指的是指定组件的左上角绝对坐标来指定组件的布局 <?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"

分享Android中ExpandableListView控件使用教程

本文采用一个Demo来展示Android中ExpandableListView控件的使用,如如何在组/子ListView中绑定数据源.直接上代码如下: 程序结构图: layout目录下的 main.xml 文件源码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android

Android 代码写控件代替XML简单实例

Android 代码写控件代替XML简单实例 简单的一个Button控件的练习. 实现代码: Button btn = new Button(HandlerToActivity.this); LinearLayout.LayoutParams params=new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); params.gravity = Gravity.CENTER_HORIZONTAL; param

Android编程之控件ListView使用方法

本文实例讲述了Android编程之控件ListView使用方法.分享给大家供大家参考.具体分析如下: 控件ListView是一个重要的控件,可以被用作用户列表等显示,下面进行它的操作测试. 下面代码实现了生成了一个ListView显示,并对每个条目的单击事件作出响应. 源代码: package com.list; import java.util.ArrayList; import java.util.HashMap; import android.app.Activity; import an

Android实现EditText控件禁止输入内容的方法(附测试demo)

本文实例讲述了Android实现EditText控件禁止输入内容的方法.分享给大家供大家参考,具体如下: 问题: android如何实现EditText控件禁止往里面输入内容? 修改版解决方法: EditText editText = (EditText) findViewById(R.id.editText1); editText.setKeyListener(null); 看到这个问题大家可能有点奇怪了,EditText的功能不就是往上面写入内容吗? 再者,如果真要禁止输入文本,在布局文件中

如何让安卓(Android)子控件超出父控件的范围显示

先来看一张预览图: 废话不多说,直接上代码: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:clipChildren="false"> <Imag

Android自定义组合控件之自定义下拉刷新和左滑删除实例代码

绪论 最近项目里面用到了下拉刷新和左滑删除,网上找了找并没有可以用的,有比较好的左滑删除,但是并没有和下拉刷新上拉加载结合到一起,要不就是一些比较水的结合,并不能在项目里面使用,小编一着急自己组合了一个,做完了和QQ的对比了一下,并没有太大区别,今天分享给大家,其实并不难,但是不知道为什么网上没有比较好的Demo,当你的项目真的很急的时候,又没有比较好的Demo,那么"那条友谊的小船儿真是说翻就翻啊",好了,下面先来具体看一下实现后的效果吧: 代码已经上传到Github上了,小伙伴们记

Android ListView 子控件onClick正确获取position的方法

在实际开发中,我们有时候不仅需要响应ListView的onItemClick,还需要响应其子控件的点击事件,这个时候我们就会 发现,由于复用等原因,如果直接在子控件的onClick事件中调用getView()中的position,会出现数据或显示错位的问 题,原因就是position的值出现了重复或不准确,解决这个问题的方法是,在adapter每次加载数据的时候,为需要点击 的控件设置一个tag值,这个tag值就设置为当前这个控件对应的position,然后在点击事件中gettag(),获取这个