【TabRadioButton】圖片文字會居中的RadioButton,自帶縮放效果

TabRadioButton for Android

APP開發中,底部菜單常用RadioButton來實現切換,但使用系統自帶的RadioButton的話,你會發現圖片和文字並無徹底居中,因而就有了TabRadioButton。android

TabRadioButton只對 drawableLeftdrawableTop方向上的圖片作了居中處理(這兩個方向通常用的比較多)git

  • 圖片和文字居中
  • 可指定drawable的大小
  • 自帶縮放動畫效果,手指按下和鬆開時觸發(須要開啓)

Preview

Download

Gradle:github

compile 'com.zaaach:tabradiobutton:1.0.1'
複製代碼

or Maven:app

<dependency>
  <groupId>com.zaaach</groupId>
  <artifactId>tabradiobutton</artifactId>
  <version>1.0.1</version>
  <type>pom</type>
</dependency>
複製代碼

How to use

  1. TabRadioButton 添加圖片時要用drawableLeftdrawableTop 這兩個屬性~
  2. 若須要動畫效果,添加一行屬性 trb_enable_animation="true" 便可啓用縮放動畫效果
<RadioGroup style="@style/TabRadioGroup">
     <com.zaaach.tabradiobutton.TabRadioButton style="@style/TabRadioButtonWithText" android:drawableTop="@drawable/tab_contact_icon_selector" app:trb_enable_animation="true" app:trb_drawable_size="24dp" app:trb_scale_rate="0.8" app:trb_duration="200"/>
</RadioGroup>
複製代碼

attrs.xml 自定義的屬性:gradle

<declare-styleable name="TabRadioButton">
  	<!-- 啓用動畫效果 -->
        <attr name="trb_enable_animation" format="boolean"/>
  	<!-- 動畫時長 -->
        <attr name="trb_duration" format="integer"/>
  	<!-- 縮放比例 -->
        <attr name="trb_scale_rate" format="float"/>
  	<!-- drawable大小 -->
        <attr name="trb_drawable_size" format="dimension"/>
</declare-styleable>
複製代碼

@style/TabRadioButtonWithText 內容以下:動畫

<style name="TabRadioButtonWithText"> <item name="android:layout_width">0dp</item> <item name="android:layout_height">match_parent</item> <item name="android:layout_weight">1</item> <item name="android:button">@null</item> <item name="android:background">@null</item> <item name="android:textSize">12sp</item> <item name="android:textColor">@drawable/tab_text_color_selector</item> <item name="android:drawablePadding">2dp</item> </style>
複製代碼

Try it

:wink:spa

下載地址

github.com/zaaach/TabR… 若是你喜歡TabRadioButton,記得給個Star支持一下!code

相關文章
相關標籤/搜索