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

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

成果预览:

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

下面,开工~
布局

创建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 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实现网易严选标签栏滑动效果

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

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使用ViewPager实现无限滑动效果

前言 其实仔细想一下原理还是挺简单的.无非是当我们滑动到最后一页,再向后滑动时定位到第一页;当我们滑动到第一页,再向前滑动时定位到最后一页. 但是,相信很多朋友都遇到过这个问题:视图的过度效果不自然. 小编也是通过百度和谷歌查找了很多解决方案,实验了很多方法,总结了一个相对不错的方法,接下来给各位分享下滑动效果.实现细节以及一些踩过的坑. 1.无限滑动效果(左右无限滑动) 事先准备好2张滑动图片(有想试验的小伙伴,自备图片啊,小编就不提供了...) 运行效果图(左右无限循环): 为了显示更加直观

Android利用ViewPager实现可滑动放大缩小画廊效果

画廊在很多的App设计中都有,如下图所示: 该例子是我没事的时候写的一个小项目,具体源码地址请访问https://github.com/AlexSmille/YingMi. 该画廊类似封面的效果,滑到中间的图片会慢慢变大,离开的View会慢慢的缩小,同时可设置滑动监听和点击监听. 网上有很多例子都是通过Gallery实现的,而上例的实现是通过ViewPager实现,解决了性能优化的问题,今天特此把它抽出来,封装一下,以便以后的方便使用.最终实现的效果如下: 使用方式 布局中添加该自定义控件 <R

Android使用ViewPager实现屏幕滑动效果

使用ViewPager实现屏幕滑动 从一个完整的屏幕移动到另一个屏幕的过程被称为屏幕滑动,在安装向导.幻灯片中应用广泛.下面介绍如何利用Android Support库的ViewPager来实现屏幕滑动. 创建View 创建一个在之后作为fragment的内容的布局文件,下面的例子中包含一个Textview,用来展示一些文字. <!-- fragment_screen_slide_page.xml --> <ScrollView xmlns:android="http://sc

Android使用ViewPager实现图片滑动预览效果

本文为大家分享了Android ViewPager实现图片滑动预览效果展示的具体代码,供大家参考,具体内容如下 效果图: 滑动前: 滑动后: 代码非常简单,实现起来很容易 xml代码: <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/ap

Android中ViewPager带来的滑动卡顿问题解决要点解析

问题说明: 当SwipeRefreshLayout中放置了ViewPager控件,两者的滑动会相互冲突.具体表现为ViewPager的左右滑动不顺畅,容易被SwipeRefreshLayout拦截(即出现刷新的View). 问题原因: ViewPager本身是处理了滚动事件的冲突,它在横向滑动时会调用requestDisallowInterceptTouchEvent()方法使父控件不拦截当前的Touch事件序列.但是SwipeRefreshLayout的requestDisallowInter

Android之Viewpager+Fragment实现懒加载示例

我们在做应用开发的时候,一个Activity里面可能会以viewpager(或其他容器)与多个Fragment来组合使用.而ViewPager默认会缓存三页数据,即:Viewpager每加载一个Fragment,都会预先加载此Fragment左侧或右侧的Fragment.而如果每个fragment都需要去加载数据,或从本地加载,或从网络加载,那么在这个activity刚创建的时候就变成需要初始化大量资源,浪费用户流量不止,还造成卡顿,这样的结果,我们当然不会满意.那么,能不能做到当切换到这个fr

android开发教程之实现滑动关闭fragment示例

主要代码:(有注释) 复制代码 代码如下: package com.example.checkboxtest; import android.annotation.SuppressLint;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.os.Handler;import android.os.Message;import andr

Android编程开发ScrollView中ViewPager无法正常滑动问题解决方法

本文实例讲述了Android编程开发ScrollView中ViewPager无法正常滑动问题解决方法.分享给大家供大家参考,具体如下: 这里主要介绍如何解决ViewPager在ScrollView中滑动经常失效.无法正常滑动问题. 解决方法只需要在接近水平滚动时ScrollView不处理事件而交由其子View(即这里的ViewPager)处理即可,重写ScrollView的onInterceptTouchEvent函数,如下: package cc.newnews.view; import an

Android基于ViewPager实现的应用欢迎界面完整实例

本文实例讲述了Android基于ViewPager实现的应用欢迎界面.分享给大家供大家参考,具体如下: 有时候开发一个应用需要指导用户提示一些新功能,这样的欢迎界面的实现可以用一下方法 首先我们要用到ViewPager这个类,这个类是在Android-support-v4.jar中,网上搜一下就会有 现将这个包放到项目中,之后进行引用 ViewPager类个人理解就是一个容器,将你需要的图片资源放到他的Adapter中进行填充,这样我们就需要一个adapter,自定义一个adapter继承Pag