Android BGATitlebar實現iOS風格的Titlebar

codeceo發表於2015-07-25
原文網址 : http://www.codeceo.com/article/android-bgatitlebar-ios-titlebar.html
AndroidiOS

工作以來公司UI設計師出的Android效果圖都是iOS風格的Titlebar，新專案還是用原來那一套，不想重複造輪子，所以趁著這次練習 仿新浪微博Android客戶端，抽取一個通用的iOS風格的Titlebar

但是作為Android開發者，平時學習練手時還是得緊跟Google的步伐，說不定哪天公司的UI射擊獅們就出一套MD風格的效果圖

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

相關文章