Android 开发：（十四）NavigationBar篇-自定义顶部导航栏

本篇记录了navigation bar顶部导航栏的自定义方法，抛砖引玉，简单实现了常用的布局，在此基础上可添加较复杂的布局。

第一步：新建NavigationBar文件，继承与FrameLayout。

第二步：设置系统AppTheme为NoActionBar

在res/values目录下style.xml文件：

<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>

第三步： navigationbar.xml 布局

在navigationbar.xml文件中布局：
左边一个ImageView
中间TextView
右边一个ImageView

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#303f9f"
    android:gravity="center_vertical">
    
    <ImageView
        android:id="@+id/navigationbar_leftImage"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_margin="10dp" />
        
    <TextView
        android:id="@+id/navigationbar_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:textColor="@color/bg_white"
        android:textSize="20sp" />
        
    <ImageView
        android:id="@+id/navigationbar_rightImage"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_margin="10dp" />

</LinearLayout>

第四步： NavigationBar文件

调用xml布局，并实现NavigationBar协议方法。

    private TextView tvTitle;
    private ImageView leftImage;
    private ImageView rightImage;

    public NavigationBar(@NonNull Context context) {
        super(context);
        initView(context);
    }

    public NavigationBar(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

    public NavigationBar(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
    }

    private void initView(Context context) {
        View view = inflate(context, R.layout.navigationbar, this);
        tvTitle    = view.findViewById(R.id.navigationbar_title);
        leftImage  = view.findViewById(R.id.navigationbar_leftImage);
        rightImage = view.findViewById(R.id.navigationbar_rightImage);
    }

此时已完成navigationbar的创建，但是为了统一维护，便于管理，再添加几个封装方法，以实现不同需求。

第五步： 封装公共方法

1. title赋值

 public void setTitle(String title) {
        tvTitle.setText(title);
    }

2. 对左侧图片赋值

public void setLeftImage(Integer image) {
        leftImage.setBackgroundResource(image);
   }

3. 左侧图片并添加点击事件和title字体

 public void init(String title, boolean isLeftVisiable, OnClickListener leftListener){
 
        tvTitle.setText(title);
        if (isLeftVisiable){
            leftImage.setVisibility(VISIBLE);
            leftImage.setOnClickListener(leftListener);
        }else {
            leftImage.setVisibility(INVISIBLE);
        }
    }

4. 右侧图片赋值并添加点击事件

 public void rightTabBar(boolean isRightVisiable, Integer image,  OnClickListener rightListener){

        rightImage.setBackgroundResource(image);
        if (isRightVisiable){
            rightImage.setVisibility(VISIBLE);
            rightImage.setOnClickListener(rightListener);
        }else {
            rightImage.setVisibility(INVISIBLE);
        }
    }