《Android开发艺术探索》第4章 View的工作原理

r囧r小猫 2022-03-17 16:28 391阅读 0赞

本章代码GitHub地址：https://github.com/LittleFogCat/AndroidBookNote/tree/master/chapter04_view

4.0 要点

View的绘制流程
measure -> layout -> draw

常用回调
onAttach onVisibilityChanged onDetach

滑动处理

4.1 ViewRoot DecorView

首先是这张Android的窗口层级图
窗口层级
可以看到，在一个界面中，包含了一个Window，Window中包含了一个DecorView。DecorView其实是一个FrameLayout，一般包含了且仅包含一个竖直的LinearLayout，这个LinearLayout中又包含了一个TitleView和一个ContentView。我们调用setContentView(id)的时候，设置的就是这个ContentView的布局。

ViewRoot是WindowManager和DecorView之间的纽带。View的三大流程其实都是通过ViewRoot来完成的。
关于ViewRoot的来历，又是怎么成为WindowManager和DecorView的纽带的，书中只是一笔带过，这里来一探究竟。

4.1.*

顺着源码追踪，只看有用部分：

当ActivityThread收到一个Activity启动消息时，会调用handleLaunchActivity(ActivityClientRecord, Intent, String)方法，handleLaunchActivity方法中有以下几句：

  1. WindowManagerGlobal.initialize();
  2. Activity a = performLaunchActivity(r, customIntent);
  4. handleResumeActivity(r.token, false, r.isForward, 
  5. !r.activity.mFinished && !r.startsNotResumed, r.lastProcessedSeq, reason);

可以看到，handleLaunchActivity中调用了performLaunchActivity和handleResumeActivity两个方法。

在performLaunchActivity()中，Activity被创建（onCreate也是在这里调用的），并且通过Activity.attach()方法将Window和Activity绑定。

  1. activity = mInstrumentation.newActivity(
  2.                     cl, component.getClassName(), r.intent);
  4. activity.attach(appContext, this, getInstrumentation(), r.token,
  5.                         r.ident, app, r.intent, r.activityInfo, title, r.parent,
  6.                         r.embeddedID, r.lastNonConfigurationInstances, config,
  7.                         r.referrer, r.voiceInteractor, window, r.configCallback);

在handleResumeActivity()方法中，DecorView会被添加到Window中。（同时这个方法里面也有一个performResumeActivity()方法，在这里调用Activity.onResume()）。

最后，我们会调用Activity的makeVisible()方法，并通知AMS我们的Activity已经resume了。

  1. ViewManager wm = a.getWindowManager();
  2. // 将DecorView添加到Window中，但此时其是不可见的
  3. wm.addView(decor, l);
  4. // ==> mDecor.setVisibility(View.VISIBLE);
  5. r.activity.makeVisible();
  6. ActivityManager.getService().activityResumed(token);

继续跟踪wm.addView(View, ViewGroup.LayoutParams)，会在WindowManagerGlobal这个单例类中找到：

  1. ViewRootImpl root;
  2. root = new ViewRootImpl(view.getContext(), display);
  3. root.setView(view, wparams, panelParentView);

这里的view即是decorView。至此，我们成功的建立起了WindowManager -> ViewRootImpl -> DecorView的关系。

4.2 MeasureSpec

4.2.1 MeasureSpec

网上讲MeasureSpec的有很多。简单的来讲，MeasureSpec就是这个View的大小（不准确，但是可以这样简化理解）。它是一个32位的整型，高2位代表SpecMode，低30位代表SpecSize。
SpecMode有三种：

  • UNSPECIFIED 父容器不对View做限制。
  • EXACTLY 精确测量模式，即View的最终大小。在View中设置具体数字大小，或者match_parent都是这个模式。
  • AT_MOST 可用大小模式，View的大小不会超过这个值。对应的是wrap_content。

4.2.2 MeasureSpec和LayoutParams的对应关系

我们在LayoutParams中会定义View的宽高，即布局xml中的android:layout_width和android:layout_height属性。一般来讲，我们会设置match_parent，wrap_content或者具体的数值。
同时，我们会通过View的measure方法向其传递MeasureSpec。综合父布局的MeasureSpec和View的LayoutParam，我们可以计算出这个View的MeasureSpec。
抛开UNSPECIFIED不谈（一般不用），以下表格表示了如何通过二者确定View具体MeasureSpec的：


























LP \ 父SpecMode EXACTLY AT_MOST
具体数值 specMode: EXACTLY
specSize: View定义的size		 specMode: EXACTLY
specSize: View定义的size
wrap_content specMode: AT_MOST
specSize: 父specSize		 specMode: AT_MOST
specSize: 父specSize
match_parent specMode: EXACTLY
specSize: 父specSize		 specMode: AT_MOST
specSize: 父specSize

可以看出，除非将View的宽高设定为确定的数值，否则其是受到父容器的影响的。具体的measure过程在下一节讲到。

4.3 View的工作流程

View的工作流程主要指measuer、layout、draw。
measure测量View的宽高，layout确定View的位置和大小，draw将View绘制在屏幕上。

4.3.1 measure

View通过measure来测量大小。同时，ViewGroup除了测量自己，还会遍历子View并调用其measure方法。
之前我们已经知道，View的大小由MeasureSpec来决定，而MeasureSpec又是通过父布局的MeasureSpec和LayoutParam共同决定的。
通过查看源码，我们可以看到，View的measure过程主要是通过在measure(int, int)方法中调用onMeasure(int, int)进行的。而onMeasure()的默认实现只有一句：

  1. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
  2.         setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),
  3.                 getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
  4.     }

我们在重写onMeasure方法的时候，必须要调用setMeasuredDimension(int measuredWidth, int measuredHeight)方法，否则系统会抛出异常。这个方法的主要目的是给View的mMeasuredWidth和mMeasuredWidth变量赋值。
也就是说，measure的结果就是，通过调用measure(int, int)方法，最终给View的mMeasuredWidth和mMeasuredWidth变量赋值，使得接下来的layout和draw流程顺利进行。
而measure(int, int)方法的两个参数是从何而来的呢？
在4.2.2中我们知道了，View的MeasureSpec是通过父布局的MeasureSpec和自身的LayoutParam来进行计算的，而这个过程是在父ViewGroup中就已经完成了的，如4.2.2中表格所示。也就是说，事实上，measure过程绝大多数工作是在父容器里面就已经完成了的。
在ViewGroup类中有一个getChildMeasureSpec(int spec, int padding, int childDimension)方法，在这里我们可以看到ViewGroup是怎么确定子View的measureSpec的，截取其中一段：

  1. switch (specMode) { 
  2.         // Parent has imposed an exact size on us
  3.         case MeasureSpec.EXACTLY:
  4.             if (childDimension >= 0) { 
  5.                 resultSize = childDimension;
  6.                 resultMode = MeasureSpec.EXACTLY;
  7.             } else if (childDimension == LayoutParams.MATCH_PARENT) { 
  8.                 // Child wants to be our size. So be it.
  9.                 resultSize = size;
  10.                 resultMode = MeasureSpec.EXACTLY;
  11.             } else if (childDimension == LayoutParams.WRAP_CONTENT) { 
  12.                 // Child wants to determine its own size. It can't be
  13.                 // bigger than us.
  14.                 resultSize = size;
  15.                 resultMode = MeasureSpec.AT_MOST;
  16.             }
  17.             break;
  19.         // Parent has imposed a maximum size on us
  20.         case MeasureSpec.AT_MOST:
  21.             if (childDimension >= 0) { 
  22.                 // Child wants a specific size... so be it
  23.                 resultSize = childDimension;
  24.                 resultMode = MeasureSpec.EXACTLY;
  25.             } else if (childDimension == LayoutParams.MATCH_PARENT) { 
  26.                 // Child wants to be our size, but our size is not fixed.
  27.                 // Constrain child to not be bigger than us.
  28.                 resultSize = size;
  29.                 resultMode = MeasureSpec.AT_MOST;
  30.             } else if (childDimension == LayoutParams.WRAP_CONTENT) { 
  31.                 // Child wants to determine its own size. It can't be
  32.                 // bigger than us.
  33.                 resultSize = size;
  34.                 resultMode = MeasureSpec.AT_MOST;
  35.             }
  36.             break;
  38.         // Parent asked to see how big we want to be
  39.         case MeasureSpec.UNSPECIFIED:
  40.             if (childDimension >= 0) { 
  41.                 // Child wants a specific size... let him have it
  42.                 resultSize = childDimension;
  43.                 resultMode = MeasureSpec.EXACTLY;
  44.             } else if (childDimension == LayoutParams.MATCH_PARENT) { 
  45.                 // Child wants to be our size... find out how big it should
  46.                 // be
  47.                 resultSize = View.sUseZeroUnspecifiedMeasureSpec ? 0 : size;
  48.                 resultMode = MeasureSpec.UNSPECIFIED;
  49.             } else if (childDimension == LayoutParams.WRAP_CONTENT) { 
  50.                 // Child wants to determine its own size.... find out how
  51.                 // big it should be
  52.                 resultSize = View.sUseZeroUnspecifiedMeasureSpec ? 0 : size;
  53.                 resultMode = MeasureSpec.UNSPECIFIED;
  54.             }
  55.             break;
  56.         }

特别地，当View的宽（或者高）设置为wrap_content的时候，查看4.2.2的表格，我们可以看到，View的SpecMode是AT_MOST，而SpecSize是父布局剩余的尺寸。也就是说，我们最后给这个View赋值的测量大小，也是父布局剩余尺寸，这跟match_parent是一样的效果，不符合我们的预期。造成这个结果的原因是，父布局并不知道这个View应该是多大，所以只能传递父布局的SpecSize。所以当我们自定义View的时候，需要重写onMeasure方法，并在其中加入当View的SpecMode是AT_MOST时，我们期望的测量结果。例如，我们想设置wrap_content时的宽高是100px：

  1. @Override
  2.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
  3.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  5.         int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
  6.         int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
  7.         int heightSpecMode = MeasureSpec.getMode(widthMeasureSpec);
  8.         int heightSpecSize = MeasureSpec.getSize(widthMeasureSpec);
  9.         if (widthSpecMode == MeasureSpec.AT_MOST && heightMeasureSpec == MeasureSpec.AT_MOST) { 
  10.             setMeasuredDimension(100, 100);
  11.         } else if (widthSpecMode == MeasureSpec.AT_MOST) { 
  12.             setMeasuredDimension(100, heightSpecSize);
  13.         } else if (heightSpecMode == MeasureSpec.AT_MOST) { 
  14.             setMeasuredDimension(widthSpecSize, 100);
  15.         }
  16.     }

而ViewGroup的measure过程，除了要测量自身以外，还要测量各个子View，测量完之后再计算出ViewGroup最终的大小。而这个过程根据ViewGroup的不同，最终测量出来的大小也可能是不一样的，例如LinearLayout和RelativeLayout，他们的测量过程显然不可能相同，所以ViewGroup并没有默认实现measure过程，在自定义ViewGroup的时候，必须重写onMeasure方法，否则会导致无法显示。虽然ViewGroup提供了measureChildren(int, int)和measureChild(View, int, int)方法，可以简便的对子元素进行测量，

4.3.2 layout

在计算好了尺寸之后，我们需要把View挨个放进ViewGroup里，如同搭积木一般。这个过程就是layout。所以我们可以简单的认为，layout的过程是为ViewGroup“量身定制”的。
layout过程跟measure很类似，ViewGroup遍历所有的子View，计算出其应在的位置。如同measure的最终结果是将mMeasuredWidth和mMeasuredWidth变量赋值一般，layout的最终结果是给View的mLeft mTop mRight mBottom四个变量赋值。
在ViewGroup中，onLayout是一个抽象方法，需要我们自己实现，在其中放置我们的子View。举个简单的例子，我们要做个子元素竖直排列的布局，并且每个子元素间隔10px，重写ViewGroup的onLayout方法：

  1. @Override
  2.     protected void onLayout(boolean changed, int l, int t, int r, int b) { 
  3.         int top = t;
  4.         int count = getChildCount();
  5.         for (int i = 0; i < count; i++) { 
  6.             final View child = getChildAt(i);
  7.             int childLeft = l;
  8.             int childTop = top;
  9.             int childRight = childLeft + child.getMeasuredWidth();
  10.             int childBottom = childTop + child.getMeasuredHeight();
  11.             child.layout(childLeft, childTop, childRight, childBottom);
  13.             top += child.getMeasuredHeight() + 10;
  14.         }
  15.     }

效果如下：
layout
可以看到符合预期。

4.3.3 draw

一般情况下，draw分为以下几步：

  1. 绘制背景（drawBackground）
  2. 绘制自身（onDraw）
  3. 绘制子元素（dispatchDraw）
  4. 绘制装饰（scrollbars）

我们一般只关心自身的绘制，也就是说，重写onDraw方法就可以了。对于自定义View的绘制，最重要的莫过于Canvas和Paint的使用。

4.3.4 小结*

View的三大流程，不是并列关系，而是依赖、递进的关系。也就是说，对于父布局，必须先测量好每个子元素的大小，再确定他们每个的位置，最后才能绘制出他们的图像。即：
measure -> layout -> draw

4.4 自定义View和ViewGroup

最后来根据本章内容做一下自定义View、ViewGroup。
预想图

我的目标是这样的：

  1. 自定义View：外圈圆形，包裹了一个五角星。可以自定义圆形和五角星的颜色，以及五角星的旋转角度。（其实旋转可以使用android:rotation属性的）
  2. 自定义ViewGroup：将所有的子View从左到右，从上到下，依次排列。

4.4.1 自定义View：StarView

4.4.1.0 定义属性

首先创建包含五角星各项数据的实体类Star：

  1. public class Star { 
  2.     /** * 五角星从中心到顶点的距离 */
  3.     private double mCVLength;
  5.     /** * 中心点的坐标 */
  6.     private Point mCenter;
  8.     /** * 五角星旋转的角度 */
  9.     private double mRotate;
  11.     /** * 五角星5个顶点坐标，顺序为：从最上方顶点开始，顺时针旋转的所有顶点。 */
  12.     private Point[] mPoints = new Point[5];
  14.     // ...
  15. }

略去其他部分，这里主要保存了五角星从中心到顶点的距离（大小）、中心点的坐标（位置）、五角星旋转的角度（角度），以及五个顶点的坐标（前三个值计算得到）。而我们等下在绘制图形的过程中，主要用到的就是这五个点的坐标。（至于是怎么求到的，则是高中知识，过程充满了血泪不表）

现在开始自定义StarView。新建StarView.java，继承自View。在style.xml中加入如下属性：

  1. <declare-styleable name="StarView">
  2.         <attr name="star_color" format="color" />
  3.         <attr name="star_scale" format="float" />
  4.         <attr name="star_rotate" format="float" />
  5.     </declare-styleable>

分别代表五角星的颜色、五角星占圈内的比例、五角星的旋转角度。而圆圈背景则直接从background属性获取，然后再把背景设置成透明：

  1. Drawable bgDrawable = getBackground();
  2.         if (bgDrawable instanceof ColorDrawable) { 
  3.             mBgColor = ((ColorDrawable) bgDrawable).getColor();
  4.         } else { 
  5.             mBgColor = Color.RED;
  6.         }
  7.         setBackgroundColor(0);

是不是很粗暴？

4.4.1.1 onMeasure

在onMeasure中，我们只是处理了对于wrap_content的判断：如果长（宽）是wrap_content，那么就将其设置为与宽（长）相等，即正方形（实际绘图区域，即去掉了padding之后的真实绘图区域）。如果二者皆是wrap_content，那么就均设为默认大小。

4.4.1.2 onDraw

首先，我们去除了各种padding之后，得到了真实的圆心坐标(cx, cy)、半径r。半径的值为真实绘图区域短边的一半。然后调用canvas.drawCircle()方法绘制出背景圆形。
然后，我们定义的Star类就登场了。
回顾一下，我们创建了Star对象之后，就可以获取它的5个顶点坐标。知道了坐标，我们就可以通过Path + canvas.DrawPath()来绘图了。先使用Path对象，按我们平时手工的方法画一个五角星，然后再drawPath填充颜色。代码如下：

  1. // draw star
  2.         Star star = getStar(mStarScale * r, cx, cy, mStarRotate);
  3.         Star.Point points[] = star.getPoints();
  5.         mPath.setFillType(Path.FillType.WINDING);
  6.         mPath.moveTo(points[0].x, points[0].y);
  7.         mPath.lineTo(points[3].x, points[3].y);
  8.         mPath.lineTo(points[1].x, points[1].y);
  9.         mPath.lineTo(points[4].x, points[4].y);
  10.         mPath.lineTo(points[2].x, points[2].y);
  11.         mPath.close();
  13.         mPaint.setColor(mStarColor);
  14.         canvas.drawPath(mPath, mPaint);

其中getStar()方法是为了避免在onDraw中创建对象。mPath.setFillType(Path.FillType.WINDING)允许我们完全填充这个路径内部。具体可以参考相关文章：https://blog.csdn.net/qq_30889373/article/details/78793086

4.4.1.3 完整代码

  1. /** * 圆形背景，五角星图案的自定义View。 */
  2. public class StarView extends View { 
  3.     private static final String TAG = "StarView";
  4.     private static final int DEFAULT_SIZE_PX = 128;
  5.     private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  6.     private int mStarColor;
  7.     private int mBgColor;
  8.     private float mStarScale;
  9.     private float mStarRotate;
  10.     private Path mPath;
  12.     public StarView(Context context) { 
  13.         this(context, null, 0);
  14.     }
  16.     public StarView(Context context, @Nullable AttributeSet attrs) { 
  17.         this(context, attrs, 0);
  18.     }
  20.     public StarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { 
  21.         super(context, attrs, defStyleAttr);
  22.         TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.StarView);
  23.         mStarColor = a.getColor(R.styleable.StarView_star_color, Color.YELLOW);
  24.         mStarScale = a.getFloat(R.styleable.StarView_star_scale, 0.8f);
  25.         mStarRotate = a.getFloat(R.styleable.StarView_star_rotate, 0);
  26.         a.recycle();
  28.         init();
  29.     }
  31.     private void init() { 
  32.         Drawable bgDrawable = getBackground();
  33.         if (bgDrawable instanceof ColorDrawable) { 
  34.             mBgColor = ((ColorDrawable) bgDrawable).getColor();
  35.         } else { 
  36.             mBgColor = Color.RED;
  37.         }
  38.         setBackgroundColor(0);
  39.         mPath = new Path();
  40.     }
  42.     @Override
  43.     @SuppressWarnings("SuspiciousNameCombination")
  44.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
  45.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  46.         int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
  47.         int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
  48.         int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
  49.         int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
  51.         // 对长宽为wrap_content的判断
  52.         if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST) { 
  53.             setMeasuredDimension(DEFAULT_SIZE_PX, DEFAULT_SIZE_PX);
  54.         } else if (widthSpecMode == MeasureSpec.AT_MOST) { 
  55.             int drawSize = heightSpecSize - getPaddingTop() - getPaddingBottom();
  56.             setMeasuredDimension(drawSize + getPaddingLeft() + getPaddingRight(), heightSpecSize);
  57.         } else if (heightSpecMode == MeasureSpec.AT_MOST) { 
  58.             int drawSize = widthSpecSize - getPaddingLeft() - getPaddingRight();
  59.             setMeasuredDimension(widthSpecSize, drawSize + getPaddingTop() + getPaddingBottom());
  60.         }
  61.     }
  63.     @Override
  64.     protected void onDraw(Canvas canvas) { 
  65.         super.onDraw(canvas);
  66.         int width = getWidth();
  67.         int height = getHeight();
  68.         int paddingLeft = getPaddingLeft();
  69.         int paddingRight = getPaddingRight();
  70.         int paddingTop = getPaddingTop();
  71.         int paddingBottom = getPaddingBottom();
  72.         int realWidth = width - paddingLeft - paddingRight;
  73.         int realHeight = height - paddingTop - paddingBottom;
  74.         if (realWidth <= 0 || realHeight <= 0) { 
  75.             return;
  76.         }
  78.         float cx, cy, r; // 圆心坐标x，圆心坐标y，半径
  80.         r = Math.min(realWidth, realHeight) / 2.0f;
  81.         cx = paddingLeft + r;
  82.         cy = paddingTop + r;
  84.         // draw background
  85.         if (mBgColor != Color.TRANSPARENT) { 
  86.             mPaint.setColor(mBgColor);
  87.             canvas.drawCircle(cx, cy, r, mPaint);
  88.         }
  90.         // draw star
  91.         Star star = getStar(mStarScale * r, cx, cy, mStarRotate);
  92.         Star.Point points[] = star.getPoints();
  94.         mPath.setFillType(Path.FillType.WINDING);
  95.         mPath.moveTo(points[0].x, points[0].y);
  96.         mPath.lineTo(points[3].x, points[3].y);
  97.         mPath.lineTo(points[1].x, points[1].y);
  98.         mPath.lineTo(points[4].x, points[4].y);
  99.         mPath.lineTo(points[2].x, points[2].y);
  100.         mPath.close();
  102.         mPaint.setColor(mStarColor);
  103.         canvas.drawPath(mPath, mPaint);
  104.     }
  106.     /** * 由于onDraw中最好不要频繁的创建对象，所以使用临时的成员来保存Star。 */
  107.     private Star mStarTemp;
  109.     private Star getStar(double a, double cx, double cy, double rotate) { 
  110.         if (mStarTemp == null) { 
  111.             mStarTemp = new Star(a, cx, cy, rotate);
  112.         } else { 
  113.             mStarTemp.setStar(a, cx, cy, rotate);
  114.         }
  115.         return mStarTemp;
  116.     }
  118. }
  120. /** * 通过输入五角星的中心点坐标和顶点到中心的长度，计算出五角星每个顶点的坐标。 * <p> * Created by LittleFogCat on 2019/1/26. */
  121. @SuppressWarnings("WeakerAccess")
  122. public class Star { 
  124.     /** * 一些计算中常用的常数 */
  125.     private static final double sin18 = sin(18);
  126.     private static final double sin36 = sin(36);
  127.     private static final double cos18 = cos(18);
  128.     private static final double cos36 = cos(36);
  130.     /** * 五角星从中心到顶点的距离 */
  131.     private double mCVLength;
  133.     /** * 中心点的坐标 */
  134.     private Point mCenter;
  136.     /** * 五角星旋转的角度 */
  137.     private double mRotate;
  139.     /** * 五角星5个顶点坐标，顺序为：从最上方顶点开始，顺时针旋转的所有顶点。 */
  140.     private Point[] mPoints = new Point[5];
  142.     /** * 构造函数，构造出一个正置无旋转的五角星。 * * @param a 五角星中心到顶点的距离 * @param cx 五角星中心坐标x * @param cy 五角星中心坐标y */
  143.     public Star(double a, double cx, double cy) { 
  144.         this(a, cx, cy, 0);
  145.     }
  147.     /** * 主要构造函数。根据五角星中心坐标和中心到顶点的距离，计算出每个顶点的长度。 * * @param a 五角星中心到顶点的距离 * @param cx 五角星中心坐标x * @param cy 五角星中心坐标y * @param rotate 五角星旋转角度，0度为正置五角星 */
  148.     public Star(double a, double cx, double cy, double rotate) { 
  149.         mCVLength = a;
  150.         mCenter = new Point(cx, cy);
  151.         mRotate = rotate;
  152.         makeCoordinate();
  153.     }
  155.     public void setStar(double a, double cx, double cy, double rotate) { 
  156.         mCVLength = a;
  157.         mCenter.x = (float) cx;
  158.         mCenter.y = (float) cy;
  159.         mRotate = rotate;
  160.         makeCoordinate();
  161.     }
  163.     /** * 计算顶点坐标。 */
  164.     private void makeCoordinate() { 
  165.         Point p[] = getPoints();
  166.         final double x = mCenter.x;
  167.         final double y = mCenter.y;
  168.         final double a = mCVLength;
  170.         if (mRotate == 0) { 
  171.             p[0] = new Point(x, y - a);
  172.             p[1] = new Point(x + a * cos18, y - a * sin18);
  173.             p[2] = new Point(x + a * sin36, y + a * cos36);
  174.             p[3] = new Point(x - a * sin36, y + a * cos36);
  175.             p[4] = new Point(x - a * cos18, y - a * sin18);
  176.         } else { 
  177.             final double r = mRotate;
  178.             for (int i = 0; i < 5; i++) { 
  179.                 p[i] = new Point(x + a * sin(r + 72 * i), y - a * cos(r + 72 * i));
  180.             }
  181.         }
  182.     }
  184.     /** * 获取五角星的顶点坐标 * * @return 五角星的顶点坐标 */
  185.     public Point[] getPoints() { 
  186.         if (mPoints == null || mPoints.length != 5) { 
  187.             mPoints = new Point[5];
  188.         }
  189.         return mPoints;
  190.     }
  192.     /** * {@link Math#sin(double)} 参数是弧度，这里转换为以度数为参数的函数 * * @param a degree * @return sin(a) */
  193.     private static double sin(double a) { 
  194.         return Math.sin(Math.toRadians(a));
  195.     }
  197.     /** * {@link Math#cos(double)} 参数是弧度，这里转换为以度数为参数的函数 * * @param a degree * @return cos(a) */
  198.     private static double cos(double a) { 
  199.         return Math.cos(Math.toRadians(a));
  200.     }
  202.     public static class Point { 
  203.         public float x, y;
  205.         public Point() { 
  206.         }
  208.         public Point(float x, float y) { 
  209.             this.x = x;
  210.             this.y = y;
  211.         }
  213.         public Point(double x, double y) { 
  214.             this.x = (float) x;
  215.             this.y = (float) y;
  216.         }
  218.     }
  219. }

4.4.2 自定义ViewGroup：FlowLayout

我们给他取了一个很好听的名字，FlowLayout流布局。实际上就是把子View挨个放。虽然写的时候感觉挺麻烦的，但是其实思路上面很简单，没什么复杂的地方。

4.4.2.0 onMeasure

只需要处理长（宽）是wrap_content的情况。思路很简单，挨个取出所有的子View：

  1. 如果宽是wrap_content，那么用变量保存最长行的宽度，本行宽度和本行剩余宽度；如果本行剩余宽度比这个子View小，那么就到下一行继续排，比较本行宽度和最长宽度；最后哪一行的宽度最宽，setMeasuredDimension的width就是它了（当然，不能超过parent的宽度）；
  2. 如果高是wrap_content，那么和1中相同的排法，不同的就是记录每行最高的View高度，然后把他们全加起来，得到的就是总的高度了（当然，不能超过parent的高度）；
  3. 如果宽高都是wrap_content，那么就是1和2的结合。

4.4.2.1 onLayout

排布方式已经在onMeasure中说过了，所以onLayout只需要简单的算一下子View的上下左右坐标即可。
需要注意的是，为了支持margin属性，我们需要自定义LayoutParams，继承自ViewGroup.MarginLayoutParams，然后重写generateLayoutParams()方法。

4.4.2.2 完整代码

  1. public class FlowLayout extends ViewGroup { 
  2.     public FlowLayout(Context context) { 
  3.         super(context);
  4.         init();
  5.     }
  7.     public FlowLayout(Context context, AttributeSet attrs) { 
  8.         super(context, attrs);
  9.         init();
  10.     }
  12.     public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) { 
  13.         super(context, attrs, defStyleAttr);
  14.         init();
  15.     }
  17.     private void init() { 
  19.     }
  21.     @Override
  22.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
  23.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  25.         int widthMode = MeasureSpec.getMode(widthMeasureSpec);
  26.         int widthSize = MeasureSpec.getSize(widthMeasureSpec);
  27.         int heightMode = MeasureSpec.getMode(heightMeasureSpec);
  28.         int heightSize = MeasureSpec.getSize(heightMeasureSpec);
  30.         final int childCount = getChildCount();
  31.         measureChildrenWithMargins(widthMeasureSpec, heightMeasureSpec);
  33.         if (childCount == 0) { 
  34.             setMeasuredDimension(0, 0);
  35.         } else if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) { 
  36.             int totalWidth = getPaddingLeft() + getPaddingRight();
  37.             int totalHeight = getPaddingTop() + getPaddingBottom();
  38.             int rowWidth = getPaddingLeft() + getPaddingRight();
  39.             int rowHeight = 0;
  40.             for (int i = 0; i < childCount; i++) { 
  41.                 View child = getChildAt(i);
  42.                 int childWidth = child.getMeasuredWidth();
  43.                 int childHeight = child.getMeasuredHeight();
  45.                 if (widthSize - rowWidth < childWidth) {  // 行剩余空间不足，需要换行
  46.                     totalHeight += childHeight;
  47.                     rowHeight = childHeight;
  48.                     rowWidth = childWidth + getPaddingLeft() + getPaddingRight();
  50.                 } else { 
  51.                     rowWidth += childWidth;
  52.                     if (childHeight > rowHeight) { 
  53.                         rowHeight = childHeight;
  54.                         totalHeight += childHeight - rowHeight;
  55.                     }
  56.                 }
  57.                 if (totalWidth < rowWidth) { 
  58.                     totalWidth = rowWidth;
  59.                 }
  60.             }
  61.             setMeasuredDimension(totalWidth, totalHeight);
  62.         } else if (widthMode == MeasureSpec.AT_MOST) { 
  63.             int totalWidth = getPaddingLeft() + getPaddingRight();
  64.             int rowWidth = getPaddingLeft() + getPaddingRight();
  65.             int rowHeight = getPaddingTop() + getPaddingBottom();
  66.             for (int i = 0; i < childCount; i++) { 
  67.                 View child = getChildAt(i);
  68.                 int childWidth = child.getMeasuredWidth();
  69.                 int childHeight = child.getMeasuredHeight();
  71.                 if (widthSize - rowWidth < childWidth) {  // 行剩余空间不足，需要换行
  72.                     rowHeight = childHeight;
  73.                     rowWidth = childWidth + getPaddingLeft() + getPaddingRight();
  74.                 } else { 
  75.                     rowWidth += childWidth;
  76.                     if (childHeight > rowHeight) { 
  77.                         rowHeight = childHeight;
  78.                     }
  80.                 }
  81.                 if (totalWidth < rowWidth) { 
  82.                     totalWidth = rowWidth;
  83.                 }
  84.             }
  85.             setMeasuredDimension(totalWidth, heightSize);
  86.         } else if (heightMode == MeasureSpec.AT_MOST) { 
  87.             int totalHeight = getPaddingTop() + getPaddingBottom();
  88.             int rowWidth = getPaddingLeft() + getPaddingRight();
  89.             int rowHeight = 0;
  90.             for (int i = 0; i < childCount; i++) { 
  91.                 View child = getChildAt(i);
  92.                 int childWidth = child.getMeasuredWidth();
  93.                 int childHeight = child.getMeasuredHeight();
  95.                 if (widthSize - rowWidth < childWidth) {  // 行剩余空间不足，需要换行
  96.                     totalHeight += childHeight;
  97.                     rowHeight = childHeight;
  98.                     rowWidth = childWidth + getPaddingLeft() + getPaddingRight();
  99.                 } else { 
  100.                     rowWidth += childWidth;
  101.                     if (childHeight > rowHeight) { 
  102.                         rowHeight = childHeight;
  103.                         totalHeight += childHeight - rowHeight;
  104.                     }
  105.                 }
  106.             }
  107.             setMeasuredDimension(widthSize, totalHeight);
  108.         }
  110.     }
  112.     protected void measureChildrenWithMargins(int widthMeasureSpec, int heightMeasureSpec) { 
  113.         int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
  114.         int childCount = getChildCount();
  115.         int widthUsed = getPaddingLeft() + getPaddingRight();
  116.         int heightUsed = getPaddingTop() + getPaddingBottom();
  117.         int rowHeight = 0;
  118.         for (int i = 0; i < childCount; i++) { 
  119.             View child = getChildAt(i);
  120.             LayoutParams lp = (LayoutParams) child.getLayoutParams();
  121.             if (child.getVisibility() == View.GONE) { 
  122.                 continue;
  123.             }
  124.             if (widthUsed + lp.width + lp.leftMargin + lp.rightMargin > widthSpecSize) { 
  125.                 widthUsed = getPaddingLeft() + getPaddingRight();
  126.                 rowHeight = 0;
  127.             }
  128.             measureChildWithMargins(child, widthMeasureSpec, widthUsed, heightMeasureSpec, heightUsed);
  129.             int measuredWidth = child.getMeasuredWidth();
  130.             int measuredHeight = child.getMeasuredHeight();
  131.             widthUsed += measuredWidth;
  132.             if (measuredHeight > rowHeight) { 
  133.                 rowHeight = measuredHeight;
  134.                 heightUsed += measuredHeight - rowHeight;
  135.             }
  136.         }
  137.     }
  139.     @Override
  140.     protected void onLayout(boolean changed, int l, int t, int r, int b) { 
  141.         int paddingLeft = getPaddingLeft();
  142.         int paddingRight = getPaddingRight();
  143.         int paddingTop = getPaddingTop();
  144.         int paddingBottom = getPaddingBottom();
  146.         final int childCount = getChildCount();
  147.         int width = getMeasuredWidth();
  148.         int height = getMeasuredHeight();
  149.         int rowHeight = 0;
  150.         int childTop = paddingTop;
  151.         int childLeft = paddingLeft;
  153.         for (int i = 0; i < childCount; i++) { 
  154.             final View child = getChildAt(i);
  155.             if (child.getVisibility() != View.GONE) { 
  156.                 int childWidth = child.getMeasuredWidth();
  157.                 int childHeight = child.getMeasuredHeight();
  158.                 LayoutParams lp = (LayoutParams) child.getLayoutParams();
  160.                 int left, top, right, bottom;
  161.                 if (childLeft + childWidth > width) {  // 换行
  162.                     childTop += rowHeight;
  164.                     left = paddingLeft + lp.leftMargin;
  165.                     top = childTop + lp.topMargin;
  166.                     right = left + childWidth;
  167.                     bottom = top + childHeight;
  168.                     child.layout(left, top, right, bottom);
  169.                     childLeft = right + lp.rightMargin;
  171.                     rowHeight = childHeight + lp.topMargin + lp.bottomMargin;
  172.                 } else { 
  173.                     left = childLeft + lp.leftMargin;
  174.                     top = childTop + lp.topMargin;
  175.                     right = left + childWidth;
  176.                     bottom = top + childHeight;
  177.                     child.layout(left, top, right, bottom);
  178.                     childLeft = right + lp.rightMargin;
  180.                     rowHeight = Math.max(rowHeight, childHeight + lp.topMargin + lp.bottomMargin);
  181.                 }
  182.             }
  183.         }
  184.     }
  186.     @Override
  187.     public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) { 
  188.         return new LayoutParams(getContext(), attrs);
  189.     }
  191.     @Override
  192.     protected ViewGroup.LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) { 
  193.         return new LayoutParams(p);
  194.     }
  196.     public static class LayoutParams extends ViewGroup.MarginLayoutParams { 
  197.         public LayoutParams(Context c, AttributeSet attrs) { 
  198.             super(c, attrs);
  199.         }
  201.         public LayoutParams(int width, int height) { 
  202.             super(width, height);
  203.         }
  205.         public LayoutParams(MarginLayoutParams source) { 
  206.             super(source);
  207.         }
  209.         public LayoutParams(ViewGroup.LayoutParams source) { 
  210.             super(source);
  211.         }
  212.     }
  213. }

5 其他

本文同时发布于简书：https://www.jianshu.com/p/49b89104d828
本章GitHub地址：https://github.com/LittleFogCat/AndroidBookNote/tree/master/chapter04_view

发表评论

表情：
评论列表 （有 0 条评论，391人围观）

还没有评论，来说两句吧...

相关阅读