在App中经常看到这样的tab底部导航栏
那么这种效果是如何实现，实现的方式有很多种，最常见的就是使用Fragment+RadioButton去实现。下面我们来写一个例子
首先我们先在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="发现" /> <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>
接着我们继续来完善drawable，有【首页】【分类】【发现】【购物车】【个人中心】，写法都是一样的，这里用【首页】来做例子，在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的监听 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: //发现 position = 2; break; case R.id.rb_cart: //购物车 position = 3; break; case R.id.rb_user: //个人中心 position = 4; break; default: position = 0; break; } //根据位置得到相应的Fragment BaseFragment baseFragment = getFragment(position); /** * 第一个参数: 上次显示的Fragment * 第二个参数: 当前正要显示的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()); } /** * 根据位置得到对应的 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方法，在方法内部创建HomeFragment,TypeCartFragment,CommunityFragment,ShoppingCartFragment,UserCartFragment四个Fragment实例，然后使用一个fragments集合存储这四个实例。接下来写一个switchFragment方法，用于切换显示指定的Fragmetn，当RadioGroup的选中改变时，首先根据选中的位置获取到对应的Fragment，然后将获取到的Fragment传入到switchFragment方法中进行显示。由于每次RadioGroup的选中改变获取到的Fragment都不一样，从而可以实现根据选中的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的数据被初始化了"); } }
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 * 发现：CommunityFragment * 购物车：ShoppingCartFragment * 用户中心：UserFragment * 等等都要继承该类 */ public abstract class BaseFragment extends Fragment{ protected Context mContext; /** * 当该类被系统创建的时候回调 * @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(); } //抽象类，由孩子实现，实现不同的效果 public abstract View initView(); @Override public void onActivityCreated(@Nullable Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); initData(); } /** * 当子类需要联网请求数据的时候，可以重写该方法，该方法中联网请求 */ public void initData() { } }
其余几个Fragment的代码也类似，这里就不再细说了，使用Fragment+RadioButton实现底部导航栏的思路和代码实现就是这样的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。