在App中经常看到这样的tab底部导航栏
那么这种效果是如何实现，实现的方式有很多种，最常见的就是使用Fragment+RadioButton去实现。下面我们来写一个例子
首先我们先在activity_mian.xml定义布局，整个布局的外面是线性布局，上面是帧布局切换不同的Fragment，底下是RadioGroup嵌套的是RadioButton。代码如下所示：
注意：上面还有样式和drawable，下面我们一个一个的来完善。
首先来看样式，打开【res】—【values】—【styles】，代码如下所示：
- 0dp
- wrap_content
- 1
- @null
- @drawable/bottom_button_text_selector
- 10sp
- center
里面还有一个
接着我们继续来完善drawable，有【首页】【分类】【发现】【购物车】【个人中心】，写法都是一样的，这里用【首页】来做例子，在drawable目录下建home_button_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 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);
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());
}
private baseFragment getFragment(int position){
if(fragments != null && fragments.size()>0){
baseFragment baseFragment = fragments.get(position);
return baseFragment;
}
return null;
}
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;
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;
public abstract class baseFragment extends Fragment{
protected Context mContext;
@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实现底部导航栏的思路和代码实现就是这样的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
