Skip to content

Android 仿 iOS UINavigationBar 风格的 TitleBar,适用于某些 UI 设计师只出 iOS 效果图的项目

Notifications You must be signed in to change notification settings

bingoogolapple/BGATitleBar-Android

Repository files navigation

🏃BGATitleBar-Android🏃

Maven Central

工作以来公司 UI 设计师出的 Android 效果图都是 iOS 风格的 TitleBar,新项目还是用原来那一套,不想重复造轮子,所以趁着这次练习 仿新浪微博 Android 客户端,抽取一个通用的 iOS 风格的 TitleBar

但是作为 Android 开发者,平时学习练手时还是得紧跟 Google 的步伐,说不定哪天公司的 UI 射击狮们就出一套 MD 风格的效果图

支持图片加文本、仅文本、仅图片、微博首页两种文本颜色的大小标题、资料设置进度的两种文本颜色的标题、动态切换文本和图片的显示、监听各按钮的点击事件

效果图

bgatitlebartitlebar2 dkt

基本使用

1.添加 Gradle 依赖

dependencies {
    compile 'com.android.support:appcompat-v7:latestVersion'
    compile 'cn.bingoogolapple:bga-titlebar:latestVersion@aar'
}

2.在布局文件中添加 BGATitleBar

<cn.bingoogolapple.titlebar.BGATitleBar
        android:id="@+id/titlebar"
        style="@style/TitleBar"
        app:bgatitlebar_leftDrawable="@drawable/selector_nav_friendsearch"
        app:bgatitlebar_rightDrawable="@drawable/selector_nav_pop"
        app:bgatitlebar_titleDrawable="@drawable/selector_nav_arrow_orange"
        app:bgatitlebar_titleDrawablePadding="3dp"
        app:bgatitlebar_titleText="bingoogolapple" />

3.在 Activity 或者 Fragment中 配置 BGATitleBar

mTitleBar = (BGATitleBar) findViewById(R.id.titlebar);
mTitleBar.setDelegate(new BGATitleBar.Delegate() {
    @Override
    public void onClickLeftCtv() {
        // 点击左上角按钮
    }

    @Override
    public void onClickTitleCtv() {
        // 点击标题按钮
    }

    @Override
    public void onClickRightCtv() {
        // 点击右上角按钮
    }

    @Override
    public void onClickRightSecondaryCtv() {
        // 点击右上角倒数第二个按钮
    }
});

自定义属性说明

建议在项目中把下面这五项定义在 styles.xml 里

  • bgatitlebar_leftAndRightTextColor 左右按钮文字颜色
  • bgatitlebar_titleTextColor 中间标题文字颜色
  • bgatitlebar_leftAndRightTextSize 左右按钮文字大小
  • bgatitlebar_titleTextSize 中间标题文字大小
  • bgatitlebar_leftAndRightPadding 左右按钮在水平方向上的padding

下面这几项根据每个页面的业务写在 layout 中(可以把带有返回按钮的 titlebar 也单独抽取一个 style)

  • bgatitlebar_leftText 左边按钮的文字
  • bgatitlebar_titleText 中间标题文字
  • bgatitlebar_rightText 右边按钮的文字
  • bgatitlebar_rightSecondaryText 右边倒数第二个按钮的文字
  • bgatitlebar_leftDrawable 左边按钮图标
  • bgatitlebar_titleDrawable 中间标题图标
  • bgatitlebar_rightDrawable 右边按钮图标
  • bgatitlebar_rightSecondaryDrawable 右边倒数第二个按钮图标
  • bgatitlebar_titleDrawablePadding 中间按钮文本和图标之间的间距(当既有titleText,又有titleDrawable时,设置该属性,例如新浪微博首页选择微博分类 )
  • bgatitlebar_leftDrawablePadding 左边按钮文本和图标之间的间距(当既有leftText,又有leftDrawable时,设置该属性)
  • bgatitlebar_rightDrawablePadding 右边按钮和图标之间的间距(当既有rightText,又有rightDrawable时,设置该属性)

下面三项通常情况下不用,使用默认值就好。某个界面标题特别长并且左右文字短或者左右文字特别长并且标题特别短时单独配置

  • bgatitlebar_leftMaxWidth 左边按钮的最大宽度
  • bgatitlebar_rightMaxWidth 右边按钮的最大宽度
  • bgatitlebar_titleMaxWidth 中间标题的最大宽度

下面三项通常情况下不用,使用默认值就好。

  • bgatitlebar_isTitleTextBold 标题文字是否为粗体,默认为true
  • bgatitlebar_isLeftTextBold 左边文字是否为粗体,默认为false
  • bgatitlebar_isRightTextBold 右边文字是否为粗体,默认为false

代码是最好的老师,更多详细用法请查看 demo🐾

作者联系方式

个人主页 邮箱
bingoogolapple.cn bingoogolapple@gmail.com
个人微信号 微信群 公众号
个人微信号 微信群 公众号
个人 QQ 号 QQ 群
个人 QQ 号 QQ 群

打赏支持作者

如果您觉得 BGA 系列开源库或工具软件帮您节省了大量的开发时间,可以扫描下方的二维码打赏支持。您的支持将鼓励我继续创作,打赏后还可以加我微信免费开通一年 上帝小助手浏览器扩展/插件开发平台 的会员服务

微信 QQ 支付宝
微信 QQ 支付宝

作者项目推荐

License

Copyright 2015 bingoogolapple

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.

About

Android 仿 iOS UINavigationBar 风格的 TitleBar,适用于某些 UI 设计师只出 iOS 效果图的项目

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages