RadioButton右上角带数量显示的电商框架必备

电商项目中必定会有购物车一栏,而购物车按钮的右上角又必定会有一个红色圆圈显示数量的小头标,如下图:

这里写图片描述

面对这样的界面,我们有很多中选择来搭建框架,在这里我只说2种我觉得还可以的。
第一:RadioButton+BadgeView配合显示
1、底部按钮导航栏的布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/title_bg_color"
    android:orientation="vertical">

    <View
        style="@style/ViewHorizontalLine"
        android:layout_above="@+id/rg_tab_bar" />

    <RadioGroup
        android:id="@+id/rg_tab_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:checkedButton="@+id/rbHome"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:paddingLeft="6dp"
        android:paddingRight="6dp"
        android:paddingTop="6dp">

        <RadioButton
            android:id="@+id/rbHome"
            style="@style/RaidoButtonStyle"
            android:drawableTop="@drawable/btn_tabbar_home_selector"
            android:text="@string/tab_home" />

        <RadioButton
            android:id="@+id/rbBuy"
            style="@style/RaidoButtonStyle"
            android:drawableTop="@drawable/btn_tabbar_buy_selector"
            android:text="@string/tab_buy" />

        <RadioButton
            android:id="@+id/rbCategory"
            style="@style/RaidoButtonStyle"
            android:drawableTop="@drawable/btn_tabbar_category_selector"
            android:text="@string/tab_category" />

        <RadioButton
            android:id="@+id/rbCart"
            style="@style/RaidoButtonStyle"
            android:drawableTop="@drawable/btn_tabbar_cart_selector"
            android:text="@string/tab_cart" />

        <RadioButton
            android:id="@+id/rbUserCenter"
            style="@style/RaidoButtonStyle"
            android:drawableTop="@drawable/btn_tabbar_user_center_selector"
            android:text="@string/tab_user_center" />

    </RadioGroup>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_alignParentBottom="true"
        android:background="@color/transparent"
        android:numColumns="5"
        android:orientation="horizontal">

        <Button style="@style/BadgeViewButtonStyle" />

        <Button style="@style/BadgeViewButtonStyle" />

        <Button style="@style/BadgeViewButtonStyle" />

        <Button
            android:id="@+id/btn_msg"
            style="@style/BadgeViewButtonStyle" />

        <Button style="@style/BadgeViewButtonStyle" />
    </LinearLayout>

</RelativeLayout>
2、activity_main的布局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:clipToPadding="true"
    android:fitsSystemWindows="true">

    <FrameLayout
        android:id="@+id/fragmentContent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/white" />

    <!--<include layout="@layout/bottom_tab_bar"/>-->
</LinearLayout>     
3、BadgeView的工具类:
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Color;
import android.graphics.Typeface;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.RoundRectShape;
import android.support.v7.widget.AppCompatTextView;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.ViewParent;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.DecelerateInterpolator;
import android.widget.FrameLayout;
import android.widget.TabWidget;
/**
 * Description:com.mmbao.saas.util类
 * Created by Administrator on 2018/1/25.
 * Maxim:There is no smoke without fire
 */

public class BadgeView extends AppCompatTextView {

    public static final int POSITION_TOP_LEFT = 1;
    public static final int POSITION_TOP_RIGHT = 2;
    public static final int POSITION_BOTTOM_LEFT = 3;
    public static final int POSITION_BOTTOM_RIGHT = 4;
    public static final int POSITION_CENTER = 5;

    private static final int DEFAULT_MARGIN_DIP = 5;
    private static final int DEFAULT_LR_PADDING_DIP = 5;
    private static final int DEFAULT_CORNER_RADIUS_DIP = 8;
    private static final int DEFAULT_POSITION = POSITION_TOP_RIGHT;
    private static final int DEFAULT_BADGE_COLOR = Color.parseColor("#CCFF0000"); //Color.RED;
    private static final int DEFAULT_TEXT_COLOR = Color.WHITE;

    private static Animation fadeIn;
    private static Animation fadeOut;

    private Context context;
    private View target;

    private int badgePosition;
    private int badgeMarginH;
    private int badgeMarginV;
    private int badgeColor;

    private boolean isShown;

    private ShapeDrawable badgeBg;

    private int targetTabIndex;

    public BadgeView(Context context) {
        this(context, (AttributeSet) null, android.R.attr.textViewStyle);
    }

    public BadgeView(Context context, AttributeSet attrs) {
        this(context, attrs, android.R.attr.textViewStyle);
    }

    /**
     * Constructor -
     * <p>
     * create a new BadgeView instance attached to a target {@link android.view.View}.
     *
     * @param context context for this view.
     * @param target  the View to attach the badge to.
     */
    public BadgeView(Context context, View target) {
        this(context, null, android.R.attr.textViewStyle, target, 0);
    }

    /**
     * Constructor -
     * <p>
     * create a new BadgeView instance attached to a target {@link android.widget.TabWidget}
     * tab at a given index.
     *
     * @param context context for this view.
     * @param target  the TabWidget to attach the badge to.
     * @param index   the position of the tab within the target.
     */
    public BadgeView(Context context, TabWidget target, int index) {
        this(context, null, android.R.attr.textViewStyle, target, index);
    }

    public BadgeView(Context context, AttributeSet attrs, int defStyle) {
        this(context, attrs, defStyle, null, 0);
    }

    public BadgeView(Context context, AttributeSet attrs, int defStyle, View target, int tabIndex) {
        super(context, attrs, defStyle);
        init(context, target, tabIndex);
    }

    private void init(Context context, View target, int tabIndex) {

        this.context = context;
        this.target = target;
        this.targetTabIndex = tabIndex;

        // apply defaults
        badgePosition = DEFAULT_POSITION;
        badgeMarginH = dipToPixels(DEFAULT_MARGIN_DIP);
        badgeMarginV = badgeMarginH;
        badgeColor = DEFAULT_BADGE_COLOR;

        setTypeface(Typeface.DEFAULT_BOLD);
        int paddingPixels = dipToPixels(DEFAULT_LR_PADDING_DIP);
        setPadding(paddingPixels, 0, paddingPixels, 0);
        setTextColor(DEFAULT_TEXT_COLOR);

        fadeIn = new AlphaAnimation(0, 1);
        fadeIn.setInterpolator(new DecelerateInterpolator());
        fadeIn.setDuration(200);

        fadeOut = new AlphaAnimation(1, 0);
        fadeOut.setInterpolator(new AccelerateInterpolator());
        fadeOut.setDuration(200);

        isShown = false;

        if (this.target != null) {
            applyTo(this.target);
        } else {
            show();
        }

    }

    private void applyTo(View target) {

        LayoutParams lp = target.getLayoutParams();
        ViewParent parent = target.getParent();
        FrameLayout container = new FrameLayout(context);

        if (target instanceof TabWidget) {

            // set target to the relevant tab child container
            target = ((TabWidget) target).getChildTabViewAt(targetTabIndex);
            this.target = target;

            ((ViewGroup) target).addView(container,
                    new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));

            this.setVisibility(View.GONE);
            container.addView(this);

        } else {

            // TODO verify that parent is indeed a ViewGroup
            ViewGroup group = (ViewGroup) parent;
            int index = group.indexOfChild(target);

            group.removeView(target);
            group.addView(container, index, lp);

            container.addView(target);

            this.setVisibility(View.GONE);
            container.addView(this);

            group.invalidate();

        }

    }

    /**
     * Make the badge visible in the UI.
     */
    public void show() {
        show(false, null);
    }

    /**
     * Make the badge visible in the UI.
     *
     * @param animate flag to apply the default fade-in animation.
     */
    public void show(boolean animate) {
        show(animate, fadeIn);
    }

    /**
     * Make the badge visible in the UI.
     *
     * @param anim Animation to apply to the view when made visible.
     */
    public void show(Animation anim) {
        show(true, anim);
    }

    /**
     * Make the badge non-visible in the UI.
     */
    public void hide() {
        hide(false, null);
    }

    /**
     * Make the badge non-visible in the UI.
     *
     * @param animate flag to apply the default fade-out animation.
     */
    public void hide(boolean animate) {
        hide(animate, fadeOut);
    }

    /**
     * Make the badge non-visible in the UI.
     *
     * @param anim Animation to apply to the view when made non-visible.
     */
    public void hide(Animation anim) {
        hide(true, anim);
    }

    /**
     * Toggle the badge visibility in the UI.
     */
    public void toggle() {
        toggle(false, null, null);
    }

    /**
     * Toggle the badge visibility in the UI.
     *
     * @param animate flag to apply the default fade-in/out animation.
     */
    public void toggle(boolean animate) {
        toggle(animate, fadeIn, fadeOut);
    }

    /**
     * Toggle the badge visibility in the UI.
     *
     * @param animIn  Animation to apply to the view when made visible.
     * @param animOut Animation to apply to the view when made non-visible.
     */
    public void toggle(Animation animIn, Animation animOut) {
        toggle(true, animIn, animOut);
    }

    private void show(boolean animate, Animation anim) {
        if (getBackground() == null) {
            if (badgeBg == null) {
                badgeBg = getDefaultBackground();
            }
            setBackgroundDrawable(badgeBg);
        }
        applyLayoutParams();

        if (animate) {
            this.startAnimation(anim);
        }
        this.setVisibility(View.VISIBLE);
        isShown = true;
    }

    private void hide(boolean animate, Animation anim) {
        this.setVisibility(View.GONE);
        if (animate) {
            this.startAnimation(anim);
        }
        isShown = false;
    }

    private void toggle(boolean animate, Animation animIn, Animation animOut) {
        if (isShown) {
            hide(animate && (animOut != null), animOut);
        } else {
            show(animate && (animIn != null), animIn);
        }
    }

    /**
     * Increment the numeric badge label. If the current badge label cannot be converted to
     * an integer value, its label will be set to "0".
     *
     * @param offset the increment offset.
     */
    public int increment(int offset) {
        CharSequence txt = getText();
        int i;
        if (txt != null) {
            try {
                i = Integer.parseInt(txt.toString());
            } catch (NumberFormatException e) {
                i = 0;
            }
        } else {
            i = 0;
        }
        i = i + offset;
        setText(String.valueOf(i));
        return i;
    }

    /**
     * Decrement the numeric badge label. If the current badge label cannot be converted to
     * an integer value, its label will be set to "0".
     *
     * @param offset the decrement offset.
     */
    public int decrement(int offset) {
        return increment(-offset);
    }

    private ShapeDrawable getDefaultBackground() {

        int r = dipToPixels(DEFAULT_CORNER_RADIUS_DIP);
        float[] outerR = new float[]{r, r, r, r, r, r, r, r};

        RoundRectShape rr = new RoundRectShape(outerR, null, null);
        ShapeDrawable drawable = new ShapeDrawable(rr);
        drawable.getPaint().setColor(badgeColor);

        return drawable;

    }

    private void applyLayoutParams() {

        FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

        switch (badgePosition) {
            case POSITION_TOP_LEFT:
                lp.gravity = Gravity.LEFT | Gravity.TOP;
                lp.setMargins(badgeMarginH, badgeMarginV, 0, 0);
                break;
            case POSITION_TOP_RIGHT:
                lp.gravity = Gravity.RIGHT | Gravity.TOP;
                lp.setMargins(0, badgeMarginV, badgeMarginH, 0);
                break;
            case POSITION_BOTTOM_LEFT:
                lp.gravity = Gravity.LEFT | Gravity.BOTTOM;
                lp.setMargins(badgeMarginH, 0, 0, badgeMarginV);
                break;
            case POSITION_BOTTOM_RIGHT:
                lp.gravity = Gravity.RIGHT | Gravity.BOTTOM;
                lp.setMargins(0, 0, badgeMarginH, badgeMarginV);
                break;
            case POSITION_CENTER:
                lp.gravity = Gravity.CENTER;
                lp.setMargins(0, 0, 0, 0);
                break;
            default:
                break;
        }

        setLayoutParams(lp);

    }

    /**
     * Returns the target View this badge has been attached to.
     */
    public View getTarget() {
        return target;
    }

    /**
     * Is this badge currently visible in the UI?
     */
    @Override
    public boolean isShown() {
        return isShown;
    }

    /**
     * Returns the positioning of this badge.
     * <p>
     * one of POSITION_TOP_LEFT, POSITION_TOP_RIGHT, POSITION_BOTTOM_LEFT, POSITION_BOTTOM_RIGHT, POSTION_CENTER.
     */
    public int getBadgePosition() {
        return badgePosition;
    }

    /**
     * Set the positioning of this badge.
     *
     * @param layoutPosition one of POSITION_TOP_LEFT, POSITION_TOP_RIGHT, POSITION_BOTTOM_LEFT, POSITION_BOTTOM_RIGHT, POSTION_CENTER.
     */
    public void setBadgePosition(int layoutPosition) {
        this.badgePosition = layoutPosition;
    }

    /**
     * Returns the horizontal margin from the target View that is applied to this badge.
     */
    public int getHorizontalBadgeMargin() {
        return badgeMarginH;
    }

    /**
     * Returns the vertical margin from the target View that is applied to this badge.
     */
    public int getVerticalBadgeMargin() {
        return badgeMarginV;
    }

    /**
     * Set the horizontal/vertical margin from the target View that is applied to this badge.
     *
     * @param badgeMargin the margin in pixels.
     */
    public void setBadgeMargin(int badgeMargin) {
        this.badgeMarginH = badgeMargin;
        this.badgeMarginV = badgeMargin;
    }

    /**
     * Set the horizontal/vertical margin from the target View that is applied to this badge.
     *
     * @param horizontal margin in pixels.
     * @param vertical   margin in pixels.
     */
    public void setBadgeMargin(int horizontal, int vertical) {
        this.badgeMarginH = horizontal;
        this.badgeMarginV = vertical;
    }

    /**
     * Returns the color value of the badge background.
     */
    public int getBadgeBackgroundColor() {
        return badgeColor;
    }

    /**
     * Set the color value of the badge background.
     *
     * @param badgeColor the badge background color.
     */
    public void setBadgeBackgroundColor(int badgeColor) {
        this.badgeColor = badgeColor;
        badgeBg = getDefaultBackground();
    }

    private int dipToPixels(int dip) {
        Resources r = getResources();
        float px = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dip, r.getDisplayMetrics());
        return (int) px;
    }

}
4、当中使用到的DensityUtil工具方法:
public class DensityUtil {

    /**
     * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
     */
    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    /**
     * 根据手机的分辨率从 px(像素) 的单位 转成为 dp
     */
    public static int px2dip(Context context, float pxValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (pxValue / scale + 0.5f);
    }
}
5、MainActivity的代码实现BadgeView的数量设置和背景设置:
public class MainActivity extends AppCompatActivity {

    @BindView(R.id.fragmentContent)
    FrameLayout fragmentContent;
    @BindView(R.id.rbHome)
    RadioButton rbHome;
    @BindView(R.id.rbBuy)
    RadioButton rbBuy;
    @BindView(R.id.rbCategory)
    RadioButton rbCategory;
    @BindView(R.id.rbCart)
    RadioButton rbCart;
    @BindView(R.id.rbUserCenter)
    RadioButton rbUserCenter;

    private int count = 99;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        Button btnMsg = findViewById(R.id.btn_msg);
        setCartMsg(btnMsg);
    }

    /**
     * 显示购物车上的数量
     * @param btnMsg
     */
    private void setCartMsg(Button btnMsg) {
        BadgeView badgeView = new BadgeView(this,btnMsg);
        badgeView.setBadgePosition(BadgeView.POSITION_TOP_RIGHT);
        badgeView.setTextColor(Color.WHITE);
        badgeView.setBadgeBackgroundColor(Color.RED);
        badgeView.setTextSize(12);
        badgeView.setBadgeMargin(5);
        if (TextUtils.isEmpty(count+"")){
            badgeView.hide();
        }else {
            if (count>99){
                count = 99;
                badgeView.setText(""+count);
            }else {
                badgeView.setText(""+count);
            }
            badgeView.show();
        }
    }
}
第二:自定义RadioGroup+FrameLayout(其中嵌入RadioButton+Button)配合显示
1、activity_main的布局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:clipToPadding="true"
    android:fitsSystemWindows="true">

    <FrameLayout
        android:id="@+id/fragmentContent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/white" />

    <com.mmbao.saas.custom.MyRadioGroup
        android:id="@+id/rg_tab_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:checkedButton="@+id/rbHome"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:paddingLeft="6dp"
        android:paddingRight="6dp"
        android:paddingTop="6dp">

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical"
            android:layout_weight="1" >
            <RadioButton
                android:id="@+id/rbHome"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:layout_gravity="center_horizontal"
                android:button="@null"
                android:textSize="@dimen/bottom_menu_text_size"
                android:textColor="@color/tab_text_color"
                android:checked="true"
                android:drawableTop="@drawable/btn_tabbar_home_selector"
                android:text="@string/tab_home" />
            <Button
                android:visibility="gone"
                android:layout_gravity="top|right"
                android:layout_marginRight="10dp"
                android:layout_marginBottom="10dp"
                android:text="11"
                android:background="@null"
                android:textColor="@color/white"
                android:textSize="12sp"
                android:layout_width="21dp"
                android:layout_height="21dp" />
        </FrameLayout>


        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical"
            android:layout_weight="1" >
            <RadioButton
                android:id="@+id/rbBuy"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:layout_gravity="center_horizontal"
                android:button="@null"
                android:textSize="@dimen/bottom_menu_text_size"
                android:textColor="@color/tab_text_color"
                android:drawableTop="@drawable/btn_tabbar_buy_selector"
                android:text="@string/tab_buy" />
            <Button
                android:visibility="gone"
                android:layout_gravity="top|right"
                android:layout_marginRight="10dp"
                android:layout_marginBottom="10dp"
                android:text="11"
                android:background="@null"
                android:textColor="@color/white"
                android:textSize="12sp"
                android:layout_width="21dp"
                android:layout_height="21dp" />
        </FrameLayout>


        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical"
            android:layout_weight="1" >
            <RadioButton
                android:id="@+id/rbCategory"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:layout_gravity="center_horizontal"
                android:button="@null"
                android:textSize="@dimen/bottom_menu_text_size"
                android:textColor="@color/tab_text_color"
                android:drawableTop="@drawable/btn_tabbar_category_selector"
                android:text="@string/tab_category" />
            <Button
                android:visibility="gone"
                android:layout_gravity="top|right"
                android:layout_marginRight="10dp"
                android:layout_marginBottom="10dp"
                android:background="@null"
                android:textColor="@color/white"
                android:textSize="12sp"
                android:layout_width="21dp"
                android:layout_height="21dp" />
        </FrameLayout>


        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical"
            android:layout_weight="1" >
            <RadioButton
                android:id="@+id/rbCart"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:layout_gravity="center_horizontal"
                android:button="@null"
                android:textSize="@dimen/bottom_menu_text_size"
                android:textColor="@color/tab_text_color"
                android:drawableTop="@drawable/btn_tabbar_cart_selector"
                android:text="@string/tab_cart" />
            <Button
                android:layout_gravity="top|right"
                android:layout_marginRight="10dp"
                android:layout_marginBottom="10dp"
                android:text="11"
                android:background="@drawable/circle_bg"
                android:textColor="@color/white"
                android:textSize="12sp"
                android:layout_width="21dp"
                android:layout_height="21dp" />
        </FrameLayout>


        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical"
            android:layout_weight="1" >
            <RadioButton
                android:id="@+id/rbUserCenter"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:layout_gravity="center_horizontal"
                android:button="@null"
                android:textSize="@dimen/bottom_menu_text_size"
                android:textColor="@color/tab_text_color"
                android:drawableTop="@drawable/btn_tabbar_user_center_selector"
                android:text="@string/tab_user_center" />
            <Button
                android:visibility="gone"
                android:layout_gravity="top|right"
                android:layout_marginRight="10dp"
                android:layout_marginBottom="10dp"
                android:text="11"
                android:background="@null"
                android:textColor="@color/white"
                android:textSize="12sp"
                android:layout_width="21dp"
                android:layout_height="21dp" />
        </FrameLayout>
    </com.mmbao.saas.custom.MyRadioGroup>

</LinearLayout>
2、自定义的 MyRadioGroup:
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.CompoundButton;
import android.widget.LinearLayout;
import android.widget.RadioButton;

/**
 * Description:com.mmbao.saas.custom类
 * Created by Administrator on 2018/1/27.
 * Maxim:There is no smoke without fire
 */

public class MyRadioGroup extends LinearLayout {
    // holds the checked id; the selection is empty by default
    private int mCheckedId = -1;
    // tracks children radio buttons checked state
    private CompoundButton.OnCheckedChangeListener mChildOnCheckedChangeListener;
    // when true, mOnCheckedChangeListener discards events
    private boolean mProtectFromCheckedChange = false;
    private OnCheckedChangeListener mOnCheckedChangeListener;
    private PassThroughHierarchyChangeListener mPassThroughListener;
    public MyRadioGroup(Context context) {
        super(context);
        setOrientation(VERTICAL);
        init();
    }
    public MyRadioGroup(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    private void init() {
        mChildOnCheckedChangeListener = new CheckedStateTracker();
        mPassThroughListener = new PassThroughHierarchyChangeListener();
        super.setOnHierarchyChangeListener(mPassThroughListener);
    }
    @Override
    public void setOnHierarchyChangeListener(OnHierarchyChangeListener listener) {
        // the user listener is delegated to our pass-through listener
        mPassThroughListener.mOnHierarchyChangeListener = listener;
    }
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        // checks the appropriate radio button as requested in the XML file
        if (mCheckedId != -1) {
            mProtectFromCheckedChange = true;
            setCheckedStateForView(mCheckedId, true);
            mProtectFromCheckedChange = false;
            setCheckedId(mCheckedId);
        }
    }
    @Override
    public void addView(View child, int index, ViewGroup.LayoutParams params) {
        if (child instanceof RadioButton) {
            final RadioButton button = (RadioButton) child;
            if (button.isChecked()) {
                mProtectFromCheckedChange = true;
                if (mCheckedId != -1) {
                    setCheckedStateForView(mCheckedId, false);
                }
                mProtectFromCheckedChange = false;
                setCheckedId(button.getId());
            }
        } else if (child instanceof ViewGroup) {
            final RadioButton button = findRadioButton((ViewGroup) child);
            if (button.isChecked()) {
                mProtectFromCheckedChange = true;
                if (mCheckedId != -1) {
                    setCheckedStateForView(mCheckedId, false);
                }
                mProtectFromCheckedChange = false;
                setCheckedId(button.getId());
            }
        }
        super.addView(child, index, params);
    }
    /** 查找radioButton控件 */
    public RadioButton findRadioButton(ViewGroup group) {
        RadioButton resBtn = null;
        int len = group.getChildCount();
        for (int i = 0; i < len; i++) {
            if (group.getChildAt(i) instanceof RadioButton) {
                resBtn = (RadioButton) group.getChildAt(i);
            } else if (group.getChildAt(i) instanceof ViewGroup) {
                findRadioButton((ViewGroup) group.getChildAt(i));
            }
        }
        return resBtn;
    }
    /**
     * <p>
     * Sets the selection to the radio button whose identifier is passed in
     * parameter. Using -1 as the selection identifier clears the selection;
     * such an operation is equivalent to invoking {@link #clearCheck()}.
     * </p>
     *
     * @param id
     *            the unique id of the radio button to select in this group
     *
     * @see #getCheckedRadioButtonId()
     * @see #clearCheck()
     */
    public void check(int id) {
        // don't even bother
        if (id != -1 && (id == mCheckedId)) {
            return;
        }
        if (mCheckedId != -1) {
            setCheckedStateForView(mCheckedId, false);
        }
        if (id != -1) {
            setCheckedStateForView(id, true);
        }
        setCheckedId(id);
    }
    private void setCheckedId(int id) {
        mCheckedId = id;
        if (mOnCheckedChangeListener != null) {
            mOnCheckedChangeListener.onCheckedChanged(this, mCheckedId);
        }
    }
    private void setCheckedStateForView(int viewId, boolean checked) {
        View checkedView = findViewById(viewId);
        if (checkedView != null && checkedView instanceof RadioButton) {
            ((RadioButton) checkedView).setChecked(checked);
        }else if (checkedView != null && checkedView instanceof ViewGroup){
            ((RadioButton) checkedView).setChecked(checked);
        }
    }
    /**
     * <p>
     * Returns the identifier of the selected radio button in this group. Upon
     * empty selection, the returned value is -1.
     * </p>
     *
     * @return the unique id of the selected radio button in this group
     *
     * @see #check(int)
     * @see #clearCheck()
     */
    public int getCheckedRadioButtonId() {
        return mCheckedId;
    }
    /**
     * <p>
     * Clears the selection. When the selection is cleared, no radio button in
     * this group is selected and {@link #getCheckedRadioButtonId()} returns
     * null.
     * </p>
     *
     * @see #check(int)
     * @see #getCheckedRadioButtonId()
     */
    public void clearCheck() {
        check(-1);
    }
    /**
     * <p>
     * Register a callback to be invoked when the checked radio button changes
     * in this group.
     * </p>
     *
     * @param listener
     *            the callback to call on checked state change
     */
    public void setOnCheckedChangeListener(OnCheckedChangeListener listener) {
        mOnCheckedChangeListener = listener;
    }
    /**
     * {@inheritDoc}
     */
    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new MyRadioGroup.LayoutParams(getContext(), attrs);
    }
    /**
     * {@inheritDoc}
     */
    @Override
    protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
        return p instanceof MyRadioGroup.LayoutParams;
    }
    @Override
    protected LinearLayout.LayoutParams generateDefaultLayoutParams() {
        return new LayoutParams(LayoutParams.WRAP_CONTENT,
                LayoutParams.WRAP_CONTENT);
    }
    /**
     * <p>
     * This set of layout parameters defaults the width and the height of the
     * children to {@link #WRAP_CONTENT} when they are not specified in the XML
     * file. Otherwise, this class ussed the value read from the XML file.
     * </p>
     *
     * <p>
     * See {@link android.R.styleable#LinearLayout_Layout LinearLayout
     * Attributes} for a list of all child view attributes that this class
     * supports.
     * </p>
     *
     */
    public static class LayoutParams extends LinearLayout.LayoutParams {
        /**
         * {@inheritDoc}
         */
        public LayoutParams(Context c, AttributeSet attrs) {
            super(c, attrs);
        }
        /**
         * {@inheritDoc}
         */
        public LayoutParams(int w, int h) {
            super(w, h);
        }
        /**
         * {@inheritDoc}
         */
        public LayoutParams(int w, int h, float initWeight) {
            super(w, h, initWeight);
        }
        /**
         * {@inheritDoc}
         */
        public LayoutParams(ViewGroup.LayoutParams p) {
            super(p);
        }
        /**
         * {@inheritDoc}
         */
        public LayoutParams(MarginLayoutParams source) {
            super(source);
        }
        /**
         * <p>
         * Fixes the child's width to
         * {@link android.view.ViewGroup.LayoutParams#WRAP_CONTENT} and the
         * child's height to
         * {@link android.view.ViewGroup.LayoutParams#WRAP_CONTENT} when not
         * specified in the XML file.
         * </p>
         *
         * @param a
         *            the styled attributes set
         * @param widthAttr
         *            the width attribute to fetch
         * @param heightAttr
         *            the height attribute to fetch
         */
        @Override
        protected void setBaseAttributes(TypedArray a, int widthAttr,
                                         int heightAttr) {
            if (a.hasValue(widthAttr)) {
                width = a.getLayoutDimension(widthAttr, "layout_width");
            } else {
                width = WRAP_CONTENT;
            }
            if (a.hasValue(heightAttr)) {
                height = a.getLayoutDimension(heightAttr, "layout_height");
            } else {
                height = WRAP_CONTENT;
            }
        }
    }
    /**
     * <p>
     * Interface definition for a callback to be invoked when the checked radio
     * button changed in this group.
     * </p>
     */
    public interface OnCheckedChangeListener {
        /**
         * <p>
         * Called when the checked radio button has changed. When the selection
         * is cleared, checkedId is -1.
         * </p>
         *
         * @param group
         *            the group in which the checked radio button has changed
         * @param checkedId
         *            the unique identifier of the newly checked radio button
         */
        public void onCheckedChanged(MyRadioGroup group, int checkedId);
    }
    private class CheckedStateTracker implements
            CompoundButton.OnCheckedChangeListener {
        public void onCheckedChanged(CompoundButton buttonView,
                                     boolean isChecked) {
            // prevents from infinite recursion
            if (mProtectFromCheckedChange) {
                return;
            }
            mProtectFromCheckedChange = true;
            if (mCheckedId != -1) {
                setCheckedStateForView(mCheckedId, false);
            }
            mProtectFromCheckedChange = false;
            int id = buttonView.getId();
            setCheckedId(id);
        }
    }
    /**
     * <p>
     * A pass-through listener acts upon the events and dispatches them to
     * another listener. This allows the table layout to set its own internal
     * hierarchy change listener without preventing the user to setup his.
     * </p>
     */
    private class PassThroughHierarchyChangeListener implements
            ViewGroup.OnHierarchyChangeListener {
        private ViewGroup.OnHierarchyChangeListener mOnHierarchyChangeListener;
        public void onChildViewAdded(View parent, View child) {
            if (parent == MyRadioGroup.this && child instanceof RadioButton) {
                int id = child.getId();
                // generates an id if it's missing
                if (id == View.NO_ID) {
                    id = child.hashCode();
                    child.setId(id);
                }
                ((RadioButton) child)
                        .setOnCheckedChangeListener(mChildOnCheckedChangeListener);
            } else if (parent == MyRadioGroup.this
                    && child instanceof ViewGroup) {
                RadioButton btn = findRadioButton((ViewGroup) child);
                int id = btn.getId();
                // generates an id if it's missing
                if (id == View.NO_ID) {
                    id = btn.hashCode();
                    btn.setId(id);
                }
                btn.setOnCheckedChangeListener(mChildOnCheckedChangeListener);
            }
            if (mOnHierarchyChangeListener != null) {
                mOnHierarchyChangeListener.onChildViewAdded(parent, child);
            }
        }
        public void onChildViewRemoved(View parent, View child) {
            if (parent == MyRadioGroup.this && child instanceof RadioButton) {
                ((RadioButton) child).setOnCheckedChangeListener(null);
            } else if (parent == MyRadioGroup.this
                    && child instanceof ViewGroup) {
                findRadioButton((ViewGroup) child).setOnCheckedChangeListener(
                        null);
            }
            if (mOnHierarchyChangeListener != null) {
                mOnHierarchyChangeListener.onChildViewRemoved(parent, child);
            }
        }
    }
}
3、相信到这里 你已经在布局xml文件中看到效果了!
下面是我的资源整合文件:
style
<!--view horizontal line-->
    <style name="ViewHorizontalLine">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">1px</item>
        <item name="android:background">@color/line_bg</item>
    </style>

    <!--RadioButton bottom tab bar -->
    <style name="RaidoButtonStyle">
        <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:gravity">center_horizontal</item>
        <item name="android:drawablePadding">4dp</item>
        <item name="android:textSize">@dimen/bottom_menu_text_size</item>
        <item name="android:textColor">@color/tab_text_color</item>
    </style>

    <!--BadgeView bottom button -->
    <style name="BadgeViewButtonStyle">
        <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:background">@null</item>
        <item name="android:visibility">invisible</item>
    </style>
2、string
<resources>
    <string name="app_name">MY</string>

    <string name="tab_home">首页</string>
    <string name="tab_buy">求购</string>
    <string name="tab_category">分类</string>
    <string name="tab_cart">购物车</string>
    <string name="tab_user_center">个人中心</string>

</resources>
3、dimens
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>

    <dimen name="fab_margin_right">0dp</dimen>
    <dimen name="fab_margin_bottom">0dp</dimen>


    <dimen name="title_text_size">20sp</dimen>
    <dimen name="bottom_menu_text_size">12sp</dimen>
    <dimen name="list_live_name_size">13sp</dimen>
    <dimen name="list_live_title_size">13sp</dimen>
    <dimen name="list_live_more_size">12sp</dimen>
</resources>
4、colors
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="transparent">#00000000</color>

    <color name="line_bg">#CECECE</color>
    <color name="title_bg_color">#fafafa</color>
    <color name="tab_text_color_normal">#A7A7A7</color>
    <color name="tab_text_color_selected">#3d9cfc</color>

</resources>
5、drawable中的selector
btn_tabbar_buy_selector.xml (改变图片选中状态,其他按钮雷同)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:drawable="@drawable/btn_tabbar_buy_normal"/>
    <item android:state_checked="true" android:drawable="@drawable/btn_tabbar_buy_selected"/>
</selector>
6、res下的color文件
tab_text-color.xml(改变文字颜色)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:color="@color/tab_text_color_normal"/>
    <item android:state_checked="true" android:color="@color/tab_text_color_selected"/>
</selector>
附,资源文件命名截图一张:

这里写图片描述

第三:NestRadioGroup(RadioGroup修改了一个支持嵌套CompoundButton的控件)
自带的RadioGroup不支持嵌套RadioButton(从源码可看出仅仅是判断子控件是不是RadioButton),本文参考RadioGroup修改了一个支持嵌套CompoundButton的控件,非常实用。
1、自定义NestRadioGroup
/**
 * 支持嵌套CompoundButton的NestRadioGroup
 * 
 * @author 农民伯伯 http://www.cnblogs.com/over140/
 *
 */
public class NestRadioGroup extends LinearLayout {
    // holds the checked id; the selection is empty by default
    private int mCheckedId = -1;
    // tracks children radio buttons checked state
    private CompoundButton.OnCheckedChangeListener mChildOnCheckedChangeListener;
    // when true, mOnCheckedChangeListener discards events
    private boolean mProtectFromCheckedChange = false;
    private OnCheckedChangeListener mOnCheckedChangeListener;
    private PassThroughHierarchyChangeListener mPassThroughListener;

    /**
     * {@inheritDoc}
     */
    public NestRadioGroup(Context context) {
        super(context);
        init();
    }

    /**
     * {@inheritDoc}
     */
    public NestRadioGroup(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        mCheckedId = View.NO_ID;
        setOrientation(HORIZONTAL);
        mChildOnCheckedChangeListener = new CheckedStateTracker();
        mPassThroughListener = new PassThroughHierarchyChangeListener();
        super.setOnHierarchyChangeListener(mPassThroughListener);
    }

    /**
     * {@inheritDoc}
     */
    @Override
    public void setOnHierarchyChangeListener(OnHierarchyChangeListener listener) {
        // the user listener is delegated to our pass-through listener
        mPassThroughListener.mOnHierarchyChangeListener = listener;
    }

    /**
     * {@inheritDoc}
     */
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();

        // checks the appropriate radio button as requested in the XML file
        if (mCheckedId != View.NO_ID) {
            mProtectFromCheckedChange = true;
            setCheckedStateForView(mCheckedId, true);
            mProtectFromCheckedChange = false;
            setCheckedId(mCheckedId);
        }
    }

    /** 递归查找具有选中属性的子控件 */
    private static CompoundButton findCheckedView(View child) {
        if (child instanceof CompoundButton)
            return (CompoundButton) child;
        if (child instanceof ViewGroup) {
            ViewGroup group = (ViewGroup) child;
            for (int i = 0, j = group.getChildCount(); i < j; i++) {
                CompoundButton check = findCheckedView(group.getChildAt(i));
                if (check != null)
                    return check;
            }
        }
        return null;//没有找到
    }

    @Override
    public void addView(View child, int index, ViewGroup.LayoutParams params) {
        final CompoundButton view = findCheckedView(child);
        if (view != null) {
            if (view.isChecked()) {
                mProtectFromCheckedChange = true;
                if (mCheckedId != -1) {
                    setCheckedStateForView(mCheckedId, false);
                }
                mProtectFromCheckedChange = false;
                setCheckedId(view.getId());
            }
        }
        super.addView(child, index, params);
    }

    /**
     * <p>Sets the selection to the radio button whose identifier is passed in
     * parameter. Using -1 as the selection identifier clears the selection;
     * such an operation is equivalent to invoking {@link #clearCheck()}.</p>
     *
     * @param id the unique id of the radio button to select in this group
     *
     * @see #getCheckedRadioButtonId()
     * @see #clearCheck()
     */
    public void check(int id) {
        // don't even bother
        if (id != -1 && (id == mCheckedId)) {
            return;
        }

        if (mCheckedId != -1) {
            setCheckedStateForView(mCheckedId, false);
        }

        if (id != -1) {
            setCheckedStateForView(id, true);
        }

        setCheckedId(id);
    }

    private void setCheckedId(int id) {
        mCheckedId = id;
        if (mOnCheckedChangeListener != null) {
            mOnCheckedChangeListener.onCheckedChanged(this, mCheckedId);
        }
    }

    private void setCheckedStateForView(int viewId, boolean checked) {
        View checkedView = findViewById(viewId);
        if (checkedView != null && checkedView instanceof CompoundButton) {
            ((CompoundButton) checkedView).setChecked(checked);
        }
    }

    /**
     * <p>Returns the identifier of the selected radio button in this group.
     * Upon empty selection, the returned value is -1.</p>
     *
     * @return the unique id of the selected radio button in this group
     *
     * @see #check(int)
     * @see #clearCheck()
     *
     * @attr ref android.R.styleable#NestRadioGroup_checkedButton
     */
    public int getCheckedRadioButtonId() {
        return mCheckedId;
    }

    /**
     * <p>Clears the selection. When the selection is cleared, no radio button
     * in this group is selected and {@link #getCheckedRadioButtonId()} returns
     * null.</p>
     *
     * @see #check(int)
     * @see #getCheckedRadioButtonId()
     */
    public void clearCheck() {
        check(-1);
    }

    /**
     * <p>Register a callback to be invoked when the checked radio button
     * changes in this group.</p>
     *
     * @param listener the callback to call on checked state change
     */
    public void setOnCheckedChangeListener(OnCheckedChangeListener listener) {
        mOnCheckedChangeListener = listener;
    }

    /**
     * {@inheritDoc}
     */
    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new NestRadioGroup.LayoutParams(getContext(), attrs);
    }

    /**
     * {@inheritDoc}
     */
    @Override
    protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
        return p instanceof NestRadioGroup.LayoutParams;
    }

    @Override
    protected LinearLayout.LayoutParams generateDefaultLayoutParams() {
        return new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    }

    /**
     * <p>This set of layout parameters defaults the width and the height of
     * the children to {@link #WRAP_CONTENT} when they are not specified in the
     * XML file. Otherwise, this class ussed the value read from the XML file.</p>
     *
     * <p>See
     * {@link android.R.styleable#LinearLayout_Layout LinearLayout Attributes}
     * for a list of all child view attributes that this class supports.</p>
     *
     */
    public static class LayoutParams extends LinearLayout.LayoutParams {
        /**
         * {@inheritDoc}
         */
        public LayoutParams(Context c, AttributeSet attrs) {
            super(c, attrs);
        }

        /**
         * {@inheritDoc}
         */
        public LayoutParams(int w, int h) {
            super(w, h);
        }

        /**
         * {@inheritDoc}
         */
        public LayoutParams(int w, int h, float initWeight) {
            super(w, h, initWeight);
        }

        /**
         * {@inheritDoc}
         */
        public LayoutParams(ViewGroup.LayoutParams p) {
            super(p);
        }

        /**
         * {@inheritDoc}
         */
        public LayoutParams(MarginLayoutParams source) {
            super(source);
        }

        /**
         * <p>Fixes the child's width to
         * {@link android.view.ViewGroup.LayoutParams#WRAP_CONTENT} and the child's
         * height to  {@link android.view.ViewGroup.LayoutParams#WRAP_CONTENT}
         * when not specified in the XML file.</p>
         *
         * @param a the styled attributes set
         * @param widthAttr the width attribute to fetch
         * @param heightAttr the height attribute to fetch
         */
        @Override
        protected void setBaseAttributes(TypedArray a, int widthAttr, int heightAttr) {

            if (a.hasValue(widthAttr)) {
                width = a.getLayoutDimension(widthAttr, "layout_width");
            } else {
                width = WRAP_CONTENT;
            }

            if (a.hasValue(heightAttr)) {
                height = a.getLayoutDimension(heightAttr, "layout_height");
            } else {
                height = WRAP_CONTENT;
            }
        }
    }

    /**
     * <p>Interface definition for a callback to be invoked when the checked
     * radio button changed in this group.</p>
     */
    public interface OnCheckedChangeListener {
        /**
         * <p>Called when the checked radio button has changed. When the
         * selection is cleared, checkedId is -1.</p>
         *
         * @param group the group in which the checked radio button has changed
         * @param checkedId the unique identifier of the newly checked radio button
         */
        public void onCheckedChanged(NestRadioGroup group, int checkedId);
    }

    private class CheckedStateTracker implements CompoundButton.OnCheckedChangeListener {
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            // prevents from infinite recursion
            if (mProtectFromCheckedChange) {
                return;
            }

            mProtectFromCheckedChange = true;
            if (mCheckedId != -1) {
                setCheckedStateForView(mCheckedId, false);
            }
            mProtectFromCheckedChange = false;

            int id = buttonView.getId();
            setCheckedId(id);
        }
    }

    /**
     * <p>A pass-through listener acts upon the events and dispatches them
     * to another listener. This allows the table layout to set its own internal
     * hierarchy change listener without preventing the user to setup his.</p>
     */
    private class PassThroughHierarchyChangeListener implements ViewGroup.OnHierarchyChangeListener {
        private ViewGroup.OnHierarchyChangeListener mOnHierarchyChangeListener;

        /**
         * {@inheritDoc}
         */
        @TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1)
    public void onChildViewAdded(View parent, View child) {
            if (parent == NestRadioGroup.this) {
                CompoundButton view = findCheckedView(child);//查找子控件
                if (view != null) {
                    int id = view.getId();
                    // generates an id if it's missing
                    if (id == View.NO_ID && Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
                        id = View.generateViewId();
                        view.setId(id);
                    }
                    view.setOnCheckedChangeListener(mChildOnCheckedChangeListener);
                }
            }

            if (mOnHierarchyChangeListener != null) {
                mOnHierarchyChangeListener.onChildViewAdded(parent, child);
            }
        }

        /**
         * {@inheritDoc}
         */
        public void onChildViewRemoved(View parent, View child) {
            if (parent == NestRadioGroup.this) {
                CompoundButton view = findCheckedView(child);//查找子控件
                if (view != null) {
                    view.setOnCheckedChangeListener(null);
                }
            }

            if (mOnHierarchyChangeListener != null) {
                mOnHierarchyChangeListener.onChildViewRemoved(parent, child);
            }
        }
    }
复制代码
}  
2、导航栏的布局
<com.xxx.ui.view.NestRadioGroup
            android:id="@+id/main_radio"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal" >

            <RadioButton
                android:id="@+id/radio_button0"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1.0"
                android:checked="true"
                android:text="@string/bottom_feed" />

            <RadioButton
                android:id="@+id/radio_button1"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1.0"
                android:text="@string/bottom_square" />

            <RelativeLayout
                android:layout_width="0dip"
                android:layout_height="fill_parent"
                android:layout_weight="1.0"
                android:orientation="horizontal" >

                <RadioButton
                    android:id="@+id/radio_button2"
                    style="@style/title_tab_text_style"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:text="@string/bottom_message" />

                <ImageView
                    android:id="@+id/new_message_tips"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dip"
                    android:layout_toRightOf="@+id/radio_button2"
                    android:src="@drawable/news_tips_red" />
            </RelativeLayout>
        </com.xxx.ui.view.NestRadioGroup>
drawable中的资源文件news_tips_red.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/Red"/>
</shape>
注:new_message_tips可以是一个类似微信右上角的小红圈,用来提醒有新的消息(看不到效果就限制ImageView的宽高即可)。

剧终?

没有,因为发现RadioGroup+RadioButton的组件配合中还存在频繁切换点击会无响应的情况,暂时不知道原因,不知道志同道合的你发现没,知道原因的你欢迎留言!!!

这里写图片描述

您好,以下是一个自定义的右上角数字的RadioButton的代码示例,供您参考: ``` public class BadgeRadioButton extends RadioButton { // 数字的画笔 private Paint mBadgePaint; // 数字的颜色 private int mBadgeColor; // 数字的文本 private String mBadgeText; // 数字的文本颜色 private int mBadgeTextColor; // 数字的文本大小 private float mBadgeTextSize; // 数字的文本边距 private float mBadgePadding; // 数字的半径 private float mBadgeRadius; // 数字的X轴偏移量 private float mBadgeOffsetX; // 数字的Y轴偏移量 private float mBadgeOffsetY; public BadgeRadioButton(Context context) { super(context); init(context, null); } public BadgeRadioButton(Context context, AttributeSet attrs) { super(context, attrs); init(context, attrs); } public BadgeRadioButton(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context, attrs); } private void init(Context context, AttributeSet attrs) { mBadgePaint = new Paint(); mBadgePaint.setAntiAlias(true); mBadgeColor = Color.RED; mBadgeTextColor = Color.WHITE; mBadgeTextSize = sp2px(context, 10); mBadgePadding = dp2px(context, 2); mBadgeRadius = dp2px(context, 6); mBadgeOffsetX = dp2px(context, 16); mBadgeOffsetY = dp2px(context, 4); if (attrs != null) { TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.BadgeRadioButton); mBadgeColor = ta.getColor(R.styleable.BadgeRadioButton_badge_color, Color.RED); mBadgeTextColor = ta.getColor(R.styleable.BadgeRadioButton_badge_text_color, Color.WHITE); mBadgeTextSize = ta.getDimension(R.styleable.BadgeRadioButton_badge_text_size, sp2px(context, 10)); mBadgePadding = ta.getDimension(R.styleable.BadgeRadioButton_badge_padding, dp2px(context, 2)); mBadgeRadius = ta.getDimension(R.styleable.BadgeRadioButton_badge_radius, dp2px(context, 6)); mBadgeOffsetX = ta.getDimension(R.styleable.BadgeRadioButton_badge_offset_x, dp2px(context, 16)); mBadgeOffsetY = ta.getDimension(R.styleable.BadgeRadioButton_badge_offset_y, dp2px(context, 4)); mBadgeText = ta.getString(R.styleable.BadgeRadioButton_badge_text); ta.recycle(); } } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (mBadgeText != null && mBadgeText.length() > 0) { mBadgePaint.setColor(mBadgeColor); Rect rect = new Rect(); mBadgePaint.setTextSize(mBadgeTextSize); mBadgePaint.getTextBounds(mBadgeText, 0, mBadgeText.length(), rect); float textWidth = mBadgePaint.measureText(mBadgeText); float badgeWidth = textWidth + 2 * mBadgePadding; float badgeHeight = rect.height() + 2 * mBadgePadding; float x = getMeasuredWidth() / 2 + mBadgeOffsetX; float y = mBadgeOffsetY; canvas.drawRoundRect(x - badgeWidth / 2, y, x + badgeWidth / 2, y + badgeHeight, mBadgeRadius, mBadgeRadius, mBadgePaint); mBadgePaint.setColor(mBadgeTextColor); mBadgePaint.setTextAlign(Paint.Align.CENTER); canvas.drawText(mBadgeText, x, y + badgeHeight - mBadgePadding - rect.bottom, mBadgePaint); } } /** * 设置数字文本 */ public void setBadgeText(String text) { mBadgeText = text; invalidate(); } /** * 设置数字文本颜色 */ public void setBadgeTextColor(int color) { mBadgeTextColor = color; invalidate(); } /** * 设置数字文本大小 */ public void setBadgeTextSize(float size) { mBadgeTextSize = size; invalidate(); } /** * 设置数字文本边距 */ public void setBadgePadding(float padding) { mBadgePadding = padding; invalidate(); } /** * 设置数字半径 */ public void setBadgeRadius(float radius) { mBadgeRadius = radius; invalidate(); } /** * 设置数字X轴偏移量 */ public void setBadgeOffsetX(float offsetX) { mBadgeOffsetX = offsetX; invalidate(); } /** * 设置数字Y轴偏移量 */ public void setBadgeOffsetY(float offsetY) { mBadgeOffsetY = offsetY; invalidate(); } private float dp2px(Context context, float dp) { return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, context.getResources().getDisplayMetrics()); } private float sp2px(Context context, float sp) { return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp, context.getResources().getDisplayMetrics()); } } ``` 请注意,这个自定义的RadioButton包含了一些自定义属性,例如`badge_color`、`badge_text_color`、`badge_text_size`等,您可以在xml布局文件中进行设置。具体示例代码如下: ``` <com.example.BadgeRadioButton android:id="@+id/radio_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="RadioButton" app:badge_color="#FF0000" app:badge_text_color="#FFFFFF" app:badge_text_size="10sp" app:badge_padding="2dp" app:badge_radius="6dp" app:badge_offset_x="16dp" app:badge_offset_y="4dp"/> ``` 以上仅供参考,您可以根据自己的实际需要进行调整和修改。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值