（三）高级UI自定义view，自定义viewgroup
站长
· 阅读数 45
一、面试题补充
为什么ViewGroup不会执行onDraw()方法？
答案： DecorView执行View.draw(canvas)的方法
-->ondraw(canvas)
-->dispatchDraw(canvas)此处调用ViewGroup.java的dispatchDraw(canvas)
-->drawchild()
-->View.draw(canvas,viewgroup,long)
-->renderNode = updateDisplayListIfDirty();//如果脏了更新显示列表
-->dispatchDraw(canvas);//条件判断进入
二、自定义view的步骤举例。
1.添加自定义的属性
创建此文件res/values/attrs.xml,并按需求添加相应的参数
此处添加的是颜色的设置
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ColorTextView">
<attr name="orgincolor" format="color"/>
<attr name="changecolor" format="color"/>
</declare-styleable>
</resources>
2.在布局的xml里使用自定义的控件，并添加上自己的属性。
app:changecolor = "#ff0000"
可能会没有提示，写好能点击跳转进去就没问题。
<com.lzl.jnibianyin.view.MyTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:changecolor = "#ff0000"
android:text="贾天龙"
/>
3.自定义view的代码，举例是自定义textView
public class MyTextView extends AppCompatTextView {
public MyTextView(@NonNull Context context) {
this(context,null);
}
public MyTextView(@NonNull Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
public MyTextView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context,attrs);
}
private void init(Context context, AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ColorTextView);
int orginColor = typedArray.getColor(R.styleable.ColorTextView_orgincolor,getTextColors().getDefaultColor());
int changeColor = typedArray.getColor(R.styleable.ColorTextView_changecolor,getTextColors().getDefaultColor());
//回收
typedArray.recycle();
//初始化画笔
orginPaint = getPaintByColor(orginColor);
changePaint = getPaintByColor(changeColor);
}
private Paint orginPaint;
private Paint changePaint;
private float mcurrentPro = 0f;
private Direction mDirection = Direction.LEFT_TO_RIGHT;
private Paint getPaintByColor(int color){
//抗锯齿
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
//防抖动
paint.setDither(true);
paint.setColor(color);
paint.setTextSize(getTextSize());
return paint;
}
public enum Direction {
LEFT_TO_RIGHT, RIGHT_TO_LEFT
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float currentCenter = mcurrentPro *getWidth();
Log.e("lzl",currentCenter+"");
if(mDirection == Direction.LEFT_TO_RIGHT){
drawText(canvas,changePaint,0, (int) currentCenter);
drawText(canvas,orginPaint,(int) currentCenter, getWidth());
}else{
drawText(canvas,orginPaint,0, getWidth() - (int) currentCenter);
drawText(canvas,changePaint,getWidth() - (int) currentCenter, getWidth());
}
}
private void drawText(Canvas canvas,Paint paint,int start,int end){
canvas.save();
Rect rect = new Rect(start,0,end,getHeight());
canvas.clipRect(rect);
String text = getText().toString();
//获取文字的区域
Rect bounds = new Rect();
paint.getTextBounds(text,0,text.length(),bounds);
//计算x的位置
float dx = (getWidth() - bounds.width())/2;
//计算基线
Paint.FontMetricsInt fontMetricsInt = changePaint.getFontMetricsInt();
float baseLine =(fontMetricsInt.bottom - fontMetricsInt.top)/2 - fontMetricsInt.bottom;
float dy = getHeight()/2 + baseLine;
Log.e("lzl",fontMetricsInt.bottom +" "+fontMetricsInt.top+" "+baseLine +" "+dy+" "+(fontMetricsInt.bottom - fontMetricsInt.top)/2);
canvas.drawText(text,dx,dy,paint);
canvas.restore();
}
//设置模式，从左往右，还是从右往左
public void setDirection(Direction direction){
mDirection = direction;
}
//设置当前的进度，并刷新
public void setMcurrentPro(float currentPro){
mcurrentPro = currentPro;
invalidate();
}
}
4. 文字计算的方法讲解。
- 获取输入文字的宽高信息。
//获取文字的区域
Rect bounds = new Rect();
changePaint.getTextBounds(text,0,text.length(),bounds);
- 计算横坐标位置，让文字永远横坐标上居中
//计算x的位置
float dx = (getWidth() - bounds.width())/2;
- 计算中间线到基线的距离
//计算中间线到基线的距离
Paint.FontMetricsInt fontMetricsInt = changePaint.getFontMetricsInt();
float baseLine =(fontMetricsInt.bottom - fontMetricsInt.top)/2 - fontMetricsInt.bottom;
baseline: 文字显示的基准线。也是计算结果的0度标。在上面的就是负值，下面的是正值。
fontMetricsInt.top: 蓝框的上边到baseline的距离，因为在上所以是负值。
fontMetricsInt.bottom: 蓝框的下边到baseline的距离，因为在下所以是正值。
计算中间线的位置：(fontMetricsInt.bottom - fontMetricsInt.top)/2
为了计算中间线到baseline的距离：(fontMetricsInt.bottom - fontMetricsInt.top)/2 - fontMetricsInt.bottom
- 计算dy文字在纵坐标的位置的位置。
float dy = getHeight()/2 + baseLine;
文本dy的绘制位置是整个控件高度一半，再往下偏移中间线到baseline的距离。（让文字居中）：
5.自定义view中onMeasure的计算流程
可以先看viewgroup里对MeasureSpec的介绍
//获取计算的尺寸结果
int height = getMeasuredHeight();
int width = getMeasuredWidth();
//跟父类限制进行最终结果计算。
int rHeight = resolveSize(height,heightMeasureSpec);
int rWidth = resolveSize(width,widthMeasureSpec);
//保存结果
setMeasuredDimension(rWidth,rHeight);
resolveSize()方法的计算方式。
public static int resolveSizeAndState(int size, int measureSpec, int childMeasuredState) {
final int specMode = MeasureSpec.getMode(measureSpec);//获取父布局的限制模式
final int specSize = MeasureSpec.getSize(measureSpec);//获取父布局的限制值
final int result;//返回结果
switch (specMode) {
case MeasureSpec.AT_MOST://如果父布局是限制最大值。
if (specSize < size) {
//因为测量结果大于最大限制，所以修改模式为固定模式EXACTLY,值为父类给的最大值。
result = specSize | MEASURED_STATE_TOO_SMALL;
} else {
//因为小于最大限制，所以返回测量结果
result = size;
}
break;
case MeasureSpec.EXACTLY:
//因为模式是固定值，则返回父类的固定值。
result = specSize;
break;
case MeasureSpec.UNSPECIFIED:
//不限制，就返回返回的量结果和不限制的模式。
default:
result = size;
}
return result | (childMeasuredState & MEASURED_STATE_MASK);
}
三、自定义viewGroup 流式布局
1.measureSpec介绍
是一个32位的int值。前2位是mode,后30位是值。
mode:
- EXACTLY:限制固定值
- AT_MOST:限制上限
- UNSPECIFIED:不限制
2.ViewGroup里的onMeasure的流程。
-
调用子view的measure方法对子view进行测量。
-
根据子view计算出的尺寸，得出子view的位置，把尺寸和位置保存起来。
-
根据子view的尺寸和位置，计算自己的尺寸和位置，通过setMeasuredDimension()来设置宽高保存。
3.交给子view的父控件的限制条件，measureSpecWidth和measureSpecHeigh的计算方法。
原理：就是把子空间的layout_开头的参数拿出来，跟父类限制信息进行混合计算来的得出对子view的限制条件，然后交给子view去计算他的宽高。（开发者设置的优先级高于父类的限制）
- 如果开发者给的限制是固定值，则返回固定值+EXACTLY.(开发者最shi大)
LayoutParams lp = child.getLayoutParams();//结果是固定值的话。
//defult的情况走下面，
MeasureSpec.makeMeasureSpec(lp.width,MeasureSpec.EXACTLY);
- 如果开发者给的是MATHCH_PARTENT,需要根据父布局的限制来分析
可用空间:父控件限制的大小-之前view占用的空间。
-
如果父布局给的是AT_MOST、EXACTLY，则返回 可用空间 + EXACTLY。
-
如果父布局给的是UNSPECIFIED:不限制 + MATCH_PARENT -> (0,UNSPECIFIED)
- 如果开发者给的是WRAP_CONTENT,子VIEW自己测量。（包含一隐含条件不能超过父view的限制）
-
如果父布局给的是AT_MOST、EXACTLY，则返回 可用空间 + AT_MOST。
-
如果父布局给的是UNSPECIFIED:不限制 + WRAP_CONTENT -> (0,UNSPECIFIED)
4.流式布局代码
自定义view处理padding，margin由父容器来处理。
padding:是内部内容的和边框的距离。
margin:是每个控件之间的距离。
public class MyLayout extends ViewGroup {
private List<View> mLineViews;//每一行的view
private List<List<View>> mViews;//所有的view，一行一行记录
private List<Integer> mHeights;//每一行的高度。
public MyLayout(Context context) {
this(context,null);
}
public MyLayout(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public MyLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
//为了获取子view的LayoutParams，xml解析会调用到这里，Layoutinflate.Inflate()源码里有。
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MarginLayoutParams(getContext(),attrs);
}
//不可以。
// @Override
// protected LayoutParams generateLayoutParams(LayoutParams p) {
// return new MarginLayoutParams(p);
// }
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//获取父容器给的限制条件
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
//记录当前行的宽度和高度
int lineWidth = 0;//当前子view的宽度和
int lineHeight = 0;//当前子view的高度最大的值。
//整个流式布局的宽高
int flowLayoutWidth = 0;
int flowLayoutHeight = 0;
//初始化容器。
init();
int paddingleftright = getPaddingLeft() + getPaddingRight();
int paddingtopbottom = getPaddingBottom() + getPaddingTop();
//获取所有的child的个数，循环遍历
int childCount = this.getChildCount();
for (int i = 0; i < childCount; i++) {
//获取子view
View child = this.getChildAt(i);
//测量子view的大小。无margin的
// measureChild(child,widthMeasureSpec,heightMeasureSpec);
//有margin的用这个方法，算宽高的时候会去掉margin.
measureChildWithMargins(child,widthMeasureSpec,0,heightMeasureSpec,0);
//计算margin
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
int childMarginLeftRight = lp.leftMargin + lp.rightMargin;
int childMarginTopBottom = lp.topMargin + lp.bottomMargin;
//获取child的宽高
int childWidth = child.getMeasuredWidth();
int childHeight = child.getMeasuredHeight();
//换行判断条件
if(lineWidth + childWidth + paddingleftright+ childMarginLeftRight>widthSize){
mViews.add(mLineViews);
mLineViews = new ArrayList<>();
//流式布局的宽高修正
flowLayoutWidth = Math.max(flowLayoutWidth,lineWidth);
flowLayoutHeight += lineHeight;
mHeights.add(lineHeight);
lineHeight = 0;
lineWidth = 0;
}
mLineViews.add(child);
lineWidth += childWidth+childMarginLeftRight;
lineHeight = Math.max(lineHeight,childHeight+childMarginTopBottom);
}
if(lineHeight !=0){
mViews.add(mLineViews);
//流式布局的宽高修正
flowLayoutWidth = Math.max(flowLayoutWidth,lineWidth);
flowLayoutHeight += lineHeight;
mHeights.add(lineHeight);
}
flowLayoutWidth += paddingleftright ;
flowLayoutHeight += paddingtopbottom;
Log.e("lzl","viegroup:"+(widthMode == MeasureSpec.EXACTLY?widthSize:flowLayoutWidth)+" "+(heightMode == MeasureSpec.EXACTLY?heightSize:flowLayoutHeight));
setMeasuredDimension(widthMode == MeasureSpec.EXACTLY?widthSize:flowLayoutWidth,heightMode == MeasureSpec.EXACTLY?heightSize:flowLayoutHeight);
}
private void init() {
mLineViews = new ArrayList<>();
mViews = new ArrayList<>();
mHeights = new ArrayList<>();
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int count = mViews.size();
int left = getPaddingLeft();
int top = getPaddingTop();
for (int i = 0; i < count; i++) {
List<View> childline = mViews.get(i);
int height = mHeights.get(i);
left = getPaddingLeft();
for(int j = 0;j<childline.size();j++){
View child = childline.get(j);
Log.e("lzl"+j,left+" "+top+" "+(left+child.getMeasuredWidth())+" "+(top+child.getMeasuredHeight()));
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
int ll = left+lp.leftMargin;
int tt = top+lp.topMargin;
int rr = ll + child.getMeasuredWidth();
int bb = tt +child.getMeasuredHeight();
child.layout(ll,tt,rr,bb);
left += rr + lp.rightMargin;
}
//因为在测量的时候已经进行过margin的处理了。所以此处不用处理。
top += height;
}
}
}
转载自:https://juejin.cn/post/7012821426793087007