[关闭]
@coder-pig 2015-08-29T13:23:11.000000Z 字数 7656 阅读 1973

Android基础入门教程——5.2.2 Fragment实例精讲——底部导航栏的实现(方法2)

Android基础入门教程


本节引言:

上一节中我们使用LinearLayout + TextView实现了底部导航栏的效果,每次点击我们都要重置
所有TextView的状态,然后选中点击的TextView,有点麻烦是吧,接下来我们用另一种方法:
RadioGroup + RadioButton来实现我们上一节的效果!


1.一些碎碎念

本节用到的是实现单选效果的RadioButton,如果你不熟悉,或者没用过,可先移步到:RadioButton
简单点说就是我们就是一个RadioGroup包着四个RadioButton,和前面一样用比例来划分:1:1:1:1;
另外我们只需重写RadioGroup的onCheckedChange,判断checkid即可知道点击的是哪个RadioButton!
好的,下面开始堆码!


2.实现流程

PS:这里的素材什么的,直接使用的是上一节中的素材!另外drawable类的资源都是将selected
状态修改成checked!


Step 1:写底部选项的一些资源文件

图片Drawable资源:tab_menu_channel.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3. <item android:drawable="@mipmap/tab_channel_pressed" android:state_checked="true" />
  4. <item android:drawable="@mipmap/tab_channel_normal" />
  5. </selector>

其他三个照葫芦画瓢!

文字资源:tab_menu_text.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3. <item android:color="@color/text_yellow" android:state_checked="true" />
  4. <item android:color="@color/text_gray" />
  5. </selector>

背景资源:tab_menu_bg.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3. <item android:state_selected="true">
  4. <shape>
  5. <solid android:color="#FFC4C4C4" />
  6. </shape>
  7. </item>
  8. <item>
  9. <shape>
  10. <solid android:color="@color/transparent" />
  11. </shape>
  12. </item>
  13. </selector>

Step 2:编写我们的Activity布局

在前面用TextView实现底部导航栏我们就发现了一个问题,每个TextView的属性都几乎是差不多
的,而在建议那里我们也说让大家把相同的属性抽取出来写到Style中,可能部分朋友懒或者不知道
如何抽取出来,以及用,这里就给大家示范下:

首先我们取出其中一个RadioGroup的标签:

  1. <RadioButton
  2. android:id="@+id/rb_channel"
  3. android:layout_width="0dp"
  4. android:layout_height="match_parent"
  5. android:layout_weight="1"
  6. android:background="@drawable/tab_menu_bg"
  7. android:button="@null"
  8. android:drawableTop="@drawable/tab_menu_channel"
  9. android:gravity="center"
  10. android:paddingTop="3dp"
  11. android:text="@string/tab_menu_alert"
  12. android:textColor="@drawable/tab_menu_text"
  13. android:textSize="18sp" />

我们可以把每个RadioButton都相同的属性抽取出来,写到style.xml文件中:

  1. <style name="tab_menu_item">
  2. <item name="android:layout_width">0dp</item>
  3. <item name="android:layout_weight">1</item>
  4. <item name="android:layout_height">match_parent</item>
  5. <item name="android:background">@drawable/tab_menu_bg</item>
  6. <item name="android:button">@null</item>
  7. <item name="android:gravity">center</item>
  8. <item name="android:paddingTop">3dp</item>
  9. <item name="android:textColor">@drawable/tab_menu_text</item>
  10. <item name="android:textSize">18sp</item>
  11. </style>

然后我们的activity_main.xml中的RadioButton就用不着次次都写相同的代码了,
只需让RadioButton的style="@style/tab_menu_item"就可以了!

activity_main.xml:

  1. <RelativeLayout 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="@color/bg_gray"
  6. tools:context=".MainActivity">
  7. <RelativeLayout
  8. android:id="@+id/ly_top_bar"
  9. android:layout_width="match_parent"
  10. android:layout_height="48dp"
  11. android:background="@color/bg_topbar">
  12. <TextView
  13. android:id="@+id/txt_topbar"
  14. android:layout_width="match_parent"
  15. android:layout_height="match_parent"
  16. android:layout_centerInParent="true"
  17. android:gravity="center"
  18. android:text="信息"
  19. android:textColor="@color/text_topbar"
  20. android:textSize="18sp" />
  21. <View
  22. android:layout_width="match_parent"
  23. android:layout_height="2px"
  24. android:layout_alignParentBottom="true"
  25. android:background="@color/div_white" />
  26. </RelativeLayout>
  27. <RadioGroup
  28. android:id="@+id/rg_tab_bar"
  29. android:layout_width="match_parent"
  30. android:layout_height="56dp"
  31. android:layout_alignParentBottom="true"
  32. android:background="@color/bg_white"
  33. android:orientation="horizontal">
  34. <RadioButton
  35. android:id="@+id/rb_channel"
  36. style="@style/tab_menu_item"
  37. android:drawableTop="@drawable/tab_menu_channel"
  38. android:text="@string/tab_menu_alert" />
  39. <RadioButton
  40. android:id="@+id/rb_message"
  41. style="@style/tab_menu_item"
  42. android:drawableTop="@drawable/tab_menu_message"
  43. android:text="@string/tab_menu_profile" />
  44. <RadioButton
  45. android:id="@+id/rb_better"
  46. style="@style/tab_menu_item"
  47. android:drawableTop="@drawable/tab_menu_better"
  48. android:text="@string/tab_menu_pay" />
  49. <RadioButton
  50. android:id="@+id/rb_setting"
  51. style="@style/tab_menu_item"
  52. android:drawableTop="@drawable/tab_menu_setting"
  53. android:text="@string/tab_menu_setting"/>
  54. </RadioGroup>
  55. <View
  56. android:id="@+id/div_tab_bar"
  57. android:layout_width="match_parent"
  58. android:layout_height="2px"
  59. android:layout_above="@id/rg_tab_bar"
  60. android:background="@color/div_white" />
  61. <FrameLayout
  62. android:id="@+id/ly_content"
  63. android:layout_width="match_parent"
  64. android:layout_height="match_parent"
  65. android:layout_above="@id/div_tab_bar"
  66. android:layout_below="@id/ly_top_bar"></FrameLayout>
  67. </RelativeLayout>

Step 3:隐藏顶部导航栏

AndroidManifest.xml设置下theme属性

  1. android:theme="@style/Theme.AppCompat.NoActionBar"

Step 4:创建一个Fragment的简单布局与类:

直接照搬上一节的布局跟Fragment:

fg_content.xml:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical" android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:background="@color/bg_white">
  6. <TextView
  7. android:id="@+id/txt_content"
  8. android:layout_width="match_parent"
  9. android:layout_height="match_parent"
  10. android:gravity="center"
  11. android:text="呵呵"
  12. android:textColor="@color/text_yellow"
  13. android:textSize="20sp"/>
  14. </LinearLayout>

MyFragment.java:

  1. /**
  2. * Created by Coder-pig on 2015/8/29 0028.
  3. */
  4. public class MyFragment extends Fragment {
  5. private String content;
  6. public MyFragment(String content) {
  7. this.content = content;
  8. }
  9. @Override
  10. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  11. View view = inflater.inflate(R.layout.fg_content,container,false);
  12. TextView txt_content = (TextView) view.findViewById(R.id.txt_content);
  13. txt_content.setText(content);
  14. return view;
  15. }
  16. }

Step 5:编写MainActivity.java

这个比起TextView实现简单多了,就不详细讲解了,很简单,直接上代码:

MainActivity.java

  1. /**
  2. * Created by Coder-pig on 2015/8/29 0028.
  3. */
  4. public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener{
  5. private RadioGroup rg_tab_bar;
  6. private RadioButton rb_channel;
  7. //Fragment Object
  8. private MyFragment fg1,fg2,fg3,fg4;
  9. private FragmentManager fManager;
  10. @Override
  11. protected void onCreate(Bundle savedInstanceState) {
  12. super.onCreate(savedInstanceState);
  13. setContentView(R.layout.activity_main);
  14. fManager = getFragmentManager();
  15. rg_tab_bar = (RadioGroup) findViewById(R.id.rg_tab_bar);
  16. rg_tab_bar.setOnCheckedChangeListener(this);
  17. //获取第一个单选按钮,并设置其为选中状态
  18. rb_channel = (RadioButton) findViewById(R.id.rb_channel);
  19. rb_channel.setChecked(true);
  20. }
  21. @Override
  22. public void onCheckedChanged(RadioGroup group, int checkedId) {
  23. FragmentTransaction fTransaction = fManager.beginTransaction();
  24. hideAllFragment(fTransaction);
  25. switch (checkedId){
  26. case R.id.rb_channel:
  27. if(fg1 == null){
  28. fg1 = new MyFragment("第一个Fragment");
  29. fTransaction.add(R.id.ly_content,fg1);
  30. }else{
  31. fTransaction.show(fg1);
  32. }
  33. break;
  34. case R.id.rb_message:
  35. if(fg2 == null){
  36. fg2 = new MyFragment("第二个Fragment");
  37. fTransaction.add(R.id.ly_content,fg2);
  38. }else{
  39. fTransaction.show(fg2);
  40. }
  41. break;
  42. case R.id.rb_better:
  43. if(fg3 == null){
  44. fg3 = new MyFragment("第三个Fragment");
  45. fTransaction.add(R.id.ly_content,fg3);
  46. }else{
  47. fTransaction.show(fg3);
  48. }
  49. break;
  50. case R.id.rb_setting:
  51. if(fg4 == null){
  52. fg4 = new MyFragment("第四个Fragment");
  53. fTransaction.add(R.id.ly_content,fg4);
  54. }else{
  55. fTransaction.show(fg4);
  56. }
  57. break;
  58. }
  59. fTransaction.commit();
  60. }
  61. //隐藏所有Fragment
  62. private void hideAllFragment(FragmentTransaction fragmentTransaction){
  63. if(fg1 != null)fragmentTransaction.hide(fg1);
  64. if(fg2 != null)fragmentTransaction.hide(fg2);
  65. if(fg3 != null)fragmentTransaction.hide(fg3);
  66. if(fg4 != null)fragmentTransaction.hide(fg4);
  67. }
  68. }

PS:在上一节忘记讲一点了,FragmentTransaction只能使用一次,每次使用都要调用FragmentManager
的beginTransaction()方法获得FragmentTransaction事务对象哦!


3.运行效果图

其实和上一节实现的效果是一样的:


4.代码下载:

FragmentDemo2.ziphttp://pan.baidu.com/s/1pJ5SbzX


5.本节小结:

本节讲解的是实现底部导航栏的第二种方法:RadioGroup + RadioButton,有了单选,我们
就不用像TextView一样,每次点击后先重置所有TextView的Selected状态,再让点击的TextView
的Selected为true,这样就可以写少一点代码了~本节就到这里~谢谢

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注