如何使居中和比例圖像而不是文本的單選按鈕？

Question

在標記爲解決問題之前，許多主題都解決了這個問題，但沒有給出一個好的解決方案。

我想創建radio buttons與中心按比例大小的圖像，在自適應RadioGroup（android:layout_width="0dp"和android:layout_weight="1"）

解決方案，請勿工作：

1. 設置或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

---

設置RadioButtonandroid:layout_width="wrap_content" - 蕉按鈕中心，但均勻分佈在整個不隔開RadioGroup寬度

結果：單選按鈕束身

---

這是結果我wan't： 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

我想你最好使用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 2

試試這個：

<?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> 

，它會給你t他下面的結果：

希望它可以幫助！

Answer 3

你可以使用這個小工具

android.support.design.widget.TabLayout 

希望這將解決您的問題。