搜尋
首頁後端開發php教程Android新人求教问:如何自定义ViewGroup,望大神潜入、不吝赐教。

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

回复内容:

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

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
超越炒作:評估當今PHP的角色超越炒作:評估當今PHP的角色Apr 12, 2025 am 12:17 AM

PHP在現代編程中仍然是一個強大且廣泛使用的工具,尤其在web開發領域。 1)PHP易用且與數據庫集成無縫,是許多開發者的首選。 2)它支持動態內容生成和麵向對象編程,適合快速創建和維護網站。 3)PHP的性能可以通過緩存和優化數據庫查詢來提升,其廣泛的社區和豐富生態系統使其在當今技術棧中仍具重要地位。

PHP中的弱參考是什麼?什麼時候有用?PHP中的弱參考是什麼?什麼時候有用?Apr 12, 2025 am 12:13 AM

在PHP中,弱引用是通過WeakReference類實現的,不會阻止垃圾回收器回收對象。弱引用適用於緩存系統和事件監聽器等場景,需注意其不能保證對象存活,且垃圾回收可能延遲。

解釋PHP中的__ Invoke Magic方法。解釋PHP中的__ Invoke Magic方法。Apr 12, 2025 am 12:07 AM

\_\_invoke方法允許對象像函數一樣被調用。 1.定義\_\_invoke方法使對象可被調用。 2.使用$obj(...)語法時,PHP會執行\_\_invoke方法。 3.適用於日誌記錄和計算器等場景,提高代碼靈活性和可讀性。

解釋PHP 8.1中的纖維以進行並發。解釋PHP 8.1中的纖維以進行並發。Apr 12, 2025 am 12:05 AM

Fibers在PHP8.1中引入,提升了並發處理能力。 1)Fibers是一種輕量級的並發模型,類似於協程。 2)它們允許開發者手動控制任務的執行流,適合處理I/O密集型任務。 3)使用Fibers可以編寫更高效、響應性更強的代碼。

PHP社區:資源,支持和發展PHP社區:資源,支持和發展Apr 12, 2025 am 12:04 AM

PHP社區提供了豐富的資源和支持,幫助開發者成長。 1)資源包括官方文檔、教程、博客和開源項目如Laravel和Symfony。 2)支持可以通過StackOverflow、Reddit和Slack頻道獲得。 3)開發動態可以通過關注RFC了解。 4)融入社區可以通過積極參與、貢獻代碼和學習分享來實現。

PHP與Python:了解差異PHP與Python:了解差異Apr 11, 2025 am 12:15 AM

PHP和Python各有優勢,選擇應基於項目需求。 1.PHP適合web開發,語法簡單,執行效率高。 2.Python適用於數據科學和機器學習,語法簡潔,庫豐富。

php:死亡還是簡單地適應?php:死亡還是簡單地適應?Apr 11, 2025 am 12:13 AM

PHP不是在消亡,而是在不斷適應和進化。 1)PHP從1994年起經歷多次版本迭代,適應新技術趨勢。 2)目前廣泛應用於電子商務、內容管理系統等領域。 3)PHP8引入JIT編譯器等功能,提升性能和現代化。 4)使用OPcache和遵循PSR-12標準可優化性能和代碼質量。

PHP的未來:改編和創新PHP的未來:改編和創新Apr 11, 2025 am 12:01 AM

PHP的未來將通過適應新技術趨勢和引入創新特性來實現:1)適應云計算、容器化和微服務架構,支持Docker和Kubernetes;2)引入JIT編譯器和枚舉類型,提升性能和數據處理效率;3)持續優化性能和推廣最佳實踐。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。