Android新人求教问：如何自定义ViewGroup，望大神潜入、不吝赐教。-PHP Tutorial-php.cn

Home

Backend Development

PHP Tutorial

Android新人求教问：如何自定义ViewGroup，望大神潜入、不吝赐教。

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 06, 2016 pm 08:43 PM

androidphpprogrammer

3张扑克牌叠在一起显示效果如下： Android新人求教问：如何自定义ViewGroup，望大神潜入、不吝赐教。
这个布局效果可以用该RelativeLayout或FrameLayout，然后为每一个扑克牌设置margin就能实现，不过我觉得这种方式有点low，谁可以告知高级一点的实现方式啊，求告知~

回复内容：

除了你说的那种，我们还可以用ViewGroup实现。不过在定制ViewGroup之前，我们需要先理解一些定义。
Android绘制视图的方式。“绘制布局由两个遍历过程组成：测量过程和布局过程。测量过程由measure(int, int)方法完成，该方法从上到下遍历视图树。在递归遍历过程中，每个视图都会向下层传递尺寸和规格。当measure方法遍历结束，每个视图都保存了各自的尺寸信息。第二个过程由 layout(int,int,int,int)方法完成，该方法也是由上而下遍历视图树，在遍历过程中，每个父视图通过测量过程的结果定位所有子视图的位置信息。”
简而言之，第一步是测量ViewGroup的宽度和高度，在onMeasure()方法中完成，ViewGroup遍历所有子视图计算出它的大小。第二步是根据第一步获取的尺寸去布局所有子视图，在onLayout()中完成。

创建CascadeLayout
终于到了定制ViewGroup的阶段了。假设我们已经定制了一个CascadeLayout的容器，我们会这样使用它。
1. 2.
3.    xmlns:android="http://schemas.android.com/apk/res/android"
4.    android:layout_width="fill_parent"
5.    android:layout_height="fill_parent" >
6.
7.     8.        android:layout_width="fill_parent"
9.        android:layout_height="fill_parent"
10.
11.        cascade:horizontal_spacing="30dp"
12.        cascade:vertical_spacing="20dp" >
13.
14.         15.            android:layout_width="100dp"
16.            android:layout_height="150dp"
17.            android:background="#FF0000" />
18.
19.         20.            android:layout_width="100dp"
21.            android:layout_height="150dp"
22.            android:background="#00FF00" />
23.
24.         25.            android:layout_width="100dp"
26.            android:layout_height="150dp"
27.            android:background="#0000FF" />
28.
29.
30.

首先，定义属性。在values文件夹下面创建attrs.xml，代码如下：
1.
2.
3.
4.
5.
6.
同时，为了严谨一些，定义一些默认的垂直距离和水平距离，以防在布局中没有提供这些属性。
在dimens.xml中添加如下代码：
1.
2.    10dp
3.    10dp
4.
准备工作已经做好了，接下来看一下CascadeLayout的源码，略微有点长，后面帮助大家分析一下。

1.public class CascadeLayout extends ViewGroup {
2.
3.  private int mHorizontalSpacing;
4.  private int mVerticalSpacing;
5.
6.  public CascadeLayout(Context context, AttributeSet attrs) {
7.    super(context, attrs);
8.
9.    TypedArray a = context.obtainStyledAttributes(attrs,
10.        R.styleable.CascadeLayout);
11.
12.    try {
13.      mHorizontalSpacing = a.getDimensionPixelSize(
14.          R.styleable.CascadeLayout_horizontal_spacing,
15.          getResources().getDimensionPixelSize(
16.              R.dimen.cascade_horizontal_spacing));
17.
18.      mVerticalSpacing = a.getDimensionPixelSize(
19.          R.styleable.CascadeLayout_vertical_spacing, getResources()
20.              .getDimensionPixelSize(R.dimen.cascade_vertical_spacing));
21.    } finally {
22.      a.recycle();
23.    }
24.
25.  }
26.
27.  @Override
28.  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
29.    int width = getPaddingLeft();
30.    int height = getPaddingTop();
31.    int verticalSpacing;
32.
33.    final int count = getChildCount();
34.    for (int i = 0; i 35.      verticalSpacing = mVerticalSpacing;
36.
37.      View child = getChildAt(i);
38.      measureChild(child, widthMeasureSpec, heightMeasureSpec);
39.
40.      LayoutParams lp = (LayoutParams) child.getLayoutParams();
41.      width = getPaddingLeft() + mHorizontalSpacing * i;
42.
43.      lp.x = width;
44.      lp.y = height;
45.
46.      if (lp.verticalSpacing >= 0) {
47.        verticalSpacing = lp.verticalSpacing;
48.      }
49.
50.      width += child.getMeasuredWidth();
51.      height += verticalSpacing;
52.    }
53.
54.    width += getPaddingRight();
55.    height += getChildAt(getChildCount() - 1).getMeasuredHeight()
56.        + getPaddingBottom();
57.
58.    setMeasuredDimension(resolveSize(width, widthMeasureSpec),
59.        resolveSize(height, heightMeasureSpec));
60.  }
61.
62.  @Override
63.  protected void onLayout(boolean changed, int l, int t, int r, int b) {
64.
65.    final int count = getChildCount();
66.    for (int i = 0; i 67.      View child = getChildAt(i);
68.      LayoutParams lp = (LayoutParams) child.getLayoutParams();
69.
70.      child.layout(lp.x, lp.y, lp.x + child.getMeasuredWidth(), lp.y
71.          + child.getMeasuredHeight());
72.    }
73.  }
74.
75.  @Override
76.  protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
77.    return p instanceof LayoutParams;
78.  }
79.
80.  @Override
81.  protected LayoutParams generateDefaultLayoutParams() {
82.    return new LayoutParams(LayoutParams.WRAP_CONTENT,
83.        LayoutParams.WRAP_CONTENT);
84.  }
85.
86.  @Override
87.  public LayoutParams generateLayoutParams(AttributeSet attrs) {
88.    return new LayoutParams(getContext(), attrs);
89.  }
90.
91.  @Override
92.  protected LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) {
93.    return new LayoutParams(p.width, p.height);
94.  }
95.
96.  public static class LayoutParams extends ViewGroup.LayoutParams {
97.    int x;
98.    int y;
99.    public int verticalSpacing;
100.
101.    public LayoutParams(Context context, AttributeSet attrs) {
102.      super(context, attrs);
103.    }
104.
105.    public LayoutParams(int w, int h) {
106.      super(w, h);
107.    }
108.
109.  }
110.}

首先，分析构造函数。

1.public CascadeLayout(Context context, AttributeSet attrs) {
2.    super(context, attrs);
3.
4.    TypedArray a = context.obtainStyledAttributes(attrs,
5.        R.styleable.CascadeLayout);
6.
7.    try {
8.      mHorizontalSpacing = a.getDimensionPixelSize(
9.          R.styleable.CascadeLayout_horizontal_spacing,
10.          getResources().getDimensionPixelSize(
11.              R.dimen.cascade_horizontal_spacing));
12.
13.      mVerticalSpacing = a.getDimensionPixelSize(
14.          R.styleable.CascadeLayout_vertical_spacing, getResources()
15.              .getDimensionPixelSize(R.dimen.cascade_vertical_spacing));
16.    } finally {
17.      a.recycle();
18.    }
19.
20.  }
如果在布局中使用CasecadeLayout，系统就会调用这个构造函数，这个大家都应该知道的吧。这里不解释why，有兴趣的可以去看源码，重点看系统是如何解析xml布局的。

构造函数很简单，就是通过布局文件中的属性，获取水平距离和垂直距离。

然后，分析自定义LayoutParams。
这个类的用途就是保存每个子视图的x，y轴位置。这里把它定义为静态内部类。ps：提到静态内部类，我又想起来关于多线程内存泄露的问题了，如果有时间再给大家解释一下多线程造成内存泄露的问题。

1.public static class LayoutParams extends ViewGroup.LayoutParams {
2.    int x;
3.    int y;
4.    public int verticalSpacing;
5.
6.    public LayoutParams(Context context, AttributeSet attrs) {
7.      super(context, attrs);
8.    }
9.
10.    public LayoutParams(int w, int h) {
11.      super(w, h);
12.    }
13.
14.  }
除此之外，还需要重写一些方法，checkLayoutParams()、generateDefaultLayoutParams()等，这个方法在不同ViewGroup之间往往是相同的。

接下来，分析onMeasure()方法。
1.@Override
2.protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
3.  int width = getPaddingLeft();
4.  int height = getPaddingTop();
5.  int verticalSpacing;
6.
7.  final int count = getChildCount();
8.  for (int i = 0; i 9.    verticalSpacing = mVerticalSpacing;
10.
11.    View child = getChildAt(i);
12.    measureChild(child, widthMeasureSpec, heightMeasureSpec); // 令每个子视图测量自身
13.
14.    LayoutParams lp = (LayoutParams) child.getLayoutParams();
15.    width = getPaddingLeft() + mHorizontalSpacing * i;
16.    // 保存每个子视图的x，y轴坐标
17.    lp.x = width;
18.    lp.y = height;
19.
20.    if (lp.verticalSpacing >= 0) {
21.      verticalSpacing = lp.verticalSpacing;
22.    }
23.
24.    width += child.getMeasuredWidth();
25.    height += verticalSpacing;
26.  }
27.
28.  width += getPaddingRight();
29.  height += getChildAt(getChildCount() - 1).getMeasuredHeight()
30.      + getPaddingBottom();
31.  // 使用计算所得的宽和高设置整个布局的测量尺寸
32.  setMeasuredDimension(resolveSize(width, widthMeasureSpec),
33.      resolveSize(height, heightMeasureSpec));
34.}
最后，分析onLayout()方法。
1.@Override
2.protected void onLayout(boolean changed, int l, int t, int r, int b) {
3.
4.  final int count = getChildCount();
5.  for (int i = 0; i 6.    View child = getChildAt(i);
7.    LayoutParams lp = (LayoutParams) child.getLayoutParams();
8.
9.    child.layout(lp.x, lp.y, lp.x + child.getMeasuredWidth(), lp.y
10.        + child.getMeasuredHeight());
11.  }
12.}
逻辑很简单，用onMeasure()方法计算出的值为参数循环调用子View的layout()方法。

为子视图添加自定义属性
作为示例，下面将添加子视图重写垂直间距的方法。
第一步是向attrs.xml中添加一个新的属性。

1.
2.
3.
这里的属性名是layout_vertical_spacing，因为该属性名前缀是layout_，同时，又不是View固有的属性，所以该属性会被添加到LayoutParams的属性表中。在CascadeLayout类的构造函数中读取这个新属性。
1.public static class LayoutParams extends ViewGroup.LayoutParams {
2.    int x;
3.    int y;
4.    public int verticalSpacing;
5.
6.    public LayoutParams(Context context, AttributeSet attrs) {
7.      super(context, attrs);
8.
9.      TypedArray a = context.obtainStyledAttributes(attrs,
10.          R.styleable.CascadeLayout_LayoutParams);
11.      try {
12.        verticalSpacing = a
13.            .getDimensionPixelSize(
14.                R.styleable.CascadeLayout_LayoutParams_layout_vertical_spacing,
15.                -1);
16.      } finally {
17.        a.recycle();
18.      }
19.    }
20.
21.    public LayoutParams(int w, int h) {
22.      super(w, h);
23.    }
24.
25.  }

那怎么使用这个属性呢？so easy！

1. 2.    android:layout_width="fill_parent"
3.    android:layout_height="fill_parent"
4.    cascade:horizontal_spacing="30dp"
5.    cascade:vertical_spacing="20dp" >
6.
7.
8.     9.        android:layout_width="100dp"
10.        android:layout_height="150dp"
11.        cascade:layout_vertical_spacing="90dp"
12.        android:background="#FF0000" />
13.
14.     15.        android:layout_width="100dp"
16.        android:layout_height="150dp"
17.        android:background="#00FF00" />
18.
19.     20.        android:layout_width="100dp"
21.        android:layout_height="150dp"
22.        android:background="#0000FF" />
23.

其实你只需要搜索“创建定制的ViewGroup”就能找到正确的答案了。
right answer

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

揭秘C语言的吸引力: 发掘程序员的潜质Feb 24, 2024 pm 11:21 PM

学习C语言的魅力：解锁程序员的潜力随着科技的不断发展，计算机编程已经成为了一个备受关注的领域。在众多编程语言中，C语言一直以来都备受程序员的喜爱。它的简单、高效以及广泛应用的特点，使得学习C语言成为了许多人进入编程领域的第一步。本文将讨论学习C语言的魅力，以及如何通过学习C语言来解锁程序员的潜力。首先，学习C语言的魅力在于其简洁性。相比其他编程语言而言，C语

接私活挣钱！2023程序员接单平台大全！Jan 09, 2023 am 09:50 AM

上周我们做了一次关于《2023PHP创业》的公益直播，很多同学咨询具体有哪些接单平台，下面php中文网整理了22个还算靠谱的平台，以供参考！

2023过年，又限制放烟花？程序猿有办法！Jan 20, 2023 pm 02:57 PM

本篇文章给大家介绍如何用前端代码实现一个烟花绽放的绚烂效果，其实主要就是用前端三剑客来实现，也就是HTML+CSS+JS，下面一起来看一下，作者会解说相应的代码，希望对需要的朋友有所帮助。

程序员是做什么的Aug 03, 2019 pm 01:40 PM

程序员的工作职责：1、负责软件项目的详细设计、编码和内部测试的组织实施；2、协助项目经理和相关人员同客户进行沟通，保持良好的客户关系；3、参与需求调研、项目可行性分析、技术可行性分析和需求分析；4、熟悉并熟练掌握交付软件部开发的软件项目的相关软件技术；5、负责向项目经理及时反馈软件开发中的情况；6、参与软件开发和维护过程中重大技术问题的解决；7、负责相关技术文档的拟订等等。

520程序员专属浪漫表白方式！无法拒绝！May 19, 2022 pm 03:07 PM

520将至，年度虐汪大戏他又双叒叕来啦！想看看最理性的代码和最浪漫的告白究竟能碰撞出怎样的火花？下面带你逐一领略最全最完整的告白代码，看看程序员们的浪漫是否能够掳获各位心目中女神的芳心呢？

浅析怎么下载安装VSCode历史版本Apr 17, 2023 pm 07:18 PM

VSCode历史版本的下载安装 VSCode安装下载安装参考资料 VSCode安装 Windows版本：Windows10 VSCode版本：VScode1.65.0（64位User版本）本文

2022年最佳的Windows 11终端仿真器列表：Top 15款推荐Apr 24, 2023 pm 04:31 PM

终端仿真器允许您模仿标准计算机终端的功能。有了它，您可以执行数据传输并远程访问另一台计算机。当与Windows11等高级操作系统结合使用时，这些工具的创造性可能性是无穷无尽的。但是，有很多第三方终端仿真器可用。因此，很难选择合适的。但是，正如我们对必备的Windows11应用所做的那样，我们选择了您可以使用的最佳终端并提高您的工作效率。我们如何选择最好的Windows11终端模拟器？在选择此列表中的工具之前，我们的专家团队首先测试了它们与Windows11的兼容性。我们还检查了他们

Devin第一手使用体验：完成度很高，开始编码就停不下来，但要替代程序员还很远Mar 18, 2024 pm 03:30 PM

由10枚IOI金牌在手的创业团队CognitionAI开发的全球首个AI程序员智能体Devin，一发布就让科技圈坐立不安。在演示中，Devin几乎已经可以独立完成许多需要普通程序员花费大量时间才能完成的任务，而且表现一点也不逊色于普通程序员。但是，产品能力的边界在哪里，实际体验和演示时候有差距，还的看上手实测之后的效果。这位斯坦福的小哥在Devin发布的第一时间就联系了团队，获得了第一手体验的资格。他让Devin帮它做了几个难度不一的项目，录制了一个视频，在推上写下了自己的使用感受。下一个任务是

See all articles