Android RadioButton *带有*图标，并居中对齐
是否可以创建带有RadioButtons的水平RadioGroup，其中每个按钮包含一个单选按钮，图标和文本，并且这三个项目彼此垂直居中对齐？
我尝试在gravity和layout_gravity上分别设置RadioGroup和RadioButtons，以及每个按钮上的layout_weight等，无济于事。为什么在Android上这么难？
^我希望单选按钮以图标和标题居中。
我需要整个区域都可以选择，所以我真的很想设置RadioButton的图标和文本值，而不是在UI上添加单独的ImageViews。我想使用RadioGroup，因为我在自定义Preference项目中使用了它，因此选择和持久性对我来说很好。
这是XML
<?xml version="1.0" encoding="utf-8"?>
<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:id="@android:id/widget_frame"
style="@style/AppTheme"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimaryDark"
android:theme="@style/AppTheme"
tools:context=".settings.homeScreenPreference">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorPrimaryDark"
android:text="@string/set_home_screen" />
<!--Settings icon-->
<ImageView
android:id="@+id/settingsIcon"
android:layout_width="0dp"
android:layout_height="80dp"
android:contentDescription="@string/settings_icon_description"
android:drawable="@drawable/ic_settings"
android:tint="@color/colorAccent"
app:layout_constraintBottom_toTopOf="@id/settingsTitle"
app:layout_constraintEnd_toStartOf="@+id/diidsIcon"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/title"
tools:srcCompat="@drawable/ic_settings" />
<!--Cards icon-->
<ImageView
android:id="@+id/diidsIcon"
android:layout_width="0dp"
android:layout_height="80dp"
android:contentDescription="@string/my_cards_icon_description"
android:drawable="@drawable/ic_my_cards"
android:tint="@color/colorAccent"
app:layout_constraintBottom_toTopOf="@id/home_screen_radio_group"
app:layout_constraintEnd_toStartOf="@+id/scannerIcon"
app:layout_constraintStart_toEndOf="@+id/settingsIcon"
app:layout_constraintTop_toBottomOf="@id/title"
tools:srcCompat="@drawable/ic_my_cards" />
<!--Scanner icon-->
<ImageView
android:id="@+id/scannerIcon"
android:layout_width="0dp"
android:layout_height="80dp"
android:contentDescription="@string/scanner_icon_description"
android:drawable="@drawable/ic_scan_qr"
android:tint="@color/colorAccent"
app:layout_constraintBottom_toTopOf="@id/home_screen_radio_group"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/diidsIcon"
app:layout_constraintTop_toBottomOf="@id/title"
tools:srcCompat="@drawable/ic_scan_qr" />
<!--Settings title-->
<TextView
android:id="@+id/settingsTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/settings"
android:textAlignment="center"
android:textColor="@color/colorAccent"
app:layout_constraintBottom_toTopOf="@id/home_screen_radio_group"
app:layout_constraintEnd_toStartOf="@+id/diidsTitle"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/settingsIcon" />
<!--Cards title-->
<TextView
android:id="@+id/diidsTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/my_cards"
android:textAlignment="center"
android:textColor="@color/colorAccent"
app:layout_constraintBottom_toTopOf="@id/home_screen_radio_group"
app:layout_constraintEnd_toStartOf="@+id/scannerTitle"
app:layout_constraintStart_toEndOf="@+id/settingsTitle"
app:layout_constraintTop_toBottomOf="@id/diidsIcon" />
<!--Scanner title-->
<TextView
android:id="@+id/scannerTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/scan_code"
android:textAlignment="center"
android:textColor="@color/colorAccent"
app:layout_constraintBottom_toTopOf="@id/home_screen_radio_group"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/diidsTitle"
app:layout_constraintTop_toBottomOf="@id/scannerIcon" />
<!--Radio group-->
<RadioGroup
android:id="@+id/home_screen_radio_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@color/colorPrimaryDark"
android:gravity="center"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="@id/settingsTitle">
<!--Settings radio-->
<RadioButton
android:id="@+id/settingsButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:buttonTint="@color/colorAccent" />
<!--Cards radio-->
<RadioButton
android:id="@+id/diidsButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:buttonTint="@color/colorAccent" />
<!--Scanner radio-->
<RadioButton
android:id="@+id/scannerButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:buttonTint="@color/colorAccent"/>
</RadioGroup>
</android.support.constraint.ConstraintLayout>
2 个答案:
答案 0 :(得分：0)
使用CheckedTextView代替RadioButton 您会得到的 Image Click Here
布局XML
<?xml version="1.0" encoding="utf-8"?>
<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=".MainActivity">
<CheckedTextView
android:id="@+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:drawableTop="@drawable/ic_state"
android:text="Settings"
android:textSize="20sp"
app:layout_constraintEnd_toStartOf="@+id/two"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<CheckedTextView
android:id="@+id/two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:drawableTop="@drawable/ic_state"
android:text="My DIID"
android:textSize="20sp"
app:layout_constraintEnd_toStartOf="@+id/three"
app:layout_constraintStart_toEndOf="@+id/one"
app:layout_constraintTop_toTopOf="parent" />
<CheckedTextView
android:id="@+id/three"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:drawableTop="@drawable/ic_state"
android:text="Scan Code"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/two"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
使2个可绘制对象并像现在这样添加背景可绘制对象
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_android_black_24dp"
android:state_checked="false" />
<item android:drawable="@drawable/ic_android_green_24dp"
android:state_checked="true"
/>
</selector>
现在MainActivity
public class MainActivity extends AppCompatActivity {
CheckedTextView one,two,three;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
one = findViewById(R.id.one);
two = findViewById(R.id.two);
three = findViewById(R.id.three);
mDrawable = getResources().getDrawable(R.drawable.ic_android_black_24dp);
one.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (one.isChecked()){
one.setTextColor(getResources().getColor(R.color.black));
one.setChecked(false);
}else{
one.setTextColor(getResources().getColor(R.color.colorPrimary));
one.setChecked(true);
}
}
});
two.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (two.isChecked()){
two.setTextColor(getResources().getColor(R.color.black));
two.setChecked(false);
}else{
two.setTextColor(getResources().getColor(R.color.colorPrimary));
two.setChecked(true);
}
}
});
three.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (three.isChecked()){
three.setTextColor(getResources().getColor(R.color.black));
three.setChecked(false);
}else{
three.setTextColor(getResources().getColor(R.color.colorPrimary));
three.setChecked(true);
}
}
});
}
}
答案 1 :(得分：0)
您希望RadioButton位于中间，上方的文本是这样的 Click here
这是XML代码
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_marginTop="15dp">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:checked="true"
android:drawableTop="@drawable/ic_state"
android:drawableBottom="@android:drawable/btn_radio"
android:gravity="center"
android:text="Text on top" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/ic_state"
android:drawableBottom="@android:drawable/btn_radio"
android:gravity="center"
android:text="Text on top" />
</RadioGroup>
</android.support.constraint.ConstraintLayout>
并使用2个背景可绘制的状态进行选中和未选中
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_android_black_24dp"
android:state_checked="false" />
<item android:drawable="@drawable/ic_android_green_24dp" android:state_checked="true"
/>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？