安卓开发，底部导航栏

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>
相关推荐
NE_STOP16 小时前
Vide Coding--AI编程工具的选择
java
LDR00617 小时前
Type-C 快充全面升级！LDR6601 赋能个人护理便携电机，重塑剃须刀 / 理发器新体验
c语言·开发语言
雪碧聊技术17 小时前
Tree.js是什么？一文讲透
开发语言·javascript·ecmascript
码云数智-园园17 小时前
C++20 Modules 模块详解
java·开发语言·spring
程序员黑豆17 小时前
JDK 下载安装与配置详细教程
java·前端·ai编程
小宇宙Zz17 小时前
Maven依赖冲突
java·服务器·maven
swordbob17 小时前
NIO的channel中什么是 fd（File Descriptor，文件描述符）
java·开发语言·nio
咖啡八杯18 小时前
GoF设计模式——享元模式
java·spring·设计模式·享元模式
十五喵源码网18 小时前
基于springboot2+vue2的租房管理系统
java·毕业设计·springboot·论文笔记
摇滚侠18 小时前
IDEA 创建 Java 项目 手动整合 SSM 框架
java·ide·intellij-idea
热门推荐
012026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？022026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf03【AI】2026 年具身智能模型和世界模型总结042026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？052026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？06GitHub 镜像站点07AI科技热点日报 | 2026年6月1日08上线仅72小时被强制下架：Claude Fable 5 的短命09HTTP 与 HTTPS 的区别：从原理到实战详解10Codex 下载安装指南：Windows 和 macOS 官方版下载