妙用ConstraintLayout的Circular positioning

本文已授權(quán)微信公眾號(hào)：鴻洋（hongyangAndroid）在微信公眾號(hào)平臺(tái)原創(chuàng)首發(fā)

前言

在上一篇中，我們學(xué)習(xí)了ConstraintLayout的基本使用，如果還不了解ConstraintLayout，快去學(xué)習(xí)一下吧：

ConstraintLayout使用指南

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

目錄

目錄

一. 介紹

什么是Circular positioning呢？我們可以稱之為圓形定位，就是以目標(biāo)控件為圓心，通過設(shè)置角度和半徑確定我們當(dāng)前控件的位置，如官方圖：

Circular positioning

二. Circular positioning使用

關(guān)于入門使用，可以查看我的前一篇博客關(guān)于Circular positioning的使用，主要是layout_constraintCircle鎖定目標(biāo)控件，layout_constraintCircleRadius和layout_constraintCircleAngle分別控制半徑和角度。這里不再贅述

ConstraintLayout使用指南

三. Circular positioning進(jìn)階

我們先來看一下目標(biāo)效果：


最終效果

1. 設(shè)置布局

布局的xml文件比較長(zhǎng)，內(nèi)容其實(shí)很簡(jiǎn)單，主要是四個(gè)FloatingActionButton和三個(gè)Group，這個(gè)時(shí)候你可能會(huì)有疑惑，為什么會(huì)有三個(gè)Group？我這里解答一下，上篇我們講了，Group在的ConstraintLayout中用來統(tǒng)一的控制視圖的顯示和隱藏，如果只用一個(gè)Group并不能讓我們的控件有序的顯示和隱藏，而FloatingActionButton由于不能使用setVisibility方法，只能使用Group管理FloatingActionButton的顯示和隱藏，因此使用三個(gè)Group來實(shí)現(xiàn)上圖三個(gè)FloatingActionButton有序的顯示和隱藏（本來打算使用FloatingActionButton代替ImageView減少工作量的，FloatingActionButton導(dǎo)致的問題反而使工作量增加了，哈哈～）,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. 編寫代碼

首先確定我們需要使用的實(shí)例：

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

接著初始化我們的控件，這里的代碼比較簡(jiǎn)單，initListener()我們放在后面介紹：

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

        initWidget();
        initListener();
    }

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

        // 動(dòng)態(tài)獲取FloatingActionButton的寬
        mAdd.post(new Runnable() {
            @Override
            public void run() {
                width = mAdd.getMeasuredWidth();
            }
        });
        // 在xml文件里設(shè)置的半徑
        radius = UiUtils.dp2px(this, 80);
    }

    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);
        // 將三個(gè)彈出的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);
    }

我們的重點(diǎn)就在initListener()里面，思路就是利用屬性動(dòng)畫控制ConstraintLayout.LayoutParams，從而控制Circular positioning的角度和半徑：

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

                // 判斷播放顯示還是隱藏動(dòng)畫
                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 轉(zhuǎn)動(dòng)的角度
     * @return ValueAnimator
     */
    private ValueAnimator getValueAnimator(final FloatingActionButton button, final boolean reverse, final Group group, final int angle) {
        ValueAnimator animator;
        if (reverse)
            animator = ValueAnimator.ofFloat(1, 0);
        else
            animator = ValueAnimator.ofFloat(0, 1);
        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方法中取消對(duì)//params.circleAngle = 270f + angle * v;這行的注釋，效果就如本章一開始的效果。

四. 總結(jié)

本文的思路就是利用屬性動(dòng)畫控制ConstraintLayout.LayoutParams，從而控制Circular positioning的角度和半徑，內(nèi)容比較簡(jiǎn)單，前提是你得掌握屬性動(dòng)畫和ConstraintLayout的使用。本人水平有限，難免有誤，如有錯(cuò)誤，歡迎提出。
Demo地址
Over~

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容