Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發 >> 關於android開發 >> Android 手把手教您自定義ViewGroup（一）

Android 手把手教您自定義ViewGroup（一）

編輯：關於android開發

Android 手把手教您自定義ViewGroup（一）


最近由於工作的變動，導致的博客的更新計劃有點被打亂，希望可以盡快脈動回來~

今天給大家帶來一篇自定義ViewGroup的教程，說白了，就是教大家如何自定義ViewGroup，如果你對自定義ViewGroup還不是很了解，或者正想學習如何自定義，那麼你可以好好看看這篇博客。

1、概述

在寫代碼之前，我必須得問幾個問題：

1、ViewGroup的職責是啥？

ViewGroup相當於一個放置View的容器，並且我們在寫布局xml的時候，會告訴容器（凡是以layout為開頭的屬性，都是為用於告訴容器的），我們的寬度（layout_width）、高度（layout_height）、對齊方式（layout_gravity）等；當然還有margin等；於是乎，ViewGroup的職能為：給childView計算出建議的寬和高和測量模式 ；決定childView的位置；為什麼只是建議的寬和高，而不是直接確定呢，別忘了childView寬和高可以設置為wrap_content，這樣只有childView才能計算出自己的寬和高。

2、View的職責是啥？

View的職責，根據測量模式和ViewGroup給出的建議的寬和高，計算出自己的寬和高；同時還有個更重要的職責是：在ViewGroup為其指定的區域內繪制自己的形態。

3、ViewGroup和LayoutParams之間的關系？

大家可以回憶一下，當在LinearLayout中寫childView的時候，可以寫layout_gravity，layout_weight屬性；在RelativeLayout中的childView有layout_centerInParent屬性，卻沒有layout_gravity，layout_weight，這是為什麼呢？這是因為每個ViewGroup需要指定一個LayoutParams，用於確定支持childView支持哪些屬性，比如LinearLayout指定LinearLayout.LayoutParams等。如果大家去看LinearLayout的源碼，會發現其內部定義了LinearLayout.LayoutParams，在此類中，你可以發現weight和gravity的身影。

2、View的3種測量模式

上面提到了ViewGroup會為childView指定測量模式，下面簡單介紹下三種測量模式：

EXACTLY：表示設置了精確的值，一般當childView設置其寬、高為精確值、match_parent時，ViewGroup會將其設置為EXACTLY；

AT_MOST：表示子布局被限制在一個最大值內，一般當childView設置其寬、高為wrap_content時，ViewGroup會將其設置為AT_MOST；

UNSPECIFIED：表示子布局想要多大就多大，一般出現在AadapterView的item的heightMode中、ScrollView的childView的heightMode中；此種模式比較少見。

注：上面的每一行都有一個一般，意思上述不是絕對的，對於childView的mode的設置還會和ViewGroup的測量mode有一定的關系；當然了，這是第一篇自定義ViewGroup，而且絕大部分情況都是上面的規則，所以為了通俗易懂，暫不深入討論其他內容。

3、從API角度進行淺析

上面敘述了ViewGroup和View的職責，下面從API角度進行淺析。

View的根據ViewGroup傳人的測量值和模式，對自己寬高進行確定（onMeasure中完成），然後在onDraw中完成對自己的繪制。

ViewGroup需要給View傳入view的測量值和模式（onMeasure中完成），而且對於此ViewGroup的父布局，自己也需要在onMeasure中完成對自己寬和高的確定。此外，需要在onLayout中完成對其childView的位置的指定。

4、完整的例子

需求：我們定義一個ViewGroup，內部可以傳入0到4個childView，分別依次顯示在左上角，右上角，左下角，右下角。

1、決定該ViewGroup的LayoutParams

對於我們這個例子，我們只需要ViewGroup能夠支持margin即可，那麼我們直接使用系統的MarginLayoutParams

 

[java]view plaincopy  
  1. @Override
  2. publicViewGroup.LayoutParamsgenerateLayoutParams(AttributeSetattrs)
  3. {
  4. returnnewMarginLayoutParams(getContext(),attrs);
}
重寫父類的該方法，返回MarginLayoutParams的實例，這樣就為我們的ViewGroup指定了其LayoutParams為MarginLayoutParams。[java]view plaincopy
  1. /**
  2. *計算所有ChildView的寬度和高度然後根據ChildView的計算結果，設置自己的寬和高
  3. */
  4. @Override
  5. protectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec)
  6. {
  7. /**
  8. *獲得此ViewGroup上級容器為其推薦的寬和高，以及計算模式
  9. */
  10. intwidthMode=MeasureSpec.getMode(widthMeasureSpec);
  11. intheightMode=MeasureSpec.getMode(heightMeasureSpec);
  12. intsizeWidth=MeasureSpec.getSize(widthMeasureSpec);
  13. intsizeHeight=MeasureSpec.getSize(heightMeasureSpec);
  14.  
  15.  
  16. //計算出所有的childView的寬和高
  17. measureChildren(widthMeasureSpec,heightMeasureSpec);
  18. /**
  19. *記錄如果是wrap_content是設置的寬和高
  20. */
  21. intwidth=0;
  22. intheight=0;
  23.  
  24. intcCount=getChildCount();
  25.  
  26. intcWidth=0;
  27. intcHeight=0;
  28. MarginLayoutParamscParams=null;
  29.  
  30. //用於計算左邊兩個childView的高度
  31. intlHeight=0;
  32. //用於計算右邊兩個childView的高度，最終高度取二者之間大值
  33. intrHeight=0;
  34.  
  35. //用於計算上邊兩個childView的寬度
  36. inttWidth=0;
  37. //用於計算下面兩個childiew的寬度，最終寬度取二者之間大值
  38. intbWidth=0;
  39.  
  40. /**
  41. *根據childView計算的出的寬和高，以及設置的margin計算容器的寬和高，主要用於容器是warp_content時
  42. */
  43. for(inti=0;i {
  44. ViewchildView=getChildAt(i);
  45. cWidth=childView.getMeasuredWidth();
  46. cHeight=childView.getMeasuredHeight();
  47. cParams=(MarginLayoutParams)childView.getLayoutParams();
  48.  
  49. //上面兩個childView
  50. if(i==0||i==1)
  51. {
  52. tWidth+=cWidth+cParams.leftMargin+cParams.rightMargin;
  53. }
  54.  
  55. if(i==2||i==3)
  56. {
  57. bWidth+=cWidth+cParams.leftMargin+cParams.rightMargin;
  58. }
  59.  
  60. if(i==0||i==2)
  61. {
  62. lHeight+=cHeight+cParams.topMargin+cParams.bottomMargin;
  63. }
  64.  
  65. if(i==1||i==3)
  66. {
  67. rHeight+=cHeight+cParams.topMargin+cParams.bottomMargin;
  68. }
  69.  
  70. }
  71.  
  72. width=Math.max(tWidth,bWidth);
  73. height=Math.max(lHeight,rHeight);
  74.  
  75. /**
  76. *如果是wrap_content設置為我們計算的值
  77. *否則：直接設置為父容器計算的值
  78. */
  79. setMeasuredDimension((widthMode==MeasureSpec.EXACTLY)?sizeWidth
  80. :width,(heightMode==MeasureSpec.EXACTLY)?sizeHeight
  81. :height);
}
10-14行，獲取該ViewGroup父容器為其設置的計算模式和尺寸，大多情況下，只要不是wrap_content，父容器都能正確的計算其尺寸。所以我們自己需要計算如果設置為wrap_content時的寬和高，如何計算呢？那就是通過其childView的寬和高來進行計算。[java]view plaincopy
  1. //abstractmethodinviewgroup
  2. @Override
  3. protectedvoidonLayout(booleanchanged,intl,intt,intr,intb)
  4. {
  5. intcCount=getChildCount();
  6. intcWidth=0;
  7. intcHeight=0;
  8. MarginLayoutParamscParams=null;
  9. /**
  10. *遍歷所有childView根據其寬和高，以及margin進行布局
  11. */
  12. for(inti=0;i {
  13. ViewchildView=getChildAt(i);
  14. cWidth=childView.getMeasuredWidth();
  15. cHeight=childView.getMeasuredHeight();
  16. cParams=(MarginLayoutParams)childView.getLayoutParams();
  17.  
  18. intcl=0,ct=0,cr=0,cb=0;
  19.  
  20. switch(i)
  21. {
  22. case0:
  23. cl=cParams.leftMargin;
  24. ct=cParams.topMargin;
  25. break;
  26. case1:
  27. cl=getWidth()-cWidth-cParams.leftMargin
  28. -cParams.rightMargin;
  29. ct=cParams.topMargin;
  30.  
  31. break;
  32. case2:
  33. cl=cParams.leftMargin;
  34. ct=getHeight()-cHeight-cParams.bottomMargin;
  35. break;
  36. case3:
  37. cl=getWidth()-cWidth-cParams.leftMargin
  38. -cParams.rightMargin;
  39. ct=getHeight()-cHeight-cParams.bottomMargin;
  40. break;
  41.  
  42. }
  43. cr=cl+cWidth;
  44. cb=cHeight+ct;
  45. childView.layout(cl,ct,cr,cb);
  46. }
  47.  
}
代碼比較容易懂：遍歷所有的childView，根據childView的寬和高以及margin，然後分別將0，1，2，3位置的childView依次設置到左上、右上、左下、右下的位置。[html]view plaincopy
  1.  
  2. android:layout_width="200dp"
  3. android:layout_height="200dp"
  4. android:background="#AA333333">
  5.  
  6. android:layout_width="50dp"
  7. android:layout_height="50dp"
  8. android:background="#FF4444"
  9. android:gravity="center"
  10. android:text="0"
  11. android:textColor="#FFFFFF"
  12. android:textSize="22sp"
  13. android:textStyle="bold"/>
  14.  
  15. android:layout_width="50dp"
  16. android:layout_height="50dp"
  17. android:background="#00ff00"
  18. android:gravity="center"
  19. android:text="1"
  20. android:textColor="#FFFFFF"
  21. android:textSize="22sp"
  22. android:textStyle="bold"/>
  23.  
  24. android:layout_width="50dp"
  25. android:layout_height="50dp"
  26. android:background="#ff0000"
  27. android:gravity="center"
  28. android:text="2"
  29. android:textColor="#FFFFFF"
  30. android:textSize="22sp"
  31. android:textStyle="bold"/>
  32.  
  33. android:layout_width="50dp"
  34. android:layout_height="50dp"
  35. android:background="#0000ff"
  36. android:gravity="center"
  37. android:text="3"
  38. android:textColor="#FFFFFF"
  39. android:textSize="22sp"
  40. android:textStyle="bold"/>
  41.  

 

ViewGroup寬和高設置為固定值

效果圖：[html]view plaincopy
  1.  
  2. android:layout_width="wrap_content"
  3. android:layout_height="wrap_content"
  4. android:background="#AA333333">
  5.  
  6. android:layout_width="150dp"
  7. android:layout_height="150dp"
  8. android:background="#E5ED05"
  9. android:gravity="center"
  10. android:text="0"
  11. android:textColor="#FFFFFF"
  12. android:textSize="22sp"
  13. android:textStyle="bold"/>
  14.  
  15. android:layout_width="50dp"
  16. android:layout_height="50dp"
  17. android:background="#00ff00"
  18. android:gravity="center"
  19. android:text="1"
  20. android:textColor="#FFFFFF"
  21. android:textSize="22sp"
  22. android:textStyle="bold"/>
  23.  
  24. android:layout_width="50dp"
  25. android:layout_height="50dp"
  26. android:background="#ff0000"
  27. android:gravity="center"
  28. android:text="2"
  29. android:textColor="#FFFFFF"
  30. android:textSize="22sp"
  31. android:textStyle="bold"/>
  32.  
  33. android:layout_width="50dp"
  34. android:layout_height="50dp"
  35. android:background="#0000ff"
  36. android:gravity="center"
  37. android:text="3"
  38. android:textColor="#FFFFFF"
  39. android:textSize="22sp"
  40. android:textStyle="bold"/>
  41.  
ViewGroup的寬和高設置為wrap_content
效果圖：[html]view plaincopy
  1.  
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent"
  4. android:background="#AA333333">
  5.  
  6. android:layout_width="150dp"
  7. android:layout_height="150dp"
  8. android:background="#E5ED05"
  9. android:gravity="center"
  10. android:text="0"
  11. android:textColor="#FFFFFF"
  12. android:textSize="22sp"
  13. android:textStyle="bold"/>
  14.  
  15. android:layout_width="50dp"
  16. android:layout_height="50dp"
  17. android:background="#00ff00"
  18. android:gravity="center"
  19. android:text="1"
  20. android:textColor="#FFFFFF"
  21. android:textSize="22sp"
  22. android:textStyle="bold"/>
  23.  
  24. android:layout_width="50dp"
  25. android:layout_height="50dp"
  26. android:background="#ff0000"
  27. android:gravity="center"
  28. android:text="2"
  29. android:textColor="#FFFFFF"
  30. android:textSize="22sp"
  31. android:textStyle="bold"/>
  32.  
  33. android:layout_width="150dp"
  34. android:layout_height="150dp"
  35. android:background="#0000ff"
  36. android:gravity="center"
  37. android:text="3"
  38. android:textColor="#FFFFFF"
  39. android:textSize="22sp"
  40. android:textStyle="bold"/>
  41.  

ViewGroup的寬和高設置為match_parent

  1. 上一頁:
  2. 下一頁:
關於android開發
開發入門初級開發中級開發高級開發關於android開發
相關文章
熱門文章
Android Facebook和Twitter分享 現代軟件工程_第一周練習_第14題，軟件工程第一周 認識Activity，創建第一個android應用，activityandroid Android自定義控件來襲（Scroller） Android6.0系統增加那些新特性 Android 指紋認證，android指紋認證
Android學習指南之四十四：用戶界面View之Tab標簽頁

    &nb
Android開發學習——搭建開發環境，android搭建

Android開發學習——搭建開發環境，android搭建在學校開課學習
Android 使用OpenCV的三種方式(Android Studio)

Android 使用OpenCV的三種方式(Android Studio
Android基礎入門教程——10.8 LayoutInflater(布局服務)

Android基礎入門教程——10.8 LayoutInflater(布
閱讀排行版
Copyright © Android教程網 All Rights Reserved