文档章节

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

c
 cywaker
发布于 2014/02/18 13:08
字数 1105
阅读 35331
收藏 9

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

在此输入图片描述

主要布局文件:

<!-- lang: xml -->
<?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

<!-- lang: 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" />

以下是工具类代码:

<!-- lang: java -->
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的空标签。 如果大家有遇到此问题或是有解决方法,欢迎告知,谢谢。

附上代码下载地址: http://www.oschina.net/code/snippet_1409622_33243

© 著作权归作者所有

c
粉丝 1
博文 25
码字总数 5895
作品 0
福州
私信 提问
加载中

评论(10)

花一样的男人
你现在有完整demo吗?QQ815541014 能否发个 急用,谢谢
花一样的男人

引用来自“hubeilijunhui”的评论

没有完整的demo吗?能否发一个 2286445239@qq.com
急需,谢谢
你现在有完整demo吗?QQ815541014 能否发个 急用,谢谢
花一样的男人

引用来自“hubeilijunhui”的评论

没有完整的demo吗?能否发一个 2286445239@qq.com
急需,谢谢
你现在有完整demo吗?QQ815541014 能否发个 急用,谢谢
独尊孤鹰
请问这个怎么定位呢,比如从上一级进来的时候定位到后面的标签页显示。
sdylag
sdylag
很不错,在原来的基础上升级并封装成独立自定义View,解决了滑动问题,让外界可设定加载的当前Tab及indicator显示。。。
总之,谢谢7983
jackmeng
jackmeng
能给个完整的demo吗?能否发一个1225573531@qq.com?,急需,谢谢!
c
cywaker 博主

引用来自“Clelsea”的评论

sync_nav_radiogroup_item xml文件,貌似没有发吧。
sync_nav_radiogroup_item就是标签的布局
一字铸骨
做了 但是不知道到底是哪儿报空指针 有没有完整的demo?求给发个 446440732@qq.com
hubeilijunhui
hubeilijunhui
没有完整的demo吗?能否发一个 2286445239@qq.com
急需,谢谢
Clelsea
Clelsea
sync_nav_radiogroup_item xml文件,貌似没有发吧。
viewpager跟HorizontalScrollView,listview冲突的问题

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_35959554/article/details/72629399 这几天做到一个小qpp,发现一个严重的问题,因为主要布局是一个H...

浪克oo
2017/05/22
0
0
Android ViewPager和ScrollView嵌套滚动问题解决方案

问题描述: 我的嵌套是ViewPager-->ScrollView-->ViewPager. 首先最里面的ViewPager水平滚动时总是会触发最外层的ViewPager滚动,看了网上很多的解决办法基本上是一样的,需要自定义ViewPag...

冰珊孤雪
2015/04/22
12.5K
2
ViewPager2:官方Viewpager升级版来临

这两天浏览安卓开发者官网的时候,发现google悄然推出了一个新的控件:ViewPager2,一看名称就知道这是一个和我们常用的ViewPager功能相似的控件,算是ViewPager的升级版吧。目前还只是推出了...

大头呆
02/21
0
0
FragmentTabHost中嵌入ViewPager并且使用Fragment实现上下标签栏切换内容显示效果

FragmentTabHost中嵌入ViewPager并且使用Fragment实现上下标签栏切换内容显示效果 为什么FragmentTabHost的Tab切换之后ViewPager所在的Fragment的子Fragment中数据无法加载呢?...

路峰
2014/09/03
867
2
Android NestedScrollView/ScrollView包裹ViewPager自适应高度

Android NestedScrollView/ScrollView包裹ViewPager自适应高度 当Android的NestedScrollView/ScrollView这类滚动View包裹ViewPager时候,ViewPager中的Fragment包含的又是一系列高度值不固定...

zhangphil
2018/05/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
12
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部