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

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

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

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

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

具體代碼如下：

activity_main.xml

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

首先需要為三個按鈕添加監(jiān)聽事件，然后根據(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);
    }

    /**
     * 為每個按鈕設(shè)置監(jiān)聽方法
     */
    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);
    }

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

    /**
     * 顯示對應(yīng)的頁面
     * @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)用時是登錄狀態(tài)，則需要清除登錄狀態(tài)，同時需清除登錄時的用戶名
                    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", "");//清除登錄時的用戶名
        editor.commit();//提交修改
    }

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

運行效果

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/68116.html

發(fā)表評論

登陸后可評論

0條評論

余學(xué)文

男|高級講師

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

TA的文章

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

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

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

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

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

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

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

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

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

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

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

發(fā)表評論

0條評論

余學(xué)文

男|高級講師

TA的文章

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

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

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

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

SASS詳解

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

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

HTML之常用標(biāo)簽

最新活動

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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