Android自定义控件（实现视图树绘制指示器）

概述之前写轮播条或者指示器的时候都是UI图里面直接有，这样的效果并不好，给用户的体验比较差，所以闲暇之余自己写了个指示器，可以展现出一个优雅的效果，当手指当手指滑动的时候小圆点会跟着一点一点的滑动，当手指停

之前写轮播条或者指示器的时候都是UI图里面直接有，这样的效果并不好，给用户的体验比较差，所以闲暇之余自己写了个指示器，可以展现出一个优雅的效果，当手指 当手指滑动的时候小圆点会跟着一点一点的滑动，当手指停下时，小红点也跟着停下来。首先我说说我实现的这个原理吧

首先在布局文件里面写上线性布局，表示底部的小圆点，方向和位置，然后再在shape里面自绘小圆点。再在代码里面里用布局写出，具体步骤如下：

1、使用LayParams给布局里面添加未选中的小圆点，例如灰色；

2、设置小红点，表示滑动后的状态。

3、获取小圆点之间的距离，这里要获取小圆点的距离不能简单地getWIDth,getHeiget,这样是获取不到的 ，这里要用到视图树来观察两个点距离左侧屏幕之间的距离，然后求差获取距离。

4、在监听vIEwpager的时候获取两者的距离。

代码如下：

一、布局文件

<!--小红点，小圆点的滑动，具体布局在代码里面写的--> <?xml version="1.0" enCoding="utf-8"?> <relativeLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" xmlns:tools="http://schemas.androID.com/tools" androID:layout_wIDth="match_parent" androID:layout_height="match_parent"> <androID.support.v4.vIEw.VIEwPager androID:ID="@+ID/vp_pager" androID:layout_wIDth="match_parent" androID:layout_height="match_parent"/> <button androID:ID="@+ID/btn_start" androID:layout_wIDth="wrap_content" androID:layout_height="wrap_content" androID:layout_alignParentBottom="true" androID:layout_centerHorizontal="true" androID:layout_marginBottom="60dp" androID:background="#FFF107" androID:paddingleft="10dp" androID:paddingRight="10dp" androID:textSize="20sp" androID:text="开始体验" androID:visibility="gone"/> <!--小红点，小圆点的滑动，具体布局在代码里面写的--> <relativeLayout androID:layout_wIDth="wrap_content" androID:layout_height="wrap_content" androID:layout_alignParentBottom="true" androID:layout_centerHorizontal="true" androID:layout_marginBottom="20dp"> <linearLayout androID:ID="@+ID/ll_point_group" androID:layout_wIDth="wrap_content" androID:layout_height="wrap_content" androID:orIEntation="horizontal"> </linearLayout> <VIEw androID:ID="@+ID/vIEw_red_point" androID:layout_wIDth="10dp" androID:layout_height="10dp" androID:background="@drawable/shape_guIDe_point_selected"/> </relativeLayout> </relativeLayout> <!--普通的圆点--> <?xml version="1.0" enCoding="utf-8"?> <shape xmlns:androID="http://schemas.androID.com/apk/res/androID" androID:shape="oval" > <solID androID:color="@androID:color/darker_gray" /> </shape> <!--小红点的圆点--> <?xml version="1.0" enCoding="utf-8"?> <shape xmlns:androID="http://schemas.androID.com/apk/res/androID" androID:shape="oval" > <solID androID:color="#f00" /> </shape> 

二、代码

/** * 初始化vIEwpager的数据 */ private voID initVIEw() { int[] icons = {R.mipmap.guIDe1,R.mipmap.guIDe2,R.mipmap.guIDe3,R.mipmap.guIDe4}; mList = new ArrayList<>(); for (int i = 0; i < icons.length; i++) { ImageVIEw vIEw = new ImageVIEw(this); vIEw.setBackgroundResource(icons[i]); //只有设置了背景才能填充满屏幕 mList.add(vIEw); //设置，灰色的小圆点，表示滑动时候的状态 VIEw point = new VIEw(this); point.setBackgroundResource(R.drawable.shape_guIDe_point_default); //设置背景 linearLayout.LayoutParams params = new linearLayout.LayoutParams(DensityUtils.dp2px(this,10),DensityUtils.dp2px(this,10)); point.setLayoutParams(params); if (i != 0) { params.leftmargin = DensityUtils.dp2px(this,10); } llpointGroup.addVIEw(point); } } 

三、获取小红点之间的距离

/** * 初始化小红点之间的距离 */ private voID initPoint() { // measure -> layout -> draw vIEwRedPoint.getVIEwTreeObserver().addOnGlobalLayoutListener(new VIEwTreeObserver.OnGlobalLayoutListener() { //完成布局后回调该方法，该方法有可能被多次回调 @OverrIDe public voID onGlobalLayout() { vIEwRedPoint.getVIEwTreeObserver().removeGlobalOnLayoutListener(this); mPointWIDth = llpointGroup.getChildAt(1).getleft() - llpointGroup.getChildAt(0).getleft(); } }); } 

四、让小红点联动

/** * vIEwpager的页面滑动的监听 */ private voID initScrollListen() { vIEwPager.setonPagechangelistener(new VIEwPager.OnPagechangelistener() { //当页面被滑动的时候 //参数一：当前页面的位置 参数二：偏移的百分比 参数三：偏移的距离 @OverrIDe public voID onPageScrolled(int position,float positionOffset,int positionOffsetPixels) { int leftmargin = (int) (mPointWIDth * (position + positionOffset)); relativeLayout.LayoutParams lp = (relativeLayout.LayoutParams) vIEwRedPoint.getLayoutParams(); lp.leftmargin = leftmargin; vIEwRedPoint.setLayoutParams(lp); } //当页面被选择 @OverrIDe public voID onPageSelected(int position) { } //当页面状态改变的时候 @OverrIDe public voID onPageScrollStateChanged(int state) { } }); } 

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程小技巧！

总结

以上是内存溢出为你收集整理的Android自定义控件（实现视图树绘制指示器）全部内容，希望文章能够帮你解决Android自定义控件（实现视图树绘制指示器）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。