首页 > 代码库 > 仿QQ底部切换(Fragment + Radio)

仿QQ底部切换(Fragment + Radio)

 第一步: activity_main.xml  布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent" >   //activity_main.xml    <FrameLayout            android:id="@+id/frame_container"    //主内容的区域        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_above="@+id/div_view" >    </FrameLayout>    <View        android:id="@+id/div_view"        android:layout_width="fill_parent"        android:layout_height="1.0px"        android:layout_above="@+id/main_radiogroup"    //横线 在radiogroup的上面        android:layout_marginBottom="2dip"        android:background="#ffc9cacb" />    <RadioGroup        android:id="@+id/main_radiogroup"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true" //在父布局 的下面        android:orientation="horizontal" >        <RadioButton            android:id="@+id/tab_rbo_question"            style="@style/tab_textview"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"     //占 一              android:background="@null"            android:button="@null"            android:checked="true"     // 默认选中             android:drawableTop="@drawable/selector_tab_question"    //"问他" 图片的选择器             android:text="问他"            android:textColor="@color/tv_checked_bg" />        <RadioButton            android:id="@+id/tab_rbo_message"            style="@style/tab_textview"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@null"            android:button="@null"            android:drawableTop="@drawable/selector_tab_message"   // "消息" 图片选择器             android:gravity="center_horizontal"     //居中             android:text="消息" />        <RadioButton            android:id="@+id/tab_rbo_answer"            style="@style/tab_textview"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@null"            android:button="@null"            android:drawableTop="@drawable/selector_tab_answer"  //"我要回答"  图片选择器器              android:gravity="center_horizontal"            android:text="我要回答" />        <RadioButton            android:id="@+id/tab_rbo_discover"            style="@style/tab_textview"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@null"            android:button="@null"            android:drawableTop="@drawable/selector_tab_discover"    //"发现" 图片选择器              android:gravity="center_horizontal"            android:text="发现" />        <RadioButton            android:id="@+id/tab_rbo_user"            style="@style/tab_textview"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@null"            android:button="@null"            android:drawableTop="@drawable/selector_tab_user"   //"我" 图片选择器              android:gravity="center_horizontal"            android:text="我" />    </RadioGroup></RelativeLayout>

   drawable目录下 selector_tab_question.xml(" 问他"选择器)

<?xml version="1.0" encoding="utf-8"?> //selector_tab_question<selector xmlns:android="http://schemas.android.com/apk/res/android"    <item android:drawable="@drawable/tab_question_select" android:state_checked="true"></item>    <item android:drawable="@drawable/tab_question_select" android:state_pressed="true"></item>    <item android:drawable="@drawable/tab_question_nor"></item></selector>

     .... 其他几个选择器 也一样

 style.xml 下 name ="tab_textview"

    <style name="tab_textview">        <item name="android:textSize">11sp</item>        <item name="android:gravity">center_horizontal</item>        <item name="android:drawablePadding">2dip</item>    </style>

第二步 MainActivity.java

public class MainActivity extends FragmentActivity {    /** 底部导航 */    private RadioGroup main_radiogroup;    private Fragment mCurrent; // 当前的mCurrent    private TabFragment faxian; // 发现    private TabFragment huida; // 回答    private TabFragment denglu; // 登陆    private TabFragment xiaoxi; // 消息    private TabFragment wenta; // 问他    // private FragmentManager fm;    // private FragmentTransaction ft;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        main_radiogroup = (RadioGroup) this.findViewById(R.id.main_radiogroup);        // fm = getSupportFragmentManager();        // main_radiogroup 被选中 ,时候的监听器        main_radiogroup                .setOnCheckedChangeListener(new OnCheckedChangeListener() {                    @SuppressLint("ResourceAsColor")                    @Override                    public void onCheckedChanged(RadioGroup group, int checkedId) {                        /** 改变文字的颜色 */                        int length = group.getChildCount();                        for (int i = 0; i < length; i++) {                            RadioButton radioButton = (RadioButton) group                                    .getChildAt(i);                            if (radioButton.getId() != checkedId) {                                // 没有选中的 时候的文字颜色                                radioButton.setTextColor(getResources()                                        .getColor(R.color.tv_checked_nor));                            } else { // 选中的时候的文字颜色                                radioButton.setTextColor(getResources()                                        .getColor(R.color.tv_checked_bg));                            }                        }                        switch (checkedId) {                        case R.id.tab_rbo_answer:                            changeAnswer(); //切换回答                            break;                        case R.id.tab_rbo_discover:                            changeDiscover(); //切换问他                            break;                        case R.id.tab_rbo_message:                            changeMessage(); //消息                            break;                        case R.id.tab_rbo_question:                            changeQuesion();                            break;                        case R.id.tab_rbo_user:  //用户                            changeUser();                            break;                        }                    }                });
   mCurrent = new TabFragment(); //起始时候 给个值 ,不然会 报异常
/** 默认选择第一个 */ changeQuesion(); } /** * 切换问他 */ private void changeQuesion() { if (wenta == null) { wenta = new TabFragment(); Bundle bundle = new Bundle(); bundle.putString("name", "问他"); wenta.setArguments(bundle); } switchContent(wenta); // ft.replace(R.id.frame_container, tab1); // ft.commit(); } /** * 切换消息 */ private void changeMessage() { if (xiaoxi == null) { xiaoxi = new TabFragment(); Bundle bundle = new Bundle(); bundle.putString("name", "消息"); xiaoxi.setArguments(bundle); } switchContent(xiaoxi); // ft.replace(R.id.frame_container, tab1); // ft.commit(); } /*** * 切换登录 */ private void changeUser() { if (denglu == null) { denglu = new TabFragment(); Bundle bundle = new Bundle(); bundle.putString("name", "用户"); denglu.setArguments(bundle); } switchContent(denglu); // ft.replace(R.id.frame_container, tab1); // ft.commit(); } /*** * 切换回答 */ private void changeAnswer() { if (huida == null) { huida = new TabFragment(); Bundle bundle = new Bundle(); bundle.putString("name", "回答"); huida.setArguments(bundle); } switchContent(huida); // ft.replace(R.id.frame_container, tab1); // ft.commit(); } /*** * 切换发现 */ private void changeDiscover() { if (faxian == null) { faxian = new TabFragment(); Bundle bundle = new Bundle(); bundle.putString("name", "发现"); faxian.setArguments(bundle); } switchContent(faxian); // ft.replace(R.id.frame_container, tab1); // ft.commit(); } /** 修改显示的内容 不会重新加载 **/ public void switchContent(Fragment to) { if (mCurrent != to) { FragmentTransaction transaction = getSupportFragmentManager() .beginTransaction(); if (!to.isAdded()) { // 先判断是否被add过 transaction.hide(mCurrent).add(R.id.frame_container, to) .commit(); // 隐藏当前的fragment,add下一个到Activity中 } else { transaction.hide(mCurrent).show(to).commit(); // 隐藏当前的fragment,显示下一个 } mCurrent = to; } // showContent(); }}

  TabFragment.java

public class TabFragment extends Fragment {    private String tab_name;    @Override    public void onAttach(Activity activity) {        super.onAttach(activity);        //得到 activity 传来的 值        tab_name=getArguments().getString("name");            }        @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,            Bundle savedInstanceState) {        View view=inflater.inflate(R.layout.fragment_tab, container, false);        TextView tv=(TextView) view.findViewById(R.id.textview1);        tv.setText(tab_name);        return view;    }}

layout文件夹下 fragment_tab.xml

<?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="match_parent"    android:orientation="vertical" >  //fragment_tab        <TextView        android:id="@+id/textview1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:textSize="100sp"        android:layout_centerInParent="true"   // 居 父中间        /></RelativeLayout>

 运行后效果:

 

 

仿QQ底部切换(Fragment + Radio)