Android bar Navigasi Bawah baru atau BottomNavigationView

133

Melihat pedoman baru keluar, dan digunakan di google photosaplikasi terbaru. Tidak tahu cara menggunakan Bilah Navigasi Bawah baru. Lihat melalui lib dukungan baru, tidak menemukan petunjuk apa pun.

masukkan deskripsi gambar di sini

Tidak dapat menemukan sampel resmi.

Bagaimana cara menggunakan bilah Bawah baru? Tidak ingin melakukan penyesuaian.

zjywill
sumber
Anda dapat melihat jawaban saya: stackoverflow.com/a/44967021/2412582
Prashant

Jawaban:

175

Saya pikir Anda mungkin mencari ini.

Berikut cuplikan singkat untuk memulai:

public class MainActivity extends AppCompatActivity {
    private BottomBar mBottomBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Notice how you don't use the setContentView method here! Just
        // pass your layout to bottom bar, it will be taken care of.
        // Everything will be just like you're used to.
        mBottomBar = BottomBar.bind(this, R.layout.activity_main,
                savedInstanceState);

        mBottomBar.setItems(
                new BottomBarTab(R.drawable.ic_recents, "Recents"),
                new BottomBarTab(R.drawable.ic_favorites, "Favorites"),
                new BottomBarTab(R.drawable.ic_nearby, "Nearby"),
                new BottomBarTab(R.drawable.ic_friends, "Friends")
        );

        mBottomBar.setOnItemSelectedListener(new OnTabSelectedListener() {
            @Override
            public void onItemSelected(final int position) {
                // the user selected a new tab
            }
        });
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        mBottomBar.onSaveInstanceState(outState);
    }
}

Berikut ini tautan referensi.

https://github.com/roughike/BottomBar

EDIT Rilis Baru.

Tampilan Navigasi Bawah telah ada dalam pedoman desain material untuk beberapa waktu, tetapi tidak mudah bagi kami untuk mengimplementasikannya ke dalam aplikasi kami. Beberapa aplikasi telah membangun solusi mereka sendiri, sementara yang lain mengandalkan perpustakaan sumber terbuka pihak ketiga untuk menyelesaikan pekerjaan. Sekarang pustaka dukungan desain melihat penambahan bilah navigasi bawah ini, mari selami bagaimana kita dapat menggunakannya!

Cara Penggunaan ?

Untuk memulainya kita perlu memperbarui ketergantungan kita!

compile com.android.support:design:25.0.0

Desain xml.

<?xml version="1.0" encoding="utf-8"?>
<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">

    <!-- Content Container -->

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@color/white"
        app:itemTextColor="@color/white"
        app:menu="@menu/bottom_navigation_main" />

</RelativeLayout>

Buat menu sesuai kebutuhan Anda.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_favorites"
        android:enabled="true"
        android:icon="@drawable/ic_favorite_white_24dp"
        android:title="@string/text_favorites"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_schedules"
        android:enabled="true"
        android:icon="@drawable/ic_access_time_white_24dp"
        android:title="@string/text_schedules"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_music"
        android:enabled="true"
        android:icon="@drawable/ic_audiotrack_white_24dp"
        android:title="@string/text_music"
        app:showAsAction="ifRoom" />
</menu>

Menangani status Diaktifkan / Dinonaktifkan. Buat file pemilih.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item
      android:state_checked="true"
      android:color="@color/colorPrimary" />
  <item
      android:state_checked="false"
      android:color="@color/grey" />
 </selector>

Tangani acara klik.

BottomNavigationView bottomNavigationView = (BottomNavigationView)
                findViewById(R.id.bottom_navigation);

bottomNavigationView.setOnNavigationItemSelectedListener(
        new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_favorites:

                        break;
                    case R.id.action_schedules:

                        break;
                    case R.id.action_music:

                        break;
                }
                return false;
            }
});

Sunting: Menggunakan Androidx Anda hanya perlu menambahkan dependensi di bawah ini.

implementation 'com.google.android.material:material:1.2.0-alpha01'

Tata letak

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:app="http://schemas.android.com/apk/res-auto" 
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent">
    <com.google.android.material.bottomnavigation.BottomNavigationView
            android:layout_gravity="bottom"
            app:menu="@menu/bottom_navigation_menu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
</FrameLayout>

Jika Anda ingin membaca lebih lanjut tentang metode itu dan cara kerjanya, baca ini.

Tentunya itu akan membantu Anda.

Jay Rathod RJ
sumber
bilah bawah dalam sampel masih menyesuaikan sendiri, cara apa pun untuk menggunakan lib android asli. Saya pikir itu mungkin di lib dukungan. Atau belum umum?
zjywill
@ zjywill Ini tidak disesuaikan tetapi ini adalah cara untuk menggunakan fungsionalitas bilah navigasi bawah resmi di aplikasi kami. Coba saja kode ini.
Jay Rathod RJ
1
Saya tidak akan menyarankan Anda untuk menggunakan bottomhike bottom bar karena API tidak sepenuhnya diimplementasikan dan saya mengalami masalah rendering. Anda tidak dapat mengubah Ikon saat runtime, dan itu terus mengabaikan warna yang telah saya tetapkan untuk latar belakang tombol.
Alon Kogan
Tolong jawab bahwa bagaimana saya bisa menyelamatkan sejarah
Mitul Goti
1
Refleksi java di mShiftingMode membantu saya! Saya tidak tahu apa yang mereka pikirkan dengan tidak mengekspos bidang ini
Pisang droid
48

Anda harus menggunakan BottomNavigationView dari v25 Android Support Library. Ini mewakili bilah navigasi bawah standar untuk aplikasi.

Berikut adalah posting di Medium yang memiliki panduan langkah demi langkah: https://medium.com/@hitherejoe/exploring-the-android-design-support-library-bottom-navigation-drawer-548de699e8e0e.9#.9vmiekxze

Maksim Turaev
sumber
2
stackoverflow.com/questions/40153888/... halo pepatah .. saya menerapkan ini, tetapi tidak muncul ..
Sagar Chavada
@SagarChavada Anda mungkin ingin melihat di pos
Maksim Turaev
5
@DroidDev itu karena BottomNavigationView dirilis pada hari jawaban ini diposting. Sebelum itu hanya solusi pihak ketiga yang tersedia.
Apakah Anda tahu jika Anda dapat melakukan tampilan khusus dengan adaptor untuk itu?
Radu
1
@Lan, sepertinya BottomNavigationView adalah bagian dari Support Library yang telah mendukung API level 9, jadi saya rasa ini akan berfungsi. Anda masih dapat memeriksanya di emulator untuk memastikan 100%.
Maksim Turaev
17

Jawaban asli saya berkaitan dengan BottomNavigationView, tetapi sekarang ada BottomAppBar. Saya menambahkan bagian di atas untuk itu dengan tautan implementasi.

Bilah Aplikasi Bawah

The BottomAppBarmendukung Tombol Terapung Aksi.

masukkan deskripsi gambar di sini

Gambar dari sini . Lihat dokumentasi dan tutorial ini untuk bantuan mengatur BottomAppBar.

Tampilan Navigasi Bawah

Contoh lengkap berikut menunjukkan cara membuat Tampilan Navigasi Bawah mirip dengan gambar dalam pertanyaan. Lihat juga Navigasi Bawah dalam dokumentasi.

masukkan deskripsi gambar di sini

Tambahkan perpustakaan dukungan desain

Tambahkan baris ini ke file build.grade aplikasi Anda di sebelah hal pustaka dukungan lainnya.

implementation 'com.android.support:design:28.0.0'

Ganti nomor versi dengan apa pun yang saat ini.

Buat tata letak Aktivitas

Satu-satunya hal khusus yang kami tambahkan ke tata letak adalah BottomNavigationView. Untuk mengubah warna ikon dan teks saat diklik, Anda dapat menggunakan selectoralih - alih menentukan warna secara langsung. Ini dihilangkan karena kesederhanaan di sini.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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">

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_nav_menu"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@android:color/white"
        app:itemTextColor="@android:color/white" />

</RelativeLayout>

Perhatikan bahwa kami dulu layout_alignParentBottombenar-benar meletakkannya di bagian bawah.

Tentukan item menu

Xml di atas untuk Lihat Navigasi Bawah disebut bottom_nav_menu. Inilah yang mendefinisikan setiap item dalam pandangan kami. Kami akan membuatnya sekarang. Yang harus Anda lakukan adalah menambahkan sumber daya menu seperti yang Anda lakukan untuk Bilah Tindakan atau Bilah Alat.

bottom_nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_recents"
        android:enabled="true"
        android:icon="@drawable/ic_action_recents"
        android:title="Recents"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_favorites"
        android:enabled="true"
        android:icon="@drawable/ic_action_favorites"
        android:title="Favorites"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_nearby"
        android:enabled="true"
        android:icon="@drawable/ic_action_nearby"
        android:title="Nearby"
        app:showAsAction="ifRoom" />
</menu>

Anda perlu menambahkan ikon yang sesuai untuk proyek Anda. Ini tidak terlalu sulit jika Anda pergi ke File> New> Image Asset dan pilih Action Bar dan Tab Ikon sebagai Jenis Ikon.

Tambahkan item pendengar yang dipilih

Tidak ada yang istimewa terjadi di sini. Kami hanya menambahkan pendengar ke Bilah Navigasi Bawah dalam onCreatemetode Aktivitas kami .

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation);
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_recents:
                        Toast.makeText(MainActivity.this, "Recents", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_favorites:
                        Toast.makeText(MainActivity.this, "Favorites", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_nearby:
                        Toast.makeText(MainActivity.this, "Nearby", Toast.LENGTH_SHORT).show();
                        break;

                }
                return true;
            }
        });
    }
}

butuh lebih banyak bantuan?

Saya belajar cara melakukan ini dengan menonton video YouTube berikut. Suara komputer agak aneh, tetapi demonstrasi sangat jelas.

Suragch
sumber
16

Anda juga dapat menggunakan Layout Tab dengan tampilan tab khusus untuk mencapai ini.

custom_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:gravity="center"
    android:orientation="vertical"
    android:paddingBottom="10dp"
    android:paddingTop="8dp">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:scaleType="centerInside"
        android:src="@drawable/ic_recents_selector" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        android:textAllCaps="false"
        android:textColor="@color/tab_color"
        android:textSize="12sp"/>
</LinearLayout>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager

        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        style="@style/AppTabLayout"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="?attr/colorPrimary" />

</LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {
    private TabLayout mTabLayout;

    private int[] mTabsIcons = {
            R.drawable.ic_recents_selector,
            R.drawable.ic_favorite_selector,
            R.drawable.ic_place_selector};


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Setup the viewPager
        ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
        MyPagerAdapter pagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(pagerAdapter);

        mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
        mTabLayout.setupWithViewPager(viewPager);

        for (int i = 0; i < mTabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = mTabLayout.getTabAt(i);
            tab.setCustomView(pagerAdapter.getTabView(i));
        }

        mTabLayout.getTabAt(0).getCustomView().setSelected(true);
    }


    private class MyPagerAdapter extends FragmentPagerAdapter {

        public final int PAGE_COUNT = 3;

        private final String[] mTabsTitle = {"Recents", "Favorites", "Nearby"};

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        public View getTabView(int position) {
            // Given you have a custom layout in `res/layout/custom_tab.xml` with a TextView and ImageView
            View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_tab, null);
            TextView title = (TextView) view.findViewById(R.id.title);
            title.setText(mTabsTitle[position]);
            ImageView icon = (ImageView) view.findViewById(R.id.icon);
            icon.setImageResource(mTabsIcons[position]);
            return view;
        }

        @Override
        public Fragment getItem(int pos) {
            switch (pos) {

                case 0:
                    return PageFragment.newInstance(1);

                case 1:
                    return PageFragment.newInstance(2);
                case 2:
                    return PageFragment.newInstance(3);

            }
            return null;
        }

        @Override
        public int getCount() {
            return PAGE_COUNT;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mTabsTitle[position];
        }
    }

}

Unduh Proyek Sampel Lengkap

waleedsarwar86
sumber
8
Menurut pedoman desain Google, seseorang seharusnya tidak menggunakan gerakan menggesekkan untuk beralih antar tab. google.com/design/spec/components/…
Carl B
1
Akan lebih bagus jika Anda meletakkan kredit untuk penulis yang menulis perilaku :)
Nikola Despotoski
13

Google telah meluncurkan BottomNavigationView setelah versi 25.0.0 dari perpustakaan dukungan desain. Tetapi ia datang dengan batasan-batasan berikut:

  1. Anda tidak dapat menghapus judul dan ikon tengah.
  2. Anda tidak dapat mengubah ukuran teks judul.
  3. Y̶o̶u̶ ̶c̶a̶n̶'̶t̶ ̶c̶h̶a̶n̶g̶e̶ ̶t̶h̶e̶ ̶b̶a̶c̶k̶g̶r̶o̶u̶n̶d̶ ̶c̶o̶r̶ ̶i̶t̶ ̶i̶̶̶̶̶ ̶i̶̶̶̶̶̶̶̶̶̶̶
  4. Itu tidak memiliki BottomNavigationBehavior: jadi tidak ada integrasi dengan FAB atau SnackBar melalui CordinatorLayout.
  5. Setiap menuItem adalah ekstensi murni dari FrameLayout sehingga tidak memiliki efek lingkaran yang bagus

Jadi maks yang dapat Anda lakukan dengan versi pertama BottomNavigationView adalah: (tanpa refleksi atau mengimplementasikan lib sendiri).

masukkan deskripsi gambar di sini

Jadi, Jika Anda menginginkan semua ini. Anda bisa menggunakan perpustakaan bagian ketiga seperti roughike / BottomBar atau mengimplementasikan lib sendiri.

Sanf0rd
sumber
4
Hanya untuk catatan, Anda dapat mengubah warna latar belakang dan Anda dapat mengubah ukuran teks judul (saya telah menemukan masalah lain dengan metode yang saya gunakan). menggunakan android: background = "xxx" akan mengubah warna latar belakangnya, tetapi jika Anda juga menentukan app:itemBackground="xxx"semua item membagikan warna ini dan Anda tidak dapat melihat latar belakangnya (kecuali Anda menambahkan transparansi, tetapi tetap saja, semua ikon berbagi warna yang sama) . Sangat timpang bahwa tim Android merilis komponen yang jelek ... selalu 75% selesai, kehilangan jarak ekstra yang akan membuatnya hebat.
Martin Marconcini
kita dapat mengubah warna latar belakang
Steve
hai, saya menggunakan lib yang sama dan berfungsi dengan baik tetapi di sini saya ingin menampilkan hanya ikon tanpa judul di tengah bar bawah. apa itu mungkin? dan saya sudah mencoba untuk mengosongkan item menu tetapi ikon masih menunjukkan di atas saja. bagaimana saya bisa menampilkan hanya ikon tanpa judul di tengah bilah Bawah?
user512
hai, silakan periksa jawaban saya untuk ini di sini stackoverflow.com/questions/40183239/...
Sanf0rd
@MartinMarconcini Bagaimana Anda mengubah ukuran teks untuk tampilan navigasi bawah?
Ponsuyambu Velladurai
10

Seperti yang disebutkan Sanf0rd, Google meluncurkan BottomNavigationView sebagai bagian dari Design Support Library versi 25.0.0 . Keterbatasan yang dia sebutkan sebagian besar benar, kecuali bahwa Anda BISA mengubah warna latar belakang tampilan dan bahkan warna teks dan warna ikon ikon. Ini juga memiliki animasi ketika Anda menambahkan lebih dari 4 item (sayangnya itu tidak dapat diaktifkan atau dinonaktifkan secara manual).

Saya menulis tutorial terperinci tentang hal itu dengan contoh dan repositori yang menyertainya, yang dapat Anda baca di sini: https://blog.autsoft.hu/now-you-can-use-the-bottom-navigation-view-in-the- desain-dukungan-perpustakaan /


Intinya

Anda harus menambahkan ini di tingkat aplikasi Anda build.gradle:

compile 'com.android.support:appcompat-v7:25.0.0'  
compile 'com.android.support:design:25.0.0'

Anda dapat memasukkannya dalam tata letak Anda seperti ini:

<android.support.design.widget.BottomNavigationView  
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/bottom_navigation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemBackground="@color/darkGrey"
        app:itemIconTint="@color/bottom_navigation_item_background_colors"
        app:itemTextColor="@color/bottom_navigation_item_background_colors"
        app:menu="@menu/menu_bottom_navigation" />

Anda dapat menentukan item melalui sumber daya menu seperti ini:

<?xml version="1.0" encoding="utf-8"?>  
<menu  
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_one"
        android:icon="@android:drawable/ic_dialog_map"
        android:title="One"/>
    <item
        android:id="@+id/action_two"
        android:icon="@android:drawable/ic_dialog_info"
        android:title="Two"/>
    <item
        android:id="@+id/action_three"
        android:icon="@android:drawable/ic_dialog_email"
        android:title="Three"/>
    <item
        android:id="@+id/action_four"
        android:icon="@android:drawable/ic_popup_reminder"
        android:title="Four"/>
</menu>

Dan Anda dapat mengatur warna dan warna teks sebagai daftar warna, sehingga item yang dipilih saat ini disorot:

<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:color="@color/colorAccent"
        android:state_checked="false"/>
    <item
        android:color="@android:color/white"
        android:state_checked="true"/>

</selector>

Akhirnya, Anda dapat menangani pemilihan item dengan OnNavigationItemSelectedListener:

bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {  
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        Fragment fragment = null;
        switch (item.getItemId()) {
            case R.id.action_one:
                // Switch to page one
                break;
            case R.id.action_two:
                // Switch to page two
                break;
            case R.id.action_three:
                // Switch to page three
                break;
        }
        return true;
    }
});
Balázs Gerlei
sumber
1
Luar biasa! Saran - hapus aplikasi: itemBackground = "@ color / darkGrey" untuk mencapai efek riak melingkar asli.
Gark
8

Perpustakaan alternatif lain yang dapat Anda coba: - https://github.com/Ashok-Varma/BottomNavigation

<com.ashokvarma.bottomnavigation.BottomNavigationBar
    android:layout_gravity="bottom"
    android:id="@+id/bottom_navigation_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);

bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home"))
                .addItem(new BottomNavigationItem(R.drawable.ic_book_white_24dp, "Books"))
                .addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp, "Music"))
                .addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp, "Movies & TV"))
                .addItem(new BottomNavigationItem(R.drawable.ic_videogame_asset_white_24dp, "Games"))
                .initialise();
Ashok Varma
sumber
1
Satu perpustakaan serupa lainnya adalah AHBottomNavigation: github.com/aurelhubert/ahbottomnavigation
ninjahoahong
3

Saya pikir ini juga bermanfaat.

Potongan

public class MainActivity : AppCompatActivity, BottomNavigationBar.Listeners.IOnTabSelectedListener
{
    private BottomBar _bottomBar;

    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);

        SetContentView(Resource.Layout.MainActivity);

        _bottomBar = BottomBar.Attach(this, bundle);
        _bottomBar.SetItems(
            new BottomBarTab(Resource.Drawable.ic_recents, "Recents"),
            new BottomBarTab(Resource.Drawable.ic_favorites, "Favorites"),
            new BottomBarTab(Resource.Drawable.ic_nearby, "Nearby")
        );
        _bottomBar.SetOnItemSelectedListener(this);
        _bottomBar.HideShadow();
        _bottomBar.UseDarkTheme(true);
        _bottomBar.SetTypeFace("Roboto-Regular.ttf");

        var badge = _bottomBar.MakeBadgeForTabAt(1, Color.ParseColor("#f02d4c"), 1);
        badge.AutoShowAfterUnSelection = true;
    }

    public void OnItemSelected(int position)
    {

    }

    protected override void OnSaveInstanceState(Bundle outState)
    {
        base.OnSaveInstanceState(outState);

        // Necessary to restore the BottomBar's state, otherwise we would
        // lose the current tab on orientation change.
        _bottomBar.OnSaveInstanceState(outState);
    }
}

Tautan

https://github.com/pocheshire/BottomNavigationBar

Ini https://github.com/roughike/BottomBar porting ke C # untuk pengembang Xamarin

Pocheshire
sumber
3

saya telah membuat kelas privat yang menggunakan gridview dan sumber daya menu:

private class BottomBar {

    private GridView mGridView;
    private Menu     mMenu;
    private BottomBarAdapter mBottomBarAdapter;
    private View.OnClickListener mOnClickListener;

    public BottomBar (@IdRes int gridviewId, @MenuRes int menuRes,View.OnClickListener onClickListener) {
        this.mGridView = (GridView) findViewById(gridviewId);
        this.mMenu = getMenu(menuRes);
        this.mOnClickListener = onClickListener;

        this.mBottomBarAdapter = new BottomBarAdapter();
        this.mGridView.setAdapter(mBottomBarAdapter);
    }

    private Menu getMenu(@MenuRes int menuId) {
        PopupMenu p = new PopupMenu(MainActivity.this,null);
        Menu menu = p.getMenu();
        getMenuInflater().inflate(menuId,menu);
        return menu;
    }

    public GridView getGridView(){
        return mGridView;
    }

    public void show() {
        mGridView.setVisibility(View.VISIBLE);
        mGridView.animate().translationY(0);
    }

    public void hide() {
        mGridView.animate().translationY(mGridView.getHeight());
    }



    private class BottomBarAdapter extends BaseAdapter {

        private LayoutInflater    mInflater;

        public BottomBarAdapter(){
            this.mInflater = LayoutInflater.from(MainActivity.this);
        }

        @Override
        public int getCount() {
            return mMenu.size();
        }

        @Override
        public Object getItem(int i) {
            return mMenu.getItem(i);
        }

        @Override
        public long getItemId(int i) {
            return 0;
        }

        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {

            MenuItem item = (MenuItem) getItem(i);

            if (view==null){
                view = mInflater.inflate(R.layout.your_item_layout,null);
                view.setId(item.getItemId());
            }

            view.setOnClickListener(mOnClickListener);
            view.findViewById(R.id.bottomnav_icon).setBackground(item.getIcon());
            ((TextView) view.findViewById(R.id.bottomnav_label)).setText(item.getTitle());

            return view;
        }
    }

your_menu.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/item1_id"
        android:icon="@drawable/ic_item1"
        android:title="@string/title_item1"/>
    <item android:id="@+id/item2_id"
        android:icon="@drawable/ic_item2"
        android:title="@string/title_item2"/>
    ...
</menu>

dan item tata letak khusus your_item_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_margin="16dp">
    <ImageButton android:id="@+id/bottomnav_icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_gravity="top|center_horizontal"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="4dp"/>
    <TextView android:id="@+id/bottomnav_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="4dp"
        style="@style/mystyle_label" />
</LinearLayout>

penggunaan di dalam aktivitas utama Anda:

BottomBar bottomBar = new BottomBar(R.id.YourGridView,R.menu.your_menu, mOnClickListener);

dan

private View.OnClickListener mOnClickListener = new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.item1_id:
                //todo item1
                break;
            case R.id.item2_id:
                //todo item2
                break;
            ...
        }
    }
}

dan di layout_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    ...
    <FrameLayout android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <GridView android:id="@+id/bottomNav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/your_background_color"
        android:verticalSpacing="0dp"
        android:horizontalSpacing="0dp"
        android:numColumns="4"
        android:stretchMode="columnWidth"
        app:layout_anchor="@id/fragment_container"
        app:layout_anchorGravity="bottom"/>
</android.support.design.widget.CoordinatorLayout>
G Dias
sumber
3

Ada BottomNavigationView resmi baru di versi 25 dari Perpustakaan Dukungan Desain

https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html tambahkan gradle compile 'com.android.support:design:25.0.0'

XML

<android.support.design.widget.BottomNavigationView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:design="http://schema.android.com/apk/res/android.support.design"
    android:id="@+id/navigation"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    design:menu="@menu/my_navigation_items" />
Mrk_Slk
sumber
1

Pustaka ini, BottomNavigationViewEx , memperluas BottomNavigationView Google. Anda dapat dengan mudah menyesuaikan perpustakaan Google untuk memiliki bilah navigasi bawah seperti yang Anda inginkan. Anda dapat menonaktifkan mode pemindahan, mengubah visibilitas ikon dan teks dan banyak lagi. Pasti mencobanya.

Anky An
sumber
0

Saya telah merujuk pos github ini dan saya telah mengatur halaman three layoutsuntuk three fragmentdi bilah tab bawah.

FourButtonsActivity.java:

bottomBar.setFragmentItems(getSupportFragmentManager(), R.id.fragmentContainer,
            new BottomBarFragment(LibraryFragment.newInstance(R.layout.library_fragment_layout), R.drawable.ic_update_white_24dp, "Recents"),
            new BottomBarFragment(PhotoEffectFragment.newInstance(R.layout.photo_effect_fragment), R.drawable.ic_local_dining_white_24dp, "Food"),
            new BottomBarFragment(VideoFragment.newInstance(R.layout.video_layout), R.drawable.ic_favorite_white_24dp, "Favorites")

    );

Untuk mengatur jumlah lencana:

  BottomBarBadge unreadMessages = bottomBar.makeBadgeForTabAt(1, "#E91E63", 4);
  unreadMessages.show();
  unreadMessages.setCount(4);
  unreadMessages.setAnimationDuration(200);
  unreadMessages.setAutoShowAfterUnSelection(true);

LibraryFragment.java:

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class LibraryFragment extends Fragment {
    private static final String STARTING_TEXT = "Four Buttons Bottom Navigation";

    public LibraryFragment() {
    }

    public static LibraryFragment newInstance(int resource) {
        Bundle args = new Bundle();
        args.putInt(STARTING_TEXT, resource);

        LibraryFragment sampleFragment = new LibraryFragment();
        sampleFragment.setArguments(args);

        return sampleFragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {


        View view = LayoutInflater.from(getActivity()).inflate(
                getArguments().getInt(STARTING_TEXT), null);
        return view;


    }
Steve
sumber
0

Anda dapat membuat tata letak sesuai dengan jawaban yang disebutkan di atas Jika ada yang ingin menggunakan ini di kotlin: -

 private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
    when (item.itemId) {
        R.id.images -> {
          // do your work....
            return@OnNavigationItemSelectedListener true
        }
       R.id.videos ->
         {
          // do your work....
            return@OnNavigationItemSelectedListener true
        }
    }
    false
}

kemudian di oncreate Anda dapat mengatur pendengar di atas untuk tampilan Anda

   mDataBinding?.navigation?.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
Rohan Sharma
sumber
-1
<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="?android:attr/windowBackground"
    app:menu="@menu/navigation" />

navigation.xml (menu di dalam)

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home"
        app:showAsAction="always|withText"
        android:enabled="true"/>

onCreate()Metode di dalam ,

BottomNavigationView navigation = (BottomNavigationView)findViewById(R.id.navigation);
//Dont forgot this line     
BottomNavigationViewHelper.disableShiftMode(navigation);

Dan Buat kelas seperti di bawah ini.

public class BottomNavigationViewHelper {
    public static void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                //noinspection RestrictedApi
                item.setShiftingMode(false);
                // set once again checked value, so view will be updated
                //noinspection RestrictedApi
                item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            Log.e("BNVHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BNVHelper", "Unable to change value of shift mode", e);
        }
    }
}
Kishore Reddy
sumber