轻松实现分页指示器 ViewPagerIndicator Android自定义控件
来源：互联网 发布：淘宝导航条怎么做上去 编辑：程序博客网 时间：2024/05/16 07:31
自定义的ViewPagerIndicator,实现ViewPager的tab切换
效果: 
1. 难点解读
1.首先就是布局,就是继承LinearLayout,重写.然后指示器是矩形,自己绘制出来的,就在每个tab的下面,绘制自己的孩子通过dispatchDraw（canvas）实现.
2.在dispatchDraw()之前,需要在onSizeChanged()计算每一个矩形宽.矩形的高度是我自己设定好了的常量值.
3.移动指示器:监听ViewPager的滑动事件,根据ViewPager的滑动比例设置当前ViewGroup的滚动位置,相当于就滑动了指示器,指示器的初始x坐标是0.
4.然后就是自定义属性,定义可见tab的个数和指示器颜色.
5.动态添加tab,给自定义控件传入一个String数组,就是tab标题的集合,然后根据传入集合,觉得有多少个tab.
6.设置ViewPager给自定义控件,那么开发者在在使用该控件的时候就不需要再自己写ViewPager的控制了,交给自定义控件去控制.但是,需要给ViewPager的滑动事件监听器暴露接口,不然当开发者需要使用到监听器的时候,就不能用了. 这里的自定义控件暴露接口的方式参考源码的,nice.
7.最后需要将滑动到的那个位置的tab标题高亮,然后需要给每个tab设置点击事件.
2. 感谢
在看了慕课网老师的自定义控件解读之后,颇有收获,在此,感谢老师!
在此之上我稍微优化了一下,并且将指示器改为自己想要的.并且可以自定义颜色等.
课程地址:http://www.imooc.com/video/11304
3.源码
项目地址:https://github.com/xfhy/ViewPagerIndicator,里面有使用方法,感兴趣的朋友可以看看.
public class ViewPagerIndicator extends LinearLayout { private static final String TAG = "ViewPagerIndicator"; private Paint mPaint;// 绘制三角形的画笔 /** * 用于绘制矩形的边 * 这个东西可以绘制一个封闭的区域.只要把线连起来.比如三角形等都是可以画的. */ private Path mPath; /** * 矩形的宽 */ private int mRectWidth; /** * 矩形的高 */ private static final int RECT_HEIGHT = 6; /** * 指示器需要偏移的距离 */ private int mTranslationX; /** * 可见tab的数量 */ private int mTabVisibleCount; /** * 默认可见tab为4个 */ private static final int COUNT_DEFAULT_TAB = 4; /** * 指示器颜色 */ private static final String INDICATOR_DEFAULT_COLOR = "#FF8247"; /** * 指示器颜色 */ private int mColor; /** * tab标题的默认颜色 */ private static final int COLOR_TEXT_NORMAL = Color.parseColor("#77FFFFFF"); /** * tab标题高亮的颜色 */ private static final int COLOR_TEXT_HIGHLIGHT = Color.parseColor("#FFFFFFFF"); /** * 暴露给开发者的ViewPager的监听器 * 这里参照了源码ViewPager,需要写多个监听器 */ private List<OnPageChangeListener> mOnPageChangeListeners; /** * 下面的ViewPager 需要切换的 */ private ViewPager mViewPager; public ViewPagerIndicator(Context context) { this(context, null); } public ViewPagerIndicator(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public ViewPagerIndicator(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); // 获取可见tab的数量 自定义属性 获取里面的值 TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.ViewPagerIndicator); mTabVisibleCount = attributes.getInt( R.styleable.ViewPagerIndicator_visible_tab_count, COUNT_DEFAULT_TAB); mColor = attributes.getColor(R.styleable.ViewPagerIndicator_indicator_color, Color .parseColor(INDICATOR_DEFAULT_COLOR)); //如果有错,则是给一个默认值 if (mTabVisibleCount < 0) { mTabVisibleCount = COUNT_DEFAULT_TAB; } // 用完必须释放 attributes.recycle(); //初始化画笔等数据 initData(); } /** * 初始化画笔等数据 */ private void initData() { mPaint = new Paint(); mPaint.setAntiAlias(true); //设置为抗锯齿 mPaint.setColor(mColor); mPaint.setStyle(Paint.Style.FILL); mPaint.setPathEffect(new CornerPathEffect(3)); //设置三角形不那么尖锐 } /** * 绘制矩形 * 绘制VIew本身的内容，通过调用View.onDraw(canvas)函数实现,绘制自己的孩子通过dispatchDraw（canvas）实现 * <p> * 画完背景后，draw过程会调用onDraw(Canvas canvas)方法，然后就是dispatchDraw(Canvas canvas)方法, * dispatchDraw * ()主要是分发给子组件进行绘制，我们通常定制组件的时候重写的是onDraw()方法。值得注意的是ViewGroup容器组件的绘制 * ，当它没有背景时直接调用的是dispatchDraw * ()方法,而绕过了draw()方法，当它有背景的时候就调用draw()方法，而draw()方法里包含了 * dispatchDraw()方法的调用。因此要在ViewGroup上绘制东西的时候往往重写的是 * dispatchDraw()方法而不是onDraw()方法，或者自定制一个Drawable，重写它的draw(Canvas c)和 * getIntrinsicWidth(),getIntrinsicHeight()方法，然后设为背景 */ @Override protected void dispatchDraw(Canvas canvas) { super.dispatchDraw(canvas); /* * save：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。 * * restore：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。 * * save和restore要配对使用（restore可以比save少，但不能多），如果restore调用次数比save多，会引发Error。 */ canvas.save(); canvas.translate(mTranslationX, RECT_HEIGHT); //绘制一个封闭的区域 canvas.drawPath(mPath, mPaint); canvas.restore(); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); //矩形的宽 就是屏幕的宽度/可见个数 mRectWidth = w / mTabVisibleCount; initRect(); } /** * 初始化矩形 */ private void initRect() { //矩形的位置在 子控件的底部 mPath = new Path(); mPath.moveTo(0, getHeight()); //将下一个轮廓的开始设置为点（x，y）。 //从最后一点添加一行到指定点（x，y）。如果没有对此轮廓进行moveTo（）调用，则第一个点为自动设置为（0,0）。 mPath.lineTo(mRectWidth, getHeight()); mPath.lineTo(mRectWidth, getHeight() - RECT_HEIGHT - RECT_HEIGHT); mPath.lineTo(0, getHeight() - RECT_HEIGHT - RECT_HEIGHT); // 关闭当前轮廓，完成闭合 mPath.close(); } /** * 移动指示器 * * @param position 需要移动到的那个位置 * @param offset 移动偏移量百分比 */ public void scroll(int position, float offset) { //每个tab的宽度 int tabWidth = getWidth() / mTabVisibleCount; //指示器需要偏移的距离 mTranslationX = (int) (tabWidth * offset + tabWidth * position); //当移动到倒数第二个时,就需要移动ViewPagerIndicator 当前这个ViewGroup了 if (position >= (mTabVisibleCount - 2) && offset > 0 && getChildCount() > mTabVisibleCount) { //如果mTabVisibleCount == 1时,mTabVisibleCount - 2是负数 if (mTabVisibleCount != 1) { //如果是移动到所有页签的倒数第二个则不能再移动了 if (position != getChildCount() - 2) { Log.d(TAG, "scroll: position----"+position); this.scrollTo((int) ((position - (mTabVisibleCount - 2)) * tabWidth + tabWidth * offset), 0); //当移动到界面可见数的最后一个时,直接移动到0 不然会出现第一个显示不全的bug if (position == mTabVisibleCount-2) { Log.d(TAG, "scroll: 0"); this.scrollTo(0,0); } } } else { this.scrollTo((int) (position * tabWidth + tabWidth * offset), 0); } } //重绘 invalidate(); } /** * 当xml加载完成之后就会调用此方法,必须调用super()方法 * 我们需要在这做的事情是 将每个子控件的weight改为0,然后将默认的可以显示的个数的子控件显示出来 * 通过布局添加tab的时候,调用到此方法 */ @Override protected void onFinishInflate() { super.onFinishInflate(); //获取子控件个数 int childCount = getChildCount(); if (childCount < 0) { return; } //设置每个页签的宽度 for (int i = 0; i < childCount; i++) { View view = getChildAt(i); LinearLayout.LayoutParams layoutParams = (LayoutParams) view.getLayoutParams(); layoutParams.weight = 0; layoutParams.width = getScreenWidth() / mTabVisibleCount; view.setLayoutParams(layoutParams); } //设置每个tab的点击事件 setTabItemClickEvent(); } /** * 获取屏幕宽度 * * @return */ private int getScreenWidth() { //拿到WindowManager对象 WindowManager windowManager = (WindowManager) getContext().getSystemService(Context .WINDOW_SERVICE); Display defaultDisplay = windowManager.getDefaultDisplay(); DisplayMetrics metrics = new DisplayMetrics(); defaultDisplay.getMetrics(metrics); return metrics.widthPixels; } /** * 动态地设置可见tab的个数,必须大于0 * 必须在setTabItemTitles()之前调用此方法才能生效 * * @param mTabVisibleCount */ public void setmTabVisibleCount(int mTabVisibleCount) { if (mTabVisibleCount > 0) { this.mTabVisibleCount = mTabVisibleCount; } else { this.mTabVisibleCount = COUNT_DEFAULT_TAB; //默认值 } } /** * 动态设置tab * * @param titles 所有tab的标题 */ public void setTabItemTitles(List<String> titles) { if (titles != null && titles.size() > 0) { //用户是想设置Tab,则无视布局文件中写的TextView,全部移除 removeAllViews(); //生成标题 for (String title : titles) { addView(generateTextView(title)); } } //设置每个tab的点击事件 setTabItemClickEvent(); } /** * 根据title动态地生成一个tab 其实就是一个TextView,用来显示tab的名称用的 * * @param title * @return */ private View generateTextView(String title) { TextView textView = new TextView(getContext()); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout .LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT); if (mTabVisibleCount == 0) { params.width = getScreenWidth() / COUNT_DEFAULT_TAB; } else { params.width = getScreenWidth() / mTabVisibleCount; } textView.setGravity(Gravity.CENTER); textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 18); textView.setText(title); textView.setTextColor(COLOR_TEXT_NORMAL); textView.setLayoutParams(params); return textView; } /** * 设置关联的ViewPager * * @param viewPager * @param position 设置当前位置 */ public void setViewPager(ViewPager viewPager, int position) { this.mViewPager = viewPager; //页面改变事件 滑动 viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { //移动指示器 scroll(position, positionOffset); //监听器 全部需要回调此方法 参考源码 if (mOnPageChangeListeners != null) { for (int i = 0, z = mOnPageChangeListeners.size(); i < z; i++) { OnPageChangeListener listener = mOnPageChangeListeners.get(i); if (listener != null) { listener.onPageScrolled(position, positionOffset, positionOffsetPixels); } } } } @Override public void onPageSelected(int position) { if (mOnPageChangeListeners != null) { for (int i = 0, z = mOnPageChangeListeners.size(); i < z; i++) { OnPageChangeListener listener = mOnPageChangeListeners.get(i); if (listener != null) { listener.onPageSelected(position); } } } //高亮当前选中的位置 highLightTextView(position); } @Override public void onPageScrollStateChanged(int state) { if (mOnPageChangeListeners != null) { for (int i = 0, z = mOnPageChangeListeners.size(); i < z; i++) { OnPageChangeListener listener = mOnPageChangeListeners.get(i); if (listener != null) { listener.onPageScrollStateChanged(state); } } } } }); //设置当前的tab是position位置 viewPager.setCurrentItem(position); //高亮当前选中的位置 highLightTextView(position); } /** * 需要暴露给开发者的ViewPager的滑动事件 接口 和ViewPager的监听器定义地一模一样 * 可能开发者也需要用到ViewPager的监听事件 */ public interface OnPageChangeListener { void onPageScrolled(int position, float positionOffset, int positionOffsetPixels); void onPageSelected(int position); void onPageScrollStateChanged(int state); } /** * 给ViewPager添加监听器 * 官方已经弃用setOnPageChangeListener()了,取而代之的是 * Use {@link #addOnPageChangeListener(OnPageChangeListener)} * and {@link #removeOnPageChangeListener(OnPageChangeListener)} instead. * * @param listener */ public void addOnPageChangeListener(OnPageChangeListener listener) { if (mOnPageChangeListeners == null) { mOnPageChangeListeners = new ArrayList<>(); } mOnPageChangeListeners.add(listener); } /** * Remove a listener that was previously added via * {@link #addOnPageChangeListener(OnPageChangeListener)}. * * @param listener listener to remove */ public void removeOnPageChangeListener(OnPageChangeListener listener) { if (mOnPageChangeListeners != null) { mOnPageChangeListeners.remove(listener); } } /** * Remove all listeners that are notified of any changes in scroll state or position. * 还是用英文吧,虽然知道意思,但是硬翻译过来总觉得不舒服 */ public void clearOnPageChangeListeners() { if (mOnPageChangeListeners != null) { mOnPageChangeListeners.clear(); } } /** * 高亮显示tab标题 * * @param position 那个需要高亮的位置 */ private void highLightTextView(int position) { //当前位置高亮,其他位置设置为正常 for (int i = 0, z = getChildCount(); i < z; i++) { View view = getChildAt(i); if (view instanceof TextView) { TextView textView = (TextView) view; if (position == i) { textView.setTextColor(COLOR_TEXT_HIGHLIGHT); } else { textView.setTextColor(COLOR_TEXT_NORMAL); } } } } /** * 设置每个tab的点击事件 */ private void setTabItemClickEvent() { for (int i = 0, z = getChildCount(); i < z; i++) { final int j = i; View view = getChildAt(i); view.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { mViewPager.setCurrentItem(j); } }); } }}总结
好啦,各种看官,做完后我才发现,我可能做了个假控件,可能写了篇假博客,其实这个东西Google早就给我们实现好了的.它的名字叫:TabLayout
地址:https://developer.android.com/reference/android/support/design/widget/TabLayout.html
悲伤的结局告诉我们:记得写之前多问问搜索引擎……
阅读全文
1 0
- 轻松实现分页指示器 ViewPagerIndicator Android自定义控件
- Android 自定义控件ViewPager 指示器 ViewPagerIndicator
- Android 4.0 分页指示器 Android ViewPagerIndicator
- 开源项目推荐（1）：Android-ViewPagerIndicator 分页指示器，实现左右滑分页视图
- ViewPagerIndicator 自定义指示器
- 自定义ViewPagerIndicator：100行代码实现两种可滑动指示器
- 教你轻松自定义ViewPagerIndicator
- 教你轻松自定义ViewPagerIndicator
- WinForm轻松实现自定义分页
- 自定义控件-ViewPagerIndicator
- 自定义控件之-ViewPagerIndicator
- Android 打造万能的ViewPagerIndicator 指示器
- android 封装好的ViewPagerIndicator指示器
- Android 自定义View实现ViewPager指示器
- Android 自定义控件 轻松实现360软件详情页
- Android 自定义控件 轻松实现360软件详情页
- Android 自定义控件 轻松实现360软件详情页
- Android 自定义控件 轻松实现360软件详情页
- IOS Swift3.1 手工代码编写主视图
- Android 表情功能实现，封装面板方便使用
- 关于vbA等项目出现计算机无法加载项目处理方法。
- Ubuntu 中软件的安装、卸载以及查看的方法总结
- [vim] H M L G
- 轻松实现分页指示器 ViewPagerIndicator Android自定义控件
- 全国省市区数据SQL
- 20. OP-TEE中TA与CA执行流程-------CA部分的代码篇
- Spring IOC原理与源码分析
- 吉他和弦推算
- python文件过滤，pdf转swf.
- ubuntu以及ubuntu类linux系统的运行级别的理解
- memcache server
- Jvm命令
