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. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved