Unduhan BottomBar - Unduhan kode sumber BottomBar

Bilah Bawah (Tidak Digunakan Lagi)

Saya tidak punya waktu untuk mempertahankan ini lagi. Saya pada dasarnya menulis seluruh perpustakaan dengan tergesa-gesa, tanpa tes, sambil menjadi ahli pemula yang serius pada saat itu. Akibatnya, ada banyak bagian bergerak yang tidak dapat diprediksi dan pengujiannya mungkin juga tidak terlalu bagus. Entahlah, karena sudah lama sekali aku tidak menyentuhnya.

Saya menyarankan Anda untuk menggunakan BottomNavigationView resmi dari Google dan mendesak mereka untuk mengimplementasikan fitur yang Anda perlukan. Atau gunakan perpustakaan pihak ketiga lainnya.

Versi 2.0 dirilis!

Versi terbaru sebelumnya dapat ditemukan di cabang v1

Kode yang lebih bersih dan API yang lebih baik
Tidak ada lagi barang-barang yang tidak perlu atau kekacauan spageti
Sekarang tampilan, nuansa dan perilaku didefinisikan dalam XML, sebagaimana mestinya
Tidak ada lagi regresi buruk, berkat pengujian otomatis
Semuanya sedikit berbeda dibandingkan sebelumnya, tapi ini demi kebaikan yang lebih besar!

Bagaimana cara berkontribusi

log perubahan

Apa?

Komponen tampilan kustom yang meniru pola Navigasi Bawah Desain Material baru.

Apakah ini berfungsi pada HTC Dream Kakek Gary saya?

Tidak. Versi minSDK adalah API level 11 (Honeycomb).

Tolong beri aku rasa manis Gradle itu?

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

Pakar:

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

Bagaimana?

Anda dapat menambahkan item dengan menulis file sumber daya XML .

Membuat ikon

Ikon harus sepenuhnya buram, berwarna hitam pekat, 24 dp dan tanpa bantalan . Misalnya, dengan generator Ikon Generik Android Asset Studio, pilih "TRIM" dan pastikan paddingnya 0dp. Berikut tampilan ikon Anda:

Menambahkan item dari sumber daya XML

Tentukan tab Anda dalam file sumber daya 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 >

Kemudian, tambahkan BottomBar ke tata letak Anda dan berikan id sumber daya untuk file xml tab Anda.

tata letak/aktivitas_main.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 >

Menyiapkan pendengar

Secara default, tab tidak melakukan apa pun kecuali Anda mendengarkan peristiwa pemilihan dan melakukan sesuatu saat tab dipilih.

Aktivitas Utama.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.
                }
            }
        });
    }
}

Jika Anda ingin mendengarkan acara pemilihan ulang, berikut cara melakukannya:

 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.
        }
    }
});

Mencegat pilihan tab

Jika Anda ingin membatalkan pemilihan tab mana pun secara bersyarat, Anda pasti bisa. Cukup tetapkan TabSelectionInterceptor ke BottomBar, dan kembalikan nilai true dari metode shouldInterceptTabSelection() .

 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 ;
    }
});

Mengubah ikon berdasarkan status pemilihan

Jika Anda ingin memiliki ikon yang berbeda ketika tab tertentu dipilih, cukup gunakan sumber daya dapat digambar dari daftar status.

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! -->
...

Tab yang berubah warna itu terlihat keren. Bagaimana caranya?

Cukup tambahkan barColorWhenSelected ke setiap tab. Ketika tab itu dipilih, seluruh warna latar belakang BottomBar diubah dengan animasi yang bagus.

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 >

Bagaimana cara menggambarnya di bawah navbar?

Pertama, tentukan gaya yang merupakan turunan dari tema aplikasi utama Anda:

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 >

Anda juga harus membuat versi rintisan dari tema yang sama untuk menghindari kerusakan pada level API yang lebih lama dari Lollipop:

res/values/styles.xml

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

Sertakan juga stub yang sama di values-land-v21.xml Anda untuk menghindari bilah navigasi transparan dan perilaku aneh di lanskap.

res/nilai-tanah-v21.xml:

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

Terapkan tema di AndroidManifest.xml untuk Aktivitas Anda.

AndroidManifest.xml:

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

Terakhir, atur bb_behavior untuk menyertakan flag underNavbar dan Anda siap melakukannya!

aktivitas_saya_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 " />

Bagaimana dengan Tablet?

Tentukan tata letak berbeda untuk aktivitas Anda di folder res/layout-sw600dp dan atur bb_tabletMode ke 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 >

Bagaimana cara menyembunyikannya secara otomatis saat gulir?

Mudah sekali!

aktivitas_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>

Lencana

Anda dapat dengan mudah menambahkan lencana untuk menampilkan jumlah pesan yang belum dibaca atau item baru/apa pun yang Anda suka.

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

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

Semua opsi penyesuaian

Untuk Bilah Bawah

< 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_tabXmlResource: id Sumber Daya XML untuk tab Anda, yang berada di values/xml/
bb_tabletMode: jika Anda ingin BottomBar berperilaku berbeda untuk tablet. Ada contohnya di proyek sampel!
bb_perilaku: shifting : tab yang dipilih lebih lebar dari yang lain. shy : letakkan BottomBar di dalam CoordinatorLayout dan secara otomatis akan disembunyikan saat digulir! underNavbar : gambar BottomBar di bawah navBar!
bb_inActiveTabAlpha: nilai alfa untuk tab tidak aktif, yang digunakan dalam ikon dan judul tab.
bb_activeTabAlpha: nilai alfa untuk tab aktif, yang digunakan dalam ikon dan judul tab.
bb_inActiveTabColor: warna untuk tab yang tidak aktif, yang digunakan pada ikon dan judul tab.
bb_activeTabColor: warna untuk tab aktif, yang digunakan pada ikon dan judul tab.
bb_badgeBackgroundColor: warna latar belakang untuk setiap Lencana di BottomBar ini.
bb_badgesSembunyikanSaat Aktif: apakah lencana harus disembunyikan untuk tab aktif, defaultnya adalah true.
bb_titleTextAppearance: Tampilan teks khusus untuk judul
bb_titleTypeFace: jalur untuk file font khusus Anda, seperti fonts/MySuperDuperFont.ttf . Dalam hal ini jalur font Anda akan terlihat seperti src/main/assets/fonts/MySuperDuperFont.ttf , tetapi Anda hanya perlu menyediakan fonts/MySuperDuperFont.ttf , karena folder aset akan terisi otomatis untuk Anda.
bb_showShadow: mengontrol apakah bayangan ditampilkan atau disembunyikan, defaultnya adalah true.

Untuk tab

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

diActiveColor: warna untuk tab yang tidak aktif, yang digunakan pada ikon dan judul tab.
warna aktif: warna untuk tab aktif, yang digunakan pada ikon dan judul tab.
barWarnaSaat Dipilih: warna keseluruhan BottomBar saat memilih tab ini.
lencanaLatar BelakangWarna: warna latar belakang untuk setiap Lencana di tab ini.
lencanaSembunyikanSaat Aktif: apakah lencana harus disembunyikan saat tab ini dipilih atau tidak, defaultnya adalah true.

Aplikasi menggunakan BottomBar

Terdekat : Aplikasi jejaring sosial berbasis lokasi dengan lebih dari 5 juta pengguna.
FragNav : Perpustakaan Android untuk mengelola banyak tumpukan Fragmen. BottomBar digunakan dalam aplikasi sampel.
BottomNavigationBar : BottomBar porting ke C# untuk pengembang Xamarin
KyudoScoreBookTeam : BottomBar digunakan di aplikasi KyudoScoreBookTeam.
memeham : BottomBar digunakan di aplikasi memeham.
NewsCatchr : Aplikasi pembaca berita, yang menggunakan perpustakaan BottomBar ini.
GitSkarios : Aplikasi android Github, untuk mengunjungi repositori Anda, intisari dan banyak lagi!
- Kode

Kirimi saya permintaan tarik dengan README.md yang dimodifikasi untuk mendapatkan shoutout!

Kontribusi

Jangan ragu untuk membuat masalah dan menarik permintaan.

Saat membuat permintaan tarik, lebih banyak lebih baik: Saya ingin melihat sepuluh permintaan tarik kecil dipisahkan berdasarkan fitur daripada semuanya digabungkan menjadi satu besar.

Lisensi

 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.

Memperluas