码迷,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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!