AndroidUI绘制流程实例2(继承ViewGroup)

于 2019-12-15 14:20:45 发布
阅读量410 收藏
点赞数
分类专栏： 自定义view与点击事件 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36828822/article/details/103547605
版权

案例仅供参考学习。

MainActivity：

package com.example.test;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}
}

TagLayout：

package com.example.test;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

public class TagLayout extends ViewGroup {
	//记录每一行有多高
	List<Integer> lineHeights = new ArrayList<Integer>();
	List<List<View>> views = new ArrayList<List<View>>();
	
	public TagLayout(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b) {
		views.clear();
		lineHeights.clear();
		//1.计算
		//该行有多少列数据
		List<View> lineViews = new ArrayList<View>();
		int width = getMeasuredWidth();//容器自己的宽度
		int lineWidth = 0;
		int lineHeight = 0;//这一行的最大高度
		int childCount = getChildCount();
		for (int j = 0; j < childCount; j++) {
			View child = getChildAt(j);
			MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
			int childWidth = child.getMeasuredWidth();
			int childHeigh = child.getMeasuredHeight();
			if(childWidth + lp.leftMargin + lp.rightMargin+lineWidth>width){
				//超出,换行
				lineHeights.add(lineHeight);
				views.add(lineViews);
				lineWidth = 0;
				lineViews = new ArrayList<View>();
			}
			lineWidth += childWidth + lp.leftMargin +lp.rightMargin;
			lineHeight = Math.max(lineHeight, childHeigh + lp.topMargin + lp.bottomMargin);
			lineViews.add(child);
		}
		lineHeights.add(lineHeight);
		views.add(lineViews);
		int left = 0;
		int top = 0;
		//2.摆放
		int size = views.size();
		for (int i = 0; i < size; i++) {
			lineViews = views.get(i);
			lineHeight = lineHeights.get(i);
			for (int j = 0; j < lineViews.size(); j++) {
				//遍历这一行的所有child
				View child = lineViews.get(j);
				MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
				int lc = left + lp.leftMargin;
				int tc = top + lp.topMargin;
				int rc = lc + child.getMeasuredWidth();
				int bc = tc + child.getMeasuredHeight();
				child.layout(lc, tc, rc, bc);
				left += child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
			}
			left = 0;
			top += lineHeight;
		}
	}
	
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
		int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
		int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
		int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
		
		int width = 0;//width=所有行里面最宽的一行
		int height = 0;//height=所有行的高度相加
		//一行的宽度=一行当中的所有view的宽度的和
		int lineWidth = 0;
		int lineHeight = 0;
		
		//1.测量所有子控件的大小
		int childCount = getChildCount();
		for (int i = 0; i < childCount; i++) {
			View child = getChildAt(i);
			measureChild(child, widthMeasureSpec, heightMeasureSpec);
			MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
			//子控件真实占用的宽和高度
			int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
			int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
			//当一行放不下的时候需要换行
			if(lineWidth + childWidth>sizeWidth){
				//换行
				width = Math.max(lineWidth, width);
				lineWidth = childWidth;
				
				height += lineHeight;
				lineHeight = childHeight;
			}else{//累加
				lineWidth +=childWidth;
				lineHeight = Math.max(lineHeight, childHeight);
			}
			//最后一步
			if(i==childCount-1){
				width = Math.max(width, lineWidth);
				height += lineHeight;
			}
		}
		
		//2.测量并定义自身的大小
		int measuredWidth = (modeWidth ==  MeasureSpec.EXACTLY)?sizeWidth:width;//wrap_content/match_parent/EXACTLY
		int measuredHeight = (modeHeight ==  MeasureSpec.EXACTLY)?sizeHeight:height;//wrap_content/match_parent/EXACTLY
		setMeasuredDimension(measuredWidth, measuredHeight);
	}

	@Override
	protected LayoutParams generateLayoutParams(LayoutParams p) {
		// TODO Auto-generated method stub
		return new MarginLayoutParams(p);
	}
	
	@Override
	public LayoutParams generateLayoutParams(AttributeSet attrs) {
		// TODO Auto-generated method stub
		return new MarginLayoutParams(getContext(), attrs);
	}
}

布局:

<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity" >
	<com.example.test.TagLayout
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content" >
	
	    <TextView
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:textSize="20dp"
	        android:layout_margin="5dp"
	        android:textColor="#f00"
	        android:background="@drawable/tag_bg"
	        android:text="你好！" />
	    <TextView
	        android:background="@drawable/tag_bg"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:textSize="20dp"
	        android:layout_margin="5dp"
	        android:textColor="#000"
	        android:text="我好！" />
	    <TextView
	        android:background="@drawable/tag_bg"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:textSize="20dp"
	        android:layout_margin="5dp"
	        android:textColor="#f0f"
	        android:text="大家好！" />
	    <TextView
	        android:background="@drawable/tag_bg"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:textSize="20dp"
	        android:layout_margin="5dp"
	        android:textColor="#f0f"
	        android:text="世界好！" />
	    <TextView
	        android:background="@drawable/tag_bg"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:textSize="20dp"
	        android:layout_margin="5dp"
	        android:textColor="#f0f"
	        android:text="Hello World!" />
	    <TextView
	        android:background="@drawable/tag_bg"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:textSize="20dp"
	        android:layout_margin="5dp"
	        android:textColor="#ff0"
	        android:text="Android你好！" />
	</com.example.test.TagLayout>
</LinearLayout>

tag_bg:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#AAC261"/>
    <corners android:radius="5dp"/>
    <padding android:left="10dp"
        android:top="2dp"
        android:right="10dp"
        android:bottom="2dp" />
</shape>

运行结果:
在这里插入图片描述

自定义view的具体步骤：(参考注释)

package com.zero.myviewgroupdemo01;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

public class MyViewGroup extends ViewGroup {

    private static final int OFFSET = 100;//表示缩进的尺寸

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

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

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //1. 测量自身
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // 2. 为每个子View计算测量的限制信息 Mode / Size
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        //3. 把上一步确定的限制信息，传递给每一个子View，然后子View开始measure
        //自己的尺寸
        int childCount = getChildCount();//子view的个数
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            ViewGroup.LayoutParams lp = child.getLayoutParams();
            int childWidthSpec = getChildMeasureSpec(widthMeasureSpec, 0, lp.width);
            int childHeightSpec = getChildMeasureSpec(heightMeasureSpec, 0, lp.height);
            child.measure(childWidthSpec, childHeightSpec);
        }

        int width = 0;
        int height = 0;
        //4. 获取子View测量完成后的尺寸
        //5. ViewGroup根据自身的情况，计算自己的尺寸
        switch (widthMode) {
            case MeasureSpec.EXACTLY:
                width = widthSize;
                break;
            case MeasureSpec.AT_MOST:
            case MeasureSpec.UNSPECIFIED:
                for (int i = 0; i < childCount; i++) {
                    View child = getChildAt(i);
                    int widthAddOffset = i * OFFSET + child.getMeasuredWidth();
                    width = Math.max(width, widthAddOffset);//取最大的宽度
                }
                break;
            default:
                break;
        }

        switch (heightMode){
            case MeasureSpec.EXACTLY:
                height =heightSize;
                break;
            case MeasureSpec.AT_MOST:
            case MeasureSpec.UNSPECIFIED:
                for (int i = 0; i < childCount; i++) {
                    View child = getChildAt(i);
                    height += child.getMeasuredHeight();
                }
                break;
            default:
                break;
        }
        //6. 保存自身的尺寸
        setMeasuredDimension(width,height);

    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {

//        1. 遍历子View for
//        2. 确定自己的规则
//        3. 子View的测量尺寸
//        4. left,top,right,bottom
//        6. child.layout
        int left = 0;
        int top = 0;
        int right = 0;
        int bottom = 0;

        int childCount = getChildCount();
        for(int i = 0; i < childCount; i++){
            View child = getChildAt(i);
            left  = i * OFFSET;
            right = left + child.getMeasuredWidth();
            bottom = top + child.getMeasuredHeight();
            child.layout(left,top,right,bottom);
            top += child.getMeasuredHeight();//不考虑padding margin gravity xxx

        }


    }
}
hzulwy
关注
专栏目录
Android UI绘制流程分析（一）Activity.setContentView与DecorView之间的关系
wenhonglian的博客
12-16 1657
源码版本Android 6.0 请参阅：http://androidxref.com/6.0.1_r10 本文目的是分析从Activity启动到走完绘制流程并显示在界面上的过程，在源码展示阶段为了使跟踪代码逻辑更清晰会省略掉一部分非主干的代码，具体详细代码请翻阅源码。 本次不赘述Activity启动流程中的更早时机，对于更早的如何通过binder回调到Activity Thread的这些流程我计划后续再出一篇文章分析，如果不了解可参考这位作者的这篇文章：https://www.jianshu.com/p/6
Android UI绘制流程前奏
天亮了的博客
05-18 1066
1.前言 2.View是如何添加到屏幕窗口上的 要弄清楚UI绘制流程和原理，我们首先要了解的就是View是如何被添加到屏幕窗口上的。带着这个问题我们来进行源码分析，关于界面的展示，立马浮现在脑海的就是这样一段代码： public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(
继承ViewGroup的实例
08-17
android中继承ViewGroup用法 android中继承ViewGroup用法 android中继承ViewGroup用法
[Android学习笔记]继承自ViewGroup的控件的过程学习
weixin_34341117的博客
04-21 423
ViewGroup文档 http://developer.android.com/training/index.html 继承自ViewGroup需要重写onLayout方法用来为子View设定位置信息 必须重写当前控件的onLayout方法 abstract voidonLayout(boolean changed, int l, int t, int r,...
继承ViewGroup研究（汇总） 一、二、三
weixin_34010949的博客
08-02 90
转载过来：为一、二、三版本。 仅供参考： 继承ViewGroup研究(1) --简介和一个小Demo 又翻开一个新篇章了，哈哈，上一回学习的是继承View，关于继承View个人感觉不是那么完美，做技术的总是想让一切完美，但世界上本就没有完美，由他吧。这回研究的是ViewGroup。说实话，个人感觉这个类的功能还是...
自定义View（二）继承ViewGroup
qq_40796461的博客
12-09 621
自定义View（二）继承ViewGroup 实现流示布局继承ViewGroup实现FlowLayout实现步骤：功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表F...
自定义View(五)之继承ViewGroup
fightingXia的博客
05-23 875
一，概述在android系统中可以把View分为两大类，一类是View，这类View本身具有展示UI的作用，比如TextView可以展示文本，ImageView可以展示图片，EditText可以编辑文字。另外一类是ViewGroup，即容器View，ViewGroup本质是容器，用来盛放View，并决定View的摆放位置，这类View如Linearlayout和RelativeLayout。当我们需
Android App开发中自定义View和ViewGroup的实例教程
09-02
View的绘制流程主要包括三个阶段：测量（Measure）、布局（Layout）和绘制（Draw）。 1. 测量（Measure）： 在这一阶段，View计算所需占用的屏幕空间。onMeasure方法是这个过程的核心，允许开发者指定视图的理想...
Android自定义控件之继承ViewGroup创建新容器
09-01
`ViewGroup`是Android UI层次结构中的一个关键组件，它不是直接展示内容的视图，而是作为容器，承载一个或多个`View`或`ViewGroup`实例。`ViewGroup`的主要职责包括管理子视图（如添加、删除、排列）以及参与测量和...
Android UI组件实例集合
09-11
2-在xml中配置GifView的基本属性，GifView继承自View类，和Button、ImageView一样是一个UI控件。 如： <com.ant.liao.GifView android:id="@+id/gif2" android:layout_height="wrap_content" android:layout_width=...
Android自定义控件----继承ViewGroup自定义实现流式布局
07-26
最近对自定义控件充满了兴趣，参考网上的视频写了一个流式布局的例子上传到这，和大家交流学习
继承ViewGroup自定义View:步骤、attrs.xml、TypedArray
weixin_30631587的博客
02-29 114
时间：2015年12月22日19:01:46自定义View的实现步骤：1.写一个自定义控件类,这个类就是你的自定义控件的实现.2.在res/values目录下建立一个attrs.xml的文件,在这个文件中增加对控件的自定义属性的定义.3.使用带AttributeSet参数的类的构造函数,并在构造函数中将自定义控件类中变量与attrs.xml中的属性连接起来.4.在自定义控件类中使用这些已经连接的...
自定义View排列
Logitech12的博客
11-05 332
//梯形排列 @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { int row = 0; int right = 0; int bottom = 0; for (int i = 0; i < getChildCount(); i++) {
了解自定义View和继承View,继承ViewGroup,继承已有View,继承已有ViewGroup实例ji
github_37217206的博客
02-06 3324
自定义View的分类 继承View 当我们需要实现的效果是一个不规则效果的时候，那么这时就需要继承 View 来实现了，我们需要重写 onDraw 方法，在该方法里实现各种不规则的图形和效果。当我们使用这种方式的时候，需要自己去处理 warp_content 和 padding。 继承ViewGroup 当系统所提供的 LinearLayout、FrameLayout 等布局控件无法满
继承ViewGroup研究(1)--简介和一个小Demo
weixin_30374009的博客
04-26 63
又翻开一个新篇章了，哈哈，上一回学习的是继承View，关于继承View个人感觉不是那么完美，做技术的总是想让一切完美，但世界上本就没有完美，由他吧。这回研究的是ViewGroup。说实话，个人感觉这个类的功能还是很强大的，这里我们只给出最基本的东西，好了，继续开始研究吧，，路漫漫其修远兮，吾将上下而求索。 一、ViewGroup概述 研究ViewGroup之前，我们先来看看View...
继承ViewGroup
大神大咖大牛
12-03 376
package wld.bawei.com.myonemoni2.view; import android.content.Context; import android.util.AttributeSet; import android.view.View; import android.view.ViewGroup; /** * Created by 大金鑫 on 2017/12/3.
ViewGroup的绘制
zhang31jian的专栏
08-20 442
ViewGroup通常是不需要绘制的，因为本身就没有需要绘制的东西。 如果不是指定ViewGroup的背景色，那么ViewGroup的o'nDraw方法都不会被调用。 ViewGroup会使用dispatchDraw()方法绘制子View，其过程是遍历子View，调用子View的绘制方法进行绘制。
自定义View(二)--继承自ViewGroup
weixin_30696427的博客
09-05 106
　　自定义View包括很多种，上一次随笔中的那一种是完全继承自View，这次写的这个小Demo是继承自ViewGroup的，主要是将自定义View继承自ViewGroup的这个流程来梳理一下，这次的Demo中自定义了一个布局的效果，并且这个自定义布局中包含布局自己的属性，布局中的控件也包含只属于这个布局才具有的自定义属性(类似于layout_weight只存在于LinearLayout中，只有Li...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值