2. 程式人生 > >自定義ViewGroup之自定義佈局的實現

自定義ViewGroup之自定義佈局的實現

阿新 • • 發佈：2019-01-22

圖片預覽
這裡寫圖片描述

1. 分析

1. 自定義簡易FrameLayout 分別左上,右上,左下,右下4個子View
2. 自定義簡易LinearLayout，實現橫向和縱向佈局
3. 自定義簡易RelativeLayout,實現layout_alignParentXXX方法

2. 實現原理

1. 自定義ViewGroup主要是複寫onMeasure測量每一個子View的寬高，複寫onLayout計算每一個子View的上下左右間距
2. 自定義一些屬性值
3. 複寫generateLayoutParams，計算margin值

3. 簡易FrameLayout實現

1. onMeasure
@Override
 

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

//分別獲取寬高的測量模式
   int widthMode = MeasureSpec.getMode(widthMeasureSpec);
   int heightMode = MeasureSpec.getMode(heightMeasureSpec);
   int widthSize = MeasureSpec.getSize(widthMeasureSpec);
   int heightSize = MeasureSpec.getSize(heightMeasureSpec);

   //記錄如果是wrap_content時設定的寬和高
 

   int width, height;
   //左右的高度
   int lHeight = 0,rHeight = 0;
   //上下的寬度
   int tWidth = 0, bWidth = 0;

   //測量所有子孩子的寬高
   measureChildren(widthMeasureSpec,heightMeasureSpec);

   for (int i = 0; i < getChildCount(); i++) {

       View childView = getChildAt(i);
       int childWidth = childView.getMeasuredWidth();
       int
 
 childHeight = childView.getMeasuredHeight();
       MarginLayoutParams mParams = (MarginLayoutParams) childView.getLayoutParams();

       if(i ==0 || i == 1){
           tWidth += childWidth + mParams.leftMargin + mParams.rightMargin;
       }

       if(i == 2 || i == 3){
           bWidth += childWidth + mParams.leftMargin + mParams.rightMargin;
       }

       if(i == 0 || i== 2){
           lHeight += childHeight + mParams.topMargin + mParams.bottomMargin;
       }

       if(i == 1 || i == 3){
           rHeight += childHeight + mParams.topMargin + mParams.bottomMargin;
       }
   }

//wrap_content 時取寬高的最大值
   width = Math.max(tWidth,bWidth);
   height = Math.max(lHeight,rHeight);

   int measureWidth  = widthMode == MeasureSpec.EXACTLY ? widthSize : width;
   int measureHeight  = heightMode == MeasureSpec.EXACTLY ? heightSize : height;
   setMeasuredDimension(measureWidth,measureHeight);
}

2. onLayout 需要注意的一個地方是最好計算一下父View的pading值

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

    for (int i = 0; i < getChildCount(); i++) {

        View childView = getChildAt(i);
        int childWidth = childView.getMeasuredWidth();
        int childHeight = childView.getMeasuredHeight();
        MarginLayoutParams cParams = (MarginLayoutParams) childView.getLayoutParams();
        int childLeft = 0,childTop = 0,childRight = 0,childBottom = 0;
        switch (i){
            case 0:
                childLeft = cParams.leftMargin;
                childTop = cParams.topMargin+ getPaddingTop();
                break;
            case 1:
                childLeft = getMeasuredWidth() - childWidth - cParams.rightMargin;
                childTop = cParams.topMargin + getPaddingTop();
                break;
            case 2:
                childLeft = cParams.leftMargin;
                childTop =  getMeasuredHeight() - childHeight - cParams.bottomMargin
                        - getPaddingBottom() - getPaddingTop();
                break;
            case 3:
                childLeft = getMeasuredWidth() - childWidth - cParams.rightMargin;
                childTop =  getMeasuredHeight() - childHeight - cParams.bottomMargin
                        -getPaddingTop() - getPaddingBottom();
                break;
            default:
        }

        childRight = childLeft + childWidth;
        childBottom = childTop + childHeight;

        childView.layout(childLeft,childTop,childRight,childBottom);
    }
}

4. 簡易LinearLayout實現

分橫向和豎向
橫向的時候當寬高為wrap_content的時候，寬度累加+左右padding值
高度取子View的最大高度
豎向的時候當寬高為wrap_content的時候，寬度取子View中的最大寬度，高度累加+上下padding值
onLayout主要是計運算元View的left,top,right,bottom的距離，細心一點就好

1. onMeasure

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);

    //記錄如果是wrap_content時設定的寬和高
    int width, height;
    int totalWidth = 0;
    int totalHeight = 0;

    //測量所有子孩子的寬高
    measureChildren(widthMeasureSpec,heightMeasureSpec);

    for (int i = 0; i < getChildCount(); i++) {

        View childView = getChildAt(i);
        int childWidth = childView.getMeasuredWidth();
        int childHeight = childView.getMeasuredHeight();
        MarginLayoutParams mParams = (MarginLayoutParams) childView.getLayoutParams();

        if("horizontal".equals(mOrientation)){
            //橫向高度取子孩子中高度最大值 帶上margin和父View的padding值
            int cHeight = childHeight + mParams.topMargin + mParams.bottomMargin + this.getPaddingBottom() + this.getPaddingTop();
            if(cHeight > totalHeight){
                totalHeight = cHeight;
            }
            //橫向第一個子孩子和最後一個子孩子需要帶上父View的padding值
            if(i == 0){
                totalWidth+= getPaddingLeft();
            }else if(i == getChildCount() - 1){
                totalWidth += getPaddingRight();
            }
            totalWidth += childWidth + mParams.leftMargin + mParams.rightMargin;

        }else {

            //豎向寬度取其中一個子孩子的最大高度
            int cWidth = childWidth + mParams.leftMargin + mParams.rightMargin + this.getPaddingLeft() + this.getPaddingRight();
            if (cWidth > totalWidth) {
                totalWidth = cWidth;
            }

            //豎向的第一子孩子和最後一個子孩子需要帶上父View的padding值
            if(i == 0){
                totalHeight += getPaddingTop();
            }else if(i == getChildCount() - 1){
                totalHeight += getPaddingBottom();
            }
            totalHeight += childHeight + mParams.topMargin + mParams.bottomMargin;

        }
    }

    width = totalWidth;
    height = totalHeight;
    int measureWidth  = widthMode == MeasureSpec.EXACTLY ? widthSize : width;
    int measureHeight  = heightMode == MeasureSpec.EXACTLY ? heightSize : height;

    setMeasuredDimension(measureWidth,measureHeight);
}

2. onLayout

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

    int childLeft ;
    int childTop ;
    int childRight ;
    int childBottom ;
    int lastTotalHeight = 0;
    int lastTotalWidth = 0;
    for (int i = 0; i < getChildCount(); i++) {

        View childView = getChildAt(i);
        int childWidth = childView.getMeasuredWidth();
        int childHeight = childView.getMeasuredHeight();
        MarginLayoutParams cParams = (MarginLayoutParams) childView.getLayoutParams();

        if("horizontal".equals(mOrientation)) {
            //橫向第一個帶上父View的左邊padding值
            if(i == 0){
                childLeft = cParams.leftMargin + getPaddingLeft();
            }else {
                childLeft = lastTotalWidth + cParams.leftMargin;
            }
            //橫向最後一個帶上父View的右邊padding值
            if(i == getChildCount() - 1) {
                childRight = childLeft + childWidth+ getPaddingRight();
            }else{
                childRight = childLeft + childWidth;
            }
            lastTotalWidth = childRight;

            //橫向上下帶上上下padding值
            childTop = cParams.topMargin + getPaddingTop();
            childBottom = childTop + childHeight + getPaddingBottom();
        }else{
            //豎向左右帶上左右padding值
            childLeft = cParams.leftMargin + getPaddingLeft();
            childRight = childLeft + childWidth + getPaddingRight();

            //豎向第一個帶上父View的上邊padding值
            if(i == 0){
                childTop =  cParams.topMargin + getPaddingTop();
            }else {
                childTop = lastTotalHeight + cParams.topMargin;
            }

            ////豎向最後個帶上父View的下邊padding值
            if(i == getChildCount() - 1){
                childBottom = childTop + childHeight+ getPaddingBottom();
            }else {
                childBottom = childTop + childHeight;
            }
            lastTotalHeight = childBottom;
        }

        childView.layout(childLeft,childTop,childRight,childBottom);
    }
}

5. 簡易RelativeLayout實現

onMeasure
當寬高為wrap_content的時候,寬度取子View的最大寬度
高度取子View的最大高度，記得帶上左右padding值
onLayout
根據自定義的子View的不同位置layout_position，計運算元View的left,top,right,bottom的距離。

1. onMeasure

     @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);

    //用於計算wrap_content時候的寬高
    int width = 0;
    int height = 0;

    for (int i = 0; i < getChildCount(); i++) {

        View child = getChildAt(i);
        //測量每一個子孩子
        measureChild(child,widthMeasureSpec,heightMeasureSpec);

        CustomLayoutParam lp = (CustomLayoutParam) child.getLayoutParams();
        int lrMargin = lp.leftMargin + lp.rightMargin;
        int tbMargin = lp.topMargin + lp.bottomMargin;

        int childWidth = child.getMeasuredWidth() + lrMargin;
        int childHeight = child.getMeasuredHeight() + tbMargin;

        //獲取子孩子中最大的子孩子寬度
        if(width < childWidth){
            width = childWidth;
        }

        //獲取子孩子總最大的子孩子高度
        if(height < childHeight){
            height = childHeight;
        }
    }

    //帶上父View的上下左右的pading
    width += getPaddingLeft() + getPaddingRight();
    height += getPaddingTop() + getPaddingBottom();

    int measureWidth = widthMode == MeasureSpec.AT_MOST ? width : widthSize;
    int measureHeight = heightMode == MeasureSpec.AT_MOST ? height : heightSize;

    setMeasuredDimension(measureWidth,measureHeight);
}     

2. onLayout

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

    int pWidth = getMeasuredWidth();
    int pHeight = getMeasuredHeight();

    for (int i = 0; i < getChildCount(); i++) {

        View child = getChildAt(i);
        CustomLayoutParam lp = (CustomLayoutParam) child.getLayoutParams();
        int lrMargin = lp.leftMargin + lp.rightMargin;
        int tbMargin = lp.topMargin + lp.bottomMargin;
        int cWidthAndMargin = child.getMeasuredWidth() + lrMargin;
        int cHeightAndMargin = child.getMeasuredHeight() + tbMargin;
        int cWidth = child.getMeasuredWidth();
        int cHeight = child.getMeasuredHeight();
        int left = 0;
        int top = 0;
        int right = 0;
        int bottom = 0;
        switch (lp.getPosition()){
            case "leftTop":
                left = lp.leftMargin + getPaddingLeft();
                top = lp.topMargin + getPaddingTop();
                break;
            case "rightTop":
                left = pWidth - cWidthAndMargin- getPaddingRight();
                top = lp.topMargin + getPaddingTop();
                right += getPaddingRight();
                break;
            case "leftBottom":
                left = lp.leftMargin + getPaddingLeft();
                top = pHeight - cHeightAndMargin;
                bottom += getPaddingBottom();
                break;
            case "rightBottom":
                left = pWidth - cWidthAndMargin- getPaddingLeft();
                top = pHeight - cHeightAndMargin;
                bottom += getPaddingBottom();
                break;
            case "horizontalCenter":
                left = (pWidth - cWidth) / 2;
                top = lp.topMargin + getPaddingTop();
                break;
            case "verticalCenter":
                left = lp.leftMargin + getPaddingLeft();
                top = (pHeight - cHeight) / 2;
                break;
            case "rightVerticalCenter":
                left = pWidth - cWidthAndMargin- getPaddingLeft();
                top = (pHeight - cHeight) / 2;

                break;
            case "bottomHorizontalCenter":
                left = (pWidth - cWidth) / 2;
                top = pHeight - cHeightAndMargin;
                bottom += getPaddingBottom();
                break;
            case "center":
                left = (pWidth - cWidth) / 2;
                top = (pHeight - cHeight) / 2;
                break;
        }

        right += left + child.getMeasuredWidth();
        bottom += top + child.getMeasuredHeight();
        child.layout(left,top,right,bottom);
    }
}

6. 複寫generateLayoutParams方法

@Override
 public LayoutParams generateLayoutParams(AttributeSet attrs) {
     return new CustomLayoutParam(getContext(),attrs);
 }

 public class CustomLayoutParam extends ViewGroup.MarginLayoutParams{

    /**
     * leftTop
     * rightTop
     * horizontalCenter
     * verticalCenter
     * rightVerticalCenter
     * bottomHorizontalCenter
     * center
     * leftBottom
     * rightBottom
     */
    private String mPosition;

    public CustomLayoutParam(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyRelativeLayout);
        mPosition = typedArray.getString(R.styleable.MyRelativeLayout_layout_position);
        if(TextUtils.isEmpty(mPosition)){
            mPosition = "leftTop";
        }
        typedArray.recycle();
    }

    public String getPosition() {
        return mPosition;
    }
}

7. 專案原始碼下載

後面統一提供下載地址

8. 聯絡方式

QQ:1509815887

相關推薦

自定義ViewGroup之自定義佈局的實現

圖片預覽 1. 分析 1. 自定義簡易FrameLayout 分別左上,右上,左下,右下4個子View 2. 自定義簡易LinearLayout，實現橫向和縱向佈局 3. 自定義簡易RelativeLayout,實現layout_alignParen

Android 自定義控制元件之打造流佈局實現熱門搜尋標籤

最終效果 首先來看看效果圖： 其他地方很好實現，就是熱門搜尋有點麻煩，由於資料的不確定性，那麼像GridView明顯不能滿足了，這時候就只能自己來定義一個佈局了。 最終實現後的效果： 具體實現 1，自定義一個類繼承

Android : 自定義View之流式佈局

寫了一個很簡單的佈局 這是周圍圓框的drawable <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">

自定義view之流式佈局

如圖: 自定義view 繼承viewgroup  實現流式佈局 (程式碼中有註釋,就不一一詳解了,注意標紅欄位) public class WaterfallViewGroup extends ViewGroup { //儲存所有子View priva

android 自定義ViewGroup之浪漫求婚

*本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出 1、最終效果 有木有發現還是很小清新的感覺 2、看整體效果這是一個scrollView，滑動時每個子view都有一個或多個動畫效果，但是如果我們直接給每個子view加上動畫去實現這個需求

Android自定義View之導航欄(Fragment實現)

安卓輕量級底部導航欄 目前安卓開發中常常會用到底部導航欄這個控制元件，但是自己從零開始做一個又太麻煩。因此，我封裝了一個底部導航欄，同時，也做了一些修改，用於頂部也十分合適。下面是示例圖： 使用方法： 1.新增依賴 首先，在build.gradle檔案下加入 maven

自定義test之dubbo註解的實現

       本文是作者在使用dubbo開發的時候，在使用Junit寫單元測試時，對於dubbo服務的消費者如果獲取呢，最常用就是在測試類上加註解 @ContextConfiguration("/sp

自定義View之自定屬性

在自定義的View中，很多時候我們需要對View新增自定義屬性步驟如下： 1) 編寫xml檔案，定義屬性名稱與屬性資料型別 //attrs.xml <resources> <declare-styleable name="MyV

Android自定義View之自定義屬性

在Android開發中經常會用到自定義View的情況，而在自定義View時，自定義屬性是必須用到的。 1、新建一個自定義View如CustomView 它的自定義屬性主要是通過declare-styleable標籤為其配置自定義屬性。具體做法是：在res/values/目錄下增加一個reso

android自定義View之自定義EditText（新增刪除功能）

           忙忙碌碌20天，新的專案終於接近尾聲了。今天公司召集幾個使用者體驗師和美工一起吐糟這20天做的這個新產品，對於產品提出了很多建議，這幾天就改介面了。在這個專案中大量的使用了EditText元件，並且添加了刪除功能。這裡面都是用RelativeLayou

Android筆記--簡單的自定義View之自繪控制元件

第一步：新建atts.xml檔案，自定義屬性，不引用系統的屬性，在構造器中使用安卓系統自帶的API的TypedArray類取出atts.xml中的自定義屬性使用（通過對映）。 第二步：新建一個類，繼承

android自定義view之自定義imageview

問題描述 需要自定義一個圓形imageview或者帶有橢圓角的imageview，這個時候我們就自定義它。 解決方案 先上圖 宣告：程式碼下載github https://github.com/pungrue26/SelectableRoundedI

自定義view之----自定義button

前言： 唉，學習自定義view已經很長時間了，很早就想寫自定義view這類的部落格，這樣一來不僅能夠對知識的梳理與鞏固還能幫助他人。計劃再好不如即時行動更為有效，所以趁著週末趕緊把這個月的計劃完成先。 ok，廢話少說（貌似好像前面的都是廢話~ 額’），切

自定義View之自定義標題欄

現在，幾乎在每一個APP頂部都有一個標題欄，可能會用ActionBar，也可能自己寫一個xml來新增標題欄中的控制元件。在以往自己做專案時大多使用後者來寫一個標題欄，然後使用include包含在每一個頁面佈局中。今天，試下使用自定義屬性來自定義一個標題欄。 一般的標題欄都分

自定義View之指南針（反編譯別人的程式碼實現）

一、說明        偶爾點開魅族手機內建的工具箱應用，發現其指南針做的還不錯，就想模擬做一個類似的效果，在這裡我們不準備自己從頭開始編寫程式碼，而是採用一點黑科技，首先，我們從魅族系統中匯出工具箱應用的apk，然後反編譯apk，結合

自定義元件封裝之-如何使用SwfityJSON實現JSON/Model相互轉換

最近在學習Swift的各種框架，在我的另一篇Swift框架學習之-資料解析SwiftyJSON，已經介紹過了如何使用SwfityJSON這個牛逼的純Swift寫的框架，這裡就不作過多介紹，主要來說說我在SwiftyJSON基礎之上封裝的一個Swift

android自定義View之仿通訊錄側邊欄滑動，實現A-Z字母檢索

我們的手機通訊錄一般都有這樣的效果，如下圖： OK，這種效果大家都見得多了，基本上所有的android手機通訊錄都有這樣的效果。那我們今天就來看看這個效果該怎麼實現。 一.概述 1.頁面功能分析 整體上來說，左邊是一個ListView，右邊是一個自定義View，但

RecycleView中實現摺疊列表--之自定義ExpandView

先上效果圖： 這是一個RecycleView列表，點選瞭解更多展開顯示主營業務及商品列表，再次點選瞭解更多收起。 實現起來其實就是item列表中巢狀一個ExpandView預設隱藏，點選瞭解更多的時候顯示，再點選是隱藏，實現起來其實挺簡單的，在這塊主要是自定義了一個ExpanVie

自定義控價之實現儀表盤 搬運自 rengwuxian

     涼風起天末,君子意如何.閒來無事,開始做一下自定義控制元件的學習.手寫一個儀表盤.效果是下面醬紫的. 下面上一下程式碼:  ** * Created by lz on 2018/10/24. * 功能描述:儀表盤 */ @RequiresApi(

自定義 流式佈局實現

首先佈局得清晰--建立一個自定義控制元件 <com.example.mr.flow     android:id="@+id/ffff"     android:layout_width="match_parent"     android:layout_height=