![]() | ![]() | ![]() |
1、创建导航栏图标
使用系统自带的矢量图库文件,鼠标右键点击res->New->Vector Asset
修改 Name , Clip art 和 Color
再创建一个
同样的方法再创建四个按钮
2、添加百分比布局依赖
app\build.gradle.kts 中添加百分比布局依赖,并点击Sync Now
implementation("androidx.percentlayout:percentlayout:1.0.0")
3、创建三个Layout Resource File
1)home.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 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 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
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
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
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 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>