实现一个高度可定制化的Titlebar

最新推荐文章于 2021-05-26 05:54:50 发布
最新推荐文章于 2021-05-26 05:54:50 发布
阅读量392 收藏
点赞数
分类专栏： Android 文章标签： android开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxy594328762/article/details/78216056
版权

在android开发中，TItleBar 应该算是使用频率最高的控件之一了，虽然google也给开发者们提供了好用的ToolBar，但是鉴于目前国内一切向ios看齐的android开发环境，我们拿到的设计稿往往都是按照ios风格来设计的，当然一般公司的设计师不可能给android和ios各设计一套UI，所以…希望国内的android环境越来越好吧…

之前也在到处找过别人实现好的Titlebar控件，但是没有发现很合适的，那么就自己来造一个轮子吧！

一般项目所需要的Titlebar总结起来有以下这么几种：

  • 返回键、title、右侧菜单
  • 返回键、搜索框、右侧菜单
  • “返回”字样(带图标或者不带图标)、title或者搜索框、图标菜单或者文字“菜单”
  • 图标和文字的大小、颜色、padding值、排版等等

接下来我们就来自定义一个满足上述需求的通用Titlebar.

1.定义titlebar的布局

采用权重的方式，合理分配屏幕空间，为了满足需求多样化而使用多个控件，控制显隐状态。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="50dp"
              android:orientation="horizontal"
              android:weightSum="7">

    <RelativeLayout
        android:id="@+id/view_left"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <TextView
            android:id="@+id/tv_title_left"
            android:gravity="center"
            android:padding="5dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <ImageView
            android:id="@+id/iv_title_left"
            android:padding="10dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/view_title"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="5">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textSize="20sp"/>

        <EditText
            android:id="@+id/et_title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="8dp"
            android:drawablePadding="10dp"
            android:padding="0dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"/>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/view_right"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <TextView
            android:id="@+id/tv_title_right"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="5dp"
            android:gravity="center"/>

        <ImageView
            android:id="@+id/iv_title_right"
            android:padding="10dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </RelativeLayout>

</LinearLayout>

2.自定义样式列表

自定义一些必要的可扩展属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="common_title_bar">
        <!--标题栏高度-->
        <attr name="title_bar_height" format="dimension|reference"/>
        <!--标题栏整体背景-->
        <attr name="title_bar_background" format="color|reference"/>

        <!--左侧View容器是否显示-->
        <attr name="left_view_visibility" format="boolean"/>
        <!--左侧TextView是否显示-->
        <attr name="left_textView_visibility" format="boolean"/>
        <!--左侧ImageView是否显示-->
        <attr name="left_imageView_visibility" format="boolean"/>
        <!--左侧View容器背景色-->
        <attr name="left_view_background" format="color|reference"/>
        <!--返回键文字-->
        <attr name="left_text" format="string|dimension"/>
        <!--返回键TextView左侧图标-->
        <attr name="left_textView_drawable" format="reference"/>
        <!--返回键文字字号-->
        <attr name="left_text_size" format="dimension|reference"/>
        <!--返回键文字颜色-->
        <attr name="left_text_color" format="color|reference"/>
        <!--返回键TextView背景色-->
        <attr name="left_textView_background" format="color|reference"/>

        <!--返回键图标-->
        <attr name="left_image" format="reference"/>

        <!--右侧View容器背景色-->
        <attr name="right_view_background" format="color|reference"/>
        <!--右侧View容器是否显示-->
        <attr name="right_view_visibility" format="boolean"/>
        <!--右侧TextView是否显示-->
        <attr name="right_textView_visibility" format="boolean"/>
        <!--右侧ImageView是否显示-->
        <attr name="right_imageView_visibility" format="boolean"/>
        <!--菜单键文字-->
        <attr name="right_text" format="string|dimension"/>
        <!--菜单键文字字号-->
        <attr name="right_text_size" format="dimension|reference"/>
        <!--菜单键文字颜色-->
        <attr name="right_text_color" format="color|reference"/>
        <!--菜单键TextView背景色-->
        <attr name="right_textView_background" format="color|reference"/>

        <!--菜单键图标-->
        <attr name="right_image" format="reference"/>


        <!--中间View容器背景色-->
        <attr name="middle_view_background" format="color|reference"/>
        <!--title是否显示-->
        <attr name="title_visibility" format="boolean"/>
        <!--搜索框是否显示-->
        <attr name="search_visibility" format="boolean"/>
        <!--标题文字-->
        <attr name="title_text" format="string|reference"/>
        <!--标题字号-->
        <attr name="title_text_size" format="dimension|reference"/>
        <!--标题文字颜色-->
        <attr name="title_text_color" format="color|reference"/>
        <!--标题TextView背景色-->
        <attr name="title_text_background" format="color|reference"/>

        <!--搜索框hint-->
        <attr name="title_search_hint" format="string|reference"/>
        <!--搜索框hint颜色-->
        <attr name="title_search_hint_color" format="color|reference"/>
        <!--搜索框文字-->
        <attr name="title_search_text" format="string|reference"/>
        <!--搜索框padding-->
        <attr name="title_search_paddingLeft" format="dimension|reference"/>
        <attr name="title_search_paddingTop" format="dimension|reference"/>
        <attr name="title_search_paddingRight" format="dimension|reference"/>
        <attr name="title_search_paddingBottom" format="dimension|reference"/>

        <!--搜索框小图标-->
        <attr name="title_search_drawableLeft" format="reference"/>
        <attr name="title_search_drawableRight" format="reference"/>


        <!--搜索框文字颜色-->
        <attr name="title_search_text_color" format="color|reference"/>
        <!--搜索框文字字号-->
        <attr name="title_search_text_size" format="dimension|reference"/>
        <!--搜索框背景-->
        <attr name="title_search_background" format="color|reference"/>
        <!--搜索框文字排版-->
        <attr name="title_search_text_gravity">
            <!--居中-->
            <enum name="center" value="17"/>
            <!--居左-->
            <enum name="left" value="19"/>
            <!--居右-->
            <enum name="right" value="21"/>
        </attr>


    </declare-styleable>
</resources>

3.CommonTitleBar自定义ViewGroup的实现

3.1 自定义属性
//代码片段
public CommonTitleBar(Context context)
    {
        this(context, null, 0);
    }

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

    public CommonTitleBar(Context context, AttributeSet attrs, int defStyleAttr)
    {
        super(context, attrs, defStyleAttr);
        this.context = context;
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.common_title_bar);
        titleBarHeight = typedArray.getDimension(R.styleable.common_title_bar_title_bar_height, dip2px(context, DEFAULT_TITLE_BAR_HEIGHT));
        titleBarBackground = typedArray.getColor(R.styleable.common_title_bar_title_bar_background, ContextCompat.getColor(context, android.R.color.white));

        leftViewVisibility = typedArray.getBoolean(R.styleable.common_title_bar_left_view_visibility, true);
        leftTextViewVisibility = typedArray.getBoolean(R.styleable.common_title_bar_left_textView_visibility, false);
        leftImageViewVisibility = typedArray.getBoolean(R.styleable.common_title_bar_left_imageView_visibility, true);
        leftViewBackground = typedArray.getColor(R.styleable.common_title_bar_left_view_background, getTitleBarBackground());
        leftText = typedArray.getString(R.styleable.common_title_bar_left_text);
        leftTextViewDrawable = typedArray.getResourceId(R.styleable.common_title_bar_left_textView_drawable, 0);
        leftTextSize = typedArray.getDimension(R.styleable.common_title_bar_left_text_size, dip2px(context,16));
        leftTextColor = typedArray.getColor(R.styleable.common_title_bar_left_text_color, ContextCompat.getColor(context, android.R.color.black));
        leftTextViewBackground = typedArray.getColor(R.styleable.common_title_bar_left_textView_background, getTitleBarBackground());
        leftImageDrawable = typedArray.getResourceId(R.styleable.common_title_bar_left_image, R.drawable.ic_back);


        rightViewBackground = typedArray.getColor(R.styleable.common_title_bar_right_view_background, getTitleBarBackground());
        rightViewVisibility = typedArray.getBoolean(R.styleable.common_title_bar_right_view_visibility, true);
        rightTextViewVisibility = typedArray.getBoolean(R.styleable.common_title_bar_right_textView_visibility, false);
        rightImageViewVisibility = typedArray.getBoolean(R.styleable.common_title_bar_right_imageView_visibility, false);
        rightText = typedArray.getString(R.styleable.common_title_bar_right_text);
        rightTextSize = typedArray.getDimension(R.styleable.common_title_bar_right_text_size, dip2px(context,16));
        rightTextColor = typedArray.getColor(R.styleable.common_title_bar_right_text_color, ContextCompat.getColor(context, android.R.color.black));
        rightTextViewBackground = typedArray.getColor(R.styleable.common_title_bar_right_textView_background, getTitleBarBackground());
        rightImageDrawable = typedArray.getResourceId(R.styleable.common_title_bar_right_image, R.drawable.ic_menu);


        middleViewBackground = typedArray.getColor(R.styleable.common_title_bar_middle_view_background, getTitleBarBackground());
        titleTextViewVisibility = typedArray.getBoolean(R.styleable.common_title_bar_title_visibility, true);
        searchVisibility = typedArray.getBoolean(R.styleable.common_title_bar_search_visibility, false);


        titleText = typedArray.getString(R.styleable.common_title_bar_title_text);
        titleTextSize = typedArray.getDimension(R.styleable.common_title_bar_title_text_size, dip2px(context,20));
        titleTextColor = typedArray.getColor(R.styleable.common_title_bar_title_text_color, ContextCompat.getColor(context, android.R.color.black));
        titleTextViewBackground = typedArray.getColor(R.styleable.common_title_bar_title_text_color, ContextCompat.getColor(context, android.R.color.black));

        searchHint = typedArray.getString(R.styleable.common_title_bar_title_search_hint);
        searchHintColor = typedArray.getColor(R.styleable.common_title_bar_title_search_hint_color, ContextCompat.getColor(context, android.R.color.darker_gray));
        titleSearchText = typedArray.getString(R.styleable.common_title_bar_title_search_text);

        etSearchPaddingLeft = typedArray.getDimension(R.styleable.common_title_bar_title_search_paddingLeft, 10);
        etSearchPaddingTop = typedArray.getDimension(R.styleable.common_title_bar_title_search_paddingTop, 0);
        etSearchPaddingRight = typedArray.getDimension(R.styleable.common_title_bar_title_search_paddingRight, 10);
        etSearchPaddingBottom = typedArray.getDimension(R.styleable.common_title_bar_title_search_paddingBottom, 0);

        etDrawableLeft = typedArray.getResourceId(R.styleable.common_title_bar_title_search_drawableLeft, 0);
        etDrawableRight = typedArray.getResourceId(R.styleable.common_title_bar_title_search_drawableRight, 0);

        titleSearchTextColor = typedArray.getColor(R.styleable.common_title_bar_title_search_text_color, ContextCompat.getColor(context, android.R.color.black));
        titleSearchTextSize = typedArray.getDimension(R.styleable.common_title_bar_title_search_text_size, dip2px(context,16));
        titleSearchBackground = typedArray.getResourceId(R.styleable.common_title_bar_title_search_background, R.drawable.bg_title_search);
        titleSearchTextGravity = typedArray.getInt(R.styleable.common_title_bar_title_search_text_gravity, 19);

        typedArray.recycle();
        initView();
    }
3.2 高度的测量和设置
//代码片段
 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);
        //title高度的测量和设置
        setMeasuredDimension(width, (int) titleBarHeight);
    }


    private int dip2px(Context context, float dpValue)
    {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

4.最终效果

可以自己通过api进行高度定制，也可以几行代码简单满足一般需求。
高度定制

一般使用
项目地址
此项目还在不断改进更新中，欢迎提出宝贵意见：）

lxy594328762
关注
专栏目录
高度可定制化的方案_如何开发高度可定制的产品
最佳 Java 编程
06-23 1135
高度可定制化的方案 您是否听说过：“我们非常喜欢您的产品……除了一些小细节。”？ 然后，CIO推出了一系列其他“必备”要求的清单，其中有数百个要添加到您的惊人产品中。 您是否听说过，甚至说过：“团队，我们即将签署一份利润丰厚的合同，但是……”？ 然后，客户对附加功能的愿望清单使开发人员感到头疼。 那么，如何使产品远离客户的潜在危险想法，同时又让他们满意呢？ 对于专门设计为以特定方式运行但...
titlebar实现
07-09
自定义titlebar。属于比较简单的实现。需要重做图片等。
Android实现自定义标题栏的高度化自定义
08-06
Android实现自定义标题栏的高度化自定义
android 标题栏的高度
xiaoxiaobian3310903的专栏
04-22 5248
240x320的高度为20px 320x480的高度为25px 480x800的高度为38px   不知道为什么我写的测试程序按照网上的说法老是获取不到，以上是我google搜索出来的结果。 以下是我写的获取标题栏高度的代码： public void onCreate(Bundle savedInstanceState) { super.onCreate(saved
标题 定制化
我的实验室 贡献我们智慧于网络
03-01 111
定制化 标题   [功能] 默认标题仅支持文字 通过定制化 可以支持图片     [代码 步骤] 1. 定义其所需的布局：title.xml &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android...
android屏幕高度、状态栏高度、titlebar高度详解
Allence的博客
10-24 2844
一、屏幕高度、状态栏高度、titlebar高度区分 二、获取整个屏幕的高度 DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); Log.e("Allence", "屏幕高:" + dm.heightPixels); 三、获取
android 一个骚气的titlebar
09-30
Toolbar是一个可定制的视图，可以在任何地方使用，不仅限于顶部。在布局XML中添加`<androidx.appcompat.widget.Toolbar>`标签，然后在Activity中设置为Action Bar。 3. **自定义View**：如果需要更高度的定制，...
TitleBar,简单的通用标题栏.zip
09-25
2. **高度可定制**：开发者可以通过设置属性来改变标题栏的颜色、字体、大小、按钮样式等，实现与应用主题的一致性。 3. **兼容性**：作为一个优秀的开源库，TitleBar应该兼容多种Android版本，确保在不同设备上都...
swift-iOS平台轻量级的PageView组件其中TitleBar拥有30多种UI样式
08-15
这个组件名为WHC_PageViewKit，它由Swift编写，具有高效、易用和高度定制化的特点。 首先，我们来了解一下PageView的基本概念。PageView通常由多个子视图组成，这些视图可以是图片、文字或其他UI元素，用户可以通过...
JavaScript写的一个DIV 弹出网页对话框
10-29
表格的首行（`tr`）包含一个单元格（`td`，即`titleBar`），用于显示对话框标题，并且可以被拖动以调整位置。对话框的标题区域还设置了鼠标指针样式为“move”，表明它可以被移动。 对话框的移动功能是通过监听鼠标...
WPF 通过WindowChrome实现window 标题栏自定义
11-30
在Windows Presentation Foundation (WPF) 中，开发人员经常需要对应用程序的外观进行高度定制，以满足用户界面的独特设计需求。`WindowChrome` 类是WPF提供的一种机制，它允许我们自定义窗口的非客户区（包括标题栏...
自定义的TitleBar
01-18
简单实用的自定义标题栏，代码下载下来就可以直接使用了
android 屏幕高度、状态栏高度、titlebar高度详解
Allence的博客
11-29 1839
一、屏幕高度、状态栏高度、titlebar高度区分 二、获取整个屏幕的高度 DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); Log.e("Allence", "屏幕高:" + dm.heightPixels); 三、获取
动态设置titleBar的高度
fuzhongbin的博客
12-21 1996
在项目中有时候我们设定固定的标题栏高度，但是在有EditText输入时弹出软键盘输入框会将titlebar压缩，所以我们需要动态设置titlebar的高度： #565656 50dp @style/CustomWindowTitleBackground 在代码中需要动态设置titlebar需要实现的代码： TitleBar titelbar=
标题栏
wl1433289703的博客
11-08 464
集成步骤 dependencies { implementation 'com.hjq:titlebar:3.5' } 属性大全（划重点，要考） &lt;declare-styleable name="TitleBar"&gt; &lt;!-- 标题栏的样式 --&gt; &lt;attr name="bar_style"&gt; &lt;...
TitleBar
我是黄大仙
03-08 4134
目前许多app的页面都是采用titlebar+content的组合方式，如下图所示 其中TitleBar可以提取出来作为一个模块在多个项目里面进行复用。 以下是我自己写的TitleBar，其最终效果如图所示：   如果不清楚自定义View的创建步骤，请参见我之前的博客，自定义控件 TitleBar由三部分组成，左边是Button，中间是TextView，右边是Button，并设置
android titlebar 高度是多少,什么是TitleBar的默认高度和Android中Titlebar中的默认TextSize？...
weixin_30737899的博客
05-26 158
有谁知道android中TitleBar和TitleBarText的默认大小是多少？解决方法:您可以在此处找到默认高度以下是4.0.348dip18dp检查各个res / values文件夹下的dimens.xml来自Gopal Rao的评论?textColorPrimary?textColorHighlight?textColorHint?textColorLink16sp // its is ...
CommonTitleBar
未来很长，但我会努力的走下去。
11-22 1246
CommonTitleBar 开发过程中，如果页面过多，需要构建大量重复的标题栏布局，浪费开发时间且不利于后期维护。本项目总结了几种常用的使用场景，将标题栏封装成控件，Java代码实现，对当前主流的沉浸式提供了支持，供有需要的同学使用，欢迎提供改进意见。 Demo下载 功能描述 支持左、中、右常规标题栏设置； 支持自定义视图； 支持沉浸式标题栏； 首页 快速预览 ...
【Android -- 开源库】TitleBar（统一标题栏、状态栏）
Kevin Learn Android
05-20 1447
TitleBar Android 标题栏框架，从此布局属性不用记。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值