Android中使用PagerSlidingTabStrip实现导航标题的示例

此开源框架官网地址:https://github.com/astuetz/PagerSlidingTabStrip

可以理解为配合ViewPager使用的交互式页面指示器控件。

话不多说,先上效果图:

为了演示其中的pstsIndicatorHeight与pstsUnderlineHeight 的区别,进行了不同的设置已区分效果(做了去除actionbar处理)。大家可以很直观的看出相比之前单独使用ViewPager以及ViewPager与Fragement嵌套,本次演示PagerSlidingTabStrip的使用,为页面导航提供了相对更加绚丽的切换效果,下面我们就介绍下PagerSlidingTabStrip的使用。

前期相关博文推荐:

Android中Fragment和ViewPager那点事儿

Android中使用ViewPager实现屏幕页面切换和页面轮播效果

一、基本属性介绍

  • apstsIndicatorColor //Color of the sliding indicator  滑动条的颜色
  • pstsUnderlineColor //Color of the full-width line onthe bottom of the view  滑动条所在的那个全宽线的颜色
  • pstsDividerColor //Color of the dividers betweentabs   每个标签的分割线的颜色
  • pstsIndicatorHeight //Height of the sliding indicator      滑动条的高度
  • pstsUnderlineHeight //Height of the full-width line onthe bottom of the view    滑动条所在的那个全宽线的高度
  • pstsDividerPadding //Top and bottom padding of thedividers   分割线底部和顶部的填充宽度
  • pstsTabPaddingLeftRight //Left and right padding of eachtab   每个标签左右填充宽度
  • pstsScrollOffset //Scroll offset of the selectedtab
  • pstsTabBackground //Background drawable of each tab,should be a StateListDrawable  每个标签的背景,应该是一个StateListDrawable
  • pstsShouldExpand //If set to true, each tab isgiven the same weight, default false   如果设置为true,每个标签是相同的控件,均匀平分整个屏幕,默认是false
  • pstsTextAllCaps //If true, all tab titles will beupper case, default true   如果为true,所有标签都是大写字母,默认为true

所有的属性都有他们自己的getter和setter方法来随时改变他们

二、本次演示的代码结构

三、设置去除ActionBar

在res/values/styles.xml中设置

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

整体xml文件如下:

<resources>
  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
  </style>
</resources>

四、导依赖包

使用AndroidStudio2.2。仍然采用在build.gradle下中dependencies下直接添加如下代码:

compile 'com.astuetz:pagerslidingtabstrip:1.0.1'

五、layout布局文件

布局前对颜色做了一些引用设置,res/values/colors.xml文件如下:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="colorPrimary">#3F51B5</color>
  <color name="colorPrimaryDark">#303F9F</color>
  <color name="colorAccent">#FF4081</color>

  <color name="color_theme">#489cfa</color>
  <color name="transparent">#00000000</color>
  <color name="yellow">#fc9630</color>
</resources>

(1)主布局文件activity_main.xml

PagerSlidingTabStrip配合ViewPager一起使用,本次将ViewPager放置在PagerSlidingTabStrip下面,具体布局文件如下(大家根据前文中的属性解释来对照不理解的属性,注意添加app命名空间):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/activity_main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.mly.panhouye.pagerslidingtabstripdemo.MainActivity">
  <com.astuetz.PagerSlidingTabStrip
    android:id="@+id/pst"
    android:layout_width="match_parent"
    android:layout_height="48dip"
    android:background="@color/color_theme"
    app:pstsShouldExpand="true"
    app:pstsTabBackground="@color/transparent"
    app:pstsIndicatorHeight="5dp"
    app:pstsIndicatorColor="@color/yellow"
    app:pstsTextAllCaps="false"
    app:pstsUnderlineHeight="15dp"
  />
  <android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/pst"/>
</RelativeLayout>

(2)对应的Fragment布局文件

本次仅演示简单效果,fragment_pan, fragment_hou, fragment_ye每个布局文件仅仅文字不同,这里仅演示其中一个fragment_pan.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical" android:layout_width="match_parent"
  android:layout_height="match_parent">
  <TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:text="潘"
    android:textSize="100sp"
    />
</LinearLayout>

(3)每个fragment要用来填充对应的fragment类,演示ragment_pan.xml布局对应的fragmen类HouFragment.java:
package com.mly.panhouye.pagerslidingtabstripdemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
 * Created by panchengjia on 2017/1/15 0015.
 */
public class HouFragment extends Fragment {
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view =inflater.inflate(R.layout.fragment_hou,null);
    return view;
  }
}

六、Java实现代码

package com.mly.panhouye.pagerslidingtabstripdemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import com.astuetz.PagerSlidingTabStrip;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
  PagerSlidingTabStrip pst;
  ViewPager viewPager;
  ArrayList<Fragment> fragments;
  //声明pst的标题
  String[] titles = {"潘","侯","爷"};
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    pst= (PagerSlidingTabStrip) findViewById(R.id.pst);
    viewPager= (ViewPager) findViewById(R.id.pager);

    fragments = new ArrayList<>();
    HouFragment houFragment = new HouFragment();
    PanFragment panFragment = new PanFragment();
    YeFragment yeFragment = new YeFragment();
    //添加fragment到集合中时注意顺序
    fragments.add(panFragment);
    fragments.add(houFragment);
    fragments.add(yeFragment);
    FragmentManager fragmentManager = getSupportFragmentManager();
    viewPager.setAdapter(new MyPagerAdapter(fragmentManager,titles,fragments));
    viewPager.setCurrentItem(0);
    //当ViewPager的onPagerChangeListener回调时,PagerSlidingTabStrip也一起随之变动
    //具体做法都已封装到了PagerSlidingTabStrip.setViewPager()方法里,使用时调用实例如下
    pst.setViewPager(viewPager);
    pst.setTextSize(30);
  }

  /**
   * 自定义适配器
   */
  class MyPagerAdapter extends FragmentPagerAdapter {
    private String[] titles;
    ArrayList<Fragment> fragments;
    //根据需求定义构造方法,方便外部调用
    public MyPagerAdapter(FragmentManager fm, String[] titles, ArrayList<Fragment> fragments) {
      super(fm);
      this.titles = titles;
      this.fragments = fragments;
    }
    //设置每页的标题
    @Override
    public CharSequence getPageTitle(int position) {
      return titles[position];
    }
    //设置每一页对应的fragment
    @Override
    public Fragment getItem(int position) {
      return fragments.get(position);
    }
    //fragment的数量
    @Override
    public int getCount() {
      return fragments.size();
    }
  }
}

本次仅仅演示的是PagerSlidingTabStrip最最基本的使用方法,大家可以尝试使用它搞出更加绚丽的切换效果,干吧。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

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

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

  • Android中使用PagerSlidingTabStrip实现导航标题的示例

    此开源框架官网地址:https://github.com/astuetz/PagerSlidingTabStrip 可以理解为配合ViewPager使用的交互式页面指示器控件. 话不多说,先上效果图: 为了演示其中的pstsIndicatorHeight与pstsUnderlineHeight 的区别,进行了不同的设置已区分效果(做了去除actionbar处理).大家可以很直观的看出相比之前单独使用ViewPager以及ViewPager与Fragement嵌套,本次演示PagerSliding

  • Android中GridView布局实现整体居中方法示例

    前言 本文主要给大家介绍了关于Android中GridView布局整体居中的相关内容,是对于自己在项目中遇到问题的一个记录,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 效果图: 示例代码: /** * 对高度和宽度进行统计 然后设置gridView的宽高. * @param numColumns 设定行数 * @param gridView */ public static void calGridViewSumWH(int numColumns ,GridView gri

  • Java及Android中常用链式调用写法简单示例

    本文实例讲述了Java及Android中常用链式调用写法.分享给大家供大家参考,具体如下: 最近发现,目前大火的许多开源框架中,大多都使用了一种"(方法).(方法).(方法)"的形式进行调用,最典型的就是RxJava.android中AlertDialog控件的源码也是这种形式的.查阅可知,大家把它叫做链式调用."行动是检验程序的唯一标准"0.0!查了.说了那么多,还是得自己写个例子并运行出预期的效果. /** * * 链式调用 * * @author k.k *

  • Android中修改TabLayout底部导航条Indicator长短的方法

    前言 对于Tablayout相信大家都不陌生,在开发中使用的应该很频繁了,但是底部导航条长短是固定死的,需要自己来改动长短,找了半天没找着方法,看了下官方建议,可以通过映射来修改自己想要的长短,其实也就几行代码的问题. 看代码: public static void setIndicator(Context context, TabLayout tabs, int leftDip, int rightDip) { Class<?> tabLayout = tabs.getClass(); Fi

  • 详解Android中使用Notification实现进度通知栏(示例三)

    我们在使用APP的过程中,软件会偶尔提示我们进行版本更新,我们点击确认更新后,会在通知栏显示下载更新进度(已知长度的进度条)以及安装情况(不确定进度条),这就是我们今天要实现的功能.实现效果如下: 在代码实现功能前,我们先解释进度条的两种状态: (1)显示一个已知长度的进度条指示器(Displaying a fixed-duration progress indicator) 为了能够显示一个确定的进度条,通过调用setProgress() setProgress(max, progress,

  • android中设置TextView/Button 走马灯(Marquee)效果示例

    在Android的ApiDemo中,有Button的走马灯效果,但是换作是TextView,还是有一点差异. 定义走马灯(Marquee),主要在Project/res/layout/main.xml即可 复制代码 代码如下: <SPAN style="COLOR: #993300"><TextView android:layout_width="40px" android:layout_height="wrap_content"

  • Android中Socket大文件断点上传示例

    什么是Socket?      所谓Socket通常也称作"套接字",用于描述IP地址和端口,是一个通信连的句柄,应用程序通常通过"套接字"向网络发送请求或者应答网络请求,它就是网络通信过程中端点的抽象表示.它主要包括以下两个协议: TCP (Transmission Control Protocol 传输控制协议):传输控制协议,提供的是面向连接.可靠的字节流服务.当客户和服务器彼此交换数据前,必须先在双方之间建立一个TCP连接,之后才能传输数据.TCP提供超时重

  • android 中ProgressDialog实现全屏效果的示例

    做项目的时候,直接用到了一个ProgressDialog,需要实现全屏的效果,如下图所示,功能跑起来的时候发现不是全屏,只是包裹了当前的内容,如下图所示,不过查找一些资料,把问题解决了. ProgressDialog 继承自AlertDialog,AlertDialog继承自Dialog,实现DialogInterface接口. ProgressDialog的创建方式有两种,一种是new Dialog ,一种是调用Dialog的静态方法Dialog.show(). // 方式一:new Dial

  • Android中验证码倒计时的简单实现方法示例

    前言 现在的很多app都是使用手机注册的,为了确认使用的是自己的手机,都会加上一个短线验证码的选项,最近公司的项目使用到了这个短信验证码,并且要加入验证码倒计时功能,也就是60秒才能发送一次验证码,再次做过记录,以后使用的时候,可以随时拿来用. 实现 发送验证码的时候一般都会有一个按钮,点击之后便会给你输入的手机发送一条验证码,我这里使用的是一个TextView,显示特定的数字,只用设置TextView的点击事件即可: Android中有一个类,可以很方便的时候该功能,但是也会存在一个问题,就是

  • Android 中ActionBar+fragment实现页面导航的实例

    Android 中ActionBar+fragment实现页面导航的实例 为保证android2.0以上均能运行,使用support.v7库下的actionbar及fragment 继承自AppCompatActivity(ActionBarActivity已过时)使用getSupportActionBar()得到ActionBar, ActionBar.Tab,这里Tab必须设置监听,在监听中实现Fragment的切换. 这里重点提一下,Theme主题一定要适配,因为我使用的是AppCompa

随机推荐