基于eclipse的android项目实战—博学谷（四）底部导航栏
| 本项目是用eclipse软件编写，经过我的亲自实践，其真实有效，希望能给您有所帮助 项目版本：android5.1.1 AVD建议：android4.4.2及以上 |
文章目录
- 效果图：
- 1.导入界面图片
- 2.底部导航栏布局`activity_main.xml`
- 3.底部导航栏逻辑代码
- 4.功能完善
效果图：
点击返回按钮两次退出程序
1.导入界面图片
将底部导航栏所需图片 main_course_Icon.png、main_course_icon_ selected.png, main_exercises_icon.png, main_exercises_icon_selected.png, main_my_icon.png, main_my_Icon_selected.png导入到 drawable文件夹中。
2.底部导航栏布局activity_main.xml
编辑res/layout文件夹中activity_main.xml文件，代码如下：
<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"
android:orientation="vertical"
tools:context="${relativePackage}.${activityClass}" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical">
<include layout="@layout/main_title_bar"/>
<FrameLayout
android:id="@+id/main_body"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
</FrameLayout>
</LinearLayout>
<LinearLayout
android:baselineAligned="false"
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">
<RelativeLayout
android:id="@+id/bottom_bar_course_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<TextView
android:id="@+id/bottom_bar_text_course"
android:layout_width="match_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="@string/course"
android:textColor="#666666"
android:textSize="14sp" />
<ImageView
android:id="@+id/bottom_bar_image_course"
android:layout_width="27dp"
android:layout_height="27dp"
android:contentDescription="@null"
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"/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/bottom_bar_exercises_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<TextView
android:id="@+id/bottom_bar_text_exercises"
android:layout_width="match_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="@string/exercises"
android:textColor="#666666"
android:textSize="14sp"/>
<ImageView
android:id="@+id/bottom_bar_image_exercises"
android:layout_width="27dp"
android:layout_height="27dp"
android:contentDescription="@null"
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"/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/bottom_bar_myinfo_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<TextView
android:id="@+id/bottom_bar_text_myinfo"
android:layout_width="match_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="@string/myinfo"
android:textColor="#666666"
android:textSize="14sp"/>
<ImageView
android:id="@+id/bottom_bar_image_myinfo"
android:layout_width="27dp"
android:layout_height="27dp"
android:contentDescription="@null"
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_selected" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
文本信息在values文件夹下的string.xml文件里面：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">BoXueGu</string>
<string name="hello_world">Hello world!</string>
<string name="boxuegu">博学谷</string>
<string name="name">请输入用户名</string>
<string name="pwd">请输入密码</string>
<string name="pwd_again">请再次输入密码</string>
<string name="btn_register">注册</string>
<string name="login">登录</string>
<string name="tv_register">立即注册</string>
<string name="find_pwd">找回密码？</string>
<string name="course">课程</string>
<string name="exercises">习题</string>
<string name="myinfo">我</string>
</resources>
3.底部导航栏逻辑代码
在Java包china.ynyx.heyunhui中编辑文件MainActivity.java
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
上述代码中的View.OnClickListener也可以写成OnClickListener导包请导入import android.view.View.OnClickListener;导完后有错，不怕，继续往下写。
public class MainActivity extends AppCompatActivity implements OnClickListener{
具体代码如下：MainActivity.java
package china.ynyx.heyunhui;
import android.support.v7.app.AppCompatActivity;
import android.content.Context;
import android.content.SharedPreferences;
import android.content.pm.ActivityInfo;
import android.graphics.Color;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
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 OnClickListener{
// 中间内容栏
private FrameLayout mBodyLayout;
//底部按钮栏
public LinearLayout mBottomLayout;
//底部按钮控件
private View mCourseBtn,mExercisesBtn,mMyInfoBtn;
private TextView tv_course,tv_exercises,tv_myInfo;
private ImageView iv_course,iv_exercises,iv_myInfo;
private TextView tv_back,tv_main_title;
private RelativeLayout rl_title_bar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//设置此界面为竖屏
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
init();
initBottomBar();
setListener();
setInitStatus();
}
//获取界面上的UI控件
private void init() {
// TODO Auto-generated method stub
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 initBottomBar() {
// TODO Auto-generated method stub
mBottomLayout = (LinearLayout) findViewById(R.id.main_bottom_bar);
mCourseBtn = findViewById(R.id.bottom_bar_course_btn);
mExercisesBtn = findViewById(R.id.bottom_bar_exercises_btn);
mMyInfoBtn = 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);
}
private void initBodyLayout() {
// TODO Auto-generated method stub
mBodyLayout = (FrameLayout) findViewById(R.id.main_body);
}
//控件的点击事件，当点击按钮时首先清空底部导航栏的状态，之后将相应的图片和按钮设置为选中状态
@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;
}
}
//设置底部三个按钮的点击监听事件
private void setListener() {
// TODO Auto-generated method stub
for (int i = 0; i < mBottomLayout.getChildCount(); i++) {
mBottomLayout.getChildAt(i).setOnClickListener(this);
}
}
//清除底部按钮的选中状态
private void clearBottomImageState() {
// TODO Auto-generated method stub
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);
}
}
//设置底部按钮选中状态
public void setSelectedStatus(int index) {
switch (index) {
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.GONE);
}
}
//移除不需要的视图
private void removeAllView() {
for (int i = 0; i < mBodyLayout.getChildCount(); i++) {
mBodyLayout.getChildAt(i).setVisibility(View.GONE);
}
}
//设置界面view的初始化状态
private void setInitStatus() {
// TODO Auto-generated method stub
clearBottomImageState();
setSelectedStatus(0);
createView(0);
}
//显示对应的页面
private void selectDisplayView(int index) {
// TODO Auto-generated method stub
removeAllView();
createView(index);
setSelectedStatus(index);
}
//选择视图
private void createView(int viewIndex) {
// TODO Auto-generated method stub
switch (viewIndex) {
case 0:
//课程界面
break;
case 1:
//习题界面
break;
case 2:
//我的界面
break;
}
}
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) {//第二次点击时间与第一次时间间隔大于两秒
Toast.makeText(MainActivity.this, "再按一次退出博学谷",
Toast.LENGTH_SHORT).show();
exitTime = System.currentTimeMillis();
} else {
MainActivity.this.finish();
if (readLoginStatus()) {
//如果退出此应用时是登录状态，则需要清除登录状态，同时需清除登录时的用户名
clearLoginStatus();
}
System.exit(0);//退出博学谷
}
return true;
}
return super.onKeyDown(keyCode, event);
}
//获取SharedPreferences中的登录状态
private boolean readLoginStatus() {
// TODO Auto-generated method stub
SharedPreferences sp = getSharedPreferences("loginInfo",
Context.MODE_PRIVATE);
boolean isLogin = sp.getBoolean("isLogin", false);
return isLogin;
}
private void clearLoginStatus() {
// TODO Auto-generated method stub
SharedPreferences sp = getSharedPreferences("loginInfo",
Context.MODE_PRIVATE);
SharedPreferences.Editor editor = sp.edit();//获取编辑器
editor.putBoolean("isLogin", false);//清除登录状态
editor.putString("loginUserName", "");//清除登录时的用户名
editor.commit();//提交修改
}
}
4.功能完善
实现欢迎界面过后直接跳转到主页面：SplashActivity.java
46行修改为如下代码：
Intent intent=new Intent(SplashActivity.this,MainActivity.class);
startActivity(intent);
参考资料：《android项目实战——博学谷》（黑马程序员著）