写在前面的话
首先需要说明的是，此篇文章是实现底部导航栏的第二部，而不是实现顶部导航栏的，注意注意啊。
之前已经写过一篇实现底部导航栏的文章，不知道请移步fragment+viewPager实现底部导航栏（一）
鉴于之前已经实现了底部导航栏的功能，为什么还要写这篇文章呢？此文目的有：
- 对不需要显示小圆点的底部导航栏一个相对快捷的实现，不需要复杂的TextView实现底部布局
- 在之前文章的基础上重新整理思路，让编码更顺畅，也算是对上篇文章的一个整理吧。
那么此篇文章除了没有加显示小圆点的布局外，在代码和布局上比之前相对简单的地方在哪里呢？一个是此篇文章用RadioButton实现底部布局，所以在布局上明显比之前简单是肯定的，再之之前是通过控制TextView的点击事件来实现fragment的实现的，所以代码上复杂繁琐些，而此篇文章由于有RadioGroup的原因，在点击事件上的处理会相对简洁些。
下面就来一次讲解实现吧。
提前准备
项目中用到基本的控件初始化，ButterKnife，所以添加依赖
//butterKnife
compile 'com.jakewharton:butterknife:8.5.1'
//这条千万不能忘记!!
annotationProcessor 'com.jakewharton:butterknife-compiler:8.5.1'
然后是基本的两个base类，BaseActivity和BaseFragment
public abstract class BaseActivity extends AppCompatActivity {
protected View mLayoutView;//总布局
protected Activity mContext;
private Unbinder mUnbinder;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mContext = this;
AppActivityManager.getInstance().addActivity(this);
if (getContentViewId() != 0) {
mLayoutView = LayoutInflater.from(mContext).inflate(getContentViewId(), null);
setContentView(mLayoutView);
mUnbinder = ButterKnife.bind(this);
}
initData();
setListener();
}
@Override
protected void onResume() {
//设置为横屏
if (getRequestedOrientation() != ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE) {
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
}
super.onResume();
}
/**
* 设置布局
*/
public abstract int getContentViewId();
/**
* 界面数据初始化
**/
protected abstract void initData();
/**
* 界面UI事件监听
**/
protected abstract void setListener();
@Override
protected void onDestroy() {
if (mUnbinder != null) {
mUnbinder.unbind();
}
AppActivityManager.getInstance().finishActivity(this);
super.onDestroy();
}
/**
* 获取editText的值
*
* @param et
* @return
*/
protected String getTextOfEditText(EditText et) {
if (et == null) {
return null;
}
if (et.getText() == null) {
return null;
}
if (StringUtil.isEmpty(et.getText().toString())) {
return "";
}
return et.getText().toString().trim();
}
protected void showToast(String msg) {
if (StringUtil.isNotEmpty(msg)) {
ToastUtil.show(msg);
}
}
protected void showShortToast(String msg){
if (StringUtil.isNotEmpty(msg)) {
ToastUtil.shortShow(msg);
}
}
}
下面是baseFragment，注意fragment相关的导入的都是 import android.support.v4.app.Fragment;
public abstract class BaseFragment extends Fragment{
protected View mLayoutView;
protected Context mContext;
private Unbinder mUnbinder;
@Override
public void onAttach(Context context) {
super.onAttach(context);
mContext = context;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
mLayoutView = inflater.inflate(getLayoutId(), container, false);
mUnbinder= ButterKnife.bind(this,mLayoutView);//绑定framgent
onCreateFragmentView(inflater, container, savedInstanceState);
return mLayoutView;
}
protected void onCreateFragmentView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
initData();
setListener();
}
@Override
public void onDestroy() {
if(mUnbinder!=null){
mUnbinder.unbind();
}
super.onDestroy();
}
protected abstract int getLayoutId();
protected abstract void initData();
protected abstract void setListener();
/**
* 获取editText的值
*
* @param et
* @return
*/
protected String getTextOfEditText(EditText et){
if (et == null) {
return null;
}
if (et.getText() == null) {
return null;
}
if (StringUtil.isEmpty(et.getText().toString())) {
return "";
}
return et.getText().toString().trim();
}
protected void showToast(String msg) {
if (StringUtil.isNotEmpty(msg)) {
ToastUtil.show(msg);
}
}
protected void showShortToast(String msg){
if (StringUtil.isNotEmpty(msg)) {
ToastUtil.shortShow(msg);
}
}
}
第一步，准备一个基本的TextView的style供xml文件中使用，在res/values/styles.xml中新建style
<style name="tv_text">
<item name="android:lineSpacingExtra">@dimen/dp_1</item>
<item name="android:lineSpacingMultiplier">1.0</item>
</style>
第二步，写一个RadioButton样式的通用style---tab_menu_item
<style name="tab_menu_item">
<item name="android:layout_width">0dp</item>
<item name="android:layout_weight">1</item>
<item name="android:layout_height">match_parent</item>
<item name="android:background">@drawable/tab_menu_bg</item>
<item name="android:button">@null</item>
<item name="android:gravity">center</item>
<item name="android:paddingTop">3dp</item>
<item name="android:textColor">@drawable/tab_menu_text</item>
<item name="android:textSize">18sp</item>
</style>
background中tab_menu_bg.xml文件如下：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/tab_menu_pressed" android:state_checked="true" />
<item android:drawable="@drawable/tab_menu_normal" android:state_checked="false"/>
</selector>
tab_menu_pressed.xml代码如下
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#d4dbe2"></solid>
</shape>
tab_menu_normal.xml代码如下
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="@color/white"></solid>
</shape>
textColo中tab_menu_text.xml对应如下
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/color_f79e03" android:state_checked="true" />
<item android:color="@color/color_596b76" android:state_checked="false"/>
</selector>
第二步，写一个Frgment的样例吧，ManagerFragment代码如下：
public class ManagerFragment extends BaseFragment{
@Override
protected int getLayoutId() {
return R.layout.fragment_manager;
}
@Override
protected void initData() {
}
@Override
protected void setListener() {
}
}
对应布局fragment_manager.xml如下：
<?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">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="guanli"/>
</LinearLayout>
其它的ReportFragment和InfoFragment仿照上面的ManagerFragment写即可。
第三步，涉及到ViewPager的话，肯定少不了对应的适配器MainPagerAdapter了
/***
* 标签主页适配
*
* @author pei
* @version 1.0
* @create 2016-6-21
*/
public class MainPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> mFragmentList;
public MainPagerAdapter(FragmentManager fm, List<Fragment> mFragmentList) {
super(fm);
this.mFragmentList = mFragmentList;
}
@Override
public Fragment getItem(int position) {
// TODO Auto-generated method stub
return mFragmentList == null ? null : mFragmentList.get(position);
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return mFragmentList == null ? 0 : mFragmentList.size();
}
@Override
public void destroyItem(View container, int position, Object object) {
// super.destroyItem(container, position, object);
}
}
第四步，ViewPager对应的滑动监听，我自己写了一个TabOnPageChangeListener来实现ViewPager.OnPageChangeListener，为的是去掉viewpager滑动到边界出现的阴影，另外为了减少mainActivity中的代码干扰，只暴露一个ViewPager滑动完毕的方法。
package com.orderform.Listener;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.EdgeEffectCompat;
import java.lang.reflect.Field;
/***
* TabMenuFragmentActivity viewpager滑动监听(禁用滑到边界显示黑边)
*
* @author pei
* @version 1.0
* @create 2016-6-21
*/
public class TabOnPageChangeListener implements ViewPager.OnPageChangeListener {
private ViewPager mViewPager;
private OnSelectedFragmentListener mOnSelectedFragmentListener;
private EdgeEffectCompat leftEdge;//去除viewpager滑到边界的黑边
private EdgeEffectCompat rightEdge;//去除viewpager滑到边界的黑边
public TabOnPageChangeListener(ViewPager viewPager) {
this.mViewPager = viewPager;
init();
}
public void setOnSelectedFragmentListener(OnSelectedFragmentListener onSelectedFragmentListener) {
this.mOnSelectedFragmentListener = onSelectedFragmentListener;
}
private void init() {
try {
Field leftEdgeField = mViewPager.getClass().getDeclaredField("mLeftEdge");
Field rightEdgeField = mViewPager.getClass().getDeclaredField("mRightEdge");
if (leftEdgeField != null && rightEdgeField != null) {
leftEdgeField.setAccessible(true);
rightEdgeField.setAccessible(true);
leftEdge = (EdgeEffectCompat) leftEdgeField.get(mViewPager);
rightEdge = (EdgeEffectCompat) rightEdgeField.get(mViewPager);
}
} catch (NoSuchFieldException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IllegalAccessException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IllegalArgumentException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// 禁用滑到边界显示黑边
if (leftEdge != null && rightEdge != null) {
leftEdge.finish();
rightEdge.finish();
leftEdge.setSize(0, 0);
rightEdge.setSize(0, 0);
}
}
@Override
public void onPageScrollStateChanged(int state) {
//state的状态有三个，0表示什么都没做，1正在滑动，2滑动完毕
}
@Override
public void onPageSelected(int position) {
if (mOnSelectedFragmentListener != null) {
mOnSelectedFragmentListener.selectedFragment(position);
}
}
public interface OnSelectedFragmentListener {
void selectedFragment(int index);
}
}
第五步，终于要开始mainActivity的相关了，先上mainActivity的布局activity_main.xml代码吧
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.main.MainActivity">
<include
layout="@layout/layout_title_back_tv"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_50"
android:background="@color/white"></include>
<RadioGroup
android:id="@+id/rg_tab_bar"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_56"
android:layout_alignParentBottom="true"
android:background="@color/white"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rb_manager"
style="@style/tab_menu_item"
android:drawableTop="@drawable/tab_manager_bg"
android:text="@string/tab_manager"/>
<RadioButton
android:id="@+id/rb_report"
style="@style/tab_menu_item"
android:drawableTop="@drawable/tab_report_bg"
android:text="@string/tab_report" />
<RadioButton
android:id="@+id/rb_info"
style="@style/tab_menu_item"
android:drawableTop="@drawable/tab_info_bg"
android:text="@string/tab_info" />
</RadioGroup>
<android.support.v4.view.ViewPager
android:id="@+id/vpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/rg_tab_bar"
android:layout_below="@+id/title_rl" />
</RelativeLayout>
这里涉及到一个标题栏的问题，给出inculd的布局layout_title_back_tv.xml代码吧：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/title_rl"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/color_00000000"
android:focusable="true"
android:focusableInTouchMode="true"
android:gravity="center_vertical">
<ImageView
android:id="@+id/title_back"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:paddingLeft="@dimen/dp_15"
android:paddingRight="@dimen/dp_15"
android:src="@mipmap/ic_back_black"
android:visibility="visible" />
<TextView
android:id="@+id/title_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/tv_text"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_gravity="center_horizontal"
android:singleLine="true"
android:textColor="@color/color_ffffff"
android:textSize="@dimen/sp_14" />
<TextView
android:id="@+id/title_right"
android:layout_width="wrap_content"
android:layout_height="match_parent"
style="@style/tv_text"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:paddingLeft="@dimen/dp_15"
android:paddingRight="@dimen/dp_15"
android:textSize="@dimen/sp_12"
android:gravity="center"
android:textColor="@color/color_ffffff"
android:visibility="gone" />
第六步，MainActivity代码
public class MainActivity extends BaseActivity implements View.OnClickListener, RadioGroup.OnCheckedChangeListener, TabOnPageChangeListener.OnSelectedFragmentListener {
public static Intent newIndexIntent(Context context) {
Intent newIntent = new Intent(context, MainActivity.class);
return newIntent;
}
@BindView(R.id.title_rl)
RelativeLayout mTitleLayout;
@BindView(R.id.title_back)
ImageView mTilteBack;
@BindView(R.id.title_name)
TextView mTilteName;
@BindView(R.id.title_right)
TextView mTilteRight;
@BindView(R.id.rg_tab_bar)
RadioGroup mRgTabBar;
@BindView(R.id.rb_manager)
RadioButton mRbManager;
@BindView(R.id.rb_report)
RadioButton mRbReport;
@BindView(R.id.rb_info)
RadioButton mRbInfo;
@BindView(R.id.vpager)
ViewPager mViewPager;
private List<Fragment> mFragmentList;
private MainPagerAdapter mainPagerAdapter;
private TabOnPageChangeListener mTabOnPageChangeListener;
@Override
public int getContentViewId() {
return R.layout.activity_main;
}
@Override
protected void initData() {
mFragmentList = new ArrayList<>();
mFragmentList.add(0, new ManagerFragment());
mFragmentList.add(1, new ReportFragment());
mFragmentList.add(2, new InfoFragment());
mTabOnPageChangeListener = new TabOnPageChangeListener(mViewPager);
mainPagerAdapter = new MainPagerAdapter(getSupportFragmentManager(), mFragmentList);
mViewPager.setOffscreenPageLimit(3);// 设置预加载Fragment个数
mViewPager.setAdapter(mainPagerAdapter);
mViewPager.setCurrentItem(0);// 设置当前显示标签页为第一页
//获取第一个单选按钮，并设置其为选中状态
mRbManager.setChecked(true);
}
@Override
protected void setListener() {
mRgTabBar.setOnCheckedChangeListener(this);
mViewPager.addOnPageChangeListener(mTabOnPageChangeListener);
mTabOnPageChangeListener.setOnSelectedFragmentListener(this);
mTilteBack.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.title_back:
AppActivityManager.getInstance().appExit(mContext);
break;
case 1:
break;
default:
break;
}
}
@Override
public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {
setSelected();
switch (checkedId) {
case R.id.rb_manager:
mRbManager.setChecked(true);
mViewPager.setCurrentItem(0);
break;
case R.id.rb_report:
mRbReport.setChecked(true);
mViewPager.setCurrentItem(1);
break;
case R.id.rb_info:
mRbInfo.setChecked(true);
mViewPager.setCurrentItem(2);
break;
default:
break;
}
}
@Override
public void selectedFragment(int index) {
setSelected();
switch (index) {
case 0:
mRbManager.setChecked(true);
mViewPager.setCurrentItem(0);
break;
case 1:
mRbReport.setChecked(true);
mViewPager.setCurrentItem(1);
break;
case 2:
mRbInfo.setChecked(true);
mViewPager.setCurrentItem(2);
break;
}
}
//重置所有文本的选中状态
private void setSelected() {
mRbManager.setChecked(false);
mRbReport.setChecked(false);
mRbInfo.setChecked(false);
}
}
好了，到此你就可以欢乐的撸码了，这次的逻辑应该比上次清楚多了，下面给出我的效果图吧
2.gif
ok，今天就讲到这里吧，谢谢诶。
网友评论