《Android項(xiàng)目實(shí)戰(zhàn)-博學(xué)谷》底部導(dǎo)航欄

余學(xué)文發(fā)布于2019-08-15 13:28 / 2476人閱讀

摘要：底部導(dǎo)航欄布局思路本項(xiàng)目的主界面設(shè)計(jì)了底部導(dǎo)航欄，為了方便后續(xù)布局的搭建，創(chuàng)建一個(gè)底部導(dǎo)航欄的框架，修改主界面布局為，利用包裹標(biāo)題欄與界面內(nèi)容，將各界面內(nèi)容設(shè)置為，再用一個(gè)包裹底部導(dǎo)航欄，在內(nèi)部用三個(gè)來(lái)顯示三個(gè)按鈕具體代碼如下限定大小

底部導(dǎo)航欄布局 思路

本項(xiàng)目的主界面設(shè)計(jì)了底部導(dǎo)航欄，為了方便后續(xù)布局的搭建，創(chuàng)建一個(gè)底部導(dǎo)航欄UI的框架，修改主界面布局為 RelativeLayout ，利用 LinearLayout 包裹標(biāo)題欄與界面內(nèi)容，將各界面內(nèi)容設(shè)置為 FrameLayout ，再用一個(gè) LinearLayout 包裹底部導(dǎo)航欄，在內(nèi)部用三個(gè) RelativeLayout 來(lái)顯示三個(gè)按鈕

具體代碼如下：

activity_main.xml

底部導(dǎo)航欄邏輯 思路

首先需要為三個(gè)按鈕添加監(jiān)聽(tīng)事件，然后根據(jù)所在界面的不同，導(dǎo)航欄中的按鈕和文字切換不同狀態(tài)，在界面內(nèi)容也根據(jù)按鈕的選中狀態(tài)切換不同的界面

具體代碼如下：

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 {
    //界面內(nèi)容
    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;
    //標(biāo)題欄
    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();
    }

    /**
     * 設(shè)置初始選擇
     */
    private void setInitStatus() {
        clearBottomImageState();
        setSelectedStatus(0);
        createView(0);
    }

    /**
     * 為每個(gè)按鈕設(shè)置監(jiān)聽(tīng)方法
     */
    private void setListener() {
        for (int i = 0; i < mBottomLayout.getChildCount(); i++) {
            mBottomLayout.getChildAt(i).setOnClickListener(this);
        }
    }

    /**
     * 獲取底部導(dǎo)航欄上的控件
     */
    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("博學(xué)谷課程");
        rl_title_bar = (RelativeLayout) findViewById(R.id.title_bar);
        rl_title_bar.setBackgroundColor(Color.parseColor("#30B4FF"));
        tv_back.setVisibility(View.GONE);//不顯示返回按鈕
        initBodyLayout();

    }

    /**
     * 界面內(nèi)容
     */
    private void initBodyLayout() {
        mBodyLayout = (FrameLayout) findViewById(R.id.main_body);
    }

    /**
     * 控件的點(diǎn)擊事件
     * @param v
     */
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            //課程的點(diǎn)擊事件
            case R.id.bottom_bar_course_btn:
                clearBottomImageState();
                selectDisplayView(0);
                break;
            //習(xí)題的點(diǎn)擊事件
            case R.id.bottom_bar_exercises_btn:
                clearBottomImageState();
                selectDisplayView(1);
                break;
            //我的點(diǎn)擊事件
            case R.id.bottom_bar_myinfo_btn:
                clearBottomImageState();
                selectDisplayView(2);
                break;
            default:
                break;
        }
    }

    /**
     * 顯示對(duì)應(yīng)的頁(yè)面
     * @param i
     */
    private void selectDisplayView(int i) {
        removeAllView();
        createView(i);
        setSelectedStatus(i);
    }

    /**
     * 設(shè)置底部按鈕選中狀態(tà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("博學(xué)谷課程");
                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("博學(xué)谷習(xí)題");
                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:
                //習(xí)題界面
                break;
            case 2:
                //我的界面
                break;
        }
    }

    /**
     * 移除不需要的視圖
     */
    private void removeAllView() {
        for (int i = 0;i2000){//導(dǎo)入java.lang的包
                Toast.makeText(this,"再按一次退出博學(xué)谷",Toast.LENGTH_LONG).show();
                exitTime = System.currentTimeMillis();
            }else {
                MainActivity.this.finish();
                if (readLoginStatus()){
                    //如果退出此應(yīng)用時(shí)是登錄狀態(tài)，則需要清除登錄狀態(tài)，同時(shí)需清除登錄時(shí)的用戶名
                    clearLoginStatus();
                }
                System.exit(0);
            }
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

    /**
     * 清除SharedPreferences中的登錄狀態(tài)
     */
    private void clearLoginStatus() {
        SharedPreferences sp = getSharedPreferences("loginInfo", Context.MODE_PRIVATE);
        SharedPreferences.Editor editor = sp.edit();//獲取編輯器
        editor.putBoolean("isLogin", false);//清除登錄狀態(tài)
        editor.putString("loginUserName", "");//清除登錄時(shí)的用戶名
        editor.commit();//提交修改
    }

    /**
     * 獲取SharedPreferences中的登錄狀態(tài)
     * @return
     */
    private boolean readLoginStatus() {
        SharedPreferences sp = getSharedPreferences("loginInfo", Context.MODE_PRIVATE);
        boolean isLogin = sp.getBoolean("isLogin", false);
        return isLogin;
    }
}

運(yùn)行效果

云服務(wù)器 GPU云服務(wù)器 Android底部導(dǎo)航欄 Android底部導(dǎo)航 android 導(dǎo)航欄 android實(shí)戰(zhàn)項(xiàng)目

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/68116.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

余學(xué)文

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Akkocloud：鎮(zhèn)江AMD Ryzen高防獨(dú)立服務(wù)器549元/月（五線BGP，50G防御）

閱讀 1928·2021-09-14 18:03
使用這些 CSS 屬性選擇器來(lái)提高前端開(kāi)發(fā)效率！

閱讀 2321·2019-08-30 15:48
前端面試題-CSS優(yōu)先級(jí)

閱讀 1194·2019-08-30 14:09
HTML5中canvas實(shí)現(xiàn)小球擊打小方塊游戲

閱讀 579·2019-08-30 12:55
SASS詳解

閱讀 2794·2019-08-29 11:29
知曉推送正式上線！送你 13 億條模板消息

閱讀 1548·2019-08-26 13:43
JavaScript 是如何工作的：編寫(xiě)自己的 Web 開(kāi)發(fā)框架 + React 及其虛擬 DOM

閱讀 2371·2019-08-26 13:30
HTML之常用標(biāo)簽

閱讀 2434·2019-08-26 12:17

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

《Android項(xiàng)目實(shí)戰(zhàn)-博學(xué)谷》底部導(dǎo)航欄

相關(guān)文章

**《Android項(xiàng)目實(shí)戰(zhàn)-博學(xué)谷》我的模塊**

**《Android項(xiàng)目實(shí)戰(zhàn)-博學(xué)谷》設(shè)置部分**

發(fā)表評(píng)論

0條評(píng)論

余學(xué)文

男|高級(jí)講師

TA的文章

Akkocloud：鎮(zhèn)江AMD Ryzen高防獨(dú)立服務(wù)器549元/月（五線BGP，50G防御）

使用這些 CSS 屬性選擇器來(lái)提高前端開(kāi)發(fā)效率！

前端面試題-CSS優(yōu)先級(jí)

HTML5中canvas實(shí)現(xiàn)小球擊打小方塊游戲

SASS詳解

知曉推送正式上線！送你 13 億條模板消息

JavaScript 是如何工作的：編寫(xiě)自己的 Web 開(kāi)發(fā)框架 + React 及其虛擬 DOM

HTML之常用標(biāo)簽

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

《Android項(xiàng)目實(shí)戰(zhàn)-博學(xué)谷》底部導(dǎo)航欄

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！