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;
import android.util.attributeset;
import android.util.displaymetrics;
import android.view.layoutinflater;
import android.view.view;
import android.view.viewgroup;
import android.view.animation.linearinterpolator;
import android.view.animation.translateanimation;
import android.widget.horizontalscrollview;
import android.widget.imageview;
import android.widget.radiobutton;
import android.widget.radiogroup;
import android.widget.radiogroup.oncheckedchangelistener;

public class synchorizontalscrollview extends horizontalscrollview {

 private view view;
 private imageview leftimage;
 private imageview rightimage;
 private int windowwitdh = 0;
 private activity mcontext;
 private radiogroup rg_nav_content;
 private imageview iv_nav_indicator;
 private layoutinflater minflater;
 private int indicatorwidth;// 每个标签所占的宽度
 private int currentindicatorleft = 0;// 当前所在标签页面的位移
 private viewpager mviewpager;//与本view相关联的viewpager

 public synchorizontalscrollview(context context) {
  super(context);
  // todo auto-generated constructor stub
 }

 public synchorizontalscrollview(context context, attributeset attrs) {
  super(context, attrs);
  // todo auto-generated constructor stub
 }

 /**
  *
  * @param mviewpager与本view关联的viewpager
  * @param leftimage左箭头
  * @param rightimage右箭头
  * @param tabtitle 标签数组，对应各个标签的名称
  * @param count一页显示的标签数
  * @param context
  */
 public void setsomeparam(viewpager mviewpager, imageview leftimage,
   imageview rightimage, string[] tabtitle, int count, activity context) {
  this.mcontext = context;
  this.mviewpager = mviewpager;
  minflater = layoutinflater.from(context);
  this.view = minflater.inflate(r.layout.sync_hsv_item, null);
  this.addview(view);
  this.leftimage = leftimage;
  this.rightimage = rightimage;
  displaymetrics dm = new displaymetrics();
  context.getwindowmanager().getdefaultdisplay().getmetrics(dm);
  windowwitdh = dm.widthpixels;
  indicatorwidth = windowwitdh / count;
  init(tabtitle);
  this.invalidate();
 }

 private void init(string[] tabtitle) {
  rg_nav_content = (radiogroup) view.findviewbyid(r.id.rg_nav_content);
  iv_nav_indicator = (imageview) view.findviewbyid(r.id.iv_nav_indicator);
  initindicatorwidth();
  initnavigationhsv(tabtitle);
  setlistener();
 }

 // 初始化滑动下标的宽
 private void initindicatorwidth() {
  viewgroup.layoutparams cursor_params = iv_nav_indicator
    .getlayoutparams();
  cursor_params.width = indicatorwidth;
  iv_nav_indicator.setlayoutparams(cursor_params);
 }

 // 添加顶部标签
 private void initnavigationhsv(string[] tabtitle) {
  rg_nav_content.removeallviews();
  for (int i = 0; i < tabtitle.length; i++) {
   radiobutton rb = (radiobutton) minflater.inflate(
     r.layout.nav_radiogroup_item, null);
   rb.setid(i);
   rb.settext(tabtitle[i]);
   rb.setlayoutparams(new layoutparams(indicatorwidth,
     layoutparams.match_parent));
   rg_nav_content.addview(rb);
  }

 }

 private void setlistener() {
  rg_nav_content
    .setoncheckedchangelistener(new oncheckedchangelistener() {
     @override
     public void oncheckedchanged(radiogroup group, int checkedid) {
      if (rg_nav_content.getchildat(checkedid) != null) {
       translateanimation animation = new translateanimation(
         currentindicatorleft,
         ((radiobutton) rg_nav_content
           .getchildat(checkedid)).getleft(),
         0f, 0f);
       animation.setinterpolator(new linearinterpolator());
       animation.setduration(100);
       animation.setfillafter(true);

       // 执行位移动画
       iv_nav_indicator.startanimation(animation);
       mviewpager.setcurrentitem(checkedid); // viewpager
                 // 跟随一起 切换
       // 记录当前 下标的距最左侧的 距离
       currentindicatorleft = ((radiobutton) rg_nav_content
         .getchildat(checkedid)).getleft();
       smoothscrollto(
         (checkedid > 1 ? ((radiobutton) rg_nav_content
           .getchildat(checkedid)).getleft()
           : 0)
           - ((radiobutton) rg_nav_content
             .getchildat(2)).getleft(),
         0);
      }
     }
    });
 }

 /**
  * 模拟点击事件，供外部调用
  * @param position
  */
 public void performlabelclick(int position) {
  if (rg_nav_content != null && rg_nav_content.getchildcount() > position) {
   ((radiobutton) rg_nav_content.getchildat(position)).performclick();
  }
 }

 // 显示和隐藏左右两边的箭头
 protected void onscrollchanged(int l, int t, int oldl, int oldt) {
  super.onscrollchanged(l, t, oldl, oldt);
  if (!mcontext.isfinishing() && view != null && rightimage != null
    && leftimage != null) {
   if (view.getwidth() <= windowwitdh) {
    leftimage.setvisibility(view.gone);
    rightimage.setvisibility(view.gone);
   } else {
    if (l == 0) {
     leftimage.setvisibility(view.gone);
     rightimage.setvisibility(view.visible);
    } else if (view.getwidth() - l == windowwitdh) {
     leftimage.setvisibility(view.visible);
     rightimage.setvisibility(view.gone);
    } else {
     leftimage.setvisibility(view.visible);
     rightimage.setvisibility(view.visible);
    }
   }
  }
 }
}

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
        <relativelayout
                android:id="@+id/rl_nav"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="top"
                android:background="#5ab0eb" >

                <radiogroup
                    android:id="@+id/rg_nav_content"
                    android:layout_width="fill_parent"
                    android:layout_height="38dip"
                    android:layout_alignparenttop="true"
                    android:background="#f2f2f2"
                    android:orientation="horizontal" >
                </radiogroup>

                <imageview
                    android:id="@+id/iv_nav_indicator"
                    android:layout_width="1dip"
                    android:layout_height="5dip"
                    android:layout_alignparentbottom="true"
                    android:background="#5ab0eb"
                    android:contentdescription="@string/nav_desc"
                    android:scaletype="matrix" />
            </relativelayout>

</linearlayout>

<?xml version="1.0" encoding="utf-8"?>
<radiobutton xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dip"
    android:layout_height="fill_parent"
    android:background="#f2f2f2"
    android:button="@null"
    android:checked="true"
    android:gravity="center"
    android:text=""
    android:textcolor="@drawable/rb_blue_bg"
    android:textsize="14.0dip" />