欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

详解Android中ViewPager的PagerTabStrip子控件的用法

程序员文章站 2024-02-26 09:31:16
我们先来看一个小例子: 可以看到,效果实现的也是很棒,比之前自定义的标签指示器更加的流畅。下面,简单介绍一下 pagertabstrip和它的使用。 pager...

我们先来看一个小例子:

详解Android中ViewPager的PagerTabStrip子控件的用法

可以看到,效果实现的也是很棒,比之前自定义的标签指示器更加的流畅。下面,简单介绍一下 pagertabstrip和它的使用。

pagertabstrip是v4支持包里面的类,是viewpager专用的类,不能在其他地方使用。在使用的时候,我们只需要在viewpager的布局里面声明即可。

    如下面的代码

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="@android:color/white"
 android:orientation="vertical" >

 <android.support.v4.view.viewpager
  android:id="@+id/viewpager"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >

  <android.support.v4.view.pagertabstrip
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_gravity="top"
   android:background="@android:color/holo_blue_light"
   android:textcolor="@android:color/white" />
 </android.support.v4.view.viewpager>

</linearlayout>

我们可以设置layout_gravity属性,比如top或者是bottom,来控制显示的位置。除此之外,不需要进行其他设置。

    剩下的,就是我们需要在代码里面实现的了。

import java.util.arraylist;
import java.util.list;

import android.os.bundle;
import android.support.v4.app.fragment;
import android.support.v4.app.fragmentactivity;
import android.support.v4.app.fragmentpageradapter;
import android.support.v4.view.viewpager;

public class pagertabstripactivity extends fragmentactivity {

 private list<fragment> fragments;
 private viewpager viewpager;
 private list<string> titlelist;

 @override
 public void oncreate(bundle savedinstancestate) {
  super.oncreate(savedinstancestate);
  setcontentview(r.layout.main);
  initview();
 }

 private void initview() {
  viewpager = (viewpager) findviewbyid(r.id.viewpager);

  titlelist = new arraylist<string>();
  titlelist.add("最新推荐");
  titlelist.add("游戏娱乐");
  titlelist.add("影音视频");

  fragments = new arraylist<fragment>();
  fragments.add(new myfragment(android.r.color.holo_green_light));
  fragments.add(new myfragment(android.r.color.holo_orange_light));
  fragments.add(new myfragment(android.r.color.holo_red_light));

  fragmentpageradapter adapter = new fragmentpageradapter(
    getsupportfragmentmanager()) {

   @override
   public int getcount() {
    return 3;
   }

   @override
   public fragment getitem(int position) {
    return fragments.get(position);
   }

   @override
   public charsequence getpagetitle(int position) {
    return titlelist.get(position);
   }

  };

  viewpager.setadapter(adapter);

 }
}

在上面的代码里面,展现了我们如何控制标题的文字,我们只需要重写getpagertitle方法即可。
下面我们再来结合例子细说一下pagertabstrip:

pagertabstrip是viewpager的一个关于当前页面、上一个页面和下一个页面的一个可交互的指示器。它经常作为viewpager控件的一个子控件被被添加在xml布局文件中。在你的布局文件中,将它作为子控件添加在viewpager中。而且要将它的 android:layout_gravity 属性设置为top或bottom来将它显示在viewpager的顶部或底部。每个页面的标题是通过适配器的getpagetitle(int)函数提供给viewpager的。
用法与pagertitlestrip完全相同,即:

1、首先,文中提到:在你的布局文件中,将它作为子控件添加在viewpager中。

2、第二,标题的获取,是重写适配器的getpagetitle(int)函数来获取的。

看看实例:
1、xml布局

<relativelayout 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" 
  tools:context="com.example.testviewpage_2.mainactivity" > 
 
  <android.support.v4.view.viewpager 
    android:id="@+id/viewpager" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center"> 
     
        <android.support.v4.view.pagertabstrip 
      android:id="@+id/pagertab" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"  
      android:layout_gravity="top"/> 
     
  </android.support.v4.view.viewpager> 
 
</relativelayout> 

可以看到,同样,是将pagertabstrip作为viewpager的一个子控件直接插入其中,当然android:layout_gravity=""的值一样要设置为top或bottom。
2、重写适配器的getpagetitle()函数
全部代码:

package com.example.testviewpage_2; 


import java.util.arraylist; 
import java.util.list; 
 
import android.app.activity; 
import android.os.bundle; 
import android.support.v4.view.pageradapter; 
import android.support.v4.view.viewpager; 
import android.view.layoutinflater; 
import android.view.view; 
import android.view.viewgroup; 
 
public class mainactivity extends activity { 
 
  private view view1, view2, view3; 
  private list<view> viewlist;// view数组 
  private viewpager viewpager; // 对应的viewpager 
 
  private list<string> titlelist; 
 
  @override 
  protected void oncreate(bundle savedinstancestate) { 
    super.oncreate(savedinstancestate); 
    setcontentview(r.layout.activity_main); 
 
    viewpager = (viewpager) findviewbyid(r.id.viewpager); 
    layoutinflater inflater = getlayoutinflater(); 
    view1 = inflater.inflate(r.layout.layout1, null); 
    view2 = inflater.inflate(r.layout.layout2, null); 
    view3 = inflater.inflate(r.layout.layout3, null); 
 
    viewlist = new arraylist<view>();// 将要分页显示的view装入数组中 
    viewlist.add(view1); 
    viewlist.add(view2); 
    viewlist.add(view3); 
 
    titlelist = new arraylist<string>();// 每个页面的title数据 
    titlelist.add("王鹏"); 
    titlelist.add("姜语"); 
    titlelist.add("结婚"); 
 
    pageradapter pageradapter = new pageradapter() { 
 
      @override 
      public boolean isviewfromobject(view arg0, object arg1) { 
        // todo auto-generated method stub 
        return arg0 == arg1; 
      } 
 
      @override 
      public int getcount() { 
        // todo auto-generated method stub 
        return viewlist.size(); 
      } 
 
      @override 
      public void destroyitem(viewgroup container, int position, 
          object object) { 
        // todo auto-generated method stub 
        container.removeview(viewlist.get(position)); 
      } 
 
      @override 
      public object instantiateitem(viewgroup container, int position) { 
        // todo auto-generated method stub 
        container.addview(viewlist.get(position)); 
 
        return viewlist.get(position); 
      } 
 
      @override 
      public charsequence getpagetitle(int position) { 
         
        return titlelist.get(position); 
      } 
    }; 
 
    viewpager.setadapter(pageradapter); 
 
  } 
 
} 

这里的代码与pagertitlestrip的完全相同,就不再讲解了。
就这样,我们就讲完了有关pagertabstrip的简单使用方法。下面讲一讲pagertabstrip的扩展。

3、扩展:pagertabstrip属性更改
在源码中,大家可以看到有个工程叫testviewpage_pagertabstrip_extension,运行一下,效果是这样的:

详解Android中ViewPager的PagerTabStrip子控件的用法详解Android中ViewPager的PagerTabStrip子控件的用法

在上面两个图中可以看到,我更改了两个地方:

(1)下划线颜色,原生是黑色,我变成了绿色;

(2)在tab标题前加了一个图片;

下面说说是如何更改的:

1、更改下划线颜色:
主要靠pagertabstrip的settabindicatorcolorresource方法;

代码如下:

pagertabstrip = (pagertabstrip) findviewbyid(r.id.pagertab); 
pagertabstrip.settabindicatorcolorresource(r.color.green); 

2、添加标题——重写适配器charsequence getpagetitle(int)方法
在charsequence getpagetitle(int position)方法返回值是,我们不返回string对象,而采用spannablestringbuilder来构造了下包含图片的扩展string对像;
具体代码如下,不再细讲,大家可以看看spannablestringbuilder的使用方法,就可理解了。

@override 
public charsequence getpagetitle(int position) { 
 
  spannablestringbuilder ssb = new spannablestringbuilder(" "+titlelist.get(position)); // space added before text 
                    // for 
  drawable mydrawable = getresources().getdrawable( 
      r.drawable.ic_launcher); 
  mydrawable.setbounds(0, 0, mydrawable.getintrinsicwidth(), 
      mydrawable.getintrinsicheight()); 
  imagespan span = new imagespan(mydrawable, 
      imagespan.align_baseline); 
 
  foregroundcolorspan fcs = new foregroundcolorspan(color.green);// 字体颜色设置为绿色 
  ssb.setspan(span, 0, 1, spannable.span_exclusive_exclusive);// 设置图标 
  ssb.setspan(fcs, 1, ssb.length(), 
      spannable.span_exclusive_exclusive);// 设置字体颜色 
  ssb.setspan(new relativesizespan(1.2f), 1, ssb.length(), 
      spannable.span_exclusive_exclusive); 
  return ssb; 
}