android配合viewpager實(shí)現(xiàn)可滑動(dòng)的標(biāo)簽欄示例分享

更新時(shí)間：2014年02月16日 16:15:19 作者：

本文主要介紹了android實(shí)現(xiàn)可滑動(dòng)的標(biāo)簽欄示例，配合viewpager作為標(biāo)簽欄，且可以設(shè)置每頁顯示的標(biāo)簽個(gè)數(shù)，超出可滑動(dòng)顯示,需要的朋友可以參考下

復(fù)制代碼代碼如下:

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;// 每個(gè)標(biāo)簽所占的寬度
private int currentIndicatorLeft = 0;// 當(dāng)前所在標(biāo)簽頁面的位移
private ViewPager mViewPager;//與本view相關(guān)聯(lián)的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關(guān)聯(lián)的viewpager
* @param leftImage左箭頭
* @param rightImage右箭頭
* @param tabTitle 標(biāo)簽數(shù)組，對(duì)應(yīng)各個(gè)標(biāo)簽的名稱
* @param count一頁顯示的標(biāo)簽數(shù)
* @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();
}

// 初始化滑動(dòng)下標(biāo)的寬
private void initIndicatorWidth() {
  ViewGroup.LayoutParams cursor_Params = iv_nav_indicator
    .getLayoutParams();
  cursor_Params.width = indicatorWidth;
  iv_nav_indicator.setLayoutParams(cursor_Params);
}

// 添加頂部標(biāo)簽
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);

       // 執(zhí)行位移動(dòng)畫
       iv_nav_indicator.startAnimation(animation);
       mViewPager.setCurrentItem(checkedId); // ViewPager
                 // 跟隨一起切換
       // 記錄當(dāng)前下標(biāo)的距最左側(cè)的距離
       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);
      }
     }
    });
}

/**
* 模擬點(diǎn)擊事件，供外部調(diào)用
* @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);
    }
   }
  }
}
}

復(fù)制代碼代碼如下:

<?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" >

</LinearLayout>

復(fù)制代碼代碼如下:

<?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" />

您可能感興趣的文章: