Code Monkey home page Code Monkey logo

titlebar's Introduction

标题栏框架

集成步骤

  • 如果你的项目 Gradle 配置是在 7.0 以下,需要在 build.gradle 文件中加入
allprojects {
    repositories {
        // JitPack 远程仓库:https://jitpack.io
        maven { url 'https://jitpack.io' }
    }
}
  • 如果你的 Gradle 配置是 7.0 及以上,则需要在 settings.gradle 文件中加入
dependencyResolutionManagement {
    repositories {
        // JitPack 远程仓库:https://jitpack.io
        maven { url 'https://jitpack.io' }
    }
}
  • 配置完远程仓库后,在项目 app 模块下的 build.gradle 文件中加入远程依赖
android {
    // 支持 JDK 1.8
    compileOptions {
        targetCompatibility JavaVersion.VERSION_1_8
        sourceCompatibility JavaVersion.VERSION_1_8
    }
}

dependencies {
    // 标题栏框架:https://github.com/getActivity/TitleBar
    implementation 'com.github.getActivity:TitleBar:10.5'
}

布局属性大全

<declare-styleable name="TitleBar">

    <!-- 标题栏背景 -->
    <attr name="android:background" />

    <!-- 标题栏样式 -->
    <attr name="barStyle">
        <enum name="light" value="0x10" />
        <enum name="night" value="0x20" />
        <enum name="transparent" value="0x30" />
        <enum name="ripple" value="0x40" />
    </attr>

    <!-- 子控件垂直内间距(可用于调整标题栏自适应的高度) -->
    <attr name="childVerticalPadding" format="dimension" />

    <!-- 中间标题 -->
    <attr name="title" format="string" />
    <attr name="titleColor" format="reference|color" />
    <attr name="titleSize" format="dimension" />
    <attr name="titleGravity">
        <flag name="left" value="0x03" />
        <flag name="right" value="0x05" />
        <flag name="center" value="0x11" />
        <flag name="start" value="0x00800003" />
        <flag name="end" value="0x00800005" />
    </attr>
    <attr name="titleStyle">
        <flag name="normal" value="0" />
        <flag name="bold" value="1" />
        <flag name="italic" value="2" />
    </attr>
    <attr name="titleIcon" format="reference" />
    <attr name="titleIconWidth" format="dimension" />
    <attr name="titleIconHeight" format="dimension" />
    <attr name="titleIconPadding" format="dimension" />
    <attr name="titleIconTint" format="color" />
    <attr name="titleIconGravity">
        <flag name="top" value="0x30" />
        <flag name="bottom" value="0x50" />
        <flag name="left" value="0x03" />
        <flag name="right" value="0x05" />
        <flag name="start" value="0x00800003" />
        <flag name="end" value="0x00800005" />
    </attr>
    <attr name="titleHorizontalPadding" format="dimension" />
    <!-- 中间标题文本溢出处理模式(默认开启跑马灯) -->
    <attr name="titleOverflowMode">
        <enum name="none" value="0" />
        <enum name="start" value="1" />
        <enum name="middle" value="2" />
        <enum name="end" value="3" />
        <enum name="marquee" value="4" />
    </attr>

    <!-- 左标题 -->
    <attr name="leftTitle" format="string"/>
    <attr name="leftTitleColor" format="reference|color" />
    <attr name="leftTitleSize" format="dimension" />
    <attr name="leftTitleStyle">
        <flag name="normal" value="0" />
        <flag name="bold" value="1" />
        <flag name="italic" value="2" />
    </attr>
    <attr name="leftIcon" format="reference" />
    <attr name="leftIconWidth" format="dimension" />
    <attr name="leftIconHeight" format="dimension" />
    <attr name="leftIconPadding" format="dimension" />
    <attr name="leftIconTint" format="color" />
    <attr name="leftIconGravity">
        <flag name="top" value="0x30" />
        <flag name="bottom" value="0x50" />
        <flag name="left" value="0x03" />
        <flag name="right" value="0x05" />
        <flag name="start" value="0x00800003" />
        <flag name="end" value="0x00800005" />
    </attr>
    <attr name="leftBackground" format="reference|color" />
    <attr name="leftForeground" format="reference|color" />
    <attr name="leftHorizontalPadding" format="dimension" />
    <!-- 左边标题文本溢出处理模式 -->
    <attr name="leftTitleOverflowMode">
        <enum name="none" value="0" />
        <enum name="start" value="1" />
        <enum name="middle" value="2" />
        <enum name="end" value="3" />
        <enum name="marquee" value="4" />
    </attr>

    <!-- 右标题 -->
    <attr name="rightTitle" format="string" />
    <attr name="rightTitleColor" format="reference|color" />
    <attr name="rightTitleSize" format="dimension" />
    <attr name="rightTitleStyle">
        <flag name="normal" value="0" />
        <flag name="bold" value="1" />
        <flag name="italic" value="2" />
    </attr>
    <attr name="rightIcon" format="reference" />
    <attr name="rightIconWidth" format="dimension" />
    <attr name="rightIconHeight" format="dimension" />
    <attr name="rightIconPadding" format="dimension" />
    <attr name="rightIconTint" format="color" />
    <attr name="rightIconGravity">
        <flag name="top" value="0x30" />
        <flag name="bottom" value="0x50" />
        <flag name="left" value="0x03" />
        <flag name="right" value="0x05" />
        <flag name="start" value="0x00800003" />
        <flag name="end" value="0x00800005" />
    </attr>
    <attr name="rightBackground" format="reference|color" />
    <attr name="rightForeground" format="reference|color" />
    <attr name="rightHorizontalPadding" format="dimension" />
    <!-- 右边标题文本溢出处理模式 -->
    <attr name="rightTitleOverflowMode">
        <enum name="none" value="0" />
        <enum name="start" value="1" />
        <enum name="middle" value="2" />
        <enum name="end" value="3" />
        <enum name="marquee" value="4" />
    </attr>

    <!-- 分割线 -->
    <attr name="lineVisible" format="boolean" />
    <attr name="lineDrawable" format="reference|color" />
    <attr name="lineSize" format="dimension" />

</declare-styleable>

XML示例

设置监听事件

titleBar.setOnTitleBarListener(new OnTitleBarListener() {

    @Override
    public void onLeftClick(TitleBar titleBar) {
        toast("左项 View 被点击");
    }

    @Override
    public void onTitleClick(TitleBar titleBar) {
        toast("中间 View 被点击");
    }

    @Override
    public void onRightClick(TitleBar titleBar) {
        toast("右项 View 被点击");
    }
});

统一 TitleBar 样式

  • 如果对 TitleBar 的默认样式或者属性不满意,可以在 Application 初始化的地方进行拦截并修改
public class XxxApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();

        // 初始化 TitleBar 默认样式
        TitleBar.setDefaultStyle(new ITitleBarStyle());
    }
}

框架混淆规则

  • 在混淆规则文件 proguard-rules.pro 中加入
-keep class com.hjq.bar.** {*;}

框架亮点

  • 性能最佳:不使用 LayoutInflater,而使用代码创建 View 的形式

  • 体验最优:TitleBar 默认样式效果已经非常好,可下载 Demo 测试

  • 支持操控子控件:可以在代码中获取 TitleBar 的子控件进行调用相关的 API

  • 兼容沉浸式状态栏:兼容 Github 的沉浸式状态栏框架,达到完全沉浸的效果

  • 框架兼容性良好:本框架不依赖任何第三方库,支持兼容所有的安卓版本

  • 支持全局配置样式:可以在 Application 中初始化 TitleBar 样式,达到一劳永逸的效果

作者的其他开源项目

微信公众号:Android轮子哥

Android 技术 Q 群:10047167

如果您觉得我的开源库帮你节省了大量的开发时间,请扫描下方的二维码随意打赏,要是能打赏个 10.24 🐵就太👍了。您的支持将鼓励我继续创作:octocat:点击查看捐赠列表

广告区

  • 我现在任腾讯云服务器推广大使,大家如果有购买服务器的需求,可以通过下面的链接购买

【腾讯云】云服务器、云数据库、COS、CDN、短信等云产品特惠热卖中

【腾讯云】中小企业福利专场,多款刚需产品,满足企业通用场景需求

License

Copyright 2018 Huang JinQun

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

titlebar's People

Contributors

880634 avatar getactivity avatar qiushui95 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

titlebar's Issues

TitleBar嵌套在Toolbar中 导致titleBar中的箭头或标题靠下显示(不居中ToolBar)并且显示不全

问题描述

  • 框架版本:XXX

  • 问题描述:XXX

  • 复现步骤:XXX

  • 是否必现:填是/否

  • 手机信息:例如某米 9 / Android 10

请回答

  • 是部分机型还是所有机型都会出现:部分/全部(例如:某为,某 Android 版本会出现)

  • 框架最新的版本是否存在这个问题:是/否(如果用的是旧版本的话,建议升级看问题是否还存在)

  • 是否已经查阅框架文档还未能解决的:是/否(文档会提供最常见的问题解答,可以看看是否有自己想要的)

  • issue 是否有人曾提过类似的问题:是/否(看看曾经有人提过类似的问题,先参考一下别人是怎么解决的)

  • 是否可以通过 Demo 来复现该问题:是/否(排查一下是不是自己的项目代码写得有问题导致的)

  • 使用原生 API 是否会出现该问题:是/否(排查一下是不是框架的代码写法存在问题导致的)

其他

  • 提供报错堆栈(如果有报错的话必填)

  • 提供截图或视频(根据需要提供,此项不强制)

  • 提供解决方案(如果已经解决了的话,此项不强制)

在这个主题下引用此库,崩溃

Theme.MaterialComponents.DayNight.NoActionBar

报错信息如下:
android.view.InflateException: Binary XML file line #8: Binary XML file line #8: Error inflating class com.hjq.bar.TitleBar

.technology.cheliang.storage.ui.activity.login.RegisterActivity}: android.view.InflateException: Binary XML file line #8: Binary XML file line #8: Error inflating class com.hjq.bar.TitleBar
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3303)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3411)
at android.app.ActivityThread.-wrap12(Unknown Source:0)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1994)
at android.os.Handler.dispatchMessage(Handler.java:108)
at android.os.Looper.loop(Looper.java:166)
at android.app.ActivityThread.main(ActivityThread.java:7529)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:245)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:921)
Caused by: android.view.InflateException: Binary XML file line #8: Binary XML file line #8: Error inflating class com.hjq.bar.TitleBar

三方字体适配问题

项目引入三方字体库,titlebar无法适配。
试过重写createTitleView方法,直接设置textview的字体,也是无效。
希望大佬能早日适配更好,谢谢。

文字样式

有需求遇到:想设置标题栏文字的bold等样式,比如中间文字变大变粗。

提 issue 需知

Github沟通效率实在是很低下,大家伙有问题或者Bug直接到Q群78797078私信给我反馈就OK,我会尽快答复你的问题

title会跳动

样式为 【 left + title 】的时候(即没有设置右边的情况),第一次打开后title会从右边一点点跳到正中间,预览布局的时候title也是往右偏了一点的。每次都跳动很不好吧。谢谢大佬分享。

希望 TitleBar 里面的子 view 能够垂直方向居中显示

1、打比方,将高度设为 58dp,发现子 view 底部空了一部分,上下不会对称。
2、本库不错,感觉还可以应用于设置页面,不单单是标题,减少很多不必要的重复工作。
为此,希望能增加属性设置分割线边距,能实现像微信一样,分割线左边有边距,右边充满。

关于标题栏右边图标的问题

你好!请问能不能再丰富一下效果,就是标题栏右边图标,有时候ui设计是可以同时放两个可点击的icon的。对于这种情况,是否可以继续完善支持一下。
非常感谢!

如何增加按钮

需求要webview的标题栏上,返回键旁边加一个叉号关闭按钮

设置视图的显示与隐藏

hi,mTitleBar.getRightView().setVisibility(View.VISIBLE); 获取左右视图,然后设置text或者设置显示与隐藏无效。

切换到系统的暗黑模式下 右侧没有设置任何图标 显示有空白

自定义配置如下:

class PetTitleBarStyle : CommonBarStyle() {

override fun createBackgroundDrawable(context: Context): Drawable =
    ColorDrawable(context.getCol(R.color.white))

override fun createBackIcon(context: Context?): Drawable =
    getDrawableResources(context, R.mipmap.ic_arrow_back_black)

override fun createTitleView(context: Context): TextView {
    val titleTv = super.createTitleView(context)
    titleTv.setTextColor(context.getCol(R.color.title_text))
    titleTv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 17f)
    return titleTv
}

override fun createLeftView(context: Context): TextView {
    val leftView = super.createLeftView(context)
    leftView.setTextColor(context.getCol(R.color.white))
    setViewBackground(
        leftView, SelectorDrawable.Builder()
            .setDefault(ColorDrawable(context.getCol(R.color.white)))
            .setFocused(ColorDrawable(context.getCol(R.color.white)))
            .setPressed(ColorDrawable(context.getCol(R.color.white)))
            .build()
    )
    return leftView
}

override fun createRightView(context: Context): TextView {
    val rightView = super.createRightView(context)
    rightView.setTextColor(context.getCol(R.color.title_text))
    setViewBackground(
        rightView, SelectorDrawable.Builder()
            .setDefault(ColorDrawable(context.getCol(R.color.white)))
            .setFocused(ColorDrawable(context.getCol(R.color.white)))
            .setPressed(ColorDrawable(context.getCol(R.color.white)))
            .build()
    )
    return rightView
}

override fun createLineView(context: Context): View {
    val lineView = super.createLineView(context)
    setViewBackground(lineView, ColorDrawable(context.getCol(R.color.divider_color)))
    return lineView
}

}

2021610-101442

自定义TitleBar的点击事件

我在TitleBar里添加了3个子控件并设置了id, 但是无法触发点击事件。
是只有TitleBar里的leftview、rightview、titleview才能点击吗?

TitleBar类的onMeasure应该不对吧

// 设置TitleBar默认的宽度
if (MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.AT_MOST
|| MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.UNSPECIFIED) {
widthMeasureSpec = MeasureSpec.makeMeasureSpec(widthMeasureSpec, MeasureSpec.EXACTLY);
}

这里为什么是获取的高的测量模式

请严格按照 issue 模板来提问题,否则一律不受理

最近发现有很多人给我提 issue 没有认真按照模板上面的来填写,导致了在排查问题的过程中浪费了作者许多不必要的时间和精力,所以请后面提 issue 的人务必严格遵守,否则我不会受理,直接关闭 issue。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.