知識星球作者：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(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);
// 將三個彈出的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(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方法中取消對//params.circleAngle = 270f + angle * v;這行的註釋，效果就如本章一開始的效果。
總結
本文的思路就是利用屬性動畫控制ConstraintLayout.LayoutParams，從而控制Circular positioning的角度和半徑，內容比較簡單，前提是你得掌握屬性動畫和ConstraintLayout的使用。本人水平有限，難免有誤，如有錯誤，歡迎提出。
https://github.com/mCyp/Test
朋友會在“發現-看一看”看到你“在看”的內容