在商城第一篇的开篇当中，我们看到商城的效果图里面有一个底部导航栏效果，如下图所示：

　　

　　今天我们就来实现商城底部导航栏，最终效果图如下所示：

　 

　　那么这种效果是如何实现，实现的方式有很多种，最常见的就是使用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实现底部导航栏的思路和代码实现就是这样的。

最新文章

  1. C#学习系列-文章导航
  2. ipipe 环境下gpio中断产生死机的信息
  3. java线程技术6_线程的挂起和唤醒[转]
  4. UVa 1467 (贪心+暴力) Installations
  5. &lt;四&gt; SQL存储过程
  6. Painting The Wall 期望DP Codeforces 398_B
  7. ssh连接失败，排错经验(转)
  8. 脚本+批处理打造IIS监控器
  9. Python3学习之路~7.3 反射
  10. QEMU KVM libvirt 手册(1): 安装
  11. UVA 1152 4 Values whose Sum is 0 (枚举+中途相遇法)(+Java版)(Java手撕快排+二分)
  12. 2.4 Visio2007显示动态对齐网格
  13. Android.mk简介&lt;转&gt;
  14. [error]OpenCV Error: Assertion failed (ssize.width &gt; 0 &amp;&amp; ssize.height &gt; 0) in resize, file modules/imgproc/src/resize.cpp, line 3289
  15. hangfire enqueued but not processing（hangfire 定时任务入队列但不执行）
  16. C字符串
  17. js判断两个日期是否严格相差整年（合同日期常用）
  18. Excel编程的基本概念
  19. springmvc遇见406错误的问题分析
  20. NUmericupdown控件

热门文章

  1. RedisRepository分享和纠错
  2. 王爽汇编语言（第三版）环境搭建（附PDF及工具下载）
  3. gulp实时编译less，压缩合并requirejs模块文件
  4. shell 脚本浅入
  5. Linux Platform驱动模型(二) _驱动方法
  6. 拆开Ceph看队列和线程
  7. Git合并分支命令：git merge --ff
  8. 设置tableView的分割线填满cell的方式总结
  9. java 双击jar包操作
  10. PPT中翻书动画的制作