ConstraintSet實現ConstraintLayout動畫切換

 

 

ConstraintSet初始化方式

//Manually
c = new ConstraintSet(); c.connect(....);
//from a R.layout.* object
c.clone(context, R.layout.layout1);
//from a ConstraintLayout
c.clone(clayout);

摺疊佈局

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/accelerateRoot"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/game_cover"
        android:layout_width="120dp"
        android:layout_height="80dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:placeholderImage="@drawable/zhmr_cover"
        app:placeholderImageScaleType="fitXY" />

    <TextView
        android:id="@+id/game_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:text="妙奇星球"
        android:textColor="@color/black"
        android:textSize="16sp"
        app:layout_constraintLeft_toRightOf="@id/game_cover"
        app:layout_constraintTop_toTopOf="@id/game_cover" />

    <com.wolve.libcommonui.view.VNTextView
        android:id="@+id/game_usetime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="12分鐘"
        android:textSize="12sp"
        app:icon_src_normal="@drawable/usetime"
        app:layout_constraintBottom_toBottomOf="@id/game_cover"
        app:layout_constraintLeft_toLeftOf="@id/game_title" />

    <androidx.constraintlayout.widget.Group
        android:id="@+id/group_detail_website"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        app:constraint_referenced_ids="game_detail, game_website" />

    <TextView
        android:id="@+id/game_detail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="進入詳情"
        android:textColor="#15C5CE"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" />

    <TextView
        android:id="@+id/game_website"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:text="進入官網"
        android:textColor="#15C5CE"
        android:visibility="gone"
        app:layout_constraintBaseline_toBaselineOf="@id/game_detail"
        app:layout_constraintLeft_toRightOf="@id/game_detail" />

    <com.wolve.libcommonui.view.VNTextView
        android:id="@+id/game_btn"
        style="@style/DownloadBtnStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:text="啓動"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

展開佈局

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/accelerateRoot"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/game_cover"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:contentDescription="遊戲封面"
        app:actualImageScaleType="fitXY"
        app:layout_constraintTop_toTopOf="parent"
        app:placeholderImage="@drawable/zhmr_cover"
        app:placeholderImageScaleType="fitXY" />

    <TextView
        android:id="@+id/game_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="妙奇星球"
        android:textColor="@android:color/black"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/game_cover" />

    <com.wolve.libcommonui.view.VNTextView
        android:id="@+id/game_usetime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="12分鐘"
        android:textColor="#15C5CE"
        android:textSize="12sp"
        app:icon_src_normal="@drawable/usetime"
        app:layout_constraintLeft_toLeftOf="@id/game_title"
        app:layout_constraintTop_toBottomOf="@id/game_title" />

    <androidx.constraintlayout.widget.Group
        android:id="@+id/group_detail_website"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="game_detail, game_website" />

    <TextView
        android:id="@+id/game_detail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:text="進入詳情"
        android:textColor="#15C5CE"
        android:visibility="visible"
        app:layout_constraintLeft_toLeftOf="@id/game_title"
        app:layout_constraintTop_toBottomOf="@id/game_usetime" />

    <TextView
        android:id="@+id/game_website"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:text="進入官網"
        android:textColor="#15C5CE"
        android:visibility="visible"
        app:layout_constraintBaseline_toBaselineOf="@id/game_detail"
        app:layout_constraintLeft_toRightOf="@id/game_detail" />

    <com.wolve.libcommonui.view.VNTextView
        android:id="@+id/game_btn"
        style="@style/DownloadBtnStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:text="啓動"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

組件代碼

package com.wolve.libcommonui.view;

import android.content.Context;
import android.transition.TransitionManager;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.cardview.widget.CardView;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.constraintlayout.widget.ConstraintSet;
import androidx.constraintlayout.widget.Group;
import com.facebook.drawee.generic.GenericDraweeHierarchy;
import com.facebook.drawee.generic.GenericDraweeHierarchyBuilder;
import com.facebook.drawee.generic.RoundingParams;
import com.facebook.drawee.view.SimpleDraweeView;
import com.wolve.libcommon.utils.VNPixUtils;
import com.wolve.libcommonui.interfaces.IClickListener;
import com.wolve.libcommonui.interfaces.ICustomView;
import com.wolve.libcommonui.R;

import java.util.HashMap;

public class AccelerateItemView extends CardView implements ICustomView, View.OnClickListener {

    public static final int GAME_BUTTON_CLICK = 0;
    private ConstraintSet originSet = new ConstraintSet();
    private ConstraintSet openedSet = new ConstraintSet();
    private GenericDraweeHierarchy originHierarchy, opendHierarchy;

    private ConstraintLayout rootLayut;
    private Group groupDetailWebsit;
    private TextView gameDetail, gameWebsite;

    private IClickListener clickListener;


    private TextView gameTitle;
    private VNTextView gameBtn;
    private SimpleDraweeView gameCover;

    private HashMap<String, ViewGroup.LayoutParams> paramsHashMap;

    private boolean isOpen = false;


    public AccelerateItemView(@NonNull Context context) {
        this(context, null);
    }

    public AccelerateItemView(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public AccelerateItemView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initLayout(context);
        initAttrs(context, attrs);
    }

    @Override
    public void initLayout(Context context) {
        openedSet.clone(context, R.layout.layout_accelerete_bigcard_view);
        LayoutInflater.from(context).inflate(R.layout.layout_accelerete_card_view, this, true);
        rootLayut = findViewById(R.id.accelerateRoot);
        originSet.clone(rootLayut);
        gameTitle = findViewById(R.id.game_title);
        gameCover = findViewById(R.id.game_cover);
        groupDetailWebsit = findViewById(R.id.group_detail_website);
        gameDetail = findViewById(R.id.game_detail);
        gameWebsite = findViewById(R.id.game_website);
        setImageRadus(10);
        gameBtn = findViewById(R.id.game_btn);
        rootLayut.setOnClickListener(this);
        gameCover.setOnClickListener(this);
        gameBtn.setOnClickListener(this);
    }

    @Override
    public void initAttrs(Context context, AttributeSet attrs) {
        paramsHashMap = new HashMap<>();
    }

    @Override
    public void onClick(View v) {
        int id = v.getId();
        if (id == R.id.game_cover) {
            adjustmentLayout();
        } else if (id == R.id.accelerateRoot && !isOpen) {
            adjustmentLayout();
        }else if (id == R.id.game_btn){
            if (clickListener != null){
                clickListener.onClick(GAME_BUTTON_CLICK);
            }
        }
    }

    /**
     * 調整圖片圓角
     * @param radus
     */
    private void setImageRadus(int radus) {
        if (opendHierarchy == null || originHierarchy == null) {
            RoundingParams roundingParams = new RoundingParams();
            roundingParams.setCornersRadius(VNPixUtils.dp2px(radus));
            originHierarchy = new GenericDraweeHierarchyBuilder(getResources()).setRoundingParams(roundingParams).build();
            roundingParams = new RoundingParams();
            roundingParams.setCornersRadii(VNPixUtils.dp2px(radus), VNPixUtils.dp2px(radus), 0, 0);
            opendHierarchy = new GenericDraweeHierarchyBuilder(getResources()).setRoundingParams(roundingParams).build();
        }
        if (isOpen) {
            gameCover.setHierarchy(opendHierarchy);
        } else {
            gameCover.setHierarchy(originHierarchy);
        }
        gameCover.setImageURI("設置圖片地址");
    }

    /**
     * 調整佈局
     */
    private void adjustmentLayout() {
        isOpen = !isOpen;
        setImageRadus(10);
        if (isOpen){
            groupDetailWebsit.setVisibility(VISIBLE);
        }else{
            groupDetailWebsit.setVisibility(INVISIBLE);
        }
        TransitionManager.beginDelayedTransition(rootLayut);
        if (isOpen) {
            openedSet.applyTo(rootLayut);
        } else {
            originSet.applyTo(rootLayut);
        }
    }

    public void setClickListener(IClickListener clickListener) {
        this.clickListener = clickListener;
    }
}