《Android項目實戰-博學谷》底部導航欄

時間 2019-11-10

原文原文鏈接

底部導航欄佈局

思路

本項目的主界面設計了底部導航欄，爲了方便後續佈局的搭建，建立一個底部導航欄UI的框架，修改主界面佈局爲 RelativeLayout ，利用 LinearLayout 包裹標題欄與界面內容，將各界面內容設置爲 FrameLayout ，再用一個 LinearLayout 包裹底部導航欄，在內部用三個 RelativeLayout 來顯示三個按鈕java

具體代碼以下：android

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: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">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">

        <include layout="@layout/main_title_bar"></include>

        <FrameLayout
            android:id="@+id/main_body"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white"></FrameLayout><!--限定main_body大小，令其在main_title_bar下方，因而用LinearLayout包裹-->

    </LinearLayout>

    <LinearLayout
        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"><!--誤使用vertical屬性時RelativeLayout的layout_width屬性會報錯-->

        <RelativeLayout
            android:id="@+id/bottom_bar_course_btn"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1">

            <TextView
                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" />

            <ImageView
                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" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/bottom_bar_exercises_btn"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1">

            <TextView
                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" />

            <ImageView
                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" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/bottom_bar_myinfo_btn"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1">

            <TextView
                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" />

            <ImageView
                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" />
        </RelativeLayout>

    </LinearLayout><!--底部導航欄關鍵：layout_alignParentBottom-->


</RelativeLayout>

底部導航欄邏輯

思路

首先須要爲三個按鈕添加監聽事件，而後根據所在界面的不一樣，導航欄中的按鈕和文字切換不一樣狀態，在界面內容也根據按鈕的選中狀態切換不一樣的界面app

具體代碼以下：框架

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.getChildCount();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;
    }
}