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

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

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

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

但是有沒有想過這樣一個問題，LayoutInflater需要通過XML解析再使用代碼初始化View的瓶堕，如果我們直接使用代碼初始化View呢雕薪？效率和性能是不是更好了？顯而易見當(dāng)然就是了拥刻。

整容前（TitleActionBar）

整容后（TitleBar）

有細(xì)心的同學(xué)就會發(fā)現(xiàn)了第一張圖中的狀態(tài)欄顏色和Title的顏色明顯不搭，這是因為我們使用了沉浸式狀態(tài)父泳，而這個TitleActionBar對沉浸式狀態(tài)不是很友好般哼，第二張圖就顯得比較友好了，接下來讓我們用純手工編寫一個通用的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)建一個Builder

使用這個Builder構(gòu)建一個LinearLayout惠窄，然后往LinearLayout添加三個TextView蒸眠，最后將這個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)開 -->
    <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)前上下文對象是Activity杆融，就獲取Activity的標(biāo)題
        if (getContext() instanceof Activity) {
            //獲取清單文件中的label屬性值
            CharSequence label = ((Activity) getContext()).getTitle();
            //如果Activity沒有設(shè)置label屬性楞卡，則默認(rèn)會返回APP名稱，需要過濾掉
            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);
    }
}

這個有個地方需要特別注意的是：標(biāo)題欄的默認(rèn)標(biāo)題是來自Activity在清單文件中的label屬性蒋腮，為什么要那么做呢淘捡，因為系統(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)聽事件

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

@Override
protected void onDetachedFromWindow() {
    //移除監(jiān)聽
    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);
    }
}

大功告成

接下來讓我們對比一組數(shù)據(jù)

類名	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)案淋，但是最重要的是不需要再通過XML去解析，同時使用LayoutInflater會多出一層多余的布局嵌套（因為LayoutInflater最終會調(diào)用ViewGroup中的addView方法险绘，具體詳情請查看源碼，這里不再細(xì)說）

應(yīng)用的標(biāo)題欄是我們十分常用的控件誉碴，也是APP最重要的UI控件之一宦棺，標(biāo)題欄的優(yōu)化關(guān)乎整個APP，因為每個界面幾乎都會使用到這個控件黔帕，所以更應(yīng)該做好性能優(yōu)化

點此下載Demo代咸，最后記得點贊 + Star

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

最后編輯于：2022.02.09 18:38:22

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市成黄，隨后出現(xiàn)的幾起案子呐芥，更是在濱河造成了極大的恐慌，老刑警劉巖奋岁，帶你破解...
沈念sama閱讀 218,682評論 6贊 507
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件思瘟，死亡現(xiàn)場離奇詭異，居然都是意外死亡闻伶，警方通過查閱死者的電腦和手機(jī)滨攻，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,277評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來蓝翰，“玉大人光绕，你說我怎么就攤上這事⌒蠓荩” “怎么了诞帐？”我有些...
開封第一講書人閱讀 165,083評論 0贊 355
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長爆雹。經(jīng)常有香客問我停蕉，道長，這世上最難降的妖魔是什么顶别？我笑而不...
開封第一講書人閱讀 58,763評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任谷徙，我火速辦了婚禮，結(jié)果婚禮上驯绎，老公的妹妹穿的比我還像新娘完慧。我一直安慰自己，他們只是感情好剩失，可當(dāng)我...
茶點故事閱讀 67,785評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布屈尼。她就那樣靜靜地躺著册着，像睡著了一般。火紅的嫁衣襯著肌膚如雪脾歧。梳的紋絲不亂的頭發(fā)上甲捏，一...
開封第一講書人閱讀 51,624評論 1贊 305
城市分裂傳說
那天，我揣著相機(jī)與錄音鞭执，去河邊找鬼司顿。笑死，一個胖子當(dāng)著我的面吹牛兄纺，可吹牛的內(nèi)容都是我干的大溜。我是一名探鬼主播，決...
沈念sama閱讀 40,358評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼估脆，長吁一口氣：“原來是場噩夢啊……” “哼钦奋！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起疙赠，我...
開封第一講書人閱讀 39,261評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤付材，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后圃阳，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體厌衔，經(jīng)...
沈念sama閱讀 45,722評論 1贊 315
?護(hù)林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,900評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年限佩，在試婚紗的時候發(fā)現(xiàn)自己被綠了葵诈。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 40,030評論 1贊 350
活死人
序言：一個原本活蹦亂跳的男人離奇死亡祟同，死狀恐怖作喘，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情晕城，我是刑警寧澤泞坦，帶...
沈念sama閱讀 35,737評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站砖顷，受9級特大地震影響贰锁，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜滤蝠，卻給世界環(huán)境...
茶點故事閱讀 41,360評論 3贊 330
男人毒藥：我在死后第九天來索命
文/蒙蒙一豌熄、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧物咳，春花似錦锣险、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,941評論 0贊 22
一樁弒父案芯肤，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽巷折。三九已至，卻和暖如春崖咨，著一層夾襖步出監(jiān)牢的瞬間锻拘，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,057評論 1贊 270
情欲美人皮
我被黑心中介騙來泰國打工击蹲，沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留署拟，地道東北人。一個月前我還...
沈念sama閱讀 48,237評論 3贊 371
代替公主和親
正文我出身青樓歌豺，卻偏偏與公主長得像芯丧，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子世曾，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 44,976評論 2贊 355

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

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

TitleBar布局解析

創(chuàng)建一個Builder

大功告成

點此下載Demo代咸，最后記得點贊 + Star

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

推薦閱讀更多精彩內(nèi)容