android底部导航栏开源,《Android项目实战-博学谷》底部导航栏

底部导航栏布局

思路

本项目的主界面设计了底部导航栏，为了方便后续布局的搭建，创建一个底部导航栏UI的框架，修改主界面布局为 RelativeLayout ，利用 LinearLayout 包裹标题栏与界面内容，将各界面内容设置为 FrameLayout ，再用一个 LinearLayout 包裹底部导航栏，在内部用三个 RelativeLayout 来显示三个按钮

具体代码如下：

activity_main.xml

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical"

tools:context="cn.edu.lt.android.boxueguapp.MainActivity">

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical">

android:id="@+id/main_body"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@android:color/white">

android:id="@+id/main_bottom_bar"

android:layout_width="match_parent"

android:layout_height="55dp"

android:layout_alignParentBottom="true"

android:background="#f2f2f2"

android:orientation="horizontal">

android:id="@+id/bottom_bar_course_btn"

android:layout_width="0dp"

android:layout_height="fill_parent"

android:layout_weight="1">

android:id="@+id/bottom_bar_text_course"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:layout_marginBottom="3dp"

android:gravity="center"

android:singleLine="true"

android:text="课程"

android:textColor="#666666"

android:textSize="14sp" />

android:id="@+id/bottom_bar_image_course"

android:layout_width="27dp"

android:layout_height="27dp"

android:layout_above="@id/bottom_bar_text_course"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true"

android:layout_marginTop="3dp"

android:src="@drawable/main_course_icon" />

android:id="@+id/bottom_bar_exercises_btn"

android:layout_width="0dp"

android:layout_height="fill_parent"

android:layout_weight="1">

android:id="@+id/bottom_bar_text_exercises"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:layout_marginBottom="3dp"

android:gravity="center"

android:singleLine="true"

android:text="习题"

android:textColor="#666666"

android:textSize="14sp" />

android:id="@+id/bottom_bar_image_exercises"

android:layout_width="27dp"

android:layout_height="27dp"

android:layout_above="@id/bottom_bar_text_exercises"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true"

android:layout_marginTop="3dp"

android:src="@drawable/main_exercises_icon" />

android:id="@+id/bottom_bar_myinfo_btn"

android:layout_width="0dp"

android:layout_height="fill_parent"

android:layout_weight="1">

android:id="@+id/bottom_bar_text_myinfo"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:layout_marginBottom="3dp"

android:gravity="center"

android:singleLine="true"

android:text="我"

android:textColor="#666666"

android:textSize="14sp" />

android:id="@+id/bottom_bar_image_myinfo"

android:layout_width="27dp"

android:layout_height="27dp"

android:layout_above="@id/bottom_bar_text_myinfo"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true"

android:layout_marginTop="3dp"

android:src="@drawable/main_my_icon" />

底部导航栏逻辑

思路

首先需要为三个按钮添加监听事件，然后根据所在界面的不同，导航栏中的按钮和文字切换不同状态，在界面内容也根据按钮的选中状态切换不同的界面

具体代码如下：

MainActivity

package cn.edu.lt.android.boxueguapp;

import android.content.Context;

import android.content.SharedPreferences;

import android.graphics.Color;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.KeyEvent;

import android.view.View;

import android.widget.FrameLayout;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.RelativeLayout;

import android.widget.TextView;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

//界面内容

private FrameLayout mBodyLayout;

//底部按钮栏

public LinearLayout mBottomLayout;

//底部按钮

private View mCourseBtn;

private View mExercisesBtn;

private View mMyInfoBtn;

private TextView tv_course;

private TextView tv_exercises;

private TextView tv_myInfo;

private ImageView iv_course;

private ImageView iv_exercises;

private ImageView iv_myInfo;

//标题栏

private TextView tv_back;

private TextView tv_main_title;

private RelativeLayout rl_title_bar;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

init();

initBottomBar();

setListener();

setInitStatus();

}

/**

* 设置初始选择

*/

private void setInitStatus() {

clearBottomImageState();

setSelectedStatus(0);

createView(0);

}

/**

* 为每个按钮设置监听方法

*/

private void setListener() {

for (int i = 0; i < mBottomLayout.getChildCount(); i++) {

mBottomLayout.getChildAt(i).setOnClickListener(this);

}

}

/**

* 获取底部导航栏上的控件

*/

private void initBottomBar() {

mBottomLayout = (LinearLayout) findViewById(R.id.main_bottom_bar);

mCourseBtn = (RelativeLayout) findViewById(R.id.bottom_bar_course_btn);

mExercisesBtn = (RelativeLayout) findViewById(R.id.bottom_bar_exercises_btn);

mMyInfoBtn = (RelativeLayout) findViewById(R.id.bottom_bar_myinfo_btn);

tv_course = (TextView) findViewById(R.id.bottom_bar_text_course);

tv_exercises = (TextView) findViewById(R.id.bottom_bar_text_exercises);

tv_myInfo = (TextView) findViewById(R.id.bottom_bar_text_myinfo);

iv_course = (ImageView) findViewById(R.id.bottom_bar_image_course);

iv_exercises = (ImageView) findViewById(R.id.bottom_bar_image_exercises);

iv_myInfo = (ImageView) findViewById(R.id.bottom_bar_image_myinfo);

}

/**

* 获取界面上的UI控件

*/

private void init() {

tv_back = (TextView) findViewById(R.id.tv_back);

tv_main_title = (TextView) findViewById(R.id.tv_main_title);

tv_main_title.setText("博学谷课程");

rl_title_bar = (RelativeLayout) findViewById(R.id.title_bar);

rl_title_bar.setBackgroundColor(Color.parseColor("#30B4FF"));

tv_back.setVisibility(View.GONE);//不显示返回按钮

initBodyLayout();

}

/**

* 界面内容

*/

private void initBodyLayout() {

mBodyLayout = (FrameLayout) findViewById(R.id.main_body);

}

/**

* 控件的点击事件

* @param v

*/

@Override

public void onClick(View v) {

switch (v.getId()) {

//课程的点击事件

case R.id.bottom_bar_course_btn:

clearBottomImageState();

selectDisplayView(0);

break;

//习题的点击事件

case R.id.bottom_bar_exercises_btn:

clearBottomImageState();

selectDisplayView(1);

break;

//我的点击事件

case R.id.bottom_bar_myinfo_btn:

clearBottomImageState();

selectDisplayView(2);

break;

default:

break;

}

}

/**

* 显示对应的页面

* @param i

*/

private void selectDisplayView(int i) {

removeAllView();

createView(i);

setSelectedStatus(i);

}

/**

* 设置底部按钮选中状态

* @param i

*/

private void setSelectedStatus(int i) {

switch (i){

case 0:

mCourseBtn.setSelected(true);

iv_course.setImageResource(R.drawable.main_course_icon_selected);

tv_course.setTextColor(Color.parseColor("#0097F7"));

rl_title_bar.setVisibility(View.VISIBLE);

tv_main_title.setText("博学谷课程");

break;

case 1:

mExercisesBtn.setSelected(true);

iv_exercises.setImageResource(R.drawable.main_exercises_icon_selected);

tv_exercises.setTextColor(Color.parseColor("#0097F7"));

rl_title_bar.setVisibility(View.VISIBLE);

tv_main_title.setText("博学谷习题");

break;

case 2:

mMyInfoBtn.setSelected(true);

iv_myInfo.setImageResource(R.drawable.main_my_icon_selected);

tv_myInfo.setTextColor(Color.parseColor("#0097F7"));

rl_title_bar.setVisibility(View.VISIBLE);

tv_main_title.setText("我");

break;

}

}

/**

* 选择视图

* @param viewIndex

*/

private void createView(int viewIndex) {

switch (viewIndex){

case 0:

//TODO:课程界面

break;

case 1:

//习题界面

break;

case 2:

//我的界面

break;

}

}

/**

* 移除不需要的视图

*/

private void removeAllView() {

for (int i = 0;i

mBodyLayout.getChildAt(i).setVisibility(View.GONE);

}

}

/**

* 清除底部按钮的选中状态

*/

private void clearBottomImageState() {

tv_course.setTextColor(Color.parseColor("#666666"));

tv_exercises.setTextColor(Color.parseColor("#666666"));

tv_myInfo.setTextColor(Color.parseColor("#666666"));

iv_course.setImageResource(R.drawable.main_course_icon);

iv_exercises.setImageResource(R.drawable.main_exercises_icon);

iv_myInfo.setImageResource(R.drawable.main_my_icon);

for (int i = 0; i < mBottomLayout.getChildCount(); i++) {

mBottomLayout.getChildAt(i).setSelected(false);

}

}

protected long exitTime;//记录第一次点击时的时间

@Override

public boolean onKeyDown(int keyCode, KeyEvent event) {

if (keyCode == KeyEvent.KEYCODE_BACK && event.getAction() == KeyEvent.ACTION_DOWN){//按返回键、按下动作

if ((System.currentTimeMillis() - exitTime) >2000){//导入java.lang的包

Toast.makeText(this,"再按一次退出博学谷",Toast.LENGTH_LONG).show();

exitTime = System.currentTimeMillis();

}else {

MainActivity.this.finish();

if (readLoginStatus()){

//如果退出此应用时是登录状态，则需要清除登录状态，同时需清除登录时的用户名

clearLoginStatus();

}

System.exit(0);

}

return true;

}

return super.onKeyDown(keyCode, event);

}

/**

* 清除SharedPreferences中的登录状态

*/

private void clearLoginStatus() {

SharedPreferences sp = getSharedPreferences("loginInfo", Context.MODE_PRIVATE);

SharedPreferences.Editor editor = sp.edit();//获取编辑器

editor.putBoolean("isLogin", false);//清除登录状态

editor.putString("loginUserName", "");//清除登录时的用户名

editor.commit();//提交修改

}

/**

* 获取SharedPreferences中的登录状态

* @return

*/

private boolean readLoginStatus() {

SharedPreferences sp = getSharedPreferences("loginInfo", Context.MODE_PRIVATE);

boolean isLogin = sp.getBoolean("isLogin", false);

return isLogin;

}

}

运行效果