Android自定义通用标题栏CustomTitleBar

下面是详细的Android自定义通用标题栏CustomTitleBar的攻略：

一、背景介绍

在很多Android应用中都会有通用的标题栏，包括应用名称、返回按钮、菜单按钮等等。这些通用的功能可以通过自定义通用标题栏来实现，这样不仅可以提高应用的美观程度，还可以增强用户的体验感。

二、实现方式

实现自定义通用标题栏有多种方式，这里介绍两种比较常用的方式。

1. 自定义 XML 文件实现

第一步，创建一个布局文件，命名为custom_title_bar.xml，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/custom_title"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary">

    <ImageButton
        android:id="@+id/btn_title_left"
        android:layout_width="?android:attr/actionBarSize"
        android:layout_height="?android:attr/actionBarSize"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:scaleType="centerInside"
        android:padding="@dimen/default_padding"
        android:src="@drawable/ic_keyboard_arrow_left_white_24dp"
        android:contentDescription="@string/back"
        />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="@android:color/white"
        android:textSize="@dimen/text_size_normal"
        android:text="@string/app_name"
        />

    <ImageButton
        android:id="@+id/btn_title_right"
        android:layout_width="?android:attr/actionBarSize"
        android:layout_height="?android:attr/actionBarSize"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:scaleType="centerInside"
        android:padding="@dimen/default_padding"
        android:src="@drawable/ic_menu_white_24dp"
        android:contentDescription="@string/menu"
        />

</RelativeLayout>

这里使用了RelativeLayout布局，包含了左边的返回按钮、中间的应用名称和右边的菜单按钮，注意在ImageButton中要设置android:background="?attr/selectableItemBackgroundBorderless"以便提高用户的体验。

第二步，将自定义的标题栏加入Activity中，代码如下：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
    getSupportActionBar().setCustomView(R.layout.custom_title_bar);
    getSupportActionBar().setElevation(0);
}

这里使用了AppCompat中的getSupportActionBar()方法获取ActionBar，并通过setDisplayOptions、setCustomView和setElevation方法实现自定义标题栏。

第三步，监听按钮事件，代码如下：

private void initTitleBar() {
    ImageButton btnLeft = findViewById(R.id.btn_title_left);
    btnLeft.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            finish();
        }
    });

    ImageButton btnRight = findViewById(R.id.btn_title_right);
    btnRight.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            showMenuPopup();
        }
    });
}

这里通过findViewById方法获取ImageButton的ID，并通过setOnClickListener监听按钮的点击事件，在点击事件中实现相应的逻辑。

2. 自定义 Java 类实现

第一步，创建一个自定义标题栏类CustomTitleBar，代码如下：

public class CustomTitleBar extends RelativeLayout {
    private ImageButton mBtnLeft;
    private TextView mTvTitle;
    private ImageButton mBtnRight;

    public CustomTitleBar(Context context) {
        super(context);
        initView(context);
    }

    public CustomTitleBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

    public CustomTitleBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
    }

    private void initView(Context context) {
        View view = LayoutInflater.from(context).inflate(R.layout.custom_title_bar, this);
        mBtnLeft = view.findViewById(R.id.btn_title_left);
        mTvTitle = view.findViewById(R.id.tv_title);
        mBtnRight = view.findViewById(R.id.btn_title_right);
    }

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

    public void setLeftButton(int resId, OnClickListener listener) {
        mBtnLeft.setImageResource(resId);
        mBtnLeft.setOnClickListener(listener);
    }

    public void setRightButton(int resId, OnClickListener listener) {
        mBtnRight.setImageResource(resId);
        mBtnRight.setOnClickListener(listener);
    }
}

这里通过继承RelativeLayout类，实现自定义标题栏的功能。使用了initView方法将自定义布局文件custom_title_bar.xml加入到CustomTitleBar中，并通过findViewById方法获取内部的ImageButton和TextView。

为了方便外部的Activity调用，提供了setTitle、setLeftButton和setRightButton三个方法，分别用于设置标题、设置左边的返回按钮和设置右边的菜单按钮。

第二步，将自定义标题栏加入Activity中，代码如下：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    CustomTitleBar customTitleBar = findViewById(R.id.title_bar_layout);
    customTitleBar.setTitle(getString(R.string.app_name));
    customTitleBar.setLeftButton(R.drawable.ic_keyboard_arrow_left_white_24dp, new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            finish();
        }
    });
    customTitleBar.setRightButton(R.drawable.ic_menu_white_24dp, new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            showMenuPopup();
        }
    });
}

这里通过findViewById方法获取自定义标题栏CustomTitleBar的ID，并使用setTitle、setLeftButton和setRightButton方法设置标题、左侧按钮和右侧按钮的图片和点击事件。

三、总结

通过以上两种方式的介绍，我们可以实现自定义通用标题栏。两种方式的实现方法不同，但是都可以实现相同的功能，在实际开发中可以根据自己的需要选择适合自己的实现方式。