PagerSlidingTabStrip制作Android带标签的多界面滑动切换_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游标也已经被设计成了随用户滑动而滑动的,节省了很多开发时间。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索android
, 安卓
, 标签
, 切换
界面滑动
ios滑动切换界面、安卓左右滑动切换界面、ios左右滑动切换界面、安卓滑动切换界面、左右滑动tab切换标签,以便于您获取更多的相关知识。

时间: 2024-09-21 19:26:58

PagerSlidingTabStrip制作Android带标签的多界面滑动切换_Android的相关文章

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

这里我们用到了两个库,一个是Android SDK里自带的android-support-v4,另一个是PagerSlidingTabStrip,开源项目地址是https://github.com/astuetz/PagerSlidingTabStrip 用v4是需要用到他的ViewPager以及Fragment,而PagerSlidingTabStrip就是应用上边的标签. 成果预览: 下面,开工~ 布局 创建Activity什么的就不说了,喜欢ActionBar就创建一个ActionBarA

Android 模拟新闻APP显示界面滑动优化实例代码

内容: 1.滑动优化(滑动时不加载图片,停止才加载) 2.第一次进入时手动加载 代码如下: 1.界面布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:

ios如何实现android qq上面的左右滑动切换界面呢?

问题描述 ios如何实现android qq上面的左右滑动切换界面呢? 这种效果是使用uisegmentcontrol实现的吗? 解决方案 使用UIScrollView应该就可以实现类似这种效果 解决方案二: 你可以参考一下 UISegmentedControl 的文档,内容很全,希望能帮的上你.

Android编程实现ViewPager多页面滑动切换及动画效果的方法_Android

本文实例讲述了Android编程实现ViewPager多页面滑动切换及动画效果的方法.分享给大家供大家参考,具体如下: 一.首先,我们来看一下效果图,这是新浪微博的Tab滑动效果.我们可以手势滑动,也可以点击上面的头标进行切换.与此同方式, 白色横条会移动到相应的页卡头标下.这是一个动画效果,白条是缓慢滑动过去的.好了,接下来我们就来实现它. 二.在开始前,我们先要认识一个控件,ViewPager.它是google SDk中自带的一个附加包的一个类,可以用来实现屏幕间的切换. 这个附加包是and

Android编程实现ViewPager多页面滑动切换及动画效果的方法

本文实例讲述了Android编程实现ViewPager多页面滑动切换及动画效果的方法.分享给大家供大家参考,具体如下: 一.首先,我们来看一下效果图,这是新浪微博的Tab滑动效果.我们可以手势滑动,也可以点击上面的头标进行切换.与此同方式, 白色横条会移动到相应的页卡头标下.这是一个动画效果,白条是缓慢滑动过去的.好了,接下来我们就来实现它. 二.在开始前,我们先要认识一个控件,ViewPager.它是google SDk中自带的一个附加包的一个类,可以用来实现屏幕间的切换. 这个附加包是and

Android使用TabLayou+fragment+viewpager实现滑动切换页面效果

TabLayou 主要实现的是标题头的 滑动 这个 控件 类似于 ScrollView XML中的布局 <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <android.support.design.widget.TabLayout a

Android开发实例之登录界面的实现_Android

本文要演示的Android开发实例是如何完成一个Android中的miniTwitter登录界面,下面将分步骤讲解怎样实现图中的界面效果,让大家都能轻松的做出美观的登录界面.        miniTwitter登录界面效果图        先贴上最终要完成的效果图:        miniTwitter登录界面的布局分析        首先由界面图分析布局,基本可以分为三个部分,下面分别讲解每个部分.        第一部分是一个带渐变色背景的LinearLayout布局,关于背景渐变色就不再

Android中标签容器控件的实例详解_Android

前言 在一些APP中我们可以看到一些存放标签的容器控件,和我们平时使用的一些布局方式有些不同,它们一般都可以自动适应屏幕的宽度进行布局,根据对自定义控件的一些理解,今天写一个简单的标签容器控件,给大家参考学习. 下面这个是我在手机上截取的一个实例,是在MIUI8系统上截取的 这个是我实现的效果图 原理介绍 根据对整个控件的效果分析,大致可以将控件分别从以下这几个角度进行分析: 1.首先涉及到自定义的ViewGroup,因为现有的控件没法满足我们的布局效果,就涉及到要重写onMeasure和onL

Android高仿微信聊天界面代码分享_Android

微信聊天现在非常火,是因其界面漂亮吗,哈哈,也许吧.微信每条消息都带有一个气泡,非常迷人,看起来感觉实现起来非常难,其实并不难.下面小编给大家分享实现代码. 先给大家展示下实现效果图: OK,下面我们来看一下整个小项目的主体结构: 下面是Activity的代码: package com.way.demo; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; import jav