Fragment+自定义RadioButton实现底部导航栏，仿QQ

• fragment碎片使用
• 自定义radiobutton控制drawabletop图片大小
• 仿QQ底部导航栏
• 简单实用项目框架

效果图

项目DEMO地址：http://download.youkuaiyun.com/detail/wxk105/9564458

MainActivity

public class MainActivity extends FragmentActivity implements RadioGroup.OnCheckedChangeListener {
    private FragmentManager fm;//frgment管理器
    private RadioGroup rg_bt;//radiobutton编组
    private RadioButton rb_mess, rb_contract, rb_dota;
    private MessFrg messFrg;//消息frg
    private ContractFrg contractFrg;//联系人frg
    private DotFrg dotFrg;//动态frg

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();//初始化控件
        initData();//数据填充
    }

    /**
    *数据填充
    **/
    private void initData() {
        fm= getSupportFragmentManager();
        FragmentTransaction fragmentTransaction = fm.beginTransaction();
        defaultChildShow(fragmentTransaction);//默认展示页
        rb_mess.setChecked(true);
    }

    /**
    *初始化控件
    **/
    private void initView() {
        rg_bt = (RadioGroup) findViewById(R.id.rg_bt);
        rb_mess = (RadioButton) findViewById(R.id.rb_mess);
        rb_contract = (RadioButton) findViewById(R.id.rb_contract);
        rb_dota = (RadioButton) findViewById(R.id.rb_dota);
        rg_bt.setOnCheckedChangeListener(this);
    }


    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        FragmentTransaction fragmentTransaction = fm.beginTransaction();
        hideChildFragment(fragmentTransaction);//隐藏所有的frgment
        switch (rg_bt.getCheckedRadioButtonId()) {
            case R.id.rb_mess://点击显示消息frg,先判断是否为空，否直接展示
                if (messFrg == null) {
                    messFrg = new MessFrg();
                    fragmentTransaction.add(R.id.fl_main, messFrg);
                } else {
                    fragmentTransaction.show(messFrg);
                }
                break;
            case R.id.rb_contract://点击显示联系人frg
                if (contractFrg == null) {
                    contractFrg = new ContractFrg();
                    fragmentTransaction.add(R.id.fl_main, contractFrg);
                } else {
                    fragmentTransaction.show(contractFrg);
                }
                break;
            case R.id.rb_dota://点击显示动态界面
                if (dotFrg == null) {
                    dotFrg = new DotFrg();
                    fragmentTransaction.add(R.id.fl_main, dotFrg);
                } else {
                    fragmentTransaction.show(dotFrg);
                }
                break;
        }
        fragmentTransaction.commit();
    }
    /***
     * childFragmet默认加载页面
     *
     * @param fragmentTransaction
     */
    private void defaultChildShow(FragmentTransaction fragmentTransaction) {
        hideChildFragment(fragmentTransaction);
        if (messFrg == null) {
            messFrg = new MessFrg();
            fragmentTransaction.add(R.id.fl_main, messFrg);
        } else {
            fragmentTransaction.show(messFrg);
        }
        fragmentTransaction.commit();
    }

/**
*隐藏所有frg
**/
    private void hideChildFragment(FragmentTransaction fragmentTransaction) {
        if (messFrg != null) {
            fragmentTransaction.hide(messFrg);
        }
        if (dotFrg != null) {
            fragmentTransaction.hide(dotFrg);
        }
        if (contractFrg!=null){
            fragmentTransaction.hide(contractFrg);
        }
    }
}

---

MyRadioButton
自定义radiobutton主要是为了可以控制drawabletop图片大小，
原生的是无法控制的，直接引用即可

/**
 * 自定义radiobutton控制drawabletop图片大小
 * Created by xiaoke on 2016/4/29.
 */
public class MyRadioButton extends RadioButton {
    private int mDrawableSize;
    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 defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // TODO Auto-generated constructor stub
        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);
            Log.i("MyRadioButton", "attr:" + attr);
            switch (attr) {
                case R.styleable.MyRadioButton_myDrawableSize:
                    mDrawableSize = a.getDimensionPixelSize(R.styleable.MyRadioButton_myDrawableSize, 58);
                    Log.i("MyRadioButton", "mDrawableSize:" + mDrawableSize);
                    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);


    }

    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);
    }

}

mainactivity布局

注意观察myradiobutton相关属性。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.xiaoke.fragmentdemo.MainActivity">

    <FrameLayout
        android:id="@+id/fl_main"
        android:layout_marginBottom="50dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <RadioGroup
        android:id="@+id/rg_bt"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="50dp">
        <com.example.xiaoke.fragmentdemo.MyRadioButton
            android:id="@+id/rb_mess"
            style="@style/bottom_radio"
            android:gravity="center"
            android:layout_height="match_parent"
            app:drawableTop="@drawable/mess_radio"
            app:myDrawableSize="20dp"
            android:text="消息"
            android:textColor="@drawable/bottom_color_change_text"/>
        <com.example.xiaoke.fragmentdemo.MyRadioButton
            android:id="@+id/rb_contract"
            style="@style/bottom_radio"
            android:gravity="center"
            android:layout_height="match_parent"
            app:myDrawableSize="20dp"
            app:drawableTop="@drawable/contract_radio"
            android:text="联系人" />
        <com.example.xiaoke.fragmentdemo.MyRadioButton
            android:id="@+id/rb_dota"
            style="@style/bottom_radio"
            android:gravity="center"
            android:layout_height="match_parent"
            app:myDrawableSize="20dp"
            app:drawableTop="@drawable/dota_radio"
            android:text="动态"/>
    </RadioGroup>
</RelativeLayout>

三个fragment布局都是textview,这里只写一个，其他两个就不贴代码了

/**
 * Created by xiaoke on 2016/6/30.
 */
public class MessFrg extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View inflate = inflater.inflate(R.layout.mess_layout, null);
        return inflate;

    }
}