通常在一般的APP中,都会在主页的下方设置3到5个按钮进行主界面的切换,而这种切换实现的方式有很多,比如RadioButton,TabHost,自定义等,本篇主讲RadioButton的实现方式。
优势:简单粗暴,易于实现,易于控制。
劣势:扩展性不强。比如中间的图标放大,在购物车的图标上实现小红点数量提示等,但也总有解决的方案,小红点数量提示可参考
直入正题,效果图:
1.新建MyRadioButton类,继承RadioButton
package com.example.yechaoa.radiobuttondemo;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.RadioButton;
/**
* Created by yechao on 2016/12/1.
* Describe:可控制drawableTop等图片的大小
*/
public class MyRadioButton extends RadioButton {
private int mDrawableSize;// xml文件中设置的大小
public MyRadioButton(Context context) {
this(context, null, 0);
}
public MyRadioButton(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyRadioButton(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
Drawable drawableLeft = null, drawableTop = null, drawableRight = null, drawableBottom = null;
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.MyRadioButton);
int n = a.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = a.getIndex(i);
switch (attr) {
case R.styleable.MyRadioButton_drawableSize:
mDrawableSize = a.getDimensionPixelSize(R.styleable.MyRadioButton_drawableSize, 50);
break;
case R.styleable.MyRadioButton_drawableTop:
drawableTop = a.getDrawable(attr);
break;
case R.styleable.MyRadioButton_drawableBottom:
drawableRight = a.getDrawable(attr);
break;
case R.styleable.MyRadioButton_drawableRight:
drawableBottom = a.getDrawable(attr);
break;
case R.styleable.MyRadioButton_drawableLeft:
drawableLeft = a.getDrawable(attr);
break;
default:
break;
}
}
a.recycle();
setCompoundDrawablesWithIntrinsicBounds(drawableLeft, drawableTop, drawableRight, drawableBottom);
}
/**
* RadioButton上、下、左、右设置图标
*/
public void setCompoundDrawablesWithIntrinsicBounds(Drawable left, Drawable top, Drawable right, Drawable bottom) {
if (left != null) {
left.setBounds(0, 0, mDrawableSize, mDrawableSize);
}
if (right != null) {
right.setBounds(0, 0, mDrawableSize, mDrawableSize);
}
if (top != null) {
top.setBounds(0, 0, mDrawableSize, mDrawableSize);
}
if (bottom != null) {
bottom.setBounds(0, 0, mDrawableSize, mDrawableSize);
}
setCompoundDrawables(left, top, right, bottom);
}
}
2.在style.xml文件中加入
<declare-styleable name="MyRadioButton">
<attr name="drawableSize" format="dimension"/>
<attr name="drawableTop" format="reference"/>
<attr name="drawableLeft" format="reference"/>
<attr name="drawableRight" format="reference"/>
<attr name="drawableBottom" format="reference"/>
</declare-styleable>
3.加入属性参数,在values文件夹下新建attrs.xml文件,并加入
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="MyRadioButton">
<attr name="drawableSize" format="dimension"/>
<attr name="drawableTop" format="reference"/>
<attr name="drawableLeft" format="reference"/>
<attr name="drawableRight" format="reference"/>
<attr name="drawableBottom" format="reference"/>
</declare-styleable>
</resources>
4.在布局中引用
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:myradio="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">
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<RadioGroup
android:id="@+id/rg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.example.yechaoa.radiobuttondemo.MyRadioButton //这里引用自己的包名加类名
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@android:color/transparent" //设置背景为透明
android:button="@null"
android:clickable="true" //设置可点击
android:drawablePadding="5dp" //设置图片的padding
android:gravity="center"
android:text="首页"
myradio:drawableSize="30dp" //设置自定义的属性,控制图片大小
myradio:drawableTop="@mipmap/ic_launcher" /> //设置资源
<com.example.yechaoa.radiobuttondemo.MyRadioButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@android:color/transparent"
android:button="@null"
android:clickable="true"
android:drawablePadding="5dp"
android:gravity="center"
android:text="分类"
myradio:drawableSize="30dp"
myradio:drawableTop="@mipmap/ic_launcher" />
<com.example.yechaoa.radiobuttondemo.MyRadioButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@android:color/transparent"
android:button="@null"
android:clickable="true"
android:drawablePadding="5dp"
android:gravity="center"
android:text="发现"
myradio:drawableSize="50dp"
myradio:drawableTop="@mipmap/ic_launcher" />
<com.example.yechaoa.radiobuttondemo.MyRadioButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@android:color/transparent"
android:button="@null"
android:clickable="true"
android:drawablePadding="5dp"
android:gravity="center"
android:text="购物车"
myradio:drawableSize="30dp"
myradio:drawableTop="@mipmap/ic_launcher" />
<com.example.yechaoa.radiobuttondemo.MyRadioButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@android:color/transparent"
android:button="@null"
android:clickable="true"
android:drawablePadding="5dp"
android:gravity="center"
android:text="个人中心"
myradio:drawableSize="30dp"
myradio:drawableTop="@mipmap/ic_launcher" />
</RadioGroup>
</LinearLayout>
Demo地址:https://github.com/yechaoa/RadioButtonDemo