Android商城开发系列(三)——使用Fragment+RadioButton实现商城底部导航栏

时间:2023-11-12 13:32:08

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

  Android商城开发系列(三)——使用Fragment+RadioButton实现商城底部导航栏

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

  Android商城开发系列(三)——使用Fragment+RadioButton实现商城底部导航栏

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