安卓开发，底部导航栏

XJSFDX_Ali2025-02-11 17:27

|----------------------------------------------------------------------------|----------------------------------------------------------------------------|----------------------------------------------------------------------------|
| | | |

1、创建导航栏图标

使用系统自带的矢量图库文件，鼠标右键点击res->New->Vector Asset

修改 Name , Clip art 和 Color

再创建一个

同样的方法再创建四个按钮

2、添加百分比布局依赖

app\build.gradle.kts 中添加百分比布局依赖，并点击Sync Now

XML 复制代码 
implementation("androidx.percentlayout:percentlayout:1.0.0")

3、创建三个Layout Resource File

1)home.xml

XML 复制代码 
<?xml version="1.0" encoding="utf-8"?>
<androidx.percentlayout.widget.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_heightPercent="7%"
        android:layout_alignParentTop="true"
        android:text="主页"
        android:textSize="15pt"
        android:gravity="center"
        android:textColor="@color/black"
        android:background="#F0E7D8"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_heightPercent="7%"
        android:layout_alignParentBottom="true"
        android:background="#F0E7D8">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <ImageButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#F0E7D8"
                android:src="@drawable/home_click"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="主页"
                android:gravity="center"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <ImageButton
                android:id="@+id/learn"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#F0E7D8"
                android:src="@drawable/learn"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="学习"
                android:gravity="center"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <ImageButton
                android:id="@+id/me"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#F0E7D8"
                android:src="@drawable/me"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="我"
                android:gravity="center"/>
        </LinearLayout>
    </LinearLayout>
</androidx.percentlayout.widget.PercentRelativeLayout>

2)learn.xml

XML 复制代码 
<?xml version="1.0" encoding="utf-8"?>
<androidx.percentlayout.widget.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_heightPercent="7%"
        android:layout_alignParentTop="true"
        android:text="学习"
        android:textSize="15pt"
        android:gravity="center"
        android:textColor="@color/black"
        android:background="#F0E7D8"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_heightPercent="7%"
        android:layout_alignParentBottom="true"
        android:background="#F0E7D8">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <ImageButton
                android:id="@+id/home"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#F0E7D8"
                android:src="@drawable/home"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="主页"
                android:gravity="center"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <ImageButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#F0E7D8"
                android:src="@drawable/learn_click"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="学习"
                android:gravity="center"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <ImageButton
                android:id="@+id/me"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#F0E7D8"
                android:src="@drawable/me"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="我"
                android:gravity="center"/>
        </LinearLayout>
    </LinearLayout>
</androidx.percentlayout.widget.PercentRelativeLayout>

3)me.xml

XML 复制代码 
<?xml version="1.0" encoding="utf-8"?>
<androidx.percentlayout.widget.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_heightPercent="7%"
        android:layout_alignParentTop="true"
        android:text="我"
        android:textSize="15pt"
        android:gravity="center"
        android:textColor="@color/black"
        android:background="#F0E7D8"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_heightPercent="7%"
        android:layout_alignParentBottom="true"
        android:background="#F0E7D8">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <ImageButton
                android:id="@+id/home"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#F0E7D8"
                android:src="@drawable/home"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="主页"
                android:gravity="center"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <ImageButton
                android:id="@+id/learn"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#F0E7D8"
                android:src="@drawable/learn"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="学习"
                android:gravity="center"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <ImageButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#F0E7D8"
                android:src="@drawable/me_click"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="我"
                android:gravity="center"/>
        </LinearLayout>
    </LinearLayout>
</androidx.percentlayout.widget.PercentRelativeLayout>

4、创建三个Java Class

1)Home.java

XML 复制代码 
package com.example.bottomnavigationbar;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import androidx.appcompat.app.AppCompatActivity;
public class Home extends AppCompatActivity {
    private ImageButton learn,me;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.home);
        learn = findViewById(R.id.learn);
        me = findViewById(R.id.me);
        learn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intentToLearn = new Intent(Home.this,Learn.class);
                startActivity(intentToLearn);
                overridePendingTransition(0, 0); // 取消转场动画
            }
        });
        me.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intentToMe = new Intent(Home.this,Me.class);
                startActivity(intentToMe);
                overridePendingTransition(0, 0); // 取消转场动画
            }
        });
    }
}

2)Learn.java

XML 复制代码 
package com.example.bottomnavigationbar;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
public class Learn extends AppCompatActivity {
    private ImageButton home,me;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.learn);
        home = findViewById(R.id.home);
        me = findViewById(R.id.me);
        home.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intentToLearn = new Intent(Learn.this,Home.class);
                startActivity(intentToLearn);
                overridePendingTransition(0, 0); // 取消转场动画
            }
        });
        me.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intentToMe = new Intent(Learn.this,Me.class);
                startActivity(intentToMe);
                overridePendingTransition(0, 0); // 取消转场动画
            }
        });
    }
}

3)Me.java

XML 复制代码 
package com.example.bottomnavigationbar;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
public class Me extends AppCompatActivity {
    private ImageButton home,learn;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.me);
        home = findViewById(R.id.home);
        learn = findViewById(R.id.learn);
        learn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intentToLearn = new Intent(Me.this,Learn.class);
                startActivity(intentToLearn);
                overridePendingTransition(0, 0); // 取消转场动画
            }
        });
        home.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intentToMe = new Intent(Me.this,Home.class);
                startActivity(intentToMe);
                overridePendingTransition(0, 0); // 取消转场动画
            }
        });
    }
}

5、AndroidManifest.xml

XML 复制代码 
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.BottomNavigationBar"
        tools:targetApi="31">
        <activity
            android:name=".Home"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".Learn"/>
        <activity android:name=".Me"/>
    </application>
</manifest>
相关推荐
wuminyu2 小时前
C++协程实现接收端的零拷贝Buffer管理原理剖析
java·linux·c语言·jvm·c++
m0_380743872 小时前
C++中的freopen的用法实例详解
开发语言·c++
半摆烂日常3 小时前
低代码平台API对接实践：接口鉴权与数据同步的完整实现
android·低代码·rxjava
Escalating_xu3 小时前
【Python】基础语法（1）：常量、变量、类型、输入输出与运算符
开发语言·python
事圆则缓3 小时前
volatile 使用场景全解析：它能保证什么，又解决不了什么
android
jimy13 小时前
polymorph.cpp里面的“析构函数、智能指针”问题
开发语言·c++
m0_380743873 小时前
PHP 8.3 缓存清除不生效怎么排查
开发语言·php
朝朝辞暮i4 小时前
C++ 第 6 课：switch —— 多状态选择
开发语言·c++·算法
小凡geo4 小时前
本地商家 GEO：用脚本一键生成 FAQPage 结构化数据，让 AI 切片更稳
开发语言·人工智能·python·microsoft·搜索引擎·ai
蒲公英内测分发4 小时前
智能投影仪参加海外展会，未上架的 Android 配套 App 怎么让客户限时试用？
android
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02历年考研数学一、数学二、数学三真题试卷及答案PDF03GitHub 镜像站点04Telegram APK 下载安装完整指南 — 2026年最新05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新072026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享08Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）09jev-ultrafast 深度解析：7 秒订机票的浏览器 Agent 是如何炼成的10给AI一张“业务概念地图“：本体如何从哲学走向企业智能