最新有需求是一個顔色選擇,然後點選顔色選擇按鈕,依次展開供選擇的顔色按鈕,話不多說,先看效果圖
效果圖是故意增加了進場時間的效果。
實作思路:
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);
}
}
}
大概就是這麼個流程就能實作上面的效果,看看,自己修改修改。