安卓开发,底部导航栏

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

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>
相关推荐
雨白17 分钟前
发送自定义广播
android
Mikhail_G23 分钟前
Python应用变量与数据类型
大数据·运维·开发语言·python·数据分析
BillKu24 分钟前
Java + Spring Boot + Mybatis 插入数据后,获取自增 id 的方法
java·tomcat·mybatis
全栈凯哥25 分钟前
Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II(Linked List Cycle II)详解
java·算法·leetcode·链表
chxii26 分钟前
12.7Swing控件6 JList
java
全栈凯哥28 分钟前
Java详解LeetCode 热题 100(27):LeetCode 21. 合并两个有序链表(Merge Two Sorted Lists)详解
java·算法·leetcode·链表
YuTaoShao28 分钟前
Java八股文——集合「List篇」
java·开发语言·list
PypYCCcccCc33 分钟前
支付系统架构图
java·网络·金融·系统架构
华科云商xiao徐1 小时前
Java HttpClient实现简单网络爬虫
java·爬虫
雨白1 小时前
深入理解广播机制 (BroadcastReceiver)
android