一篇文章弄懂Android自定义viewgroup的相关难点

本文的目的

目的在于教会大家到底如何自定义viewgroup,自定义布局和自定义测量到底如何写。很多网上随便搜搜的概念和流程图
这里不再过多描述了,建议大家看本文之前,先看看基本的自定义viewgroup流程,心中有个大概即可。本文注重于实践
viewgroup 的测量布局流程基本梳理

稍微回顾下,基本的viewgroup绘制和布局流程中的重点:

1.view 在onMeasure()方法中进行自我测量和保存,也就是说对于view(不是viewgroup噢)来说一定在onMeasure方法中计算出自己的尺寸并且保存下来

2.viewgroup实际上最终也是循环从上大小来调用子view的measure方法,注意子view的measure其实最终调用的是子view的onMeasure 方法。所以我们理解这个过程为:

viewgroup循环遍历调用所有子view的onmeasure方法,利用onmeasure方法计算出来的大小,来确定这些子view最终可以占用的大小和所处的布局的位置。

3.measure方法是一个final方法,可以理解为做测量工作准备工作的,既然是final方法所以我们无法重写它,不需要过多
关注他,因为measure最终要调用onmeasure ,这个onmeasure我们是可以重写的。要关注这个。layout和onlayout是一样的关系。

4.父view调用子view的layout方法的时候会把之前measure阶段确定的位置和大小都传递给子view。

5.对于自定义view/viewgroup来说 我们几乎只需要关注下面三种需求:

  • 对于已有的android自带的view,我们只需要重写他的onMeasure方法即可。修改一下这个尺寸即可完成需求。
  • 对于android系统没有的,属于我们自定义的view,比上面那个要复杂一点,要完全重写onMeasure方法。
  • 第三种最复杂,需要重写onmeasure和onlayout2个方法,来完成一个复杂viewgroup的测量和布局。

6.onMeasure方法的特殊说明:

7.如何理解父view对子view的限制?

onMeasure的两个参数既然是父view对子view的限制,那么这个限制的值到底是哪来的呢?

实际上,父view对子view的限制绝大多数就来自于我们开发者所设置的layout开头的这些属性

比方说我们给一个imageview设置了他的layout_width和layout_height 这2个属性,那这2个属性其实就是我们开发者
所期望的宽高属性,但是要注意了,

设置的这2个属性是给父view看的,实际上对于绝大多数的layout开头的属性这些属性都是设置给父view看的

为什么要给父view看?因为父view要知道这些属性以后才知道要对子view的测量加以什么限制?

到底是不限制(UNSPECIFIED)?还是限制个最大值(AT_MOST),让子view不超过这个值?还是直接限制死,我让你是多少就得是多少(EXACTLY)。

自定义一个BannerImageView 修改onMeasure方法

所谓bannerImageview,就是很多电商其实都会放广告图,这个广告图的宽高比都是可变的,我们在日常开发过程中
也会经常接触到这种需求:imageview的宽高比 在高保真中都标注出来,但是考虑到很多手机的屏幕宽度或者高度都不确定

所以我们通常都要手动来计算出这个imageview高度或者宽度,然后动态改变width或者height的值。这种方法可用但是很麻烦

这里给出一个自定义的imageview,通过设置一个ratio的属性即可动态的设置iv的高度。很是方便

看下效果

最后看下代码,重要的部分都写在注释里了,不再过多讲了。

public class BannerImageView extends ImageView {

 //宽高比
 float ratio;

 public BannerImageView(Context context) {
 super(context);
 }

 public BannerImageView(Context context, AttributeSet attrs) {
 super(context, attrs);

 TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.BannerImageView);
 ratio = typedArray.getFloat(R.styleable.BannerImageView_ratio, 1.0f);
 typedArray.recycle();
 }

 public BannerImageView(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 //人家自己的测量还是要自己走一遍的,因为这个方法内部会调用setMeasuredDimension方法来保存测量结果了
 //只有保存了以后 我们才能取得这个测量结果 否则你下面是取不到的
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);

 //取测量结果
 int mWidth = getMeasuredWidth();

 int mHeight = (int) (mWidth * ratio);

 //保存了以后,父view就可以拿到这个测量的宽高了。不保存是拿不到的噢。
 setMeasuredDimension(mWidth, mHeight);
 }
}

自定义view,完全自己写onMeasure方法

首先明确一个结论:

对于完全自定义的view,完全自己写的onMeasure方法来说,你保存的宽高必须要符合父view的限制,否则会发生bug,
保存父view对子view的限制的方法也很简单直接调用resolveSize方法即可。

所以对于完全自定义的view onMeasure方法也不难写了,

  • 先算自己想要的宽高,比如你画了个圆,那么宽高就肯定是半径的两倍大小, 要是圆下面还有字,
  • 那么高度肯定除了半径的两倍还要有字体的大小。对吧。很简单。这个纯看你自定义view是啥样的
  • 算完自己想要的宽高以后 直接拿resolveSize 方法处理一下 即可。
  • 最后setMeasuredDimension 保存。

范例:

public class LoadingView extends View {

 //圆形的半径
 int radius;

 //圆形外部矩形rect的起点
 int left = 10, top = 30;

 Paint mPaint = new Paint();

 public LoadingView(Context context) {
 super(context);
 }

 public LoadingView(Context context, AttributeSet attrs) {
 super(context, attrs);
 TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.LoadingView);
 radius = typedArray.getInt(R.styleable.LoadingView_radius, 0);
 }

 public LoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);

 int width = left + radius * 2;
 int height = top + radius * 2;

 //一定要用resolveSize方法来格式化一下你的view宽高噢,否则遇到某些layout的时候一定会出现奇怪的bug的。
 //因为不用这个 你就完全没有父view的感受了 最后强调一遍
 width = resolveSize(width, widthMeasureSpec);
 height = resolveSize(height, heightMeasureSpec);

 setMeasuredDimension(width, height);
 }

 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);

 RectF oval = new RectF(left, top,
  left + radius * 2, top + radius * 2);
 mPaint.setColor(Color.BLUE);
 canvas.drawRect(oval, mPaint);
 //先画圆弧
 mPaint.setColor(Color.RED);
 mPaint.setStyle(Paint.Style.STROKE);
 mPaint.setStrokeWidth(2);
 canvas.drawArc(oval, -90, 360, false, mPaint);
 }
}

布局文件:

<LinearLayout
  android:layout_width="200dp"
  android:layout_height="200dp"
  android:background="#000000"
  android:orientation="horizontal">

  <com.example.a16040657.customviewtest.LoadingView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@mipmap/dly"
   app:radius="200"></com.example.a16040657.customviewtest.LoadingView>

  <com.example.a16040657.customviewtest.LoadingView
   android:layout_marginLeft="10dp"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@mipmap/dly"
   app:radius="200"></com.example.a16040657.customviewtest.LoadingView>
 </LinearLayout>

最后效果:

自定义一个viewgroup

这个其实也就是稍微复杂了一点,但是还是有迹可循的,只是稍微需要一点额外的耐心。

自定义一个viewgroup 需要注意的点如下:

  • 一定是先重写onMeasure确定子view的宽高和自己的宽高以后 才可以继续写onlayout 对这些子view进行布局噢~~
  • viewgroup 的onMeasure其实就是遍历自己的view 对自己的每一个子view进行measure,绝大多数时候对子view的measure都可以直接用 measureChild()这个方法来替代,简化我们的写法,如果你的viewgroup很复杂的话无法就是自己写一遍measureChild 而不是调用measureChild 罢了。
  • 计算出viewgroup自己的尺寸并且保存,保存的方法还是哪个setMeasuredDimension 不要忘记了
  • 逼不得已要重写measureChild方法的时候,其实也不难无非就是对父view的测量和子view的测量 做一个取舍关系而已,你看懂了基础的measureChild方法,以后就肯定会写自己的复杂的measureChild方法了。

下面是一个极简的例子,一个很简单的flowlayout的实现,没有对margin paddding做处理,也假设了每一个tag的高度
是固定的,可以说是极为简单了,但是麻雀虽小 五脏俱全,足够你们好好理解自定义viewgroup的关键点了。

/**
 * 写一个简单的flowlayout 从左到右的简单layout,如果宽度不够放 就直接另起一行layout
 * 这个类似的开源控件有很多,有很多写的出色的,我这里只仅仅实现一个初级的flowlayout
 * 也是最简单的,目的是为了理解自定义viewgroup的关键核心点。
 * <p>
 * 比方说这里并没有对padding或者margin做特殊处理,你们自己写viewgroup的时候 记得把这些属性的处理都加上
 * 否则一旦有人用了这些属性 发现没有生效就比较难看了。。。。。。
 */
public class SimpleFlowLayout extends ViewGroup {
 public SimpleFlowLayout(Context context) {
  super(context);
 }

 public SimpleFlowLayout(Context context, AttributeSet attrs) {
  super(context, attrs);
 }

 public SimpleFlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
 }

 /**
  * layout的算法 其实就是 不够放剩下一行 那另外放一行 这个过程一定要自己写一遍才能体会,
  * 个人有个人的写法,说不定你的写法比开源的项目还要好
  * 其实也没什么夸张的,无法就是前面onMeasure结束以后 你可以拿到所有子view和自己的 测量宽高 然后就算呗
  *
  * @param changed
  * @param l
  * @param t
  * @param r
  * @param b
  */

 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
  int childTop = 0;
  int childLeft = 0;
  int childRight = 0;
  int childBottom = 0;

  //已使用 width
  int usedWidth = 0;

  //customlayout 自己可使用的宽度
  int layoutWidth = getMeasuredWidth();
  Log.v("wuyue", "layoutWidth==" + layoutWidth);
  for (int i = 0; i < getChildCount(); i++) {
   View childView = getChildAt(i);
   //取得这个子view要求的宽度和高度
   int childWidth = childView.getMeasuredWidth();
   int childHeight = childView.getMeasuredHeight();

   //如果宽度不够了 就另外启动一行
   if (layoutWidth - usedWidth < childWidth) {
    childLeft = 0;
    usedWidth = 0;
    childTop += childHeight;
    childRight = childWidth;
    childBottom = childTop + childHeight;
    childView.layout(0, childTop, childRight, childBottom);
    usedWidth = usedWidth + childWidth;
    childLeft = childWidth;
    continue;
   }
   childRight = childLeft + childWidth;
   childBottom = childTop + childHeight;
   childView.layout(childLeft, childTop, childRight, childBottom);
   childLeft = childLeft + childWidth;
   usedWidth = usedWidth + childWidth;

  }
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

  //先取出SimpleFlowLayout的父view 对SimpleFlowLayout 的测量限制 这一步很重要噢。
  //你只有知道自己的宽高 才能限制你子view的宽高
  int widthMode = MeasureSpec.getMode(widthMeasureSpec);
  int heightMode = MeasureSpec.getMode(heightMeasureSpec);
  int widthSize = MeasureSpec.getSize(widthMeasureSpec);
  int heightSize = MeasureSpec.getSize(heightMeasureSpec);

  int usedWidth = 0;  //已使用的宽度
  int remaining = 0;  //剩余可用宽度
  int totalHeight = 0; //总高度
  int lineHeight = 0;  //当前行高

  for (int i = 0; i < getChildCount(); i++) {
   View childView = getChildAt(i);
   LayoutParams lp = childView.getLayoutParams();

   //先测量子view
   measureChild(childView, widthMeasureSpec, heightMeasureSpec);
   //然后计算一下宽度里面 还有多少是可用的 也就是剩余可用宽度
   remaining = widthSize - usedWidth;

   //如果一行不够放了,也就是说这个子view测量的宽度 大于 这一行 剩下的宽度的时候 我们就要另外启一行了
   if (childView.getMeasuredWidth() > remaining) {
    //另外启动一行的时候,使用过的宽度 当然要设置为0
    usedWidth = 0;
    //另外启动一行了 我们的总高度也要加一下,不然高度就不对了
    totalHeight = totalHeight + lineHeight;
   }

   //已使用 width 进行 累加
   usedWidth = usedWidth + childView.getMeasuredWidth();
   //当前 view 的高度
   lineHeight = childView.getMeasuredHeight();
  }

  //如果SimpleFlowLayout 的高度 为wrap cotent的时候 才用我们叠加的高度,否则,我们当然用父view对如果SimpleFlowLayout 限制的高度
  if (heightMode == MeasureSpec.AT_MOST) {
   heightSize = totalHeight;
  }
  setMeasuredDimension(widthSize, heightSize);
 }
}

最后看下效果

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

时间: 2018-06-17

Android自定义ViewGroup之实现FlowLayout流式布局

整理总结自鸿洋的博客:http://blog.csdn.net/lmj623565791/article/details/38352503/  一.FlowLayout介绍  所谓FlowLayout,就是控件根据ViewGroup的宽,自动的往右添加,如果当前行剩余空间不足,则自动添加到下一行.有点像所有的控件都往左飘的感觉,第一行满了,往第二行飘~所以也叫流式布局.Android并没有提供流式布局,但是某些场合中,流式布局还是非常适合使用的,比如关键字标签,搜索热词列表等,比如下图: git

Android自定义ViewGroup实现带箭头的圆角矩形菜单

本文和大家一起做一个带箭头的圆角矩形菜单,大概长下面这个样子: 要求顶上的箭头要对准菜单锚点,菜单项按压反色,菜单背景色和按压色可配置. 最简单的做法就是让UX给个三角形的图片往上一贴,但是转念一想这样是不是太low了点,而且不同分辨率也不太好适配,干脆自定义一个ViewGroup吧! 自定义ViewGroup其实很简单,基本都是按一定的套路来的. 一.定义一个attrs.xml 就是声明一下你的这个自定义View有哪些可配置的属性,将来使用的时候可以自由配置.这里声明了7个属性,分别是:箭头宽

Android自定义ViewGroup实现可滚动的横向布局(2)

上一篇文章自定义viewgroup(1)地址:http://www.jb51.net/article/100608.htm 这里直接代码: package com.example.libingyuan.horizontallistview.ScrollViewGroup; import android.content.Context; import android.util.AttributeSet; import android.view.MotionEvent; import android

Android动画效果之自定义ViewGroup添加布局动画(五)

前言: 前面几篇文章介绍了补间动画.逐帧动画.属性动画,大部分都是针对View来实现的动画,那么该如何为了一个ViewGroup添加动画呢?今天结合自定义ViewGroup来学习一下布局动画.本文将通过对自定义图片选择控件设置动画为例来学习布局动画. 自定义一个显示多行图片的ViewGroup: 这里不再对自定义控件做解说,想了解的可以看下以下几篇文章  •Android自定义控件之基本原理(一)  •Android自定义控件之自定义属性(二)  •Android自定义控件之自定义组合控件(三)

Android自定义ViewGroup实现受边界限制的滚动操作(3)

上一篇文章<自定义viewgroup(2)>地址:http://www.jb51.net/article/100610.htm 代码 package com.example.libingyuan.horizontallistview.ScrollViewGroup; import android.content.Context; import android.util.AttributeSet; import android.util.DisplayMetrics; import androi

Android自定义ViewGroup的实现方法

在android中提供了常见的几种ViewGroup的实现,包括LinearLayout.Relativeayout.FrameLayout等.这些ViewGroup可以满足我们一般的开发需求,但是对于界面要求复杂的,这几个布局就显得捉襟见肘了.所以自定义的ViewGroup在我们接触过的应用中比比皆是. 要想实现一个自定义的ViewGroup,第一步是学会自定义属性,这些自定义的属性将让我们配置布局文件的时候更加的灵活.自定义属性是在value目录下声明一个attrs.xml文件. <?xml

Android自定义ViewGroup实现标签浮动效果

前面在学习鸿洋大神的一些自定义的View文章,看到了自定义ViewGroup实现浮动标签,初步看了下他的思路以及结合自己的思路完成了自己的浮动标签的自定义ViewGroup.目前实现的可以动态添加标签.可点击.效果图如下: 1.思路  首先在onMeasure方法中测量ViewGroup的宽和高,重点是处理当我们自定义的ViewGroup设置为wrap_content的情况下,如何去测量其大小的问题.当我们自定义的ViewGroup设置为wrap_content时,我们需要让子View先去测量自

Android App开发中自定义View和ViewGroup的实例教程

View Android所有的控件都是View或者View的子类,它其实表示的就是屏幕上的一块矩形区域,用一个Rect来表示,left,top表示View相对于它的parent View的起点,width,height表示View自己的宽高,通过这4个字段就能确定View在屏幕上的位置,确定位置后就可以开始绘制View的内容了. View绘制过程 View的绘制可以分为下面三个过程: Measure View会先做一次测量,算出自己需要占用多大的面积.View的Measure过程给我们暴露了一个

Android自定义控件ViewGroup实现标签云(四)

前言: 前面几篇讲了自定义控件绘制原理Android自定义控件基本原理详解(一) ,Android自定义控件之自定义属性(二) ,Android自定义控件之自定义组合控件(三),常言道:"好记性不如烂笔头,光说不练假把式!!!",作为一名学渣就是因为没有遵循这句名言才沦落于此,所以要谨遵教诲,注重理论与实践相结合,今天通过自定义ViewGroup来实现一下项目中用到的标签云. 需求背景: 公司需要实现一个知识点的标签显示,每个标签的长度未知,如下图所示 基本绘制流程: 绘制原理这里不再

Android应用开发中自定义ViewGroup的究极攻略

支持margin,gravity以及水平,垂直排列 最近在学习android的view部分,于是动手实现了一个类似ViewPager的可上下或者左右拖动的ViewGroup,中间遇到了一些问题(例如touchEvent在onInterceptTouchEvent和onTouchEvent之间的传递流程),现在将我的实现过程记录下来. 首先,要实现一个ViewGroup,必须至少重写onLayout()方法(当然还有构造方法啦:)).onLayout()主要是用来安排子View在我们这个ViewG

Android应用开发中自定义ViewGroup视图容器的教程

一.概述 在写代码之前,我必须得问几个问题: 1.ViewGroup的职责是啥? ViewGroup相当于一个放置View的容器,并且我们在写布局xml的时候,会告诉容器(凡是以layout为开头的属性,都是为用于告诉容器的),我们的宽度(layout_width).高度(layout_height).对齐方式(layout_gravity)等:当然还有margin等:于是乎,ViewGroup的职能为:给childView计算出建议的宽和高和测量模式 :决定childView的位置:为什么只是

Android开发中自定义ProgressBar控件的方法示例

本文实例讲述了Android开发中自定义ProgressBar控件的方法.分享给大家供大家参考,具体如下: 很简单,首先加载Drawable,在onMeasure设置好其区域大小, 然后使用canvas.clipRect绘图 public class ProgressView extends ImageView { private Drawable maskDraw; /** * 加载的进度 0-100 */ private int mProcess = 20; public ProgressV

Android 游戏开发中绘制游戏触摸轨迹的曲线图

本篇文章主要来讲解怎样绘制游戏触摸轨迹的曲线图. 我们在onTouchEvent方法中,可以获取到触摸屏幕时手指触摸点的x.y坐标,如何用这些点形成一条无规则轨迹并把这条无规则轨迹曲线显示在屏幕上就是本篇文章的主旨内容. Android Path类 Android提供了一个Path类 , 顾名思义这个类可以设置曲线路径轨迹.任何无规则的曲线实际上都是由若干条线段组成,而线段的定义为两点之间最短的一条线.path类就 可以记录这两点之间的轨迹,那么若干个Path 就是我们须要绘制的无规则曲线. 下

Android编程开发中ListView的常见用法分析

本文实例讲述了Android编程开发中ListView的常见用法.分享给大家供大家参考,具体如下: 一.ListView的使用步骤 ListView的使用通常有以下三个要素: (1)ListView中每个条目的布局; (2)填充进入ListView中的内容; (3)将内容与页面进行整合的Adapter. 因此,使用ListView也通常有以下三个步骤: (1)创建ListView条目的布局文件(或使用Android SDK提供的布局); (2)创建填充进入ListView中的内容,如字符串.图片

Android程序开发之自定义设置TabHost,TabWidget样式

先看效果: 京东商城底部菜单栏 新浪微博底部菜单栏 本次学习效果图: 第一,主布局文件(启动页main.xml,位于res/layout目录下)代码 <?xml version="." encoding="utf-"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_paren

Android编程开发中的正则匹配操作示例

本文实例讲述了Android编程开发中的正则匹配操作.分享给大家供大家参考,具体如下: 在Android开发中,可能也会遇到一下输入框的合法性验证,这时候最常用的就应该是正则表达式去做一些匹配了,下面就常用的正则匹配做一下介绍 1. 手机号码的验证 根据实际开发于2009年9月7日最新统计: 中国电信发布中国3G号码段:中国联通185,186;中国移动188,187;中国电信189,180共6个号段. 移动:134.135.136.137.138.139.150.151.157(TD).158.

Android程序开发中单选按钮(RadioGroup)的使用详解

在还没给大家介绍单选按钮(RadioGroup)的使用,先给大家展示下效果图吧: xml文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_heig

Android应用开发中单元测试分析

本文主要和大家分享如何在Android应用开发过程中如何进行单元测试,个人在做项目的过程中,觉得单元测试很有必要,以保证我们编写程序的正确性.下面我们先大概了解下单元测试,以及单元测试的作用.        单元测试(又称为模块测试)是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作.程序单元是应用的最小可测试部件.在过程化编程中,一个单元就是单个程序.函数.过程等:对于面向对象编程,最小单元就是方法,包括基类(超类).抽象类.或者派生类(子类)中的方法.单元测试是由程序员自己来完成