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

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

标签：

Android

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

这个自定义组合控件的写法是使用布局填充器（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@Overridepublic 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的高度值

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

处理监听事件

@Overrideprotected void onAttachedToWindow() {    super.onAttachedToWindow();    //设置监听
    mTitleView.setOnClickListener(this);
    mLeftView.setOnClickListener(this);
    mRightView.setOnClickListener(this);
}@Overrideprotected 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@Overridepublic 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行代码

作者：Android轮子哥
链接：https://www.jianshu.com/p/ccf6506335e7

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕标5832272

全栈工程师

手记
篇

粉丝

229

获赞与收藏

1001

关注作者，订阅最新文章

相关文章推荐

Android标题栏（TitleBar）绝

一个简单易用的 Android 导航栏TitleBar

如何打造一个标题栏

滑动隐藏标题栏布局ListView

几行代码实现Android通用标题栏（轻松向左右两侧添加Menu)

阅读免费教程

Android 入门教程

59个小节 43349 459

Android Studio 编辑器教程

40个小节 11770 240

后端通用面试教程

41个小节 30273 342

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

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

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

TitleBar布局解析

创建一个Builder

大功告成

相关文章推荐

阅读免费教程