iOS风格的Titlebar - BGATitlebar-Android

jopen 9年前

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

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

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

效果图

Demo

基本使用

1.添加Gradle依赖 

dependencies {      compile 'com.android.support:appcompat-v7:22.2.0'      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.BGATitlebarDelegate() {      @Override      public void onClickLeftCtv() {          // 可选，根据实际业务重写该方法      }        @Override      public void onClickTitleCtv() {          // 可选，根据实际业务重写该方法      }        @Override      public void onClickRightCtv() {          // 可选，根据实际业务重写该方法      }  });

自定义属性说明

建议在项目中把下面这五项定义在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:feet:

项目主页：http://www.open-open.com/lib/view/home/1437708730396