純手工打造一個通用的標題欄TitleBar

時間  2019-11-17
標籤 手工 打造 一個 通用 標題欄 titlebar 简体版
原文   原文鏈接

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

首先看一個項目已經有標題欄

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

可是有沒有想過這樣一個問題，LayoutInflater須要經過XML解析再使用代碼初始化View的，若是咱們直接使用代碼初始化View呢？效率和性能是否是更好了？顯而易見固然就是了。github

  • 整容前（TitleActionBar）

  • 整容後（TitleBar）

有細心的同窗就會發現了第一張圖中的狀態欄顏色和Title的顏色明顯不搭，這是由於咱們使用了沉浸式狀態，而這個TitleActionBar對沉浸式狀態不是很友好，第二張圖就顯得比較友好了，接下來讓咱們用純手工編寫一個通用的TitleBar吧性能優化

TitleBar佈局解析

/**
 * 標題欄
 */
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);
    }
}
複製代碼

建立一個Builder

使用這個Builder構建一個LinearLayout，而後往LinearLayout添加三個TextView，最後將這個LinearLayout添加到TitleBar中app

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轉px
     */
    static int dp2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

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

初始化Viewide

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">
    <!-- 標題 -->
    <attr name="title" format="string" />
    <attr name="title_left" format="string"/>
    <attr name="title_right" format="string" />
    <!-- 圖標 -->
    <attr name="icon_left" format="reference" />
    <attr name="icon_right" format="reference" />
    <!-- 返回按鈕，默認開 -->
    <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>
複製代碼

初始化屬性樣式post

private void initStyle(AttributeSet attrs) {

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

    //標題設置

    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 {
        //若是當前上下文對象是Activity，就獲取Activity的標題
        if (getContext() instanceof Activity) {
            //獲取清單文件中的label屬性值
            CharSequence label = ((Activity) getContext()).getTitle();
            //若是Activity沒有設置label屬性，則默認會返回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));
    }

    // 圖標設置

    if (ta.hasValue(R.styleable.TitleBar_icon_left)) {
        setLeftIcon(getContext().getResources().getDrawable(ta.getResourceId(R.styleable.TitleBar_icon_left, 0)));
    } else {
        // 顯示返回圖標
        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)));
    }

    //文字顏色設置
    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));

    //文字大小設置
    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)));

    //背景設置
    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));

    //分割線設置
    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();

    //設置默認背景
    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() {
    //更新中間標題的內邊距，避免向左或者向右偏移
    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狀態
    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);
    }
}
複製代碼

這個有個地方須要特別注意的是：標題欄的默認標題是來自Activity在清單文件中的label屬性，爲何要那麼作呢，由於系統原生的ActionBar也是那麼作，這樣作的好處是能夠在清單文件中快速查找到須要的Activity，因此強烈建議你們那麼作性能

定義默認TitleBar的默認高度爲Action的高度值優化

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    //設置TitleBar默認的高度
    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);
    }
}
複製代碼

處理監聽事件

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

@Override
protected void onDetachedFromWindow() {
    //移除監聽
    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);
    }
}
複製代碼

大功告成

接下來讓咱們對比一組數據

類名 Java行數 XML行數 Layout數 View數 支持擴展 執行效率
TitleActionBar 386 74 4 5 不支持 通常
TitleBar 311 0 2 4 支持自定義 高
  • 整容前（TitleActionBar）須要：Java 386行代碼 + XML 74行代碼

  • 整容後（TitleBar）須要：純Java 311行代碼

控件的性能和代碼執行數有必定的關聯，可是最重要的是不須要再經過XML去解析，同時使用LayoutInflater會多出一層多餘的佈局嵌套（由於LayoutInflater最終會調用ViewGroup中的addView方法，具體詳情請查看源碼，這裏再也不細說）

應用的標題欄是咱們十分經常使用的控件，也是APP最重要的UI控件之一，標題欄的優化關乎整個APP，由於每一個界面幾乎都會使用到這個控件，因此更應該作好性能優化

點此下載Demo，最後記得點贊 + Star

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程