BottomBarダウンロード - BottomBarソースコードのダウンロード

BottomBar (非推奨)

もうこれを維持する時間がありません。当時私は本格的なエキスパート初心者でしたが、基本的にテストなしでライブラリ全体を急いで書きました。その結果、予測不可能な変動部分が多くなり、テストもおそらくそれほど優れたものではなくなります。もう何年も触ってないのでよくわかりません。

Google の公式 BottomNavigationView を使用することをお勧めし、必要な機能を実装するよう促します。または、別のサードパーティライブラリを使用してください。

バージョン2.0がリリースされました！

それより前の最新バージョンは v1 ブランチにあります。

よりクリーンなコードとより優れた API
不要なものやスパゲッティの汚れはもうありません
これで、見た目、感触、動作が XML で定義されるようになりました。
自動テストのおかげで、厄介な回帰はもうありません
以前と比べてすべてが少し異なりますが、それはより大きな利益のためです。

貢献方法

変更履歴

何？

新しいマテリアルデザインのボトムナビゲーションパターンを模倣するカスタムビューコンポーネント。

私のゲイリーおじいちゃんの HTC ドリームでも動作しますか?

いいえ。 minSDK バージョンはAPI レベル 11 (Honeycomb) です。

グラドルの甘さを教えてください。

compile ' com.roughike:bottom-bar:2.3.1 '

メイビン:

< dependency >
  < groupId >com.roughike</ groupId >
  < artifactId >bottom-bar</ artifactId >
  < version >2.3.1</ version >
  < type >pom</ type >
</ dependency >

どうやって？

XML リソースファイルを記述することで項目を追加できます。

アイコンの作成

アイコンは完全に不透明、黒色一色、24 dpでパディングのないものでなければなりません。たとえば、Android Asset Studio の汎用アイコンジェネレーターを使用して、「TRIM」を選択し、パディングが 0dp であることを確認します。アイコンは次のようになります。

XMLリソースからの項目の追加

XML リソースファイルでタブを定義します。

res/xml/bottombar_tabs.xml:

< tabs >
    < tab
        id = " @+id/tab_favorites "
        icon = " @drawable/ic_favorites "
        title = " Favorites " />
    < tab
        id = " @+id/tab_nearby "
        icon = " @drawable/ic_nearby "
        title = " Nearby " />
    < tab
        id = " @+id/tab_friends "
        icon = " @drawable/ic_friends "
        title = " Friends " />
</ tabs >

次に、BottomBar をレイアウトに追加し、タブ XML ファイルのリソース ID を指定します。

レイアウト/アクティビティ_メイン.xml

< RelativeLayout xmlns : android = " http://schemas.android.com/apk/res/android "
    android : layout_width = " match_parent "
    android : layout_height = " match_parent "
    xmlns : app = " http://schemas.android.com/apk/res-auto " >

    <!-- This could be your fragment container, or something -->
    < FrameLayout
        android : id = " @+id/contentContainer "
        android : layout_width = " match_parent "
        android : layout_height = " match_parent "
        android : layout_above = " @+id/bottomBar " />

    < com .roughike.bottombar.BottomBar
        android : id = " @+id/bottomBar "
        android : layout_width = " match_parent "
        android : layout_height = " 60dp "
        android : layout_alignParentBottom = " true "
        app : bb_tabXmlResource = " @xml/bottombar_tabs " />

</ RelativeLayout >

リスナーの設定

デフォルトでは、選択イベントをリッスンし、タブが選択されたときに何らかの処理を行わない限り、タブは何も実行しません。

MainActivity.java:

 public class MainActivity extends Activity {
    @ Override
    protected void onCreate ( @ Nullable Bundle savedInstanceState ) {
        super . onCreate ( savedInstanceState );
        setContentView ( R . layout . activity_main );

        BottomBar bottomBar = ( BottomBar ) findViewById ( R . id . bottomBar );
        bottomBar . setOnTabSelectListener ( new OnTabSelectListener () {
            @ Override
            public void onTabSelected ( @ IdRes int tabId ) {
                if ( tabId == R . id . tab_favorites ) {
                    // The tab with id R.id.tab_favorites was selected,
                    // change your content accordingly.
                }
            }
        });
    }
}

再選択イベントをリッスンしたい場合は、次の方法で行います。

 bottomBar . setOnTabReselectListener ( new OnTabReselectListener () {
    @ Override
    public void onTabReSelected ( @ IdRes int tabId ) {
        if ( tabId == R . id . tab_favorites ) {
            // The tab with id R.id.tab_favorites was reselected,
            // change your content accordingly.
        }
    }
});

タブ選択のインターセプト

条件付きでタブの選択をキャンセルしたい場合は、それが可能です。 TabSelectionInterceptor BottomBar に割り当て、 shouldInterceptTabSelection()メソッドから true を返すだけです。

 bottomBar . setTabSelectionInterceptor ( new TabSelectionInterceptor () {
    @ Override
    public boolean shouldInterceptTabSelection ( @ IdRes int oldTabId , @ IdRes int newTabId ) {
        if ( newTabId == R . id . tab_pro_feature && ! userHasProVersion ()) {
          startProVersionPurchaseFlow ();
          return true ;
        }
        
        return false ;
    }
});

選択状態に基づいてアイコンを変更する

特定のタブが選択されているときに異なるアイコンを表示したい場合は、状態リストドローアブルを使用するだけです。

res/drawable/my_tab_icon.xml

< selector xmlns : android = " http://schemas.android.com/apk/res/android " >
    < item android : drawable = " @drawable/ic_myicon_selected " android : state_selected = " true " />
    < item android : drawable = " @drawable/ic_myicon_default " android : state_selected = " false " />
</ selector >

res/xml/bottombar_tabs.xml

...
< tab
    id = " @+id/tab_favorites "
    icon = " @drawable/my_tab_icon "
    title = " Favorites " />
<!-- You can use @color resources too! -->
...

色が変わるタブはおしゃれに見えます。どうやって？

各タブにbarColorWhenSelectedを追加するだけです。そのタブが選択されると、BottomBar 全体の背景色が素晴らしいアニメーションで変わります。

res/xml/bottombar_tabs.xml

< tabs >
    < tab
        id = " @+id/tab_favorites "
        icon = " @drawable/ic_favorites "
        title = " Favorites "
        barColorWhenSelected = " #5D4037 " />
    <!-- You can use @color resources too! -->
</ tabs >

ナビゲーションバーの下に描画するにはどうすればよいですか?

まず、メインアプリケーションテーマの子であるスタイルを定義します。

res/values-v21/styles.xml

< style name = " AppTheme.TransNav " parent = " AppTheme " >
    < item name = " android:navigationBarColor " >@android:color/transparent</ item >
    < item name = " android:windowTranslucentNavigation " >true</ item >
    < item name = " android:windowDrawsSystemBarBackgrounds " >true</ item >
</ style >

Lollipop よりも前の API レベルでのクラッシュを避けるために、同じテーマのスタブバージョンを作成する必要もあります。

res/values/styles.xml

< style name = " AppTheme.TransNav " parent = " AppTheme " />

また、透明なナビゲーションバーや横向きでの奇妙な動作を避けるためにvalues-land-v21.xmlにも同じスタブを含めます。

res/values-land-v21.xml:

< style name = " AppTheme.TransNav " parent = " AppTheme " />

AndroidManifest.xmlのテーマをアクティビティに適用します。

AndroidManifest.xml:

< activity android : name = " .MyAwesomeActivity " android : theme = " @style/AppTheme.TransNav " />

最後に、 bb_behaviorにunderNavbarフラグを含めるように設定すれば準備完了です。

activity_my_awesome.xml:

< com .roughike.bottombar.BottomBar
    android : id = " @+id/bottomBar "
    android : layout_width = " match_parent "
    android : layout_height = " 56dp "
    android : layout_alignParentBottom = " true "
    app : bb_tabXmlResource = " @xml/my_awesome_bottombar_tabs "
    app : bb_behavior = " underNavbar " />

タブレットについてはどうですか?

res/layout-sw600dpフォルダーでアクティビティに別のレイアウトを指定し、 bb_tabletMode true に設定します。

res/layout-sw600dp/activity_main.xml:

< RelativeLayout
    xmlns : android = " http://schemas.android.com/apk/res/android "
    xmlns : app = " http://schemas.android.com/apk/res-auto "
    android : layout_width = " match_parent "
    android : layout_height = " match_parent " >

    < com .roughike.bottombar.BottomBar
        android : id = " @+id/bottomBar "
        android : layout_width = " wrap_content "
        android : layout_height = " match_parent "
        android : layout_alignParentLeft = " true "
        app : bb_tabXmlResource = " @xml/bottombar_tabs_three "
        app : bb_tabletMode = " true " />

    <!-- This could be your fragment container, or something -->
    < FrameLayout
        android : id = " @+id/contentContainer "
        android : layout_width = " match_parent "
        android : layout_height = " match_parent "
        android : layout_toRightOf = " @+id/bottomBar " />

</ RelativeLayout >

スクロール時に自動的に非表示にするにはどうすればよいですか?

簡単、簡単！

activity_main.xml:

< android .support.design.widget.CoordinatorLayout xmlns : android = " http://schemas.android.com/apk/res/android "
    xmlns : app = " http://schemas.android.com/apk/res-auto "
    android : layout_width = " match_parent "
    android : layout_height = " match_parent " >

    < android .support.v4.widget.NestedScrollView
        android : id = " @+id/myScrollingContent "
        android : layout_width = " match_parent "
        android : layout_height = " match_parent " >

        <!-- Your loooooong scrolling content here. -->

    </ android .support.v4.widget.NestedScrollView>

    < com .roughike.bottombar.BottomBar
        android : id = " @+id/bottomBar "
        android : layout_width = " match_parent "
        android : layout_height = " 60dp "
        android : layout_gravity = " bottom "
        app : bb_tabXmlResource = " @xml/bottombar_tabs_three "
        app : bb_behavior = " shy " />

</ android .support.design.widget.CoordinatorLayout>

バッジ

未読メッセージ数や新しいアイテムなど、好きなものを表示するバッジを簡単に追加できます。

 BottomBarTab nearby = bottomBar . getTabWithId ( R . id . tab_nearby );
nearby . setBadgeCount ( 5 );

// Remove the badge when you're done with it.
nearby . removeBadge /();

すべてのカスタマイズオプション

ボトムバーの場合

< com .roughike.bottombar.BottomBar
    android : id = " @+id/bottomBar "
    android : layout_width = " match_parent "
    android : layout_height = " 60dp "
    android : layout_alignParentBottom = " true "
    app : bb_tabXmlResource = " @xml/bottombar_tabs_three "
    app : bb_tabletMode = " true "
    app : bb_behavior = " shifting|shy|underNavbar "
    app : bb_inActiveTabAlpha = " 0.6 "
    app : bb_activeTabAlpha = " 1 "
    app : bb_inActiveTabColor = " #222222 "
    app : bb_activeTabColor = " @color/colorPrimary "
    app : bb_badgesHideWhenActive = " true "
    app : bb_titleTextAppearance = " @style/MyTextAppearance "
    app : bb_titleTypeFace = " fonts/MySuperDuperFont.ttf "
    app : bb_showShadow = " true " />

bb_tabXmlリソース: タブの XML リソース ID。values values/xml/にあります。
bb_tabletモード: タブレットに対して BottomBar の動作を変えたい場合。サンプルプロジェクトにはこの例があります。
bb_behaviour: shifting : 選択したタブが残りのタブよりも幅が広くなります。 shy : BottomBar を CoordinatorLayout 内に置くと、スクロール時に自動的に非表示になります。 underNavbar : navBar の下に BottomBar を描画します。
bb_inActiveTabAlpha: 非アクティブなタブのアルファ値。タブのアイコンとタイトルで使用されます。
bb_activeTabAlpha: アクティブなタブのアルファ値。タブのアイコンとタイトルで使用されます。
bb_inActiveTabColor: 非アクティブなタブの色。タブのアイコンとタイトルで使用されます。
bb_activeTabColor: アクティブなタブの色。タブのアイコンとタイトルで使用されます。
bb_badge背景色: このBottomBarのバッジの背景色。
bb_badgesHideWhenActive: アクティブなタブのバッジを非表示にするかどうか。デフォルトは true です。
bb_titleTextAppearance: タイトルのカスタムテキストの外観
bb_titleTypeFace: カスタムフォントファイルのパス ( fonts/MySuperDuperFont.ttfなど)。その場合、フォントパスはsrc/main/assets/fonts/MySuperDuperFont.ttfのようになりますが、アセットフォルダーは自動的に入力されるため、指定する必要があるのはfonts/MySuperDuperFont.ttfだけです。
bb_showShadow: 影を表示するか非表示にするかを制御します。デフォルトは true です。

タブの場合

< tab
    id = " @+id/tab_recents "
    title = " Recents "
    icon = " @drawable/empty_icon "
    inActiveColor = " #00FF00 "
    activeColor = " #FF0000 "
    barColorWhenSelected = " #FF0000 "
    badgeBackgroundColor = " #FF0000 "
    badgeHidesWhenActive = " true " />

インアクティブカラー: 非アクティブなタブの色。タブのアイコンとタイトルで使用されます。
アクティブカラー: アクティブなタブの色。タブのアイコンとタイトルで使用されます。
バーの色選択時: このタブを選択したときの BottomBar 全体の色。
バッジ背景色: このタブのバッジの背景色。
バッジ非表示時アクティブ: このタブが選択されたときにバッジを非表示にするかどうか。デフォルトは true です。

BottomBar を使用するアプリ

Nearby : 500 万人を超えるユーザーがいる位置情報ベースのソーシャルネットワーキングアプリ。
FragNav : フラグメントの複数のスタックを管理するための Android ライブラリ。 BottomBar はサンプルアプリで使用されます。
BottomNavigationBar : Xamarin 開発者向けに C# に移植された BottomBar
KydoScoreBookTeam : BottomBar は、KyudoScoreBookTeam アプリで使用されます。
memeham : BottomBar は memeham アプリで使用されます。
NewsCatchr : この BottomBar ライブラリを使用するニュースリーダーアプリ。
GitSkarios : リポジトリや Gist などにアクセスするための Github Android アプリ!
- コード

README.md を変更してプルリクエストを送信して、声を上げてください。

貢献

自由に問題を作成したりプルリクエストを作成したりしてください。

プルリクエストを作成するときは、多ければ多いほど良いです。すべてのプルリクエストを組み合わせて巨大なプルリクエストを作成するのではなく、機能ごとに分割した 10 個の小さなプルリクエストを確認したいと考えています。

ライセンス

 BottomBar library for Android
Copyright (c) 2016 Iiro Krankka (http://github.com/roughike).

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.

拡大する

BottomBar

BottomBar (非推奨)

バージョン2.0がリリースされました！

何？

私のゲイリーおじいちゃんの HTC ドリームでも動作しますか?

グラドルの甘さを教えてください。

どうやって？

アイコンの作成

XMLリソースからの項目の追加

リスナーの設定

タブ選択のインターセプト

選択状態に基づいてアイコンを変更する

色が変わるタブはおしゃれに見えます。どうやって？

ナビゲーションバーの下に描画するにはどうすればよいですか?

タブレットについてはどうですか?

スクロール時に自動的に非表示にするにはどうすればよいですか?

バッジ

すべてのカスタマイズオプション

ボトムバーの場合

タブの場合

BottomBar を使用するアプリ

貢献

ライセンス

redisson

PrettyZoo

kkFileView

AlgoDS

visearch sdk javascript

opentelemetry java instrumentation

chat.petals.dev

GPT Prompt Templates

GPTyped

redisson

PrettyZoo

kkFileView

wp functions

waymo open dataset

slugify

BottomBar

BottomBar (非推奨)

バージョン2.0がリリースされました！

何？

私のゲイリーおじいちゃんの HTC ドリームでも動作しますか?

グラドルの甘さを教えてください。

どうやって？

アイコンの作成

XMLリソースからの項目の追加

リスナーの設定

タブ選択のインターセプト

選択状態に基づいてアイコンを変更する

色が変わるタブはおしゃれに見えます。どうやって？

ナビゲーションバーの下に描画するにはどうすればよいですか?

タブレットについてはどうですか?

スクロール時に自動的に非表示にするにはどうすればよいですか?

バッジ

すべてのカスタマイズ オプション

ボトムバーの場合

タブの場合

BottomBar を使用するアプリ

貢献

ライセンス

すべてのカスタマイズオプション