纯手工打造一个通用的标题栏TitleBar

2018-08-17 本文已影响734人 Android轮子哥

Github传送地址，欢迎Star，Pull及issue

首先看一个项目已经有标题栏

这个自定义组合控件的写法是使用布局填充器（LayoutInflater）初始化XML布局

但是有没有想过这样一个问题，LayoutInflater需要通过XML解析再使用代码初始化View的，如果我们直接使用代码初始化View呢？效率和性能是不是更好了？显而易见当然就是了。

整容前（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中

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);
    }
}

初始化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">
    <!-- 标题 -->
    <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>

初始化属性样式

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，因为每个界面几乎都会使用到这个控件，所以更应该做好性能优化

纯手工打造一个通用的标题栏TitleBar

首先看一个项目已经有标题栏

TitleBar布局解析

创建一个Builder

大功告成

点此下载Demo，最后记得点赞 + Star

猜你喜欢

热点阅读