iOS風格的Titlebar - BGATitlebar-Android

jopen 9年前發布 | 18K 次閱讀 Android開發 移動開發 BGATitlebar-Android

工作以來公司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.baiduhome.net/lib/view/home/1437708730396

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!