首页 > Android > 正文

ViewPager + HorizontalScrollView 实现可滚动的标签栏

2016-04-01 Android 3219 ℃ 0 评论

这是一个可滑动的标签栏的自定义控件,参考此文章http://blog.csdn.net/fx_sky/article/details/8990573,我将主要的功能整合成一个类,配上2个特定的布局即可使用。
效果图:

    121310_BPHR_1409622.png121331_JUzQ_1409622.png

主要布局文件:

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

             <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="#FF0000"
                 android:contentDescription="@string/mygo_share"
                 android:scaleType="matrix" />
       </RelativeLayout>
</LinearLayout>

标签的布局:
sync_nav_radiogroup_item.xml

<?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:textSize="15sp" />

以下是工具类代码:

import android.app.Activity;
import android.content.Context;
import android.support.v4.view.ViewPager;
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 count;// 屏幕显示的标签个数
    private int indicatorWidth;// 每个标签所占的宽度
    private int currentIndicatorLeft = 0;// 当前所在标签页面的位移
    private ViewPager mViewPager;    
    private int scrollX;    
    
    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
     * @param leftImage 左箭頭
     * @param rightImage 右箭頭
     * @param tabTitle 標籤欄的名稱
     * @param count 一頁顯示的標籤個數
     * @param context 
     * <pre>
     * 修改日期      修改人       修改说明
     * 2014-2-17   chen     新建
     * </pre>
     */
    public void setSomeParam(ViewPager mViewPager, ImageView leftImage,
            ImageView rightImage, String[] tabTitle, int count, Activity context) {        
        this.mContext = context;        
        this.mViewPager = mViewPager;        
        // this.view = view;
        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;        this.count = count;
        indicatorWidth = windowWitdh / count;
        init(tabTitle);
    }    
    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.sync_nav_radiogroup_item, null);
            rb.setId(i);
            rb.setText(tabTitle[i]);
            rb.setLayoutParams(new LayoutParams(indicatorWidth,
                    LayoutParams.MATCH_PARENT));
            rg_nav_content.addView(rb);
        }
        RadioButton rb = (RadioButton) mInflater.inflate(
                R.layout.sync_nav_radiogroup_item, null);
        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) {
                            moveAnimation(checkedId);
                            mViewPager.setCurrentItem(checkedId); // ViewPager
                            // 跟随一起 切换
                        }
                    }
                });
    }    
    //动画移动效果
    private void moveAnimation(int checkedId){
        TranslateAnimation animation = new TranslateAnimation(currentIndicatorLeft,
                indicatorWidth * checkedId,0f, 0f);
        animation.setInterpolator(new LinearInterpolator());
        animation.setDuration(100);
        animation.setFillAfter(true);        // 执行位移动画
        iv_nav_indicator.startAnimation(animation);        // 记录当前 下标的距最左侧的 距离
        currentIndicatorLeft = indicatorWidth * checkedId;
        scrollX = (checkedId > 1 ? currentIndicatorLeft: 0)- indicatorWidth * 2;        
        this.post(runnable);
    }    
    // 模拟点击事件
    public void performLabelClick(int position) {        
            if (rg_nav_content != null && rg_nav_content.getChildCount() > position) {
            ((RadioButton) rg_nav_content.getChildAt(position)).performClick();
        }
    }    
    private Runnable runnable = new Runnable() {        
        @Override
        public void run() {
            // TODO Auto-generated method stub
            smoothScrollTo(scrollX, 0);
        }
    };    
    // 显示和隐藏左右两边的箭头
    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);
                }
            }
        }
    }    
    public int getIndicatorWidth(){        
            return indicatorWidth;
    }
}

在调用时,先调用setSomeParam方法将需要用的的控件与数据传入,然后控件内部开始初始化。
由于项目有需求,要在进入此控件使 用到的页面时,自动定位到某一个标签,在此需使用View.post方法执行HorizontalScrollView 控件的smoothScrollTo方法,才能确保进入页面后标签已定位。原因是scrollTo方法要等到界面显示完毕才能有效,而view.post 方法也是在界面刷新完毕之后才执行。
定义一个performLabelClick方法,让外部调用此类来实现相应的页面跳转即可。

不过此处使用时有一个问题,就是从上一级页面跳转至此页面时,无法固定在最后一个标签位,调试时发现虽然执行了 performLabelClick方法模拟点击事件,但是监听事件并没有被响应。暂时没找出问题所在。不过用了一个方法来解决此问题,即在调用 initNavigationHSV方法添加标签时,为其多加一个空标签,宽度为0即可,这样即可解决标签栏上无法定位到最后一位的问题,因为真正的最后 一位实际上是宽度为0的空标签。 

日历
«    2024年3月    »
123
45678910
11121314151617
18192021222324
25262728293031
标签列表
最近发表
友情链接