android中Fragment+RadioButton實現(xiàn)底部導(dǎo)航欄

2019-10-23 18:34:14

字體：大中小

供稿：網(wǎng)友

在App中經(jīng)常看到這樣的tab底部導(dǎo)航欄

fragment,底部導(dǎo)航欄,fragment實現(xiàn)底部導(dǎo)航,fragment實現(xiàn)底部菜單

那么這種效果是如何實現(xiàn)，實現(xiàn)的方式有很多種，最常見的就是使用Fragment+RadioButton去實現(xiàn)。下面我們來寫一個例子
首先我們先在activity_mian.xml定義布局，整個布局的外面是線性布局，上面是幀布局切換不同的Fragment，底下是RadioGroup嵌套的是RadioButton。代碼如下所示：

<?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:background="#ffffff"  android:orientation="vertical">  <FrameLayout    android:id="@+id/frameLayout"    android:layout_width="match_parent"    android:layout_height="0dp"    android:layout_weight="1" />  <RadioGroup    android:id="@+id/rg_main"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_alignParentBottom="true"    android:background="@drawable/home_bottom_parent_bg"    android:orientation="horizontal">    <RadioButton      android:id="@+id/rb_home"      style="@style/MainButtonStyle"      android:drawableTop="@drawable/home_button_selector"      android:text="首頁" />    <RadioButton      android:id="@+id/rb_type"      style="@style/MainButtonStyle"      android:drawableTop="@drawable/type_button_selector"      android:text="分類" />    <RadioButton      android:id="@+id/rb_community"      style="@style/MainButtonStyle"      android:drawableTop="@drawable/community_button_selector"      android:paddingTop="10dp"      android:text="發(fā)現(xiàn)" />    <RadioButton      android:id="@+id/rb_cart"      style="@style/MainButtonStyle"      android:drawableTop="@drawable/cart_button_selector"      android:text="購物車" />    <RadioButton      android:id="@+id/rb_user"      style="@style/MainButtonStyle"      android:drawableTop="@drawable/user_button_selector"      android:text="個人中心" />  </RadioGroup></LinearLayout>

注意：上面還有樣式和drawable，下面我們一個一個的來完善。

首先來看樣式，打開【res】—【values】—【styles】，代碼如下所示：

 <style name="MainButtonStyle">    <!-- Customize your theme here. -->    <item name="android:layout_width">0dp</item>    <item name="android:layout_height">wrap_content</item>    <item name="android:layout_weight">1</item>    <item name="android:button">@null</item>    <!--  <item name="android:drawablePadding">3dp</item>-->    <item name="android:textColor">@drawable/bottom_button_text_selector</item>    <item name="android:textSize">10sp</item>    <item name="android:gravity">center</item>  </style>

里面還有一個<item name="android:textColor">@drawable/bottom_button_text_selector</item>，這個是設(shè)置圖片和文字的顏色，在drawable的目錄下建bottom_button_text_selector，代碼如下所示：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">  <item android:color="#535353" android:state_checked="false"></item>  <item android:color="#ff4040" android:state_checked="true"></item></selector>

接著我們繼續(xù)來完善drawable，有【首頁】【分類】【發(fā)現(xiàn)】【購物車】【個人中心】，寫法都是一樣的，這里用【首頁】來做例子，在drawable目錄下建home_button_selector，代碼如下所示：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">  <item android:drawable="@drawable/main_home" android:state_checked="false"></item>  <item android:drawable="@drawable/main_home_press" android:state_checked="true"></item></selector>

接下來看MainActivity中的代碼，代碼如下：

package com.nyl.shoppingmall.app.activity;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentTransaction;import android.widget.FrameLayout;import android.widget.RadioGroup;import com.nyl.shoppingmall.R;import com.nyl.shoppingmall.base.BaseFragment;import com.nyl.shoppingmall.community.fragment.CommunityFragment;import com.nyl.shoppingmall.home.fragment.HomeFragment;import com.nyl.shoppingmall.shoppingcart.fragment.ShoppingCartFragment;import com.nyl.shoppingmall.type.fragment.TypeCartFragment;import com.nyl.shoppingmall.user.fragment.UserCartFragment;import java.util.ArrayList;import butterknife.Bind;import butterknife.ButterKnife;public class MainActivity extends FragmentActivity{  @Bind(R.id.frameLayout)  FrameLayout frameLayout;  @Bind(R.id.rg_main)  RadioGroup rgMain;  //裝fragment的實例集合  private ArrayList<BaseFragment> fragments;  private int position = 0;  //緩存Fragment或上次顯示的Fragment  private Fragment tempFragment;  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    //ButterKnife和當前Activity綁定    ButterKnife.bind(this);    //初始化Fragment    initFragment();    //設(shè)置RadioGroup的監(jiān)聽    initListener();  }  private void initListener() {    rgMain.check(R.id.rb_home);    rgMain.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {      @Override      public void onCheckedChanged(RadioGroup radioGroup, int i) {        switch (i){          case R.id.rb_home: //首頁            position = 0;            break;          case R.id.rb_type: //分類            position = 1;            break;          case R.id.rb_community: //發(fā)現(xiàn)            position = 2;            break;          case R.id.rb_cart: //購物車            position = 3;            break;          case R.id.rb_user: //個人中心            position = 4;            break;          default:            position = 0;            break;        }        //根據(jù)位置得到相應(yīng)的Fragment        BaseFragment baseFragment = getFragment(position);        /**         * 第一個參數(shù): 上次顯示的Fragment         * 第二個參數(shù): 當前正要顯示的Fragment         */        switchFragment(tempFragment,baseFragment);      }    });  }  /**   * 添加的時候按照順序   */  private void initFragment(){    fragments = new ArrayList<>();    fragments.add(new HomeFragment());    fragments.add(new TypeCartFragment());    fragments.add(new CommunityFragment());    fragments.add(new ShoppingCartFragment());    fragments.add(new UserCartFragment());  }  /**   * 根據(jù)位置得到對應(yīng)的 Fragment   * @param position   * @return   */  private BaseFragment getFragment(int position){    if(fragments != null && fragments.size()>0){      BaseFragment baseFragment = fragments.get(position);      return baseFragment;    }    return null;  }  /**   * 切換Fragment   * @param fragment   * @param nextFragment   */  private void switchFragment(Fragment fragment,BaseFragment nextFragment){    if (tempFragment != nextFragment){      tempFragment = nextFragment;      if (nextFragment != null){        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();        //判斷nextFragment是否添加成功        if (!nextFragment.isAdded()){          //隱藏當前的Fragment          if (fragment != null){            transaction.hide(fragment);          }          //添加Fragment          transaction.add(R.id.frameLayout,nextFragment).commit();        }else {          //隱藏當前Fragment          if (fragment != null){            transaction.hide(fragment);          }          transaction.show(nextFragment).commit();        }      }    }  }}

首先使用ButterKnife初始化布局控件，然后在onCreate方法中初始化Fragment和綁定RadioGroup的選中改變事件，為了方便初始化Fragment，寫了一個initFragment方法，在方法內(nèi)部創(chuàng)建HomeFragment,TypeCartFragment,CommunityFragment,ShoppingCartFragment,UserCartFragment四個Fragment實例，然后使用一個fragments集合存儲這四個實例。接下來寫一個switchFragment方法，用于切換顯示指定的Fragmetn，當RadioGroup的選中改變時，首先根據(jù)選中的位置獲取到對應(yīng)的Fragment，然后將獲取到的Fragment傳入到switchFragment方法中進行顯示。由于每次RadioGroup的選中改變獲取到的Fragment都不一樣，從而可以實現(xiàn)根據(jù)選中的RadioGroup展示不同的Fragment效果，也就是常見的Tab切換效果。

Activity中用到的HomeFragment,TypeCartFragment,CommunityFragment,ShoppingCartFragment,UserCartFragment這四個Fragment的代碼比較簡單，以HomeFragment為例，代碼如下：

package com.nyl.shoppingmall.home.fragment;import android.util.Log;import android.view.Gravity;import android.view.View;import android.widget.TextView;import com.nyl.shoppingmall.base.BaseFragment;/** * 首頁Fragment */public class HomeFragment extends BaseFragment {  private final static String TAG = HomeFragment.class.getSimpleName();  private TextView textView;  @Override  public View initView() {    textView = new TextView(mContext);    textView.setGravity(Gravity.CENTER);    textView.setTextSize(25);    Log.e(TAG,"主頁面的Fragment的UI被初始化了");    return textView;  }  @Override  public void initData() {    super.initData();    textView.setText("首頁");    Log.e(TAG,"主頁面的Fragment的數(shù)據(jù)被初始化了");  }}

HomeFragment繼承自BaseFragment，然后重寫父類的initView方法和initData方法，BaseFragment的代碼如下：

package com.nyl.shoppingmall.base;import android.content.Context;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;/** * 基類Fragment * 首頁：HomeFragment * 分類：TypeFragment * 發(fā)現(xiàn)：CommunityFragment * 購物車：ShoppingCartFragment * 用戶中心：UserFragment * 等等都要繼承該類 */public abstract class BaseFragment extends Fragment{  protected Context mContext;  /**   * 當該類被系統(tǒng)創(chuàng)建的時候回調(diào)   * @param savedInstanceState   */  @Override  public void onCreate(@Nullable Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    mContext = getActivity();  }  @Nullable  @Override  public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {    return initView();  }  //抽象類，由孩子實現(xiàn)，實現(xiàn)不同的效果  public abstract View initView();  @Override  public void onActivityCreated(@Nullable Bundle savedInstanceState) {    super.onActivityCreated(savedInstanceState);    initData();  }  /**   * 當子類需要聯(lián)網(wǎng)請求數(shù)據(jù)的時候，可以重寫該方法，該方法中聯(lián)網(wǎng)請求   */  public void initData() {  }}

其余幾個Fragment的代碼也類似，這里就不再細說了，使用Fragment+RadioButton實現(xiàn)底部導(dǎo)航欄的思路和代碼實現(xiàn)就是這樣的。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。

注：相關(guān)教程知識閱讀請移步到Android開發(fā)頻道。

上一篇：Android實現(xiàn)發(fā)送短信驗證碼倒計時功能示例

下一篇：Android 自定義dialog的實現(xiàn)代碼