仿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>
运行后效果: