问题描述
我需要创建一个自定义图像视图来按设计选择颜色。当用户单击圆圈时,应出现带有勾号的白色内圈,如下例所示:
否则,它应该只是一个带有某种颜色的圆形(未选中状态),如下所示:
主要问题,我不知道如何创建一个带有内圈的选择器并保持以编程方式设置颜色的能力。
简单的圆形我可以设置,例如,像这样:
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/circle_crop"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="center"
android:src="@android:color/holo_red_dark" />
如何修改它以在选中状态下设置带有刻度的白色圆圈(当用户单击它时)?
解决方法
你需要为你的图像视图创建一个可绘制的选择器,例如:
drawable_round_view_selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/drawable_round_view_selected" android:state_selected="true" />
<item android:drawable="@drawable/drawable_round_view_unselected" android:state_selected="false" />
<item android:drawable="@drawable/drawable_round_view_unselected" />
</selector>
drawable_round_view_selected
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<size
android:width="40dp"
android:height="40dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
<stroke
android:width="1dp"
android:color="#3383FF" />
<solid android:color="#3383FF"/>
</shape>
</item>
<item>
<shape android:shape="oval">
<size
android:width="40dp"
android:height="40dp" />
<solid android:color="#ffffff" />
</shape>
</item>
<item android:drawable="@drawable/ic_baseline_check_24" />
</layer-list>
和 drawable_round_view_unselected
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size
android:width="40dp"
android:height="40dp" />
<!-- unselected button background -->
<solid
android:color="@color/black" />
<stroke
android:color="@color/gray_martini"
android:width="1dp"/>
</shape>
之后在你的布局上设置图像视图,如:
<ImageView
android:id="@+id/roundImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:src="@drawable/drawable_round_view_selector"/>
最后根据所选状态在您的活动或片段更改视图上:
binding.roundImageView.setOnClickListener {
it.isSelected = !it.isSelected
}
PS:根据您的要求更改颜色和尺寸。
,太简单了。
1.创建 layer-list
Drawable
称为“icon_check”
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item //for the round white background
android:bottom="10dp" //margin,"<size>" tag doesn't work
android:end="10dp"
android:start="10dp"
android:top="10dp">
<shape
android:shape="oval">
<solid
android:color="@color/white" />
</shape>
</item>
<item
android:drawable="@drawable/check" //check mark from built-in asset
android:bottom="14dp" //margin,extra 4dp is prefered
android:end="14dp"
android:start="14dp"
android:top="14dp" />
</layer-list>
2.创建 selector
Drawable
称为“foreground_check”
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/icon_check" //layer-list created above
android:state_selected="true" />
<item
android:drawable="@android:color/transparent" //key point,【"@null" doesn't work!!】
android:state_selected="false" />
</selector>
3.设置 CardView
<androidx.cardview.widget.CardView //【MaterialCardView doesn't work!!】
android:id="@+id/cardView"
android:layout_width="40dp"
android:layout_height="40dp"
android:foreground="@drawable/foreground_check" //apply layer-list drawable
app:cardBackgroundColor="@color/black"
app:cardCornerRadius="20dp" /> //half of side length
4.设置用户界面控制器
cardView.setOnClickListener {
it.isSelected = !it.isSelected
}
结果: