Android自定义ActionBar标题栏

刚刚完成了第一个自定义view，来记录一下。
这是一个自定义标题栏控件，在开发过程中，我们必不可少的要去更改标题栏，但是很多页面都有标题栏，每个标题栏的文字，图标也不一样，如果每次都是去xml文件中进行修改会不会很麻烦或者有些累赘，因此，我做了一个自定义标题栏，说白了就是一个组合控件，下面我来说一下自定义标题栏的实现过程。

新建actionbar.xml文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp">

    <LinearLayout
        android:id="@+id/layout_back"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:layout_marginLeft="10dp">

        <ImageView
            android:id="@+id/image_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center" />
        <TextView
            android:id="@+id/tv_back"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textColor="#fff"
            android:textSize="18sp"/>

    LinearLayout>

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="#fff"
        android:textSize="18sp"/>

    <ImageView
        android:id="@+id/image_right_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:layout_centerVertical="true"/>

RelativeLayout>

在actionbar.xml文件中，左侧一个图标加文字，中间是标题，右侧一个图标，具体的内容都没有给出，这样的话，我们就可以在使用这个自定义控件的时候自己灵活定义了。接下来，是自定义标题栏的绘制过程。

新建ActionBarView.java文件

package com.example.zhaoxin.customview;

import android.app.Activity;
import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * Created by zhaoxin on 17/12/28.
 * 自定义标题栏组件
 */

public class ActionBarView extends FrameLayout {

    private LinearLayout mLayoutBack;// 左侧返回
    private ImageView mImageBack;// 左侧图标
    private TextView mTvBack;// 左侧文字
    private TextView mTvTitle;// 标题文字
    private ImageView mImageRightIcon;// 右侧图标

    public ActionBarView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        // 加载actionbar.xml文件
        LayoutInflater.from(context).inflate(R.layout.actionbar, this);
        // 获取组件
        mLayoutBack = findViewById(R.id.layout_back);
        mImageBack = findViewById(R.id.image_back);
        mTvBack = findViewById(R.id.tv_back);
        mTvTitle = findViewById(R.id.tv_title);
        mImageRightIcon = findViewById(R.id.image_right_icon);

        // 设置点击监听
        mLayoutBack.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                ((Activity) getContext()).finish();
            }
        });
    }

    /**
     * 设置返回图标
     *
     * @param resId
     */
    public void setBackImageResource(int resId) {
        mImageBack.setImageResource(resId);
    }

    /**
     * 设置返回按钮上的文字
     *
     * @param back 返回
     */
    public void setBackText(String back) {
        mTvBack.setText(back);
    }

    /**
     * 设置返回文字的颜色
     *
     * @param color getResources().getColor()
     */
    public void setBackTextColor(int color) {
        mTvBack.setTextColor(color);
    }

    /**
     * 设置标题栏上的文字
     *
     * @param title 标题
     */
    public void setTitleText(String title) {
        mTvTitle.setText(title);
    }

    /**
     * 设置标题的颜色
     *
     * @param color getResources().getColor()
     */
    public void setTitleTextColor(int color) {
        mTvTitle.setTextColor(color);
    }

    /**
     * 设置右侧图标
     *
     * @param resId
     */
    public void setRightIconResource(int resId) {
        mImageRightIcon.setImageResource(resId);
    }

    /**
     * 获得右侧图标
     *
     * @return 右侧图标实例
     */
    public ImageView getRightIcon() {
        return mImageRightIcon;
    }

    /**
     * 为返回添加点击事件
     *
     * @param listener
     */
    public void setBackClickListener(OnClickListener listener) {
        mLayoutBack.setOnClickListener(listener);
    }
}

这里提供了标题栏的修改方法，可以设置左侧图标、左侧文字、标题、文字颜色和右侧图标等等。接下来就是去使用这个自定义标题栏了。

新建activity.xml文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.zhaoxin.customview.ActionBarView
        android:id="@+id/action_bar_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#0085F2">
    com.example.zhaoxin.customview.ActionBarView>

RelativeLayout>

使用完整包名.类名将该view引入，在这里，通过定义background可以将该自定义view设置成任意颜色。然后，在MainActivty中就可以去设置具体的内容了。

MainActivity.java

package com.example.zhaoxin.customview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private ActionBarView mActionBarView;
    private ImageView mImageView;

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

        // 隐藏系统默认标题栏
        getSupportActionBar().hide();
        initActionBar();

    }

    /**
     * 初始化标题栏
     */
    private void initActionBar() {
        mActionBarView = (ActionBarView) findViewById(R.id.action_bar_view);
        mActionBarView.setBackText("返回");
        mActionBarView.setTitleText("标题");
        mImageView = mActionBarView.getRightIcon();
        mImageView.setImageResource(R.drawable.left_arrow);
        mImageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "hi", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

以上就是自定义标题栏的实现过程。