歡迎光臨
每天分享高質量文章

妙用ConstraintLayout的Circular positioning

作者:TeaOf

鏈接:https://www.jianshu.com/p/7f111f0bdbd0

說實話在我看到ConstraintLayout的Circular positioning功能的時候,立馬想到了這個效果,恰好等到了作者的這篇文章,學習一下吧~

前言

在上一篇中,我們學習了ConstraintLayout的基本使用,如果還不瞭解ConstraintLayout,快去學習一下吧:

ConstraintLayout使用指南

https://www.jianshu.com/p/958887ed4f5f

我們這一篇主要講解一下ConstraintLayout的Circular positioning功能。

目錄

一、介紹與使用

什麼是Circular positioning呢?我們可以稱之為圓形定位,就是以標的控制元件為圓心,通過設置角度和半徑確定我們當前控制元件的位置,如官方圖:

 

關於入門使用,可以查看我的前一篇博客關於Circular positioning的使用,主要是layout_constraintCircle鎖定標的控制元件,layout_constraintCircleRadius和layout_constraintCircleAngle分別控制半徑和角度。這裡不再贅述

ConstraintLayout使用指南

https://www.jianshu.com/p/958887ed4f5f

二、Circular positioning進階

我們先來看一下標的效果:

 

1、設置佈局

 

佈局的xml檔案比較長,內容其實很簡單,主要是四個FloatingActionButton和三個Group,這個時候你可能會有疑惑,為什麼會有三個Group?

我這裡解答一下,上篇我們講了,Group在的ConstraintLayout中用來統一的控制視圖的顯示和隱藏,如果只用一個Group並不能讓我們的控制元件有序的顯示和隱藏,而FloatingActionButton由於不能使用setVisibility方法,只能使用Group管理FloatingActionButton的顯示和隱藏,因此使用三個Group來實現上圖三個FloatingActionButton有序的顯示和隱藏(本來打算使用FloatingActionButton代替ImageView減少工作量的,FloatingActionButton導致的問題反而使工作量增加了,哈哈~),activity_constraint.xml如下:

 

<android.support.constraint.ConstraintLayout 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"
    tools:context="com.orient.test.ui.activity.ConstraintActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="32dp"
        android:layout_marginEnd="32dp"
        android:backgroundTint="@color/colorAccent"
        android:padding="10dp"
        android:src="@drawable/ic_constraint_add"
        app:fabSize="normal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:pressedTranslationZ="20dp"
        app:rippleColor="#1f000000" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_like"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="32dp"
        android:layout_marginEnd="32dp"
        android:visibility="gone"
        android:backgroundTint="@color/colorAccent"
        android:padding="10dp"
        android:src="@drawable/ic_constraint_like"
        app:fabSize="normal"
        app:layout_constraintCircle="@+id/fab_add"
        app:layout_constraintCircleRadius="80dp"
        app:layout_constraintCircleAngle="270"
        app:pressedTranslationZ="20dp"
        app:rippleColor="#1f000000" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_write"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="32dp"
        android:layout_marginEnd="32dp"
        android:backgroundTint="@color/colorAccent"
        android:padding="10dp"
        android:src="@drawable/ic_constraint_write"
        app:fabSize="normal"
        app:layout_constraintCircle="@+id/fab_add"
        app:layout_constraintCircleRadius="80dp"
        app:layout_constraintCircleAngle="315"
        app:pressedTranslationZ="20dp"
        app:rippleColor="#1f000000" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="32dp"
        android:layout_marginEnd="32dp"
        android:backgroundTint="@color/colorAccent"
        android:padding="10dp"
        android:src="@drawable/ic_constraint_top"
        app:fabSize="normal"
        app:layout_constraintCircle="@+id/fab_add"
        app:layout_constraintCircleRadius="80dp"
        app:layout_constraintCircleAngle="360"
        app:pressedTranslationZ="20dp"
        app:rippleColor="#1f000000" />

    <android.support.constraint.Group
        android:id="@+id/gp_like"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="fab_like"/>

    <android.support.constraint.Group
        android:id="@+id/gp_write"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="fab_write"/>

    <android.support.constraint.Group
        android:id="@+id/gp_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="fab_top"/>

android.support.constraint.ConstraintLayout>

 

2、編寫代碼

 

首先確定我們需要使用的實體:

 

private FloatingActionButton mAdd;
private FloatingActionButton mLike;
private FloatingActionButton mWrite;
private FloatingActionButton mTop;
private Group likeGroup;
private Group writeGroup;
private Group topGroup;
// 動畫集合,用來控制動畫的有序播放
private AnimatorSet animatorSet;
// 圓的半徑
private int radius;
// FloatingActionButton寬度和高度,寬高一樣
private int width;

接著初始化我們的控制元件,這裡的代碼比較簡單,initListener()我們放在後面介紹:

 

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_constraint);

    initWidget();
    initListener();
}

@Override
protected void onResume() {
    super.onResume();

    // 動態獲取FloatingActionButton的寬
    mAdd.post(new Runnable() {
        @Override
        public void run() {
            width = mAdd.getMeasuredWidth();
        }
    });
    // 在xml檔案里設置的半徑
    radius = UiUtils.dp2px(this80);
}

private void initWidget() {
    mAdd = findViewById(R.id.fab_add);
    mLike = findViewById(R.id.fab_like);
    mTop = findViewById(R.id.fab_top);
    mWrite = findViewById(R.id.fab_write);
    likeGroup = findViewById(R.id.gp_like);
    writeGroup = findViewById(R.id.gp_write);
    topGroup = findViewById(R.id.gp_top);
    // 將三個彈出的FloatingActionButton隱藏
    setViewVisible(false);
}

private void setViewVisible(boolean isShow) {
    likeGroup.setVisibility(isShow?View.VISIBLE:View.GONE);
    writeGroup.setVisibility(isShow?View.VISIBLE:View.GONE);
    topGroup.setVisibility(isShow?View.VISIBLE:View.GONE);
}

我們的重點就在initListener()裡面,思路就是利用屬性動畫控制ConstraintLayout.LayoutParams,從而控制Circular positioning的角度和半徑:

 

private void initListener() {
    mAdd.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // 播放動畫的時候不可以點擊
            if(animatorSet != null && animatorSet.isRunning())
                return;

            // 判斷播放顯示還是隱藏動畫
            if(likeGroup.getVisibility() != View.VISIBLE) {
                animatorSet = new AnimatorSet();
                ValueAnimator likeAnimator = getValueAnimator(mLike, false, likeGroup,0);
                ValueAnimator writeAnimator = getValueAnimator(mWrite, false, writeGroup,45);
                ValueAnimator topAnimator = getValueAnimator(mTop, false, topGroup,90);
                animatorSet.playSequentially(likeAnimator, writeAnimator, topAnimator);
                animatorSet.start();
            }else {
                animatorSet = new AnimatorSet();
                ValueAnimator likeAnimator = getValueAnimator(mLike, true, likeGroup,0);
                ValueAnimator writeAnimator = getValueAnimator(mWrite, true, writeGroup,45);
                ValueAnimator topAnimator = getValueAnimator(mTop, true, topGroup,90);
                animatorSet.playSequentially(topAnimator, writeAnimator, likeAnimator);
                animatorSet.start();
            }

        }
    });
}

/**
 * 獲取ValueAnimator
 * 
 * @param button FloatingActionButton
 * @param reverse 開始還是隱藏
 * @param group Group
 * @param angle angle 轉動的角度
 * @return ValueAnimator
 */
private ValueAnimator getValueAnimator(final FloatingActionButton button, final boolean reverse, final Group group, final int angle) {
    ValueAnimator animator;
    if (reverse)
        animator = ValueAnimator.ofFloat(10);
    else
        animator = ValueAnimator.ofFloat(01);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float v = (float) animation.getAnimatedValue();
            ConstraintLayout.LayoutParams params = (ConstraintLayout.LayoutParams) button.getLayoutParams();
            params.circleRadius = (int) (radius * v);
            //params.circleAngle = 270f + angle * v;
            params.width = (int) (width * v);
            params.height = (int) (width * v);
            button.setLayoutParams(params);
        }
    });
    animator.addListener(new SimpleAnimation() {
        @Override
        public void onAnimationStart(Animator animation) {
            group.setVisibility(View.VISIBLE);
        }

        @Override
        public void onAnimationEnd(Animator animation) {
            if(group == likeGroup && reverse){
                setViewVisible(false);
            }
        }
    });
    animator.setDuration(300);
    animator.setInterpolator(new DecelerateInterpolator());
    return animator;
}

abstract class SimpleAnimation implements Animator.AnimatorListener{
    @Override
    public void onAnimationStart(Animator animation) {
    }

    @Override
    public void onAnimationEnd(Animator animation) {
    }

    @Override
    public void onAnimationCancel(Animator animation) {
    }

    @Override
    public void onAnimationRepeat(Animator animation) {
    }
}

這樣寫完效果就出來了:

 

如果你覺得彈出的曲線不夠圓滑,你可以在getValueAnimator方法中取消對//params.circleAngle = 270f + angle * v;這行的註釋,效果就如本章一開始的效果。

總結

本文的思路就是利用屬性動畫控制ConstraintLayout.LayoutParams,從而控制Circular positioning的角度和半徑,內容比較簡單,前提是你得掌握屬性動畫和ConstraintLayout的使用。本人水平有限,難免有誤,如有錯誤,歡迎提出。

https://github.com/mCyp/Test

已同步到看一看
赞(0)

分享創造快樂