android中Fragment+RadioButton實現(xiàn)底部導航欄
在App中經(jīng)??吹竭@樣的tab底部導航欄
那么這種效果是如何實現(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>,這個是設置圖片和文字的顏色,在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(); //設置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ù)位置得到相應的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ù)位置得到對應的 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ù)選中的位置獲取到對應的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)底部導航欄的思路和代碼實現(xiàn)就是這樣的。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- Android 中使用RadioGroup和Fragment實現(xiàn)底部導航欄的功能
- 性能分析:指如何快速定位SQL問題
- Android自定義ViewPagerIndicator實現(xiàn)炫酷導航欄指示器(ViewPager+Fragment)
- Android程序開發(fā)之Fragment實現(xiàn)底部導航欄實例代碼
- Android實現(xiàn)沉浸式通知欄通知欄背景顏色跟隨app導航欄背景顏色而改變
- Android實現(xiàn)底部導航欄功能(選項卡)
- 超簡單的幾行代碼搞定Android底部導航欄功能
- Android 彈出Dialog時隱藏狀態(tài)欄和底部導航欄的方法
- Android 沉浸式狀態(tài)欄與隱藏導航欄實例詳解
- android 全屏去掉底部虛擬導航欄的方法
- 解決android 顯示內(nèi)容被底部導航欄遮擋的問題
- Android仿今日頭條頂部導航欄效果的實例代碼
- Android仿網(wǎng)易客戶端頂部導航欄效果
- Android?Fragment實現(xiàn)頂部、底部導航欄
相關(guān)文章
Android事件分發(fā)機制(下) View的事件處理
這篇文章主要介紹了Android事件分發(fā)機制下篇, View的事件處理的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01Android中LayoutInflater.inflater()的正確打開方式
這篇文章主要給大家介紹了關(guān)于Android中LayoutInflater.inflater()的正確打開方式,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考借鑒,下面隨著小編來一起學習學習吧2018-12-12Android中SurfaceView和普通view的區(qū)別及使用
SurfaceView第一印象它是一個view,因為它繼承了View,本文主要介紹了SurfaceView和普通view的區(qū)別及使用,感興趣的小伙伴們可以參考一下2021-06-06Android 中RecyclerView頂部刷新實現(xiàn)詳解
這篇文章主要介紹了Android 中RecyclerView頂部刷新實現(xiàn)詳解的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-10-10Android getBackground().setAlpha遇到問題解決辦法
這篇文章主要介紹了Android getBackground().setAlpha遇到問題解決辦法的相關(guān)資料用,getBackground().setAlpha,導致其他布局背景透明度都改變的問題,需要的朋友可以參考下2017-03-03Android 實現(xiàn)ListView的點擊變色的實例
這篇文章主要介紹了Android 實現(xiàn)ListView的點擊變色的實例的相關(guān)資料,主要實現(xiàn)Android listveiw ItemClickListener寫入變色的功能,需要的朋友可以參考下2017-07-07