项目做完了，写写博客，在项目中遇到的一些问题，或者是自己觉得很不错的东西。这一篇主要是想和大家分享一下我在项目中封装的一个东西，就是tab选项卡。先看看效果图：
我在网上看了很多有关选项卡的demo，可是发现都不太符合我的需求，万恶的产品经理想做的效果是选项卡中的文字有多长，文字下方的线就显示多长，无奈之下，自己写了。由于项目中很多地方都有用这个东东，所以我就封装了这一个，先看看代码。
这是封装的代码：
public class ViewPagerIndicator extends HorizontalScrollView implements
OnPageChangeListener, OnClickListener {
private RelativeLayout[] tabArr;// tab数组
private String[] tabTexts;// tab标题数组
private int[] tabTextWidthArr;// tab标题宽度数组
private int currTabPosition;// 当前选中的tab
private float fromTransX;// 游标在启动动画之前的X轴坐标
private int tabSpacing;// tab之间的间距
private int cursorPadding;// tab默认和cursor长度一样
private int mTextColor = getResources().getColor(R.color.gray_666666);
private float mTextSize = 13;
private int tabLength;// tab个数
private int diviceWidth;// 设备宽度px
private float fromScaleX = 1.0f;
private int baseCursorWidth;// 初始化的游标宽度, 缩放动画每次以此为标准
private Boolean autoArrange = true;
private Boolean isPageFirstScrolled = true;
private int unSelectTextColor = getResources().getColor(R.color.gray_999999); //设置选中字体的颜色
private int selectTextColor = getResources().getColor(R.color.blue_45a7ff); //设置未选中字体的颜色
private Context mContext;
private ViewPager mViewPager;
private LinearLayout tabLy;// tab的横向线性布局
private ImageView cursor;// 游标
private Handler handler = new Handler();
View line;
public ViewPagerIndicator(Context context) {
super(context);
// TODO Auto-generated constructor stub
init();
}
public ViewPagerIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
init();
}
public ViewPagerIndicator(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// TODO Auto-generated constructor stub
init();
}
/**
* 初始化基本布局
*/
private void init() {
// TODO Auto-generated method stub
mContext = getContext();
diviceWidth = DensityUtil.getDisplayWidth((Activity) mContext);
// 设置属性
this.setBackgroundColor(getResources().getColor(R.color.white));
this.setHorizontalScrollBarEnabled(false);// 去掉滚动条
this.setVisibility(View.GONE);
// 加载ScrollView的内容布局
View v = View.inflate(mContext, R.layout.viewpager_indicator_layout, null);
tabLy = (LinearLayout) v.findViewById(R.id.main_tab);// Tab布局
cursor = (ImageView) v.findViewById(R.id.main_cursor);// 游标
line = v.findViewById(R.id.line); //获得中间那条线
this.addView(v);
}
public void setLinevisibility(boolean isShow) {
line.setVisibility(isShow ? View.VISIBLE : View.GONE);
}
/**
* 设置参数.
*
* @param tabSpacing tab间距
* @param cursorPadding 游标向左右延伸的距离, 默认为0, 也即和tab文本一样长
* @param viewPager 设置ViewPager
* @param tabTexts tab内容数组
* @param autoArrange 当tab长度不足屏幕宽度时, 是否自动进行摆列, 默认为true
*/
public void setParams(int tabSpacing, int cursorPadding, String[] tabTexts,
ViewPager viewPager, Boolean autoArrange) {
if (tabTexts == null || tabTexts.length < 1) {
return;
}
this.tabSpacing = tabSpacing;
this.cursorPadding = cursorPadding;
this.tabTexts = tabTexts;
this.mViewPager = viewPager;
this.autoArrange = autoArrange;
this.setVisibility(View.VISIBLE);
initTabSpacing();
initTabs();
initCursor();
onPageSelected(currTabPosition);// 初始化tab样式和动画
if (mViewPager != null) {
mViewPager.setOnPageChangeListener(this);
}
}
/**
* 确定tab间隙长度
*/
private void initTabSpacing() {
// TODO Auto-generated method stub
tabLength = tabTexts.length;
int tabTextsWidth = 0;// tab文本总长度
TextView tv = new TextView(mContext);
tabTextWidthArr = new int[tabLength];
for (int i = 0; i < tabLength; i++) {
tv.setTextSize(mTextSize);
tabTextWidthArr[i] = (int) tv.getPaint().measureText(tabTexts[i]);
tabTextsWidth += tabTextWidthArr[i];
}
int scrollViewWidth = tabTextsWidth + tabLength * tabSpacing;
// 默认, tab(包括间隙)总长度小于屏幕宽度时, 重新计算间距, 让各个tab均匀填满scrollview
if (autoArrange && scrollViewWidth < diviceWidth) {
tabSpacing = (diviceWidth - tabTextsWidth) / tabLength;
}
}
/**
* 初始化Tab
*/
private void initTabs() {
tabLy.removeAllViews();
tabArr = new RelativeLayout[tabLength];
TextView tabTextView = null;
for (int i = 0; i < tabLength; i++) {
// 初始化tabArr
LinearLayout.LayoutParams tabParam = new LinearLayout.LayoutParams(
tabTextWidthArr[i] + tabSpacing, LayoutParams.MATCH_PARENT);
tabArr[i] = (RelativeLayout) View.inflate(mContext,
R.layout.viewpager_indicator_tab, null);
tabArr[i].setLayoutParams(tabParam);
tabArr[i].setTag(i);
tabArr[i].setOnClickListener(this);
// 初始化tabTextViewArr
tabTextView = (TextView) tabArr[i].findViewById(R.id.tab_tv);
tabTextView.setTextSize(mTextSize);
tabTextView.setTextColor(mTextColor);
tabTextView.setText(tabTexts[i]);
// 添加子tab
tabLy.addView(tabArr[i], i);
}
}
@Override
public void onClick(View v) {
int i = (Integer) v.getTag();
setTabClick(i);
}
/**
* 设置当前Tab点击时事件
*
* @param position
*/
private void setTabClick(int position) {
// 如果点击的为当前的Tab，则滚回到顶部， 否则切换
if (position == currTabPosition) {
} else {
mViewPager.setCurrentItem(position);
}
}
/**
* 初始化cursor长度
*/
private void initCursor() {
// TODO Auto-generated method stub
baseCursorWidth = tabTextWidthArr[currTabPosition] + cursorPadding;
RelativeLayout.LayoutParams cursorLp = (RelativeLayout.LayoutParams) cursor
.getLayoutParams();
cursorLp.width = baseCursorWidth;
cursor.setLayoutParams(cursorLp);
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageSelected(final int position) {
// TODO Auto-generated method stub
currTabPosition = position;
setTabStyle(position);// 改变tab字体颜色
handler.post(new Runnable() {
@Override
public void run() {
setTabAnimation(position);
}
});
}
/**
* 设置未选中tab字体的颜色
*/
public void setUnSelectTextColor(int UnSelectTextColor) {
this.unSelectTextColor = UnSelectTextColor;
}
/**
* 设置选中tab字体的颜色
*/
public void setSelectTextColor(int selectTextColor) {
this.selectTextColor = selectTextColor;
}
/**
* 设置tab字体的大小
*/
public void setTextSize(int textSize){
this.mTextSize = textSize;
}
/**
* 设置选中项背景和字体颜色
*
* @param position
*/
private void setTabStyle(int position) {
// 还原Tab的背景和字体颜色
for (int i = 0; i < tabLength; i++) {
((TextView) tabArr[i].getChildAt(0)).setTextColor(unSelectTextColor);
}
// 改变 选中文本的颜色, 同时红点消失
((TextView) tabArr[position].getChildAt(0)).setTextColor(selectTextColor);
}
/**
* 设置tab的动画
*
* @param position
*/
private void setTabAnimation(final int position) {
// 选中的tab中心位置到scrollview最左边位置的距离
int offset = 0;
for (int i = 0; i < position; i++) {
offset += tabTextWidthArr[i] + tabSpacing;
}
offset += (tabTextWidthArr[position] + tabSpacing) / 2;
// tab滚动到居中位置
int scrollOffset = offset - diviceWidth / 2 <= 0 ? 0 : offset
- diviceWidth / 2;
smoothScrollTo(scrollOffset, 0);
// 移动动画
offset -= (tabTextWidthArr[0] / 2 + cursorPadding / 2);
Animation translateAnim = new TranslateAnimation(isPageFirstScrolled ? offset : fromTransX, offset, 0,
0);
fromTransX = offset;
isPageFirstScrolled = false;
// 缩放动画, 以初始化的cursor为缩放参考
offset = tabTextWidthArr[currTabPosition] + cursorPadding;
float toScaleX = (float) offset / (float) baseCursorWidth;
Animation scaleAnim = new ScaleAnimation(fromScaleX, toScaleX, 1.0f,
1.0f, Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);// 中间为缩放中心
fromScaleX = toScaleX;
// 将两个动画添加进集合, 同时执行
AnimationSet anim = new AnimationSet(true);
anim.addAnimation(scaleAnim); // 注意: 先添加缩放动画, 否则会出问题, 原因不知
anim.addAnimation(translateAnim);
anim.setDuration(300);
anim.setFillAfter(true);
cursor.startAnimation(anim); // 开始动画
}
}
viewpager_indicator_layout文件：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="@+id/line"
android:layout_width="1px"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:background="@color/gray_cccccc"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:visibility="gone"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="@+id/main_tab"
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="horizontal" />
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/gray_cccccc" />
</LinearLayout>
<ImageView
android:id="@+id/main_cursor"
android:layout_width="wrap_content"
android:layout_height="2dip"
android:layout_alignParentBottom="true"
android:scaleType="matrix"
android:src="@drawable/youdan_cursor_bg" />
</RelativeLayout>
然后在布局文件中用：
<com.manqian.mqlibrary.view.ViewPagerIndicator
android:id="@+id/horizontal_scrollview"
android:layout_width="match_parent"
android:layout_height="47dp" />
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
这里我的说一下，
com.manqian.mqlibrary.view.ViewPagerIndicator 这个是你把这个封装的文件放在项目的路径，这个是我的路径，有的同学就会直接复制过去，发现报错，要会灵活一点。
好了，我先说说一下我的思路，大家可以看到，我封装的时候继承了什么吧，对的，就是这个horizontalscrollview,这个是水平的scrollview，也就是说是它可以使得tab可以水平滑动，还有我实现了几个监听器，通过监听器中的几个方法，从中配合来实现这个功能，具体的，我在代码上注释的比较清楚了。希望对大家有用。