本文已授權(quán)微信公眾號(hào)：鴻洋（hongyangAndroid）在微信公眾號(hào)平臺(tái)原創(chuàng)首發(fā)
前言
在上一篇中冒滩，我們學(xué)習(xí)了ConstraintLayout的基本使用乎折，如果還不了解ConstraintLayout假夺，快去學(xué)習(xí)一下吧：
我們這一篇主要講解一下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分別控制半徑和角度乐纸。這里不再贅述
三. 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~
