PS:最近一直忙于学习任务,一直没有时间去写博客.今天周六,终于有时间了.
学习任务:
1.打造一个自己的ViewPagerIndicator
最近被安排了一大堆的学习任务,感觉老板还是很好的,让我们在业余时间多提升自己的个人能力,就拿这个ViewPagerIndicator来说吧,当初自己没有什么好的实现方案,现在也就学了一发,看了一下Google上的实现方案,针对的情况比较的多,我这里就针对一种情况来说.大家想更深入的研究可以去Github上搜索一下Google工程师的实现方式,效果都很棒,有兴趣的可以全部研究一下.我看了一下鸿洋的实现方式,不过他做的是三角形的.我做的是线条状的,因此做了一些修改.
原理还是比较简单的,下面是一个ViewPager,上面整体是一个ViewPagerIndicator.然后在最下面画一个线条当做指示符就可以了,当ViewPager在滑动的时候,我们只需要知道偏移的距离,然后重新绘制这条指示符,调用invalidate()函数重新绘制视图就可以了。
首先说一下如何画才是关键，画出这个指示符其实就是画出一个实心的矩形,我们需要知道矩形的长度和宽度,以及在什么位置进行绘制,一般高度我们自己是可以人为指定的,我们需要多高就可以指定成多少单位个dp，最后转换成px就可以了,但是宽度呢？宽度其实 = 屏幕宽度 / 显示的ViewPager的数量,获取屏幕的宽度还是比较简单的,因为我们已经在xml文件中指定了这个ViewPagerIndicator的宽度,我们只需要测量一下就能够拿到他的具体宽度.
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mTop = getMeasuredHeight();
int width = getMeasuredWidth();
int height = mTop + DensityUtils.dip2px(context, mHeight);
mWidth = width / mTabVisibleCount;
setMeasuredDimension(width, height);
}
这样我们就能够获取到整个ViewPagerIndicator的高度和宽度,那么矩形指示符的 mTop(顶部起始位置) = getMeasureHeight(); 因为指示符也是需要高度的,因此我们需要重新设置整个ViewPagerIndicator的高度,因此这里需要调用setMeasuredDimension(width,height)重新设置整个ViewPagerIndicator的高度和宽度。有了这个思路,我们就能够绘制出这个矩形的指示符。那么还有一个难题,就是如何设置显示的数量.总不能在自定义的时候写死吧.这样不是非常的灵活,并且在实际项目开发的时候,不同的页面,需要的指示符的数量也是不相同的.因此这里我们需要使用一种灵活的方式去设置指示符的显示数量.
灵活的设置指示符的显示数量需要自定义视图属性,需要在attrs文件中进行声明.
<?xml version="1.0" encoding="utf-8"?>
<resources> <!--属性的名字以及对应的类型-->
<attr name="item_count" format="integer"></attr> <!--声明自定义属性,与上面形成关联关系-->
<declare-styleable name="ViewPagerIndicator">
<attr name="item_count" />
</declare-styleable> </resources>
那么这东西如何使用呢？首先我们需要在xml文件中进行设置.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
<!--这里需要引入命名空间-->
xmlns:rzx="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> <!--修改显示数量
rzx:item_count="我们想设置的数值",这里我设置了5个
前面这个名字是命名空间,可以随便设置.
-->
<com.example.totem.myviewpagerindicator.view.ViewPagerIndicator
android:layout_width="wrap_content"
android:layout_height="wrap_content"
rzx:item_count="4"> </com.example.totem.myviewpagerindicator.view.ViewPagerIndicator> </LinearLayout>
因为我们是自定义控件实现的,因此我们需要在我们自定义的ViewPagerIndicator中去获取我们声明的显示数量.然后去指定指示符的显示宽度.这样就可以根据自己定义的显示数量去指定指示符的宽度了.
public ViewPagerIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
/**
* 存放自定义视图属性的数组容器,需要在attrs文件夹中定义属性
* 属性支持：
* reference string color dimension boolean integer float fraction enum flag
* */
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ViewPagerIndicator);
/**
* 获取数组容器中属性数量
* */
mTabVisibleCount = typedArray.getInt(R.styleable.ViewPagerIndicator_item_count, COUNT_DEFAULT_TAB);
if (mTabVisibleCount <= 0) {
mTabVisibleCount = COUNT_DEFAULT_TAB;
}
/**
* 调用recycle()函数
* */
typedArray.recycle();
}
获取过程就需要使用TypedArray去进行获取,它是存放自定义视图的一个数组容器,支持的类型在上面已经声明了,我就不进行啰嗦了.obtainStyledAttributes()这个方法顾名思义,获取Styled中声明的属性,那么从哪里获取呢？从我们的attrs文件夹中获取,那么获取那个值呢？获取的就是我们声明的ViewPagerIndicator名字的属性值.因为我们已经指定了显示的数量,因此他就可以获取到我们指定的数值,如果获取不到,那么就会有一个默认值.就这么简单,这里recycle()函数是为了再次利用typedArray。不调用也没有什么问题.
那么拿到了显示数量,以及整体宽度,我们就可以去绘制这个矩形指示符了.
public Rect(int left, int top, int right, int bottom) {
this.left = left;
this.top = top;
this.right = right;
this.bottom = bottom;
}
绘制矩形需要传递四个参数,top我们已经获取到了.起初的ViewPagerIndicator的高度位置.bottom就是最终的ViewPagerIndicator的高度,left的获取其实是比较重要的,其实他的位置也很容易获取.left = (position(当前位置) + offset(偏移量)) * mWidth(指示符的宽度). left1(第一个位置的指示符位置) = (0 + 0) * mWidth。偏移的过程中,offset是始终改变的.那么这个left也是随之变动的.然后不断的重新绘制.
/**
* 指示符滚动
*/
public void scroll(int position, float offset) {
mLeft = (int) ((position + offset) * mWidth);
/**
* 重新绘制视图
* */
invalidate();
}
那么谁给我们时刻传递这个偏移量是个关键.偏移是一个过程,因此如果希望指示符是移动过去的,需要时刻获取当前的偏移量,这个偏移量就得交给ViewPager了.我们需要把我们的ViewPagerIndicator与ViewPager进行绑定,这样就能能够时刻获取到偏移量了.这取决于ViewPager的方法.
/**
* 设置关联的ViewPager
*/
public void setViewPager(ViewPager mViewPager, int pos) {
this.mViewPager = mViewPager;
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
scroll(position, positionOffset);
} @Override
public void onPageSelected(int position) {
resetTextViewColor();
highLightTextView(position);
} @Override
public void onPageScrollStateChanged(int state) { }
});
mViewPager.setCurrentItem(pos);
highLightTextView(pos);
}
ViewPager的滑动监听能够帮助我们时刻获取到偏移量.这里我们没有必要再对外暴露接口什么的了.如果还想做其他的操作,我们只需要封装方法.让其执行就可以了..剩下的就是一些琐碎的东西,比如说,改变字体的颜色,以及设置相关的点击事件等等.
/**
* 高亮文本
*/
protected void highLightTextView(int position) {
View view = getChildAt(position);
if (view instanceof TextView) {
((TextView) view).setTextColor(COLOR_SELECT);
}
} /**
* 重置文本颜色
*/
private void resetTextViewColor() {
for (int i = 0; i < getChildCount(); i++) {
View view = getChildAt(i);
if (view instanceof TextView) {
((TextView) view).setTextColor(COLOR_NORMAL);
}
}
} /**
* 设置点击事件
*/
public void setItemClickEvent() {
int cCount = getChildCount();
for (int i = 0; i < cCount; i++) {
final int j = i;
View view = getChildAt(i);
view.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mViewPager.setCurrentItem(j);
}
});
}
}
核心的地方基本都说完了.小细节问题就是在设置高度的时候别忘了dp和px之间的转换,否则画出来的线条实际上是有高度偏差的.MainActivity就只需要做一些初始化操作,为ViewPager添加相关的Fragment就行了.
package com.example.totem.myviewpagerindicator.activity; import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.Window; import com.example.totem.myviewpagerindicator.R;
import com.example.totem.myviewpagerindicator.fragment.FinallyFragment;
import com.example.totem.myviewpagerindicator.fragment.FirstFragment;
import com.example.totem.myviewpagerindicator.fragment.FouthFragment;
import com.example.totem.myviewpagerindicator.fragment.SecondFragment;
import com.example.totem.myviewpagerindicator.fragment.ThirdFragment;
import com.example.totem.myviewpagerindicator.view.ViewPagerIndicator; import java.util.ArrayList;
import java.util.Arrays;
import java.util.List; public class MainActivity extends FragmentActivity { private List<Fragment> mTabContents = new ArrayList<>();
private FragmentPagerAdapter mAdapter;
private ViewPager mViewPager;
private List<String> mDatas = Arrays.asList("1", "2", "3", "4", "5");
private ViewPagerIndicator mIndicator; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initData();
//设置Tab上的标题
mIndicator.setTabItemTitles(mDatas);
mViewPager.setAdapter(mAdapter);
//设置关联的ViewPager
mIndicator.setViewPager(mViewPager, 0);
} private void initView() {
mViewPager = (ViewPager) findViewById(R.id.viewPager);
mIndicator = (ViewPagerIndicator) findViewById(R.id.Indicator);
} private void initData() { FirstFragment firstFragment = new FirstFragment();
SecondFragment secondFragment = new SecondFragment();
ThirdFragment thirdFragment = new ThirdFragment();
FouthFragment fouthFragment = new FouthFragment();
FinallyFragment finallyFragment = new FinallyFragment(); mTabContents.add(firstFragment);
mTabContents.add(secondFragment);
mTabContents.add(thirdFragment);
mTabContents.add(fouthFragment);
mTabContents.add(finallyFragment); mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) { @Override
public int getCount() {
return mTabContents.size();
} @Override
public Fragment getItem(int position) {
return mTabContents.get(position);
}
};
}
}
最后放上一个源代码分享：http://pan.baidu.com/s/1i56onAX