1. 自定义导航栏
(1) 自定义导航栏布局 navigation_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#06a7e2">
<Button
android:id="@+id/btn_nav_back"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_margin="5dp"
android:background="@drawable/ic_back"/>
<TextView
android:id="@+id/tv_nav_titile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="自定义导航"
android:textColor="#ffffff"
android:textSize="20sp"/>
<Button
android:id="@+id/btn_nav_right"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_margin="5dp"
android:background="@drawable/ic_right"/>
</RelativeLayout>
备注：按钮的背景，这是使用的是矢量图，当然也可以是.png图片。
- ic_back.xml
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="1024"
android:viewportWidth="1024">
<path
android:fillColor="#ffffff"
android:pathData="M766.98,1021.95c-10.24,0 -20.48,-3.58 -28.67,-10.75L228.35,538.62c-15.87,-14.34 -15.87,-38.4 0,-52.74L738.3,13.31c15.87,-14.34 40.96,-14.34 56.83,0s15.87,38.4 0,52.74L313.86,512l481.28,445.95c15.87,14.34 15.87,38.4 0,52.74 -7.68,7.17 -17.92,11.26 -28.16,11.26z"/>
</vector>
- ic_right.xml
<vector android:height="24dp" android:viewportHeight="1024"
android:viewportWidth="1024" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#ffffff" android:pathData="M214.7,512m-87.44,0a85.45,85.45 0,1 0,174.88 0,85.45 85.45,0 1,0 -174.88,0Z"/>
<path android:fillColor="#ffffff" android:pathData="M809.3,512m-87.44,0a85.45,85.45 0,1 0,174.88 0,85.45 85.45,0 1,0 -174.88,0Z"/>
<path android:fillColor="#ffffff" android:pathData="M512.01,512m-87.44,0a85.45,85.45 0,1 0,174.88 0,85.45 85.45,0 1,0 -174.88,0Z"/>
</vector>
拓展：svg转xml。
(2) 自定义类NavigationView继承RelativeLayout
package comi.example.liy.view;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;
import comi.example.liy.mytestdemo.R;
/**
* Created by liy on 2019-12-16 10:38
* 自定义导航栏：在自定义TitleView类中为自定义标题栏加载了布局，为返回按钮添加事件监听方法，并提供了设置标题文本的方法
*/
public class NavigationView extends RelativeLayout{
private Button btnBack;//返回键
private TextView tvTitle;//标题
private Button btnRight;//右侧按钮
public NavigationView(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.navigation_bar,this,true);//加载布局
btnBack = findViewById(R.id.btn_nav_back);//获取控件
tvTitle = findViewById(R.id.tv_nav_titile);
btnRight = findViewById(R.id.btn_nav_right);
}
// 设置标题
public void setTitle(String title){
tvTitle.setText(title);
}
// 自定义左侧返回按钮的点击事件
public void setBackButtonOnListener(OnClickListener listener){
btnBack.setOnClickListener(listener);
}
// 自定义右侧按钮的点击事件
public void setRightButtonOnListener(OnClickListener listener){
btnRight.setOnClickListener(listener);
}
}
2. 使用自定义导航栏
(1) 在activity_home.xml中引入自定义的标题栏
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<comi.example.liy.view.NavigationView
android:id="@+id/home_navigation_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</comi.example.liy.view.NavigationView>
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"/>
</LinearLayout>
(2) 在HomeActivity中获取自定义的标题栏，并为返回按钮添加自定义点击事件
package comi.example.liy.mytestdemo;
import android.app.Activity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Toast;
import comi.example.liy.view.NavigationView;
/**
* Created by liy on 2019-12-16 11:01
*/
public class HomeActivity extends AppCompatActivity {
private NavigationView navigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
navigationView = findViewById(R.id.home_navigation_bar);
navigationView.setTitle("爱我中华");
navigationView.setBackButtonOnListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(HomeActivity.this,"点击了自定义导航栏的返回键",Toast.LENGTH_SHORT).show();
}
});
navigationView.setRightButtonOnListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(HomeActivity.this,"点击了自定义导航栏的右侧键",Toast.LENGTH_SHORT).show();
}
});
}
}
(3) 运行效果
运行效果.png
分析：系统导航未禁用，可通过设置系统的AppTheme为NoActionBar来解决。
res/values目录下style.xml文件：
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
改为
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
最终效果：
最终效果.png
这个导航栏控件还是比较简单的，左边一个返回按钮，中间是标题文字，右边也是一个按钮。可参考自定义导航栏的设计与使用(进阶)来对自定义导航栏进一步的封装。
网友评论