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

主要布局文件:

<?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 = ;
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 = ;// 当前所在标签页面的位移
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 = ; 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();
animation.setFillAfter(true); // 执行位移动画
iv_nav_indicator.startAnimation(animation); // 记录当前 下标的距最左侧的 距离
currentIndicatorLeft = indicatorWidth * checkedId;
scrollX = (checkedId > ? currentIndicatorLeft: )- indicatorWidth * ;
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, );
}
}; // 显示和隐藏左右两边的箭头
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 == ) {
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

												

ViewPager + HorizontalScrollView 实现可滚动的标签栏的更多相关文章

  1. android Viewpager HorizontalScrollView 实现分页栏拖拽

    源码:http://files.cnblogs.com/android100/ViewPaperDemo.rar首先我们先看一个效果:  前两个是网易的,它做的title不能拖拽,.不过点击动画效果挺 ...

  2. Android ViewPager+HorizontalScrollView实现标题栏滑动(腾讯新闻)

    1) ViewPager提供了左右滑动切换页面的方法,但是它所提供的标题只是无语,估计没有真正的项目会照搬拿过来;并且它只能一页一页滑,我想直接查看最后一页要滑半天; 2) 看了腾讯新闻客户端感觉体验 ...

  3. 使用TabLayout快速实现一个导航栏

    在没有Material Design的年代,要实现一个类似微信主页面的效果,我们有以下几种解决方案: 1.Fragment + ViewPager  +  RadioGroup自定义固定导航条 2.F ...

  4. viewpager+fragment+HorizontalScrollView详细版

    XML布局 <HorizontalScrollView            android:id="@+id/hsv"            android:layout_ ...

  5. viewpager+fragment+HorizontalScrollView

    xml布局 <RelativeLayout        android:id="@+id/rl_column"        android:layout_width=&q ...

  6. Android 自定义View修炼-自定义HorizontalScrollView视图实现仿ViewPager效果

    开发过程中,需要达到 HorizontalScrollView和ViewPager的效果,于是直接重写了HorizontalScrollView来达到实现ViewPager的效果. 实际效果图如下: ...

  7. Android重写HorizontalScrollView仿ViewPager效果

    Android提供的ViewPager类太复杂,有时候没有必要使用,所以重写一个HorizontalScrollView来实现类似的效果,也可以当做Gallery来用 思路很简单,就是重写onTouc ...

  8. 禁用滚动视图ListView、ViewPager、ScrollView、HorizontalScrollView、WebView边界颜色渐变

    禁用滚动视图ListView.ViewPager.ScrollView.HorizontalScrollView.WebView边界颜色渐变 ListView.ViewPager.ScrollView ...

  9. Android重写HorizontalScrollView模仿ViewPager效果

    Android提供的ViewPager类太复杂,有时候没有必要使用,所以重写一个HorizontalScrollView来实现类似的效果,也可以当做Gallery来用 思路很简单,就是重写onTouc ...

随机推荐

  1. Django模板-模板标签

    接着Django模板-基础知识继续写模板相关知识. if标签 {% if %} 标签接受 and , or 或者 not 关键字来对多个变量做判断 ,或者对变量取反( not ). 但是不允许在同一个 ...

  2. weiphp 微信公众号用程序来设置指定内容消息回复业务逻辑操作

    微信公众号机器人回复设置 在公众号插件里面的Robot- Model- weixinAddonModel.php里面的 reply设置 reply($dataArr,$keywordArr) 解析方法 ...

  3. 预定义变量 - PHP手册笔记

    预定义变量将所有的外部变量表示成内建环境变量,并且将错误信息表示成返回头.超全局变量是在全部作用域中始终可用的内置变量.在函数或方法中无需执行global $variable,就可以访问它们. $GO ...

  4. HTML5新属性-----拖放

    最早引入JS拖放功能的是IE4,当时,网页中只有两种对象可以拖放:图像和某些文本.拖动图像时,把鼠标放在图像上,按住鼠标不放就可以拖动它.拖动文本时,需要选中文本,然后可以像拖动图像一样拖动被选中的文 ...

  5. Spring包的方法WebUtils.getParametersStartingWith(request,String)

    举个例子,比如页面上有 <input type="text" name="p_name" value="aileen"> < ...

  6. PSAM SAM

    第一个问题: 为什么要用SAM? 究竟谁最开始使用SAM这个词,已经无从考证,能够确认的是:这个世界上先有了PSAM,然后才有了SAM.由于网络状况的原因,或者是应用环境的要求,使用IC卡作为支付介质 ...

  7. GDI编程

    图形设备接口(GDI)是一个可执行程序,它接受Windows应用程序的绘图请求(表现为GDI函数调用),并将它们传给相应的设备驱动程序,完成特定于硬件的输出,象打印机输出和屏幕输出.GDI负责Wind ...

  8. c语言结构体排序示例

    设计性实验编程实现对学生成绩表的相关信息排序.实验要求:⑴ 建立一个由n个学生的考试成绩表,每条信息由学号.姓名和分数组成.⑵ 按学号排序,并输出排序结果.⑶ 按分数排序,分数相同的则按学号有序,并输 ...

  9. Swift 设置navigation左右两侧按钮

    我们以设置右侧按钮为例,左侧方法类似 方法一,直接自定义文字 let item=UIBarButtonItem(title: "分享", style: UIBarButtonIte ...

  10. NPOI.dll 用法。单元格,样式,字体,颜色,行高,宽度。读写excel

    NPOI.dll 用法.单元格,样式,字体,颜色,行高,宽度.读写excel 转载:http://yuncode.net/code/c_531e679b3896495 view source prin ...