如何制作带有居中和比例图像而不是文本的单选按钮？

Question

在标记为已解决之前，许多主题都解决了这个问题，但没有给出很好的解决方案。

我想在自适应 RadioGroup（android:layout_width="0dp" 和 android:layout_weight="1"）

中使用居中且按比例调整大小的图像创建 radio buttons

不有效的解决方案：

设置 android:button="R.drawable.x" 或 android:drawableStart="R.drawable.x" 及其同级 - 图像将偏离中心绘制，悬停在不可见的文本周围

示例：

`<RadioGroup
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center_horizontal|center">

    <RadioButton
        android:id="@+id/bt_home"
        style="@style/radio_btn_style"
        android:button="@drawable/radio_btn_home_selector"/>

    <RadioButton
        android:id="@+id/bt_discover"
        style="@style/radio_btn_style"
        android:button="@drawable/radio_btn_discover_selector"/>

    <RadioButton
        android:id="@+id/bt_my_profile"
        android:button="@drawable/radio_btn_my_profile_selector"
        android:checked="true"
        style="@style/radio_btn_style"
        />

    <RadioButton
        android:layout_weight="1"
        android:id="@+id/bt_new_activity"
        style="@style/radio_btn_style"
        android:button="@drawable/radio_btn_add_activity_selector"

        />


</RadioGroup>`

结果：单选按钮偏离中心

设置 android:background="R.drawable.x" - 图像将涂抹以填充背景。

示例：

<RadioGroup
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center_horizontal|center">

    <RadioButton
        android:id="@+id/bt_home"
        style="@style/radio_btn_style"
        android:background="@drawable/radio_btn_home_selector"
        android:button="@null"/>

    <RadioButton
        android:id="@+id/bt_discover"
        style="@style/radio_btn_style"
        android:background="@drawable/radio_btn_discover_selector"
        android:button="@null"/>

    <RadioButton
        android:id="@+id/bt_my_profile"
        android:background="@drawable/radio_btn_my_profile_selector"
        android:checked="true"
        style="@style/radio_btn_style"
        android:button="@null"/>

    <RadioButton
        android:layout_weight="1"
        android:id="@+id/bt_new_activity"
        style="@style/radio_btn_style"
        android:background="@drawable/radio_btn_add_activity_selector"
        android:button="@null"/>
</RadioGroup>

结果：background icons get smeared

设置 RadioButton android:layout_width="wrap_content" - 将按钮聚拢到中心，但不会 space 在整个 RadioGroup 宽度

结果：单选按钮成束

这是我不想要的结果: radio buttons spaced out evenly, maintaining image proportion

有什么想法吗？谢谢...

P.S.: 使用的样式：

`<style name="radio_btn_style">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginEnd">16dp</item>
        <item name="android:layout_marginStart">16dp</item>

 </style>`

可绘制选择器示例：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_nav_home_selected"
 android:state_checked="true"/>
    <item android:drawable="@drawable/ic_nav_home"/>
 </selector>

Answer 1

试试这个：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="kostas.testexample.com.testexample.MainActivity">

    <RadioGroup
        android:orientation="horizontal"

        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

            <RadioButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/radioButton4"
                style="@style/radio_btn_style"
                android:button="@null"
                android:layout_weight="1" />

            <RadioButton
                style="@style/radio_btn_style"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/radioButton3"
                android:button="@null"
                android:layout_weight="1" />

            <RadioButton
                style="@style/radio_btn_style"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/radioButton"
                android:button="@null"
                android:layout_weight="1" />

            <RadioButton
                style="@style/radio_btn_style"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/radioButton2"
                android:button="@null"
                android:layout_weight="1" />

    </RadioGroup>

</LinearLayout>

然后像这样修改你的样式：

<style name="radio_btn_style">
        <item name="android:layout_width">match_parent</item>
        <item name="android:gravity">center|center_horizontal</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:padding">10dp</item>
        <item name="android:scaleX">0.5</item>
        <item name="android:scaleY">0.6</item>
        <item name="android:background">@drawable/example</item>

    </style>

它会给你以下结果：

希望对您有所帮助！！！

Answer 2

我认为你最好使用 BottomNavigationView

https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html

https://medium.com/@hitherejoe/exploring-the-android-design-support-library-bottom-navigation-drawer-548de699e8e0#.95osn0hy9

Answer 3

您可以使用这个小部件

android.support.design.widget.TabLayout

希望这能解决您的问题。

如何制作带有居中和比例图像而不是文本的单选按钮？

How to make Radio buttons with centered and proportional images instead of text?

android

imagebutton

radio-button