純手工打造一個(gè)通用的標(biāo)題欄TitleBar

Github傳送地址，歡迎Star，Pull及issue

首先看一個(gè)項(xiàng)目已經(jīng)有標(biāo)題欄

這個(gè)自定義組合控件的寫(xiě)法是使用布局填充器（LayoutInflater）初始化XML布局

但是有沒(méi)有想過(guò)這樣一個(gè)問(wèn)題，LayoutInflater需要通過(guò)XML解析再使用代碼初始化View的，如果我們直接使用代碼初始化View呢？效率和性能是不是更好了？顯而易見(jiàn)當(dāng)然就是了。

  • 整容前（TitleActionBar）
  • 整容后（TitleBar）

有細(xì)心的同學(xué)就會(huì)發(fā)現(xiàn)了第一張圖中的狀態(tài)欄顏色和Title的顏色明顯不搭，這是因?yàn)槲覀兪褂昧顺两綘顟B(tài)，而這個(gè)TitleActionBar對(duì)沉浸式狀態(tài)不是很友好，第二張圖就顯得比較友好了，接下來(lái)讓我們用純手工編寫(xiě)一個(gè)通用的TitleBar吧

TitleBar布局解析

/**
 * 標(biāo)題欄
 */
public class TitleBar extends FrameLayout {

    public TitleBar(Context context) {
        this(context, null, 0);
    }

    public TitleBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

創(chuàng)建一個(gè)Builder

使用這個(gè)Builder構(gòu)建一個(gè)LinearLayout，然后往LinearLayout添加三個(gè)TextView，最后將這個(gè)LinearLayout添加到TitleBar中

static class Builder {

    private LinearLayout mMainLayout;
    private TextView mLeftView;
    private TextView mTitleView;
    private TextView mRightView;

    private View mLineView;

    Builder(Context context) {
        mMainLayout = new LinearLayout(context);
        mMainLayout.setOrientation(LinearLayout.HORIZONTAL);
        mMainLayout.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));

        mLeftView = new TextView(context);
        mLeftView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT));
        mLeftView.setPadding(Builder.dp2px(context, 15), 0, Builder.dp2px(context, 15), 0);
        mLeftView.setCompoundDrawablePadding(Builder.dp2px(context, 5));
        mLeftView.setGravity(Gravity.CENTER_VERTICAL);
        mLeftView.setSingleLine();
        mLeftView.setEllipsize(TextUtils.TruncateAt.END);
        mLeftView.setEnabled(false);

        mTitleView = new TextView(context);
        LinearLayout.LayoutParams titleParams = new LinearLayout.LayoutParams(1, ViewGroup.LayoutParams.MATCH_PARENT);
        titleParams.weight = 1;
        titleParams.leftMargin = Builder.dp2px(context, 10);
        titleParams.rightMargin = Builder.dp2px(context, 10);
        mTitleView.setLayoutParams(titleParams);
        mTitleView.setGravity(Gravity.CENTER);
        mTitleView.setSingleLine();
        mTitleView.setEllipsize(TextUtils.TruncateAt.END);
        mTitleView.setEnabled(false);

        mRightView = new TextView(context);
        mRightView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT));
        mRightView.setPadding(Builder.dp2px(context, 15), 0, Builder.dp2px(context, 15), 0);
        mRightView.setCompoundDrawablePadding(Builder.dp2px(context, 5));
        mRightView.setGravity(Gravity.CENTER_VERTICAL);
        mRightView.setSingleLine();
        mRightView.setEllipsize(TextUtils.TruncateAt.END);
        mRightView.setEnabled(false);

        mLineView = new View(context);
        FrameLayout.LayoutParams lineParams = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 1);
        lineParams.gravity = Gravity.BOTTOM;
        mLineView.setLayoutParams(lineParams);
    }

    LinearLayout getMainLayout() {
        return mMainLayout;
    }

    View getLineView() {
        return mLineView;
    }

    TextView getLeftView() {
        return mLeftView;
    }

    TextView getTitleView() {
        return mTitleView;
    }

    TextView getRightView() {
        return mRightView;
    }

    /**
     * 獲取ActionBar的高度
     */
    static int getActionBarHeight(Context context) {
        TypedArray ta = context.obtainStyledAttributes(new int[]{android.R.attr.actionBarSize});
        int actionBarSize = (int) ta.getDimension(0, 0);
        ta.recycle();
        return actionBarSize;
    }

    /**
     * dp轉(zhuǎn)px
     */
    static int dp2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    /**
     * sp轉(zhuǎn)px
     */
    static int sp2px(Context context, float spValue) {
        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
        return (int) (spValue * fontScale + 0.5f);
    }
}

初始化View

private LinearLayout mMainLayout;
private TextView mLeftView;
private TextView mTitleView;
private TextView mRightView;

private View mLineView;

private void initView(Context context) {
    Builder builder = new Builder(context);
    mMainLayout = builder.getMainLayout();
    mLineView = builder.getLineView();
    mTitleView = builder.getTitleView();
    mLeftView = builder.getLeftView();
    mRightView = builder.getRightView();

    mMainLayout.addView(mLeftView);
    mMainLayout.addView(mTitleView);
    mMainLayout.addView(mRightView);

    addView(mMainLayout, 0);
    addView(mLineView, 1);
}

定義一些屬性值

<declare-styleable name="TitleBar">
    <!-- 標(biāo)題 -->
    <attr name="title" format="string" />
    <attr name="title_left" format="string"/>
    <attr name="title_right" format="string" />
    <!-- 圖標(biāo) -->
    <attr name="icon_left" format="reference" />
    <attr name="icon_right" format="reference" />
    <!-- 返回按鈕，默認(rèn)開(kāi) -->
    <attr name="icon_back" format="boolean" />
    <!-- 文字顏色 -->
    <attr name="color_title" format="color" />
    <attr name="color_right" format="color" />
    <attr name="color_left" format="color" />
    <!-- 文字大小 -->
    <attr name="size_title" format="dimension" />
    <attr name="size_right" format="dimension" />
    <attr name="size_left" format="dimension" />
    <!-- 按鈕背景 -->
    <attr name="background_left" format="reference|color" />
    <attr name="background_right" format="reference|color" />
    <!-- 分割線 -->
    <attr name="line" format="boolean" />
    <attr name="color_line" format="color" />
</declare-styleable>

初始化屬性樣式

private void initStyle(AttributeSet attrs) {

    TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.TitleBar);

    //標(biāo)題設(shè)置

    if (ta.hasValue(R.styleable.TitleBar_title_left)) {
        setLeftTitle(ta.getString(R.styleable.TitleBar_title_left));
    }

    if (ta.hasValue(R.styleable.TitleBar_title)) {
        setTitle(ta.getString(R.styleable.TitleBar_title));
    } else {
        //如果當(dāng)前上下文對(duì)象是Activity，就獲取Activity的標(biāo)題
        if (getContext() instanceof Activity) {
            //獲取清單文件中的label屬性值
            CharSequence label = ((Activity) getContext()).getTitle();
            //如果Activity沒(méi)有設(shè)置label屬性，則默認(rèn)會(huì)返回APP名稱(chēng)，需要過(guò)濾掉
            if (label != null && !label.toString().equals("")) {

                try {
                    PackageManager packageManager = getContext().getPackageManager();
                    PackageInfo packageInfo = packageManager.getPackageInfo(
                            getContext().getPackageName(), 0);

                    if (!label.toString().equals(packageInfo.applicationInfo.loadLabel(packageManager).toString())) {
                        setTitle(label);
                    }
                } catch (PackageManager.NameNotFoundException ignored) {}
            }
        }
    }

    if (ta.hasValue(R.styleable.TitleBar_title_right)) {
        setRightTitle(ta.getString(R.styleable.TitleBar_title_right));
    }

    // 圖標(biāo)設(shè)置

    if (ta.hasValue(R.styleable.TitleBar_icon_left)) {
        setLeftIcon(getContext().getResources().getDrawable(ta.getResourceId(R.styleable.TitleBar_icon_left, 0)));
    } else {
        // 顯示返回圖標(biāo)
        if (ta.getBoolean(R.styleable.TitleBar_icon_back, true)) {
            setLeftIcon(getContext().getResources().getDrawable(R.mipmap.ico_back_black));
        }
    }

    if (ta.hasValue(R.styleable.TitleBar_icon_right)) {
        setRightIcon(getContext().getResources().getDrawable(ta.getResourceId(R.styleable.TitleBar_icon_right, 0)));
    }

    //文字顏色設(shè)置
    mLeftView.setTextColor(ta.getColor(R.styleable.TitleBar_color_left, 0xFF666666));
    mTitleView.setTextColor(ta.getColor(R.styleable.TitleBar_color_title, 0xFF222222));
    mRightView.setTextColor(ta.getColor(R.styleable.TitleBar_color_right, 0xFFA4A4A4));

    //文字大小設(shè)置
    mLeftView.setTextSize(TypedValue.COMPLEX_UNIT_PX, ta.getDimensionPixelSize(R.styleable.TitleBar_size_left, Builder.sp2px(getContext(), 14)));
    mTitleView.setTextSize(TypedValue.COMPLEX_UNIT_PX, ta.getDimensionPixelSize(R.styleable.TitleBar_size_title, Builder.sp2px(getContext(), 16)));
    mRightView.setTextSize(TypedValue.COMPLEX_UNIT_PX, ta.getDimensionPixelSize(R.styleable.TitleBar_size_right, Builder.sp2px(getContext(), 14)));

    //背景設(shè)置
    mLeftView.setBackgroundResource(ta.getResourceId(R.styleable.TitleBar_background_left, R.drawable.selector_selectable_transparent));
    mRightView.setBackgroundResource(ta.getResourceId(R.styleable.TitleBar_background_right, R.drawable.selector_selectable_transparent));

    //分割線設(shè)置
    mLineView.setVisibility(ta.getBoolean(R.styleable.TitleBar_line, true) ? View.VISIBLE : View.GONE);
    mLineView.setBackgroundColor(ta.getColor(R.styleable.TitleBar_color_line, 0xFFECECEC));

    //回收TypedArray
    ta.recycle();

    //設(shè)置默認(rèn)背景
    if (getBackground() == null) {
        setBackgroundColor(0xFFFFFFFF);
    }
}

public void setTitle(CharSequence text) {
    mTitleView.setText(text);
    postDelayed(this, 100);
}

public void setLeftTitle(CharSequence text) {
    mLeftView.setText(text);
    postDelayed(this, 100);
}

public void setRightTitle(CharSequence text) {
    mRightView.setText(text);
    postDelayed(this, 100);
}

public void setLeftIcon(Drawable drawable) {
    mLeftView.setCompoundDrawablesWithIntrinsicBounds(drawable, null, null, null);
    postDelayed(this, 100);
}

public void setRightIcon(Drawable drawable) {
    mRightView.setCompoundDrawablesWithIntrinsicBounds(null, null, drawable, null);
    postDelayed(this, 100);
}

// Runnable

@Override
public void run() {
    //更新中間標(biāo)題的內(nèi)邊距，避免向左或者向右偏移
    int leftSize = mLeftView.getWidth();
    int rightSize = mRightView.getWidth();
    if (leftSize != rightSize) {
        if (leftSize > rightSize) {
            mTitleView.setPadding(0, 0, leftSize - rightSize, 0);
        } else {
            mTitleView.setPadding(rightSize - leftSize, 0, 0, 0);
        }
    }

    //更新View狀態(tài)
    if (!"".equals(mLeftView.getText().toString()) || mLeftView.getCompoundDrawables()[0] != null) {
        mLeftView.setEnabled(true);
    }
    if (!"".equals(mTitleView.getText().toString())) {
        mTitleView.setEnabled(true);
    }
    if (!"".equals(mRightView.getText().toString()) || mRightView.getCompoundDrawables()[2] != null) {
        mRightView.setEnabled(true);
    }
}

這個(gè)有個(gè)地方需要特別注意的是：標(biāo)題欄的默認(rèn)標(biāo)題是來(lái)自Activity在清單文件中的label屬性，為什么要那么做呢，因?yàn)橄到y(tǒng)原生的ActionBar也是那么做，這樣做的好處是可以在清單文件中快速查找到需要的Activity，所以強(qiáng)烈建議大家那么做

定義默認(rèn)TitleBar的默認(rèn)高度為Action的高度值

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    //設(shè)置TitleBar默認(rèn)的高度
    if (MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.AT_MOST || MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.UNSPECIFIED) {
        super.onMeasure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(Builder.getActionBarHeight(getContext()), MeasureSpec.EXACTLY));
    } else {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
}

處理監(jiān)聽(tīng)事件

@Override
protected void onAttachedToWindow() {
    super.onAttachedToWindow();
    //設(shè)置監(jiān)聽(tīng)
    mTitleView.setOnClickListener(this);
    mLeftView.setOnClickListener(this);
    mRightView.setOnClickListener(this);
}

@Override
protected void onDetachedFromWindow() {
    //移除監(jiān)聽(tīng)
    mTitleView.setOnClickListener(null);
    mLeftView.setOnClickListener(null);
    mRightView.setOnClickListener(null);
    super.onDetachedFromWindow();
}

public void setOnTitleBarListener(OnTitleBarListener l) {
    mListener = l;
}

public interface OnTitleBarListener {

    void onLeftClick(View v);

    void onTitleClick(View v);

    void onRightClick(View v);
}

// View.OnClickListener

@Override
public void onClick(View v) {
    if (mListener == null) return;

    if (v == mLeftView) {
        mListener.onLeftClick(v);
    }else if (v == mTitleView) {
        mListener.onTitleClick(v);
    }else if (v == mRightView) {
        mListener.onRightClick(v);
    }
}

大功告成

接下來(lái)讓我們對(duì)比一組數(shù)據(jù)

類(lèi)名 Java行數(shù) XML行數(shù) Layout數(shù) View數(shù) 支持?jǐn)U展 執(zhí)行效率
TitleActionBar 386 74 4 5 不支持 一般
TitleBar 311 0 2 4 支持自定義 高
  • 整容前（TitleActionBar）需要：Java 386行代碼 + XML 74行代碼
  • 整容后（TitleBar）需要：純Java 311行代碼

控件的性能和代碼執(zhí)行數(shù)有一定的關(guān)聯(lián)，但是最重要的是不需要再通過(guò)XML去解析，同時(shí)使用LayoutInflater會(huì)多出一層多余的布局嵌套（因?yàn)長(zhǎng)ayoutInflater最終會(huì)調(diào)用ViewGroup中的addView方法，具體詳情請(qǐng)查看源碼，這里不再細(xì)說(shuō)）

應(yīng)用的標(biāo)題欄是我們十分常用的控件，也是APP最重要的UI控件之一，標(biāo)題欄的優(yōu)化關(guān)乎整個(gè)APP，因?yàn)槊總€(gè)界面幾乎都會(huì)使用到這個(gè)控件，所以更應(yīng)該做好性能優(yōu)化

點(diǎn)此下載Demo，最后記得點(diǎn)贊 + Star

Android 技術(shù)討論 Q 群：10047167

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容