UDN-企业互联网技术人气社区

板块导航

浏览  : 1485
回复  : 0

[移动平台] Android BGATitlebar实现iOS风格的Titlebar

[复制链接]
呵呵燕的头像 楼主
发表于 2016-10-5 17:56:46 | 显示全部楼层 |阅读模式
  工作以来公司UI设计师出的Android效果图都是iOS风格的Titlebar,新项目还是用原来那一套,不想重复造轮子,所以趁着这次练习 仿新浪微博Android客户端,抽取一个通用的iOS风格的Titlebar

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

  demo中演示了各种情况的标题和新浪微博首页选择微博分类案例

  效果图

l.gif


  基本使用

  1.添加Gradle依赖

  1.   dependencies {

  2.   compile 'com.android.support:appcompat-v7:22.2.0'

  3.   compile 'cn.bingoogolapple:bga-titlebar:latestVersion@aar'

  4.   }
复制代码


  2.在布局文件中添加BGATitlebar

  1.   android:id="@+id/titlebar"

  2.   style="@style/TitleBar"

  3.   app:bgatitlebar_leftDrawable="@drawable/selector_nav_friendsearch"

  4.   app:bgatitlebar_rightDrawable="@drawable/selector_nav_pop"

  5.   app:bgatitlebar_titleDrawable="@drawable/selector_nav_arrow_orange"

  6.   app:bgatitlebar_titleDrawablePadding="3dp"

  7.   app:bgatitlebar_titleText="bingoogolapple" />

  8.   3.在Activity或者Fragment中配置BGATitlebar

  9.   mTitlebar = (BGATitlebar) findViewById(R.id.titlebar);

  10.   mTitlebar.setDelegate(new BGATitlebar.BGATitlebarDelegate() {

  11.   @Override

  12.   public void onClickLeftCtv() {

  13.   // 可选,根据实际业务重写该方法

  14.   }

  15.   @Override

  16.   public void onClickTitleCtv() {

  17.   // 可选,根据实际业务重写该方法

  18.   }

  19.   @Override

  20.   public void onClickRightCtv() {

  21.   // 可选,根据实际业务重写该方法

  22.   }

  23.   });
复制代码


  自定义属性说明

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

  bgatitlebar_leftAndRightTextColor 左右按钮文字颜色

  bgatitlebar_titleTextColor 中间标题文字颜色

  bgatitlebar_leftAndRightTextSize 左右按钮文字大小

  bgatitlebar_titleTextSize 中间标题文字大小

  bgatitlebar_leftAndRightPadding 左右按钮在水平方向上的padding

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

  bgatitlebar_leftText 左边按钮的文字

  bgatitlebar_rightText 右边按钮的文字

  bgatitlebar_titleText 中间标题文字

  bgatitlebar_leftDrawable 左边按钮图标

  bgatitlebar_rightDrawable 右边按钮图标

  bgatitlebar_titleDrawable 中间标题图标

  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

原文作者:佚名  来源:开发者头条

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部