其他
妙用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
我们先来看一下目标效果：
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()我们放在后面介绍：
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_constraint);
initWidget();
initListener();
}
protected void onResume() {
super.onResume();
// 动态获取FloatingActionButton的宽
mAdd.post(new Runnable() {
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() {
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() {
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() {
public void onAnimationStart(Animator animation) {
group.setVisibility(View.VISIBLE);
}
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{
public void onAnimationStart(Animator animation) {
}
public void onAnimationEnd(Animator animation) {
}
public void onAnimationCancel(Animator animation) {
}
public void onAnimationRepeat(Animator animation) {
}
}
这样写完效果就出来了：
如果你觉得弹出的曲线不够圆滑，你可以在getValueAnimator方法中取消对//params.circleAngle = 270f + angle * v;这行的注释，效果就如本章一开始的效果。
总结
本文的思路就是利用属性动画控制ConstraintLayout.LayoutParams，从而控制Circular positioning的角度和半径，内容比较简单，前提是你得掌握属性动画和ConstraintLayout的使用。本人水平有限，难免有误，如有错误，欢迎提出。
https://github.com/mCyp/Test
推荐阅读：
扫一扫 关注我的公众号
如果你想要跟大家分享你的文章，欢迎投稿~
┏(＾0＾)┛明天见！