自定义导航栏的设计与使用(进阶)

1. 自定义导航栏

(1) 自定义导航栏布局 navigation_bar.xml

备注：按钮的背景，这是使用的是矢量图，当然也可以是.png图片。

• ic_back.xml

• ic_right.xml

拓展：svg转xml。
(2) 自定义类NavigationView继承RelativeLayout并实现OnClickListener接口

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 implements View.OnClickListener {

    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);//获取控件
        btnBack.setOnClickListener(this);
        tvTitle = findViewById(R.id.tv_nav_titile);
        btnRight = findViewById(R.id.btn_nav_right);
        btnRight.setOnClickListener(this);

    }

    // 设置标题
    public void setTitle(String title){
        tvTitle.setText(title);
    }


    /*// 自定义左侧返回按钮的点击事件
    public void setBackButtonOnListener(OnClickListener listener){
        btnBack.setOnClickListener(listener);
    }

    // 自定义右侧按钮的点击事件
    public void setRightButtonOnListener(OnClickListener listener){
        btnRight.setOnClickListener(listener);
    }*/

    /**
     * 导航栏点击回调接口(如若需要标题可点击,可再添加)
     */
    public static interface ClickCallback{
        void onBackClick();
        void onRightClick();
    }

    //设置按钮点击回调接口
    private ClickCallback callback;
    public void setClickCallback(ClickCallback callback) {
        this.callback = callback;
    }

    @Override
    public void onClick(View v) {
        int id = v.getId();
        switch (id){
            case R.id.btn_nav_back:
                callback.onBackClick();
                return;
            case R.id.btn_nav_right:
                callback.onRightClick();
                return;
            default:
                return;
        }
    }
}

2. 使用自定义导航栏

(1) 在activity_home.xml中引入自定义的标题栏

(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();
            }
        });*/
        navigationView.setClickCallback(new NavigationView.ClickCallback() {
            @Override
            public void onBackClick() {
                Toast.makeText(HomeActivity.this,"点击了自定义导航栏的返回键", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onRightClick() {
                Toast.makeText(HomeActivity.this,"点击了自定义导航栏的右侧键",Toast.LENGTH_SHORT).show();
            }
        });
    }


}

(3) 设置系统的AppTheme为NoActionBar

(4) 运行效果

最终效果.png

拓展：Android自定义View的实现。