码迷，mamicode.com
首页 > 其他好文 > 详细

用Fragment实现如新浪微博一样的底部菜单的切换

时间：2015-03-10 13:35:33      阅读：239      评论：0      收藏：0      [点我收藏+]

标签：

像我这个有强迫症的人来说，自从TabActivity抛弃之后，再使用看到一个个警告和一条条划着的横线，心里很不舒服，现在终于下定决心用Fragment来替换掉TabActivity了！我的研究成果如下：

技术分享

首先是MainActivity，它需要继承FragmentActivity(这里是指：版本是3.0之前的继承FragmentActivity，3.0版本之后的继承Activity就可以)，对于FragmentActivity的声明周期我就不过多介绍了，和Activity差不了多少，自己也能弄明白！下边是MainActivity的代码：

 

[java] view plaincopy
 
  1. package net.loonggg.fragment;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.support.v4.app.FragmentActivity;  
  6. import android.support.v4.app.FragmentManager;  
  7. import android.support.v4.app.FragmentTransaction;  
  8. import android.view.Window;  
  9. import android.widget.RadioButton;  
  10. import android.widget.RadioGroup;  
  11. import android.widget.RadioGroup.OnCheckedChangeListener;  
  12.   
  13. public class MainActivity extends FragmentActivity {  
  14.     private Fragment[] mFragments;  
  15.     private RadioGroup bottomRg;  
  16.     private FragmentManager fragmentManager;  
  17.     private FragmentTransaction fragmentTransaction;  
  18.     private RadioButton rbOne, rbTwo, rbThree, rbFour;  
  19.   
  20.     @Override  
  21.     protected void onCreate(Bundle savedInstanceState) {  
  22.         super.onCreate(savedInstanceState);  
  23.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  24.         setContentView(R.layout.activity_main);  
  25.         mFragments = new Fragment[3];  
  26.         fragmentManager = getSupportFragmentManager();  
  27.         mFragments[0] = fragmentManager.findFragmentById(R.id.fragement_main);  
  28.         mFragments[1] = fragmentManager.findFragmentById(R.id.fragement_search);  
  29.         mFragments[2] = fragmentManager  
  30.                 .findFragmentById(R.id.fragement_setting);  
  31.         fragmentTransaction = fragmentManager.beginTransaction()  
  32.                 .hide(mFragments[0]).hide(mFragments[1]).hide(mFragments[2]);  
  33.         fragmentTransaction.show(mFragments[0]).commit();  
  34.         setFragmentIndicator();  
  35.     }  
  36.   
  37.     private void setFragmentIndicator() {  
  38.   
  39.         bottomRg = (RadioGroup) findViewById(R.id.bottomRg);  
  40.         rbOne = (RadioButton) findViewById(R.id.rbOne);  
  41.         rbTwo = (RadioButton) findViewById(R.id.rbTwo);  
  42.         rbThree = (RadioButton) findViewById(R.id.rbThree);  
  43.   
  44.         bottomRg.setOnCheckedChangeListener(new OnCheckedChangeListener() {  
  45.   
  46.             @Override  
  47.             public void onCheckedChanged(RadioGroup group, int checkedId) {  
  48.                 fragmentTransaction = fragmentManager.beginTransaction()  
  49.                         .hide(mFragments[0]).hide(mFragments[1])  
  50.                         .hide(mFragments[2]);  
  51.                 switch (checkedId) {  
  52.                 case R.id.rbOne:  
  53.                     fragmentTransaction.show(mFragments[0]).commit();  
  54.                     break;  
  55.   
  56.                 case R.id.rbTwo:  
  57.                     fragmentTransaction.show(mFragments[1]).commit();  
  58.                     break;  
  59.   
  60.                 case R.id.rbThree:  
  61.                     fragmentTransaction.show(mFragments[2]).commit();  
  62.                     break;  
  63.   
  64.                 default:  
  65.                     break;  
  66.                 }  
  67.             }  
  68.         });  
  69.     }  
  70.   
  71. }  

下边对应的是MainActivity的布局文件activity_main.xml：

 

 

[html] view plaincopy
 
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:background="@drawable/activity_bg"  
  6.     android:orientation="vertical" >  
  7.   
  8.     <!-- 上边主页面 -->  
  9.   
  10.     <fragment  
  11.         android:id="@+id/fragement_main"  
  12.         android:name="net.loonggg.fragment.FragmentMain"  
  13.         android:layout_width="fill_parent"  
  14.         android:layout_height="fill_parent"  
  15.         android:layout_weight="10" />  
  16.   
  17.     <fragment  
  18.         android:id="@+id/fragement_search"  
  19.         android:name="net.loonggg.fragment.FragmentSearch"  
  20.         android:layout_width="fill_parent"  
  21.         android:layout_height="fill_parent"  
  22.         android:layout_weight="10" />  
  23.   
  24.     <fragment  
  25.         android:id="@+id/fragement_setting"  
  26.         android:name="net.loonggg.fragment.FragmentSetting"  
  27.         android:layout_width="fill_parent"  
  28.         android:layout_height="fill_parent"  
  29.         android:layout_weight="10" />  
  30.   
  31.     <!-- 底部菜单页面 -->  
  32.   
  33.     <RadioGroup  
  34.         android:id="@+id/bottomRg"  
  35.         android:layout_width="fill_parent"  
  36.         android:layout_height="wrap_content"  
  37.         android:layout_weight="0.5"  
  38.         android:background="@drawable/tab_footer_bg"  
  39.         android:orientation="horizontal" >  
  40.   
  41.         <RadioButton  
  42.             android:id="@+id/rbOne"  
  43.             style="@style/rg_btn_style"  
  44.             android:checked="true"  
  45.             android:drawableTop="@drawable/rb_one_btn_selector"  
  46.             android:text="首页" />  
  47.   
  48.         <RadioButton  
  49.             android:id="@+id/rbTwo"  
  50.             style="@style/rg_btn_style"  
  51.             android:drawableTop="@drawable/rb_two_btn_selector"  
  52.             android:text="搜索" />  
  53.   
  54.         <RadioButton  
  55.             android:id="@+id/rbThree"  
  56.             style="@style/rg_btn_style"  
  57.             android:drawableTop="@drawable/rb_three_btn_selector"  
  58.             android:text="设置" />  
  59.     </RadioGroup>  
  60.   
  61. </LinearLayout>  

这里为了大家方便，展示一下项目的布局图：

 

技术分享

再下边是要设计的首页界面，它是继承的Fragment，具体看代码：

 

[java] view plaincopy
 
  1. package net.loonggg.fragment;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.view.ViewGroup;  
  8. import android.widget.TextView;  
  9.   
  10. public class FragmentMain extends Fragment {  
  11.     private TextView tv;  
  12.   
  13.     @Override  
  14.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  15.             Bundle savedInstanceState) {  
  16.         return inflater.inflate(R.layout.fragment_main, container, false);  
  17.     }  
  18.   
  19.     @Override  
  20.     public void onActivityCreated(Bundle savedInstanceState) {  
  21.         super.onActivityCreated(savedInstanceState);  
  22.         tv = (TextView) getView().findViewById(R.id.titleTv);  
  23.         tv.setText("首页");  
  24.     }  
  25. }  

接着是对应的布局文件代码fragment_main.xml：

 

 

[html] view plaincopy
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <include  
  8.         android:id="@+id/one_title"  
  9.         layout="@layout/title_bar" />  
  10.   
  11.     <TextView  
  12.         android:layout_width="fill_parent"  
  13.         android:layout_height="fill_parent"  
  14.         android:gravity="center"  
  15.         android:text="这是首页"  
  16.         android:textColor="#000000" />  
  17.   
  18. </LinearLayout>  

再接着是：搜索界面的代码：

 

 

[java] view plaincopy
 
  1. package net.loonggg.fragment;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.view.ViewGroup;  
  8. import android.widget.TextView;  
  9.   
  10. public class FragmentSearch extends Fragment {  
  11.     private TextView tv;  
  12.   
  13.     @Override  
  14.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  15.             Bundle savedInstanceState) {  
  16.         return inflater.inflate(R.layout.fragment_search, container, false);  
  17.     }  
  18.   
  19.     @Override  
  20.     public void onActivityCreated(Bundle savedInstanceState) {  
  21.         super.onActivityCreated(savedInstanceState);  
  22.         tv = (TextView) getView().findViewById(R.id.titleTv);  
  23.         tv.setText("搜索");  
  24.   
  25.     }  
  26.   
  27.     @Override  
  28.     public void onPause() {  
  29.         super.onPause();  
  30.     }  
  31.   
  32. }  

如上是对应的布局文件的代码fragment_search.xml：

 

 

[html] view plaincopy
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="wrap_content"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <include layout="@layout/title_bar" />  
  8.   
  9.     <TextView  
  10.         android:layout_width="fill_parent"  
  11.         android:layout_height="fill_parent"  
  12.         android:gravity="center"  
  13.         android:text="这是搜索界面"  
  14.         android:textColor="#000000" />  
  15.   
  16. </LinearLayout>  

紧跟着是：设置界面的代码：

 

 

[java] view plaincopy
 
  1. package net.loonggg.fragment;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.view.ViewGroup;  
  8. import android.widget.TextView;  
  9.   
  10. public class FragmentSetting extends Fragment {  
  11.     private TextView tv;  
  12.   
  13.     @Override  
  14.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  15.             Bundle savedInstanceState) {  
  16.         return inflater.inflate(R.layout.fragment_setting, container, false);  
  17.     }  
  18.   
  19.     @Override  
  20.     public void onActivityCreated(Bundle savedInstanceState) {  
  21.         super.onActivityCreated(savedInstanceState);  
  22.         tv = (TextView) getView().findViewById(R.id.titleTv);  
  23.         tv.setText("设置");  
  24.     }  
  25. }  

当然一样，下边对应的是设置界面的布局文件代码fragment_setting.xml：

 

 

[html] view plaincopy
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="wrap_content"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <include layout="@layout/title_bar" />  
  8.   
  9.     <TextView  
  10.         android:layout_width="fill_parent"  
  11.         android:layout_height="fill_parent"  
  12.         android:gravity="center"  
  13.         android:text="这是设置页面"  
  14.         android:textColor="#000000" />  
  15.   
  16. </LinearLayout>  

最后是我用的title_bar.xml文件，这个文件是嵌入到各个界面中的那个顶部的标题的布局文件，代码如下：

 

[html] view plaincopy
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="wrap_content"  
  5.     android:background="@drawable/title_bg"  
  6.     android:gravity="center"  
  7.     android:orientation="vertical" >  
  8.   
  9.     <TextView  
  10.         android:id="@+id/titleTv"  
  11.         android:layout_width="wrap_content"  
  12.         android:layout_height="wrap_content"  
  13.         android:layout_gravity="center"  
  14.         android:gravity="center"  
  15.         android:textColor="#ffffff"  
  16.         android:textSize="20sp" />  
  17.   
  18. </LinearLayout>  
到这里就基本完成了！！！你会了吗?

 

 

用Fragment实现如新浪微博一样的底部菜单的切换

标签：

原文地址：http://www.cnblogs.com/xgjblog/p/4325617.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！