Android 中使用RadioGroup+Fragment实现底部导航栏的功能

先看效果图
Android 中使用RadioGroup+Fragment实现底部导航栏的功能
步骤一:
完成对主界面main.xml的创建:

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context=".MainActivity">      <FrameLayout         android:id="@+id/fragment_layout"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:layout_alignParentTop="true"         />      <RadioGroup         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:id="@+id/rg_group"         android:layout_alignParentBottom="true"         android:orientation="horizontal"         >         <RadioButton             android:id="@+id/rb_home"             android:layout_width="0dp"             android:layout_height="match_parent"             android:layout_weight="1"             android:button="@null"             style="@style/fragment"             android:drawableTop="@drawable/rb_home_selector"             android:text="首页"             />         <RadioButton             android:id="@+id/rb_discover"             android:layout_width="0dp"             android:layout_height="match_parent"             android:layout_weight="1"             android:button="@null"             style="@style/fragment"             android:drawableTop="@drawable/rb_discover_selector"             android:text="热卖"             />         <RadioButton             android:id="@+id/rb_cart"             android:layout_width="0dp"             android:layout_height="match_parent"             android:layout_weight="1"             android:button="@null"             style="@style/fragment"             android:drawableTop="@drawable/rb_cart_selector"             android:text="购物车"             />         <RadioButton             android:id="@+id/rb_user"             android:layout_width="0dp"             android:layout_height="match_parent"             android:layout_weight="1"             android:button="@null"             style="@style/fragment"             android:drawableTop="@drawable/rb_user_selector"             android:text="我的"             />     </RadioGroup> </RelativeLayout> 

radioButton中重复使用的样式:被抽取出来在style中写出

<style name="fragment">         <item name="android:layout_width">match_parent</item>         <item name="android:layout_height">match_parent</item>         <item name="android:padding">5dp</item>         <item name="android:gravity">center</item>         <item name="android:textColor">@drawable/rb_text_color</item>         <item name="android:textSize">16sp</item>         <item name="android:textStyle">normal</item>     </style> 

点击RadioButton之后,导航栏文字颜色发生改变,声明在drawable中
名字为:rb_text_color代码如下:

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">     <item android:state_selected="true" android:color="#FF0000"/>     <item android:color="#808080"/> </selector> 

导航栏图标发生变化这里只写其中一个其他三个都基本一样:

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">     <item android:drawable="@drawable/icon_cartfill_press" android:state_selected="true" />     <item android:drawable="@drawable/icon_cart" /> </selector> 

完成这些基本步骤之后,接下来就需要写Fragment的布局

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:gravity="center">      <TextView         android:id="@+id/tv_cart"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="购物车"         android:textSize="30sp" /> </LinearLayout> 

写出其中一个另外三个类似。

之后后台代码中创建Fragment,这里也写其中一个:CartFragment

package com.example.fragmentdemo;  import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView;  import androidx.annotation.NonNull; import androidx.annotation.Nullable; import androidx.fragment.app.Fragment;  public class CartFragment extends Fragment {     private View view;     private TextView tv_home;      @Nullable     @Override     public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {         if (view==null){             view = inflater.inflate(R.layout.cart_fragment,container,false);         }         return view;     } } 

步骤二:在MainActivity中,完成对fragment的切换功能
具体注释已在代码中给出。

package com.example.fragmentdemo;  import androidx.appcompat.app.AppCompatActivity; import androidx.fragment.app.Fragment; import androidx.fragment.app.FragmentManager; import androidx.fragment.app.FragmentTransaction;  import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.RadioButton; import android.widget.RadioGroup;  import java.time.LocalDate; import java.util.ArrayList; import java.util.List;  public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {      private RadioButton rb_home,rb_discover,rb_cart,rb_user;     private RadioGroup rg_group;     private List<Fragment> fragments;     private int position=0;     private static final String TAG = "MainActivity";      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);          rb_home=findViewById(R.id.rb_home);         rb_discover=findViewById(R.id.rb_discover);         rb_cart=findViewById(R.id.rb_cart);         rb_user=findViewById(R.id.rb_user);         rg_group=findViewById(R.id.rg_group);          //默认选中第一个         rb_home.setSelected(true);           rg_group.setOnCheckedChangeListener(this);          //初始化fragment         initFragment();          //默认布局,选第一个         defaultFragment();     }      private void defaultFragment() {         FragmentManager fragmentManager = getSupportFragmentManager();         FragmentTransaction transaction = fragmentManager.beginTransaction();         transaction.replace(R.id.fragment_layout,fragments.get(0));         transaction.commit();     }      private void setSelected() {         rb_home.setSelected(false);         rb_discover.setSelected(false);         rb_cart.setSelected(false);         rb_user.setSelected(false);     }      private void initFragment() {         fragments = new ArrayList<>();         fragments.add(0,new HomeFragment());         fragments.add(1,new DiscoverFragment());         fragments.add(2,new CartFragment());         fragments.add(3,new UserFragment());       }      @Override     public void onCheckedChanged(RadioGroup group, int i) {         //获取fragment管理类对象         FragmentManager fragmentManager = getSupportFragmentManager();         //拿到fragmentManager的触发器         FragmentTransaction transaction = fragmentManager.beginTransaction();         switch (i){             case R.id.rb_home:                 position=0;                 //调用replace方法,将fragment,替换到fragment_layout这个id所在UI,或者这个控件上面来                 //这是创建replace这个事件,如果想要这个事件执行,需要把这个事件提交给触发器                 //用commit()方法                 transaction.replace(R.id.fragment_layout,fragments.get(0));                 //将所有导航栏设成默认色                 setSelected();                 rb_home.setSelected(true);                 break;             case R.id.rb_discover:                 position=1;                 transaction.replace(R.id.fragment_layout,fragments.get(1));                 //将所有导航栏设成默认色                 setSelected();                 rb_discover.setSelected(true);                 break;             case R.id.rb_cart:                 position=2;                 transaction.replace(R.id.fragment_layout,fragments.get(2));                 //将所有导航栏设成默认色                 setSelected();                 rb_cart.setSelected(true);                 break;             case R.id.rb_user:                 position=3;                 transaction.replace(R.id.fragment_layout,fragments.get(3));                 //将所有导航栏设成默认色                 setSelected();                 rb_user.setSelected(true);                 break;         }         //事件的提交         transaction.commit();     } } 

这样就完成了一个简单的底部导航栏功能,这个只能通过点击切换fragment,不能通过左右滑动去切换fragment。

版权声明:玥玥 发表于 2021-06-09 6:33:51。
转载请注明:Android 中使用RadioGroup+Fragment实现底部导航栏的功能 | 女黑客导航