Android yeni Alt Gezinme çubuğu veya BottomNavigationView


133

Yeni kılavuzun çıktığını ve google photosen son uygulamada kullanıldığını gördüm . Yeni Alt Gezinme Çubuğunu nasıl kullanacağınız hakkında hiçbir fikriniz yok. Yeni destek kitaplığına bakın, herhangi bir ipucu bulamadınız.

görüntü açıklamasını buraya girin

Resmi bir örnek bulunamadı.

Yeni Alt çubuk nasıl kullanılır? Herhangi bir özelleştirme yapmak istemiyorum.



: Cevabıma bakmak olabilir stackoverflow.com/a/44967021/2412582
Prashant

Yanıtlar:


175

Sanırım bunu arayabilirsin.

İşte başlamak için hızlı bir pasaj:

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

İşte referans bağlantısı.

https://github.com/roughike/BottomBar

Yeni Çıkanları DÜZENLE.

Alt Gezinme Görünümü bir süredir malzeme tasarım yönergelerinde yer aldı, ancak bunu uygulamalarımıza uygulamak bizim için kolay olmadı. Bazı uygulamalar kendi çözümlerini oluştururken, diğerleri işi yapmak için üçüncü taraf açık kaynak kitaplıklarına güveniyor. Şimdi tasarım destek kitaplığı bu alt gezinme çubuğunun eklendiğini görüyor, hadi onu nasıl kullanabileceğimize bir göz atalım!

Nasıl kullanılır ?

Başlamak için bağımlılığımızı güncellememiz gerekiyor!

compile com.android.support:design:25.0.0

Xml tasarlayın.

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

İhtiyaçlarınıza göre menü oluşturun.

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

Etkin / Devre Dışı durumları işleme. Seçici dosya yapın.

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

Tıklama olaylarını işleyin.

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

Düzenleme: Androidx'i kullanarak aşağıdaki bağımlılıkları eklemeniz yeterlidir.

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

Yerleşim

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

Yöntemleri ve nasıl çalıştığı hakkında daha fazla bilgi edinmek istiyorsanız, bunu okuyun.

Elbette size yardımcı olacaktır.


Örnekteki alt çubuk, orijinal android kütüphanesini kullanmak için herhangi bir şekilde kendi kendinize göre özelleştirmeye devam eder. Destek kütüphanesinde olabileceğini düşündüm. Veya henüz halka açık değil mi?
zjywill

@zjywill Özelleştirilmedi, ancak uygulamamızdaki resmi alt gezinme çubuğu işlevini kullanmanın bir yolu. Sadece bu kodu deneyin.
Jay Rathod RJ

1
API tam olarak uygulanmadığından ve oluşturma sorunlarıyla karşılaştığım için kaba yürüyüş alt çubuğunu kullanmanızı önermem. Simgeyi çalışma zamanında değiştiremezsiniz ve düğmelerin arka planı için ayarladığım renkleri görmezden gelmeye devam etti.
Alon Kogan

Lütfen geçmişi nasıl kaydedebilirim diye cevap verin
Mitul Goti

1
MShiftingMode'daki java yansıması bana yardımcı oldu! Bu alanı açığa çıkarmayarak ne düşünüyorlar bilmiyorum
Banana droid

48

BottomNavigationView kullanmalısınız v25 Android Destek Kütüphanesi'nden. Uygulama için standart bir alt gezinme çubuğunu temsil eder.

Medium'da adım adım bir kılavuz içeren bir gönderi : https://medium.com/@hitherejoe/exploring-the-android-design-support-library-bottom-navigation-drawer-548de699e8e0#.9vmiekxze


2
stackoverflow.com/questions/40153888/… merhaba maxim .. bunu uyguladım, ancak görünmüyor ..
Sagar Chavada

@SagarChavada bu yazıya
Maksim Turaev

5
@DroidDev, çünkü BottomNavigationView bu cevabın gönderildiği gün yayınlandı. Bundan önce yalnızca üçüncü taraf çözümleri mevcuttu.

Bir adaptörle özel görünümler yapıp yapamayacağınızı biliyor musunuz?
Radu

1
@Alan, BottomNavigationView'e benziyor, Destek Kitaplığı'nın minimum desteklenmiş API seviyesi 9 olan bir parçası, bu yüzden çalışacağını tahmin ediyorum. Yine de% 100 emin olmak için emülatörde kontrol edebilirsiniz.
Maksim Turaev

17

Orijinal cevabım ile ilgilendi BottomNavigationView, ama şimdi bir BottomAppBar. Bunun için üst kısımda bir uygulama bağlantısı olan bir bölüm ekledim.

Alt Uygulama Çubuğu

BottomAppBarBir Yüzer Eylem Düğmesi destekler.

görüntü açıklamasını buraya girin

Buradan görüntü . Bkz belgelere ve bu öğretici kadar yardım ayarı için BottomAppBar.

Alt Gezinme Görünümü

Aşağıdaki tam örnek, sorudaki resme benzer bir Alt Gezinme Görünümünün nasıl yapılacağını gösterir. Belgelerde Alt Gezinme konusuna da bakın .

görüntü açıklamasını buraya girin

Tasarım destek kitaplığını ekleyin

Bu satırı, uygulamanızın build.grade dosyasına diğer destek kitaplığı öğelerinin yanına ekleyin .

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

Sürüm numarasını güncel olanla değiştirin.

Aktivite düzenini oluşturun

Düzene eklediğimiz tek özel şey BottomNavigationView. Tıklandığında simgenin ve metnin rengini değiştirmek için selector, rengi doğrudan belirtmek yerine a kullanabilirsiniz . Bu, basit olması için burada ihmal edilmiştir.

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>

Bunu layout_alignParentBottomaslında en alta koyduğumuza dikkat edin .

Menü öğelerini tanımlayın

Alt Gezinme Görünümü için yukarıdaki xml'ye atıfta bulunulmaktadır bottom_nav_menu. Görüşümüze göre her bir öğeyi tanımlayan şey budur. Şimdi yapacağız. Tek yapmanız gereken, bir Eylem Çubuğu veya Araç Çubuğu için yaptığınız gibi bir menü kaynağı eklemektir .

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>

Projenize uygun simgeleri eklemeniz gerekecek. Dosya> Yeni> Görüntü Varlığı'na gidip İşlem Çubuğu ve Sekme Simgeleri'ni seçerseniz bu çok zor değil Simge Türü olarak .

Bir öğe seçili dinleyici ekle

Burada özel bir şey olmuyor. Aktivitemizin onCreateyönteminde Alt Gezinme Çubuğuna bir dinleyici ekliyoruz .

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

Daha fazla yardıma mı ihtiyacınız var?

Aşağıdaki YouTube videosunu izleyerek bunu nasıl yapacağımı öğrendim. Bilgisayarın sesi biraz tuhaf ama gösteri çok net.


16

Bunu başarmak için özel sekme görünümüyle Sekme Düzenini de kullanabilirsiniz.

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

}

Tam Örnek Projeyi İndirin


8
Google tasarım kurallarına göre, sekmeler arasında geçiş yapmak için kaydırma hareketi kullanılmamalıdır. google.com/design/spec/components/…
Carl B

1
Davranışları yazan yazara bir kredi verirseniz harika olur :)
Nikola Despotoski

13

Google, tasarım destek kitaplığının 25.0.0 sürümünden sonra BottomNavigationView'ı başlattı. Ancak aşağıdaki sınırlamalarla geldi:

  1. Başlıkları ve ortadaki simgeyi kaldıramazsınız.
  2. Başlıkların metin boyutunu değiştiremezsiniz.
  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̶l̶o̶r̶ ̶i̶t̶ ̶i̶s̶ ̶y̶s̶w̶a̶a̶r
  4. BottomNavigationBehavior'a sahip değildir: bu yüzden CordinatorLayout aracılığıyla FAB veya SnackBar ile entegrasyon yoktur.
  5. Her menuItem, FrameLayout'un saf bir uzantısıdır, bu nedenle güzel bir daire ortaya çıkarma efekti yoktur.

Dolayısıyla, BottomNavigationView'ın bu ilk sürümü ile yapabileceğiniz maksimum şey: (herhangi bir yansıma olmadan veya lib'yi kendiniz uygulamanız olmadan).

görüntü açıklamasını buraya girin

Yani, bunlardan herhangi birini istiyorsanız. Roughike / BottomBar gibi üçüncü bir bölüm kitaplığı kullanabilir veya kitaplığı kendiniz uygulayabilirsiniz.


4
Sadece kayıt için, arka plan rengini değiştirebilir ve başlık metni boyutunu değiştirebilirsiniz (kullandığım yöntemle ilgili başka sorunlar buldum). android: background = "xxx" kullanılması arka plan rengini değiştirir, ancak aynı zamanda app:itemBackground="xxx"bu rengi paylaşan tüm öğelerin bir kısmını belirtirseniz ve arka planı göremezseniz (şeffaflık eklemediğiniz sürece, ancak yine de tüm simgeler aynı rengi paylaşır) . Android ekibinin böylesine berbat bir bileşen yayınlaması çok kötü… her zaman% 75 tamamlandı, onu harika kılacak ekstra milleri kaçırdı.
Martin Marconcini

arka plan rengini değiştirebiliriz
Steve

merhaba, aynı lib kullanıyorum ve iyi çalışıyor ama burada sadece alt çubuğun ortasında başlıkları olmayan simgeleri görüntülemek istiyorum. mümkün mü? ve menü öğelerini zaten boş bırakmaya çalıştım, ancak simgeler hala yalnızca üstte görünüyor. Alt çubuğun ortasında yalnızca başlıkları olmayan simgeleri nasıl gösterebilirim?
user512

merhaba, lütfen bunun için cevabımı kontrol edin stackoverflow.com/questions/40183239/…
Sanf0rd

@MartinMarconcini Alt gezinme görünümü için metin boyutunu nasıl değiştirdiniz?
Ponsuyambu Velladurai

10

Sanf0rd'ın da belirttiği gibi, Google , Tasarım Destek Kitaplığı sürüm 25.0.0'ın bir parçası olarak BottomNavigationView'ı başlattı. . Görüntünün arka plan rengini ve hatta metin rengini ve simge ton rengini değiştirebilmeniz dışında bahsettiği sınırlamalar çoğunlukla doğrudur. Ayrıca 4'ten fazla öğe eklediğinizde bir animasyonu vardır (ne yazık ki manuel olarak etkinleştirilemez veya devre dışı bırakılamaz).

Bu konu hakkında örneklerle ve buradan okuyabileceğiniz bir depo ile ilgili ayrıntılı bir eğitim yazdım: https://blog.autsoft.hu/now-you-can-use-the-bottom-navigation-view-in-the- tasarım-destek-kütüphane /


Özü

Bunları uygulama seviyenize eklemelisiniz build.gradle:

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

Bunu düzeninize şu şekilde dahil edebilirsiniz:

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

Öğeleri aşağıdaki gibi bir menü kaynağı aracılığıyla belirtebilirsiniz:

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

Renk tonunu ve metin rengini bir renk listesi olarak ayarlayabilirsiniz, böylece o anda seçili olan öğe vurgulanır:

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

Son olarak, öğelerin seçimini bir OnNavigationItemSelectedListener ile halledebilirsiniz:

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

1
Mükemmel! Öneri - yerel dairesel dalgalanma efekti elde etmek için uygulamayı kaldırın: itemBackground = "@ color / darkGrey".
Gark

8

Deneyebileceğiniz diğer alternatif kitaplık: - 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();

1
Diğer bir benzer kitaplık AHBottomNavigation: github.com/aurelhubert/ahbottomnavigation
ninjahoahong

3

Bunun da faydalı olacağını düşünüyorum.

Pasaj

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

Bağlantılar

https://github.com/pocheshire/BottomNavigationBar

Bu var https://github.com/roughike/BottomBar Xamarin geliştiriciler için C # 'a port


3

gridview ve menu kaynağı kullanan özel bir sınıf oluşturdum:

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>

ve özel bir düzen öğesi 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>

ana faaliyetiniz içinde kullanım:

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

ve

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

ve layout_activity.xml'de

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

3

Tasarım Destek Kitaplığı'nın 25. sürümünde yeni bir resmi BottomNavigationView var

https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html gradle ekle 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" />

1

Bu kütüphane, BottomNavigationViewEx , Google'ın BottomNavigationView'unu genişletir. Google'ın kitaplığını, istediğiniz şekilde alt gezinme çubuğuna sahip olacak şekilde kolayca özelleştirebilirsiniz. Vites değiştirme modunu devre dışı bırakabilir, simgelerin ve metinlerin görünürlüğünü değiştirebilir ve çok daha fazlasını yapabilirsiniz. Kesinlikle deneyin.


0

Bu github gönderisine başvurdum ve alt sekme çubuğundaki sayfalar three layoutsiçin ayarladım three fragment.

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")

    );

Rozet sayısını ayarlamak için:

  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;


    }

0

Düzenleri yukarıda belirtilen cevaplara göre oluşturabilirsiniz. Bunu kotlin'de kullanmak isteyen varsa: -

 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
}

oncreate'de yukarıdaki dinleyiciyi kendi görüşünüze ayarlayabilirsiniz

   mDataBinding?.navigation?.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)

-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 (menü içinde)

<?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()yöntem,

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

Ve aşağıdaki gibi sınıf oluşturun.

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);
        }
    }
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.