Android自定義View--用ViewGroup打造一個3D堆疊卡片容器

1. 功能描述

目前只能支持三張圖片,支持橫豎屏模式,手指滑動翻頁到下一張卡片,手指點擊也可以切換到當前卡片,并且選中的卡片會在整個ViewGroup的最上層,會被放大,可以自定義放大動畫的時長。最基本的Android自定義控件,大神就別看了。
來先看效果圖吧:
支持豎屏模式

gif

也支持橫屏模式:
gif2

屬性 描述 默認值
scc_anim_duration 卡片放大動畫時間 300
scc_edge 每個卡片頂邊和底邊的距離 60
scc_type 豎屏還是橫屏模式 VERTICAL
scc_min_change_distance 手指最小滑動距離才會翻頁 20

主要是想熟悉一下自定義控件的基本測量和布局方式,其實使用LinearLayout或者是FrameLayout來做會更加方便,但是這個時候就不需要我們自己去重寫onMeasure和onLayout方法了。
支持的自定義屬性:

屬性 描述 默認值
scc_anim_duration 卡片放大動畫時間 300
scc_edge 每個卡片頂邊和底邊的距離 60
scc_type 豎屏還是橫屏模式 VERTICAL
scc_min_change_distance 手指最小滑動距離才會翻頁 20

2. 實現原理

把ViewGroup中的三個View(可為任意的三個控件)按照預設好的邊距和padding測量大小,然后三個view根據edge值來確定依次確定位置。我們沒有用到canvas、path或者paint。沒必要,我們只需要改變子View的繪制順序,檢測到用戶的滑動或者是點擊就invalidate重繪,把用戶選中的view放在最后繪制這樣就可以將當前選中的view放在最上層。這樣放大選中的view就不會被遮住。


原理

3. 代碼講解

a. 改變子View的繪制次序

    /**
     * 獲取子控件dispatchDraw的次序,將當前選中的View放在最后繪制
     */
    @Override
    protected int getChildDrawingOrder(int childCount, int i) {
    //currentItemIndex 為當前選中的View在ViewGroup中的position
        if (currentItemIndex < 0) {
            return i;
        }
        if (i < (childCount - 1)) {
            if (currentItemIndex == i)
                i = childCount - 1;
        } else {
            if (currentItemIndex < childCount)
                i = currentItemIndex;
        }
        return i;
    }

b. 測量子View大小

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        /**
         * 獲得此ViewGroup上級容器為其推薦的寬和高,以及計算模式
         */
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);

        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
        /**
         * 先測量整個Viewgroup的大小
         */
        setMeasuredDimension(sizeWidth, sizeHeight);

        int childCount = getChildCount();
        int childWidth, childHeight;
        /**由于每一個子View的寬高都是一樣的所以就一起計算每一個View的寬高*/
        if(ShapeType.VERTICAL.ordinal() == mShapeType){  //豎向模式
            childWidth = getMeasuredWidth() - padding*2;
            childHeight = getMeasuredHeight() - padding*2 - edge*2;
        }else{   //橫向模式
            childWidth = getMeasuredWidth() - padding*2 - edge*2;
            childHeight = getMeasuredHeight() - padding*2;
        }

        int childWidthMeasureSpec = 0;
        int childHeightMeasureSpec = 0;

        // 循環測量每一個View
        for (int i = 0; i < childCount; i++) {
            View childView = getChildAt(i);

            // 系統自動測量子View:
//            measureChild(childView, widthMeasureSpec, heightMeasureSpec);

            /** 以一個精確值來測量子View的寬度 */
            childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(childWidth, MeasureSpec.EXACTLY);
            childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(childHeight, MeasureSpec.EXACTLY);
            childView.measure(childWidthMeasureSpec,childHeightMeasureSpec);
        }

    }

c. 測量子View位置

位置確定最基本原理:


onlayout
@Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childCount = getChildCount();
        // 循環測量每一個View
        for (int i = 0; i < childCount; i++) {
            View childView = getChildAt(i);
            //四個方向的margin值
            int measureL = 0, measurelT = 0, measurelR = 0, measurelB = 0;

            if(ShapeType.VERTICAL.ordinal() == mShapeType){  //豎向模式
                switch (i){
                    case 0:
                        measureL = padding;
                        measurelT = padding;
                        measurelB = childView.getMeasuredHeight() + padding;
                        measurelR = childView.getMeasuredWidth() + padding;
                        childView.layout(measureL, measurelT, measurelR, measurelB);
                        break;
                    case 1:
                        measureL = padding;
                        measurelT = padding + edge;
                        measurelB = childView.getMeasuredHeight() + padding + edge;
                        measurelR = childView.getMeasuredWidth() + padding;
                        childView.layout(measureL, measurelT, measurelR, measurelB);
                        break;
                    case 2:
                        measureL = padding;
                        measurelT = padding + edge*2;
                        measurelB = childView.getMeasuredHeight() + padding + edge*2;
                        measurelR = childView.getMeasuredWidth() + padding;
                        childView.layout(measureL, measurelT, measurelR, measurelB);
                        break;
                }
            }else{   //橫向模式
                switch (i){
                    case 0:
                        measureL = padding;
                        measurelT = padding;
                        measurelB = childView.getMeasuredHeight() + padding;
                        measurelR = childView.getMeasuredWidth() + padding;
                        childView.layout(measureL, measurelT, measurelR, measurelB);
                        break;
                    case 1:
                        measureL = padding + edge;
                        measurelT = padding;
                        measurelB = childView.getMeasuredHeight() + padding;
                        measurelR = childView.getMeasuredWidth() + padding + edge;
                        childView.layout(measureL, measurelT, measurelR, measurelB);
                        break;
                    case 2:
                        measureL = padding + edge*2;
                        measurelT = padding;
                        measurelB = childView.getMeasuredHeight() + padding;
                        measurelR = childView.getMeasuredWidth() + padding + edge*2;
                        childView.layout(measureL, measurelT, measurelR, measurelB);
                        break;
                }
            }


        }
    }

d. 手勢交互邏輯

在手指滑動的時候為了防止頻繁觸發翻頁,我使用了handler去發送翻頁消息。

    /**
     * 事件分發
     * onTouchEvent() 用于處理事件,返回值決定當前控件是否消費(consume)了這個事件
     * @param event
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        Log.d("danxx", "onTouchEvent");
//        return super.onTouchEvent(event);
        /**以屏幕左上角為坐標原點計算的Y軸坐標**/
        int y;
        if(ShapeType.VERTICAL.ordinal() ==  mShapeType){ //豎屏模式取Y軸坐標
            y = (int) event.getRawY();
        }else{
            y = (int) event.getRawX(); //橫屏模式取X軸坐標
        }
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                Log.i(TAG, "MotionEvent.ACTION_DOWN");
                // 手指按下時記錄下y坐標
                lastY = y;
                break;
            case MotionEvent.ACTION_MOVE:
                Log.i(TAG, "MotionEvent.ACTION_MOVE");
                // 手指向下滑動時 y坐標 = 屏幕左上角為坐標原點計算的Y軸坐標 - 手指滑動的Y軸坐標
                int m = y - lastY;
                if(m>0 && m>changeDistance){  //手指向下滑動 或者是左滑
                    changeHandler.removeMessages(MSG_UP);
                    changeHandler.sendEmptyMessageDelayed(MSG_UP, animDuration);

                }else if(m< 0&& Math.abs(m)>changeDistance){ //手指向上滑動 或者右滑
                    changeHandler.removeMessages(MSG_DOWN);
                    changeHandler.sendEmptyMessageDelayed(MSG_DOWN, animDuration);
                }

                // 記錄下此刻y坐標
                this.lastY = y;
                break;
            case MotionEvent.ACTION_UP:
                Log.i(TAG, "MotionEvent.ACTION_UP");
                break;
        }
        return true;
    }

d. 上下或者左右翻頁代碼

    /**
     * 顯示下面的一頁
     * 翻頁成功返回true,否則false
     */
    private boolean downPage(){
        if(1 == currentItemIndex){
            FocusAnimUtils.animItem(getChildAt(currentItemIndex), false, 1.0f, animDuration);
            // 重繪,改變堆疊順序
            currentItemIndex = 2;
            postInvalidate();
            FocusAnimUtils.animItem(getChildAt(currentItemIndex), true, 1.06f, animDuration);
            return true;
        }else if(0 == currentItemIndex){
            FocusAnimUtils.animItem(getChildAt(currentItemIndex), false, 1.0f, animDuration);
            // 重繪,改變堆疊順序
            currentItemIndex = 1;
            postInvalidate();
            FocusAnimUtils.animItem(getChildAt(currentItemIndex), true, 1.06f, animDuration);
            return true;
        }else if(2 == currentItemIndex){
            return false;
        }
        return false;
    }

    /**
     * 顯示上面的一頁
     * 翻頁成功返回true,否則false
     */
    private boolean upPage(){
        if(1 == currentItemIndex){
            FocusAnimUtils.animItem(getChildAt(currentItemIndex), false, 1.0f, animDuration);
            // 重繪,改變堆疊順序
            currentItemIndex = 0;
            postInvalidate();
            FocusAnimUtils.animItem(getChildAt(currentItemIndex), true, 1.06f, animDuration);
            return true;
        }else if(0 == currentItemIndex){
            return false;
        }else if(2 == currentItemIndex){
            FocusAnimUtils.animItem(getChildAt(currentItemIndex), false, 1.0f, animDuration);
            currentItemIndex = 1;
            postInvalidate();
            FocusAnimUtils.animItem(getChildAt(currentItemIndex), true, 1.06f, animDuration);
            return true;
        }
        return false;
    }

4. xml布局文件

<?xml version="1.0" encoding="utf-8"?>
<danxx.library.widget.StackCardContainer xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/threeDViewContainer"
    app:scc_anim_duration="300"
    app:scc_edge="90"
    app:scc_padding="70"
    app:scc_type="horizontal"
    app:scc_min_change_distance="20"
    android:layout_margin="10dp"
    android:layout_width="match_parent"
    android:layout_height="420dp">

    <android.support.v7.widget.CardView
        android:id="@+id/view1"
        app:cardCornerRadius="10dp"
        app:cardElevation="10dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@mipmap/card_view_bg0"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="@android:color/white"
            android:text="血戰鋼鋸嶺"
            android:padding="6dp"
            android:textSize="22sp"
            android:lines="1"
            android:gravity="center"
            android:layout_gravity="bottom"
            android:background="#CAC26F"/>
    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:id="@+id/view2"
        app:cardCornerRadius="10dp"
        app:cardElevation="10dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@mipmap/card_view_bg1"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="@android:color/white"
            android:text="你的名字"
            android:padding="6dp"
            android:textSize="22sp"
            android:gravity="center"
            android:lines="1"
            android:layout_gravity="bottom"
            android:background="#0085BA"/>
    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:id="@+id/view3"
        app:cardCornerRadius="10dp"
        app:cardElevation="10dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@mipmap/card_view_bg2"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="@android:color/white"
            android:text="從你的全世界路過"
            android:lines="1"
            android:padding="6dp"
            android:textSize="22sp"
            android:gravity="center"
            android:layout_gravity="bottom"
            android:background="#4EC9AD"/>
    </android.support.v7.widget.CardView>

</danxx.library.widget.StackCardContainer>

其實就是在我們自定義的StackCardContainer容器中放置了三個CardView,至于點擊事件和數據綁定等完全由用戶自己去設置和綁定。StackCardContainer自定義控件只是改變了子View的布局方式并處理手勢交互罷了。

5. 源代碼 : GitHub項目地址

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,593評論 25 708
  • 內容抽屜菜單ListViewWebViewSwitchButton按鈕點贊按鈕進度條TabLayout圖標下拉刷新...
    皇小弟閱讀 46,907評論 22 665
  • 第一步:試探性發問 很多營銷人員、微商,這一步做錯了。 一上來就是介紹自己的產品,說自己產品多么多么NB。然后客戶...
    熊芳菲閱讀 771評論 0 0
  • 有的時候沒有成功只是的方法不對,而不是還不夠努力。 我很喜歡這句心靈砒霜“但凡努力了就可以成功,那么還會有這么多人...
    城中聽雨閱讀 746評論 1 12
  • 哈德遜河畔鋪滿紅葉 肥碩的鴿子壓彎路燈 云朵好像豆腐腦 把我們裝在碗里 苦悶的人兒抬頭看云 想問它是咸是甜 云兒默...
    十號公路閱讀 314評論 1 10