最新有需求是一个颜色选择,然后点击颜色选择按钮,依次展开供选择的颜色按钮,话不多说,先看效果图
效果图是故意增加了进场时间的效果。
实现思路:
1.点击按钮,然后隐藏按钮,把要展示的布局显示出来
2.遍历父布局RadioGroup,给每个字控件RadioButton设置进场动画效果,以及设计一个小小的延迟。
具体如下:
1.布局文件:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".Main3Activity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text='展开'
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:id="@+id/span"
>
</Button>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:animateLayoutChanges="true"
android:id="@+id/colorselect"
android:layout_marginStart="-30dp"
android:visibility="gone"
>
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:orientation="horizontal"
android:id="@+id/radiogroup"
>
<RadioButton
android:layout_width="25dp"
android:layout_height="25dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:id="@+id/color1"
android:background="@drawable/color1"
android:checked="true"
android:button="@null"
>
</RadioButton>
<RadioButton
android:layout_width="25dp"
android:layout_height="25dp"
app:layout_constraintLeft_toRightOf="@+id/color1"
app:layout_constraintTop_toTopOf="parent"
android:id="@+id/color2"
android:button="@null"
android:background="@drawable/color2"
android:layout_marginLeft="10dp"
>
</RadioButton>
<RadioButton
android:layout_width="25dp"
android:layout_height="25dp"
app:layout_constraintLeft_toRightOf="@id/color2"
app:layout_constraintTop_toTopOf="parent"
android:id="@+id/color3"
android:button="@null"
android:background="@drawable/color3"
android:layout_marginLeft="10dp"
>
</RadioButton>
<RadioButton
android:layout_width="25dp"
android:layout_height="25dp"
app:layout_constraintLeft_toRightOf="@+id/color3"
app:layout_constraintTop_toTopOf="parent"
android:id="@+id/color4"
android:background="@drawable/color4"
android:button="@null"
android:layout_marginLeft="10dp"
>
</RadioButton>
</RadioGroup>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
2.设置动画
public class Main3Activity extends AppCompatActivity {
private Button span;
private ConstraintLayout sel;
private RadioGroup radioGroup;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main3);
span = findViewById(R.id.span);
sel = findViewById(R.id.colorselect);
radioGroup = findViewById(R.id.radiogroup);
span.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
span.setVisibility(View.GONE);
sel.setVisibility(View.VISIBLE);
startAnimation(radioGroup);
}
});
}
private void startAnimation(ViewGroup viewGroup) {
Handler mHandler = new Handler();
for (int i = 0; i < viewGroup.getChildCount(); i++) {
final View child = viewGroup.getChildAt(i);
child.setVisibility(View.GONE);
mHandler.postDelayed(new Runnable() {
@Override
public void run() {
child.setVisibility(View.VISIBLE);
ValueAnimator anim = ObjectAnimator.ofFloat(child, "translationX", -500, 0);
anim.setDuration(200);
anim.start();
}
}, i * 30);
}
}
}
大概就是这么个流程就能实现上面的效果,看看,自己修改修改。