ConstraintLayout實現卡片式滑動布局

ConstraintLayout實現卡片式滑動布局

 

效果：

 

介紹：

http://www.qingpingshan.com/rjbc/az/370285.html

activity_main.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    android:orientation="vertical"
    tools:context="com.dawnling.app.MainActivity">

    <ImageView
        android:id="@+id/imgBack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="15dp"
        android:layout_marginBottom="15dp"
        app:srcCompat="@mipmap/ic_back" />

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/main">

        <RelativeLayout
            android:id="@+id/rlTop"
            android:layout_width="0dp"
            android:layout_height="375dp"
            android:background="@drawable/shape_bg_qrcode_transparent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginEnd="16dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:layout_marginStart="16dp">

            <TextView
                android:id="@+id/tvTitleTop"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@drawable/shape_bg_qrcode_top"
                android:textColor="@color/colorTextPrimaryLight"
                android:textSize="16sp"
                android:gravity="center_vertical"
                android:paddingLeft="15dp"
                android:text="會員卡" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@+id/tvTitleTop"
                android:background="@drawable/shape_bg_qrcode_bottom">

             </RelativeLayout>

        </RelativeLayout>

        <TextView
            android:id="@+id/tvSettingPayPws"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:layout_marginBottom="50dp"
            android:background="@drawable/shap_password_bg"
            android:textColor="@color/white"
            android:text="設置支付密碼，保護交易安全"
            android:visibility="invisible"/>

        <RelativeLayout
            android:id="@+id/rlBottom"
            android:layout_width="0dp"
            android:layout_height="400dp"
            android:background="@drawable/shape_bg_qrcode_transparent"
            android:layout_marginRight="16dp"
            app:layout_constraintTop_toBottomOf="@+id/tvSettingPayPws"
            android:layout_marginEnd="16dp"
            android:layout_marginLeft="16dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:layout_marginStart="16dp">

            <TextView
                android:id="@+id/tvTitleBottom"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@drawable/shape_bg_qrcode_top"
                android:textColor="@color/colorTextPrimaryLight"
                android:textSize="16sp"
                android:gravity="center_vertical"
                android:paddingLeft="15dp"
                android:text="付款碼" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@+id/tvTitleBottom"
                android:background="@drawable/shape_bg_qrcode_bottom">

            </RelativeLayout>
        </RelativeLayout>

    </android.support.constraint.ConstraintLayout>

</LinearLayout>

MainActivity.java：

package com.xiesir.constraintlayoutcardanimation;

import android.os.Handler;
import android.support.constraint.ConstraintLayout;
import android.support.constraint.ConstraintSet;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.TransitionManager;
import android.view.MotionEvent;
import android.view.View;
import android.view.Window;
import android.widget.TextView;

import com.blankj.utilcode.util.ScreenUtils;
import com.blankj.utilcode.util.Utils;
import com.gyf.barlibrary.ImmersionBar;

//參考：http://www.qingpingshan.com/rjbc/az/370285.html

public class MainActivity extends AppCompatActivity {

    private int hight;
    private ConstraintLayout constraintLayout;
    private ConstraintSet applyConstraintSet = new ConstraintSet();
    private View rlTop;//會員卡
    private View rlBottom;//付款碼
    private int rlBottomHeight;
    private int rlTopHeight;
    private int rlTopWidth;
    private TextView tvSettingPayPws;//設置密碼
    private TextView tvTitleTop;
    private int[] location = new int[2] ;//會員卡布局 坐標
    private float y1;
    private float y2;
    private TextView tvTitleBottom;
    private boolean isFirstMeasure = true;//是否是第一次測量
    private boolean isBottom = false;//付款碼是否隱藏  是否在底部 true 是  false 不是

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

//        // 去掉標題欄的方法，第一種：
//        // 注意這句一定要寫在setContentView()方法的前面，不然會報錯的
//        requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉標題欄

        setContentView(R.layout.activity_main);

        Utils.init(this);
        //狀態欄全局默認統一成白底黑字
        ImmersionBar.with(this).statusBarColor(R.color.colorPrimary).fitsSystemWindows(true).init();

        hight = ScreenUtils.getScreenHeight();//屏幕高度

        constraintLayout = (ConstraintLayout) findViewById(R.id.main);
        rlTop = findViewById(R.id.rlTop);
        rlBottom = findViewById(R.id.rlBottom);
        tvTitleTop = (TextView) findViewById(R.id.tvTitleTop);
        tvSettingPayPws = (TextView) findViewById(R.id.tvSettingPayPws);
        tvTitleBottom = (TextView) findViewById(R.id.tvTitleBottom);

        getRlTopMeasure();
    }

    /**
     * 獲取會員卡 付款碼 布局寬高
     */
    private void getRlTopMeasure() {
        rlBottomHeight = rlBottom.getLayoutParams().height;//付款碼 高
        int w = View.MeasureSpec.makeMeasureSpec(0,
                View.MeasureSpec.UNSPECIFIED);
        int h = View.MeasureSpec.makeMeasureSpec(0,
                View.MeasureSpec.UNSPECIFIED);
        rlTop.measure(w, h);
        rlTopHeight = rlTop.getMeasuredHeight();//會員卡高
    }

    //上滑覆蓋
    public void slide(){
        TransitionManager.beginDelayedTransition(constraintLayout);

        //設置 會員卡布局
        applyConstraintSet.constrainWidth(R.id.rlTop, rlTopWidth - 36);//設置變小
        applyConstraintSet.constrainHeight(R.id.rlTop, rlTopHeight);//設置高度不變
        applyConstraintSet.connect(R.id.rlTop, ConstraintSet.TOP, R.id.main,ConstraintSet.TOP, 20);//設置marginTop
        applyConstraintSet.centerHorizontally(R.id.rlTop, R.id.main);

        //設置 付款碼布局
        applyConstraintSet.constrainWidth(R.id.rlBottom, rlTopWidth);//設置變小
        applyConstraintSet.constrainHeight(R.id.rlBottom, rlBottomHeight);//設置高度不變
        applyConstraintSet.connect(R.id.rlBottom, ConstraintSet.TOP, R.id.main,ConstraintSet.TOP, (location[1]/2 + 25));//設置marginTop
        applyConstraintSet.centerHorizontally(R.id.rlBottom, R.id.main);

        //設置支付密碼
        tvSettingPayPws.setVisibility(View.VISIBLE);
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {//延時設置標題欄透明度
                tvTitleTop.setBackgroundResource(R.drawable.shape_bg_qrcode_top_transparent);
                tvTitleBottom.setBackgroundResource(R.drawable.shape_bg_qrcode_top);
            }
        }, 300);

        applyConstraintSet.applyTo(constraintLayout);
    }

    //下滑隱藏
    public void inHiding(){
        TransitionManager.beginDelayedTransition(constraintLayout);

        //設置 會員卡布局
        applyConstraintSet.constrainWidth(R.id.rlTop, rlTopWidth);//設置還原
        applyConstraintSet.constrainHeight(R.id.rlTop, rlTopHeight);//設置高度不變
        applyConstraintSet.connect(R.id.rlTop, ConstraintSet.TOP, R.id.main,ConstraintSet.TOP, 20);//設置marginTop
        applyConstraintSet.centerHorizontally(R.id.rlTop, R.id.main);

        //設置 付款碼布局
        applyConstraintSet.constrainWidth(R.id.rlBottom, rlTopWidth);
        applyConstraintSet.constrainHeight(R.id.rlBottom, rlBottomHeight);//設置高度不變
        applyConstraintSet.connect(R.id.rlBottom, ConstraintSet.TOP, R.id.main, ConstraintSet.TOP, hight - location[1] - 50);//設置marginBottom
        applyConstraintSet.centerHorizontally(R.id.rlBottom, R.id.main);

        //設置支付密碼
        tvSettingPayPws.setVisibility(View.INVISIBLE);
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {//延時設置標題欄透明度
                tvTitleTop.setBackgroundResource(R.drawable.shape_bg_qrcode_top);
                tvTitleBottom.setBackgroundResource(R.drawable.shape_bg_qrcode_top_transparent);
            }
        }, 300);

        applyConstraintSet.applyTo(constraintLayout);
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        //繼承了Activity的onTouchEvent方法，直接監聽點擊事件
        if(event.getAction() == MotionEvent.ACTION_DOWN) {
            //當手指按下的時候
            y1 = event.getY();
        }
        if(event.getAction() == MotionEvent.ACTION_UP) {
            //當手指離開的時候
            y2 = event.getY();

            if (isFirstMeasure){
                rlTopWidth = rlTop.getWidth();
            }
            isFirstMeasure = false;
            rlTop.getLocationInWindow(location); //獲取rlTop在當前窗口內的絕對坐標，含toolBar
            isBottom = !isBottom;

            if(y1 - y2 > 10) {//向上滑動
                slide();
            } else if(y2 - y1 > 10) {//向下滑動
                inHiding();
            }
        }
        return super.dispatchTouchEvent(event);
    }
}

下載：

源代碼

參考：
http://www.qingpingshan.com/rjbc/az/370285.html