一、整体代码

HomePageFragment.zip

二、导航栏实现步骤

1.定义主布局页面，分成上下两部分，上部分为RadioButton单选按钮，下部分的页面为片段

image.png

2.创建一个布局文件为该页面存放的容器，才能将每个片段放进去。

image.png

3.定义一个片段的子类，继承该片段，放入容器和绑定容器对应的id，每个页面就可以通过继承片段的子类，可增加代码的复用性。

image.png

4.定义页面片段，绑定对应的布局，通过继承HomeFragment，就可以用HomeFragment的方法

image.png

5.写出每一个片段页面对应的内容布局

image.png

6.添加剩下的布局页面和对应的java文件，绑定对应的布局文件和填入对应的布局内容

image.png

7.在主java逻辑文件中实现点击切换，显示和隐藏

  1.    （1）初始化控件<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/1574587/1616228785213-71def64a-23ac-4599-a3e4-8ed3b0891eaf.png#align=left&display=inline&height=739&margin=%5Bobject%20Object%5D&name=image.png&originHeight=739&originWidth=678&size=84558&status=done&style=none&width=678)<br />       （2）添加事务，默认片段隐藏为true，将所有片段先隐藏<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/1574587/1616229035935-74764cc9-599c-4682-99df-69c6dde1c723.png#align=left&display=inline&height=199&margin=%5Bobject%20Object%5D&name=image.png&originHeight=199&originWidth=658&size=19614&status=done&style=none&width=658)<br />       （3）开启事务，若页面为空，将页面添加进去，则显示该页面，否则页面为空的话就隐藏<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/1574587/1616229190507-b9873348-7cf5-4f5b-9d81-e68538f0370c.png#align=left&display=inline&height=295&margin=%5Bobject%20Object%5D&name=image.png&originHeight=295&originWidth=596&size=24435&status=done&style=none&width=596)<br />       （4）进行点击时间的判断，当点击的时候，就为false，即为显示，判断页面如果为空，创建实例，将实例添加进去，隐藏该页面，如果不为空，则显示该页面。<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/1574587/1616229351179-ea2c0ee1-b2ee-4040-a301-a60b2763e7d2.png#align=left&display=inline&height=710&margin=%5Bobject%20Object%5D&name=image.png&originHeight=710&originWidth=717&size=66406&status=done&style=none&width=717)<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/1574587/1616229381353-628838c0-7292-4a49-bda1-d63356e40bd4.png#align=left&display=inline&height=648&margin=%5Bobject%20Object%5D&name=image.png&originHeight=648&originWidth=712&size=51782&status=done&style=none&width=712)

三、整体代码

1.activity_main.xml布局文件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     android:orientation="vertical"
  8.     tools:context=".MainActivity">
  9.     <RadioGroup
  10.         android:id="@+id/rg_home"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="40dp"
  13.         android:orientation="horizontal"
  14.         android:gravity="end">
  15.         <LinearLayout
  16.             android:layout_width="wrap_content"
  17.             android:layout_height="wrap_content"
  18.             android:orientation="vertical">
  19.         <TextView
  20.             android:layout_width="wrap_content"
  21.             android:layout_height="wrap_content"
  22.             android:text="光峰智慧党建"
  23.             android:textSize="16sp"/>
  24.             <TextView
  25.                 android:layout_width="wrap_content"
  26.                 android:layout_height="wrap_content"
  27.                 android:text="不忘初心 牢记使命"
  28.                 android:textSize="12sp"/>
  29.         </LinearLayout>
  30.         <RadioButton
  31.             android:id="@+id/rb_home"
  32.             android:layout_width="104dp"
  33.             android:layout_height="wrap_content"
  34.             android:text="首页"
  35.             android:textSize="12sp"
  36.             android:textColor="#d9000000"
  37.             android:button="@null"
  38.             android:gravity="center"/>
  39.         <RadioButton
  40.             android:id="@+id/rb_news"
  41.             android:layout_width="104dp"
  42.             android:layout_height="wrap_content"
  43.             android:text="时政要闻"
  44.             android:textSize="12sp"
  45.             android:textColor="#d9000000"
  46.             android:button="@null"
  47.             android:gravity="center"/>
  48.         <RadioButton
  49.             android:id="@+id/rb_book"
  50.             android:layout_width="104dp"
  51.             android:layout_height="wrap_content"
  52.             android:text="书记面对面"
  53.             android:textSize="12sp"
  54.             android:textColor="#d9000000"
  55.             android:button="@null"
  56.             android:gravity="center"/>
  57.         <RadioButton
  58.             android:id="@+id/rb_party"
  59.             android:layout_width="104dp"
  60.             android:layout_height="wrap_content"
  61.             android:text="党政专题"
  62.             android:textSize="12sp"
  63.             android:textColor="#d9000000"
  64.             android:button="@null"
  65.             android:gravity="center"/>
  66.         <RadioButton
  67.             android:id="@+id/rb_lesson"
  68.             android:layout_width="104dp"
  69.             android:layout_height="wrap_content"
  70.             android:text="三会一课"
  71.             android:textSize="12sp"
  72.             android:textColor="#d9000000"
  73.             android:button="@null"
  74.             android:gravity="center"/>
  75.         <RadioButton
  76.             android:id="@+id/rb_stack"
  77.             android:layout_width="104dp"
  78.             android:layout_height="wrap_content"
  79.             android:text="组工状态"
  80.             android:textSize="12sp"
  81.             android:textColor="#d9000000"
  82.             android:button="@null"
  83.             android:gravity="center"/>
  84.         <RadioButton
  85.             android:id="@+id/rb_will"
  86.             android:layout_width="104dp"
  87.             android:layout_height="wrap_content"
  88.             android:text="两学一做"
  89.             android:textSize="12sp"
  90.             android:textColor="#d9000000"
  91.             android:button="@null"
  92.             android:gravity="center"/>
  93.     </RadioGroup>
  94.     <FrameLayout
  95.         android:id="@+id/fra_home"
  96.         android:layout_width="match_parent"
  97.         android:layout_height="wrap_content"
  98.         android:layout_weight="1"/>
  99. </LinearLayout>

2.layout_home.xml布局文件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
  4.     android:layout_height="match_parent">
  5.     <FrameLayout
  6.         android:id="@+id/fl_home"
  7.         android:layout_width="match_parent"
  8.         android:layout_height="match_parent">
  9.     </FrameLayout>
  10. </LinearLayout>

3.HomeFragment文件代码

  1. package com.example.homepagefragment.home;
  2. import android.os.Bundle;
  3. import android.view.LayoutInflater;
  4. import android.view.View;
  5. import android.view.ViewGroup;
  6. import androidx.annotation.Nullable;
  7. import androidx.fragment.app.Fragment;
  8. import com.example.homepagefragment.R;
  9. public abstract class HomeFragment extends Fragment {
  10.     private View view;
  11.     @Nullable
  12.     @Override
  13.     public View onCreateView(@Nullable LayoutInflater inflater, 
  14.                              @Nullable ViewGroup container,@Nullable Bundle savedInstanceState){
  15.         view=inflater.inflate(R.layout.layout_home,container,false);
  16.         ((ViewGroup)view.findViewById(R.id.fl_home))
  17.                       .addView(getLayoutInflater().inflate(getLayoutId(),null));
  18.         return view;
  19.     }
  20.     protected abstract int getLayoutId();
  21. }

4.HomeFragmentOne片段文件代码

  1. package com.example.homepagefragment.fragment;
  2. import android.os.Bundle;
  3. import android.view.View;
  4. import androidx.annotation.Nullable;
  5. import com.example.homepagefragment.R;
  6. import com.example.homepagefragment.home.HomeFragment;
  7. public class HomeFragmentOne extends HomeFragment {
  8.     @Override
  9.     public void onCreate(Bundle savedInstanceState){
  10.         super.onCreate(savedInstanceState);
  11.     }
  12.     protected int getLayoutId(){
  13.         return R.layout.fra_home_one;
  14.     }
  15.     @Override
  16.     public void onViewCreated(@Nullable View view,@Nullable Bundle savedInstanceState){
  17.         super.onViewCreated(view,savedInstanceState);
  18.     }
  19. }

5.fra_home_one.xml片段布局文件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <FrameLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent">
  6.     <TextView
  7.         android:layout_width="match_parent"
  8.         android:layout_height="match_parent"
  9.         android:text="首页"
  10.         android:textSize="50dp"
  11.         android:gravity="center"
  12.         />
  13. </FrameLayout>

6.MainActivity主文件代码

  1. package com.example.homepagefragment;
  2. import androidx.appcompat.app.AppCompatActivity;
  3. import androidx.fragment.app.Fragment;
  4. import androidx.fragment.app.FragmentActivity;
  5. import androidx.fragment.app.FragmentManager;
  6. import androidx.fragment.app.FragmentTransaction;
  7. import android.content.Context;
  8. import android.os.Bundle;
  9. import android.widget.FrameLayout;
  10. import android.widget.RadioButton;
  11. import android.widget.RadioGroup;
  12. import com.example.homepagefragment.fragment.BookFragmentThree;
  13. import com.example.homepagefragment.fragment.HomeFragmentOne;
  14. import com.example.homepagefragment.fragment.LessonFragmentFive;
  15. import com.example.homepagefragment.fragment.NewsFragmentTwo;
  16. import com.example.homepagefragment.fragment.PartyFragmentFour;
  17. import com.example.homepagefragment.fragment.StackFragmentSix;
  18. import com.example.homepagefragment.fragment.WillFragmentSeven;
  19. import com.example.homepagefragment.home.HomeFragment;
  20. import java.util.ArrayList;
  21. import java.util.List;
  22. public class MainActivity extends FragmentActivity {
  23.      private FrameLayout fra_home;
  24.      private RadioGroup rg_home;
  25.      private RadioButton rb_home;
  26.      private RadioButton rb_news;
  27.      private RadioButton rb_book;
  28.      private RadioButton rb_party;
  29.     private RadioButton rb_lesson;
  30.     private RadioButton rb_stack;
  31.     private RadioButton rb_will;
  32.     private List<Fragment> list=new ArrayList<>();
  33.     private HomeFragmentOne homeFragmentOne;
  34.     private NewsFragmentTwo newsFragmentTwo;
  35.     private BookFragmentThree bookFragmentThree;
  36.     private PartyFragmentFour partyFragmentFour;
  37.     private LessonFragmentFive lessonFragmentFive;
  38.     private StackFragmentSix stackFragmentSix;
  39.     private WillFragmentSeven willFragmentSeven;
  40.     private FragmentManager fragmentManager;
  41.     private FragmentTransaction fragmentTransaction;
  42.     @Override
  43.     protected void onCreate(Bundle savedInstanceState) {
  44.         super.onCreate(savedInstanceState);
  45.         setContentView(R.layout.activity_main);
  46.         fra_home=findViewById(R.id.fra_home);
  47.         rg_home=findViewById(R.id.rg_home);
  48.         rb_home=findViewById(R.id.rb_home);
  49.         rb_news=findViewById(R.id.rb_news);
  50.         rb_book=findViewById(R.id.rb_book);
  51.         rb_party=findViewById(R.id.rb_party);
  52.         rb_lesson=findViewById(R.id.rb_lesson);
  53.         rb_stack=findViewById(R.id.rb_stack);
  54.         rb_will=findViewById(R.id.rb_will);
  55.         initView();
  56.     }
  57.     private void initView(){
  58.         fragmentManager=getSupportFragmentManager();
  59.         fragmentTransaction=fragmentManager.beginTransaction();
  60.         rg_home.check(R.id.rb_home);
  61.         homeFragmentOne= new HomeFragmentOne();
  62.         list.add(homeFragmentOne);
  63.         hideOthersFragment(homeFragmentOne,true);
  64.         rg_home.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
  65.             @Override
  66.             public void onCheckedChanged(RadioGroup group, int checkedId) {
  67.                 switch (checkedId){
  68.                     case R.id.rb_home:
  69.                       hideOthersFragment(homeFragmentOne,false);
  70.                       break;
  71.                     case R.id.rb_news:
  72.                         if (newsFragmentTwo==null){
  73.                             newsFragmentTwo=new NewsFragmentTwo();
  74.                             list.add(newsFragmentTwo);
  75.                             hideOthersFragment(newsFragmentTwo,true);
  76.                         }else{
  77.                             hideOthersFragment(newsFragmentTwo,false);
  78.                         }
  79.                         break;
  80.                     case R.id.rb_book:
  81.                         if (bookFragmentThree==null){
  82.                             bookFragmentThree=new BookFragmentThree();
  83.                             list.add(bookFragmentThree);
  84.                             hideOthersFragment(bookFragmentThree,true);
  85.                         }else{
  86.                             hideOthersFragment(bookFragmentThree,false);
  87.                         }
  88.                         break;
  89.                     case R.id.rb_party:
  90.                         if (partyFragmentFour==null){
  91.                             partyFragmentFour=new PartyFragmentFour();
  92.                             list.add(partyFragmentFour);
  93.                             hideOthersFragment(partyFragmentFour,true);
  94.                         }else{
  95.                             hideOthersFragment(partyFragmentFour,false);
  96.                         }
  97.                         break;
  98.                     case R.id.rb_lesson:
  99.                         if (lessonFragmentFive==null){
  100.                             lessonFragmentFive=new LessonFragmentFive();
  101.                             list.add(lessonFragmentFive);
  102.                             hideOthersFragment(lessonFragmentFive,true);
  103.                         }else{
  104.                             hideOthersFragment(lessonFragmentFive,false);
  105.                         }
  106.                         break;
  107.                     case R.id.rb_stack:
  108.                         if (stackFragmentSix==null){
  109.                             stackFragmentSix=new StackFragmentSix();
  110.                             list.add(stackFragmentSix);
  111.                             hideOthersFragment(stackFragmentSix,true);
  112.                         }else{
  113.                             hideOthersFragment(stackFragmentSix,false);
  114.                         }
  115.                         break;
  116.                     case R.id.rb_will:
  117.                         if (willFragmentSeven==null){
  118.                             willFragmentSeven=new WillFragmentSeven();
  119.                             list.add(willFragmentSeven);
  120.                             hideOthersFragment(willFragmentSeven,true);
  121.                         }else{
  122.                             hideOthersFragment(willFragmentSeven,false);
  123.                         }
  124.                         break;
  125.                 }
  126.             }
  127.         });
  128.     }
  129.     public void hideOthersFragment(Fragment showFragment,boolean add){
  130.         fragmentTransaction=fragmentManager.beginTransaction();
  131.         if (add){
  132.             fragmentTransaction.add(R.id.fra_home,showFragment);
  133.         }
  134.         for (Fragment fragment:list){
  135.             if (showFragment.equals(fragment)){
  136.                 fragmentTransaction.show(fragment);
  137.             }else{
  138.                 fragmentTransaction.hide(fragment);
  139.             }
  140.         }
  141.         fragmentTransaction.commit();
  142.     }
  143. }

7.设计图：
image.png
8.结果图：
image.png