安卓开发，底部导航栏

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>
相关推荐
风往哪边走8 分钟前
Media3在线本地视频播放器
android
激昂网络13 分钟前
android kernel代码 common-android13-5.15 下载 编译
android·大数据·elasticsearch
Monkey-旭13 分钟前
Android 人脸识别技术全解析
android·android 人脸识别·ml kit 实战·活体检测技术·人脸识别性能优化·人脸考勤系统·移动端人脸特征提取
UserNamezhangxi23 分钟前
kotlin 协程笔记
java·笔记·kotlin·协程
咖啡里的茶i32 分钟前
数字化图书管理系统设计实践(java)
java·课程设计
疯狂的代M夫43 分钟前
C++对象的内存布局
开发语言·c++
vivo互联网技术1 小时前
桌面挂件不能承受之重——GIF
android·gif加载·桌面挂件
九转苍翎1 小时前
Java内功修炼(2)——线程安全三剑客：synchronized、volatile与wait/notify
java·thread
曲莫终1 小时前
正则表达式删除注释和多余换航
java·kotlin
热门推荐
01UV安装并设置国内源02DeepSeek更新！速览DeepSeek V3.1新特性03Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code04KGG转MP3工具|非KGM文件|解密音频05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）072025最新国内服务器可用docker源仓库地址大全（2025年8月更新）08Spring 调试终于不再痛苦了09TRAE 规则（Rules）配置指南：个人习惯、团队规范与最佳实践10Claude Code VSCode集成开发指南：AI编程助手完整配置