Willkommen im heutigen Tutorial. In diesem Stück möchten wir einige Optionen für die Induktion einer unteren Leiste in Ihrer Anwendung zu betrachten. Meistens werden wir uns auf die Arbeit mit der Abfüller-Navigation-Bar-Komponente zu schauen.

Was Sie lernen werden

Hier finden Sie die Konzepte, die Sie in diesem Lernprogramm lernen:

  1. Was ist eine untere Navigationsleiste
  2. Verwendung einer unteren Navigationsansicht-einfaches Beispiel.
  3. Vorgehensweise zum Erstellen eines Verantwortlichkeitsbereichs für einen unteren Balken.
  4. Wie wird BottomNavigationView mit Fragments und Viewpager verwendet?
  5. So erstellen Sie animierte Bottomnavigationview mit Schimmer-Effekt.

Was ist eine Bottom-Navigation-Leiste?

Laut android\’s Amtliche Dokumentation :

Sie stellt eine standardmäßige untere Navigationsleiste für die Anwendung dar. Es handelt sich um eine Implementierung der unteren Navigation des Materialdesigns.

Mit Hilfe der unteren Navigationsleiste lassen sich die Benutzer leicht erkunden und zwischen den Ansichten der höchsten Ebene in einem einzigen Abgriff wechseln. Sie sollten verwendet werden, wenn eine Anwendung drei bis fünf übergeordnete Ziele hat.

Die Leiste kann auf der Schriftrolle verschwinden, basierend auf HideBottomViewOnScrollBehavior , wenn es in ein CoordinatorLayout gestellt wird und eines der untergeordneten Elemente innerhalb des CoordinatorLayout-Layouts gescrollt wird. Dieses Verhalten wird nur festgelegt, wenn die Eigenschaft \’layout_behavior\‘ auf \’HideBottomViewOnScrollBehavior\‘ gesetzt ist.

Der Balkeninhalt kann durch Angabe einer Menüressourcendatei gefüllt werden. Jeder Menüelementtitel, das Symbol und der aktivierte Status werden für die Anzeige der unteren Navigationsleistenelemente verwendet. Menüpunkte können auch für das Programm verwendet werden, um das Ziel programmgesteuert auszuwählen, das momentan aktiv ist. Es kann mit Hilfe von MenuItem#setChecked(true) .

Im Folgenden werden die Schritte beschrieben, die unter Verwendung einer unteren Navigationssicht ausgeführt werden:

Fügen Sie sie wie folgt zu Ihrer Layoutressource hinzu:

<com.google.android.material.bottomnavigation.BottomNavigationView
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schema.android.com/apk/res/res-auto"
     android:id="@+id/navigation"
     android:layout_width="match_parent"
     android:layout_height="56dp"
     android:layout_gravity="start"
     app:menu="@menu/my_navigation_items" />

Erstellen Sie die Menüressourcendatei für Navigationselemente wie folgt:

 <menu xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:id="@+id/action_search"
          android:title="@string/menu_search"
          android:icon="@drawable/ic_search" />
     <item android:id="@+id/action_settings"
          android:title="@string/menu_settings"
          android:icon="@drawable/ic_add" />
     <item android:id="@+id/action_navigation"
          android:title="@string/menu_navigation"
          android:icon="@drawable/ic_action_navigation_menu" />
 </menu>

Dann Referenz und verwenden Sie es in Ihrem Java/Kotlin-Code. Sehen Sie sich unsere Beispiele an.

Video-Lernprogramm

Wenn Sie ein Video-Tutorial bevorzugen, dann haben wir eine:

Wir beginnen, indem wir sehen, was BottomNavigation ist als allgemeines Design-Muster, dann sehen Sie die BottomNavigationView für Android, dann sehen Sie sich einige Beispiele.

Beispiel für Bottom-Navigation in Java

Schritt 1: Aktivität erstellen

MainActivity.java

Hier ist unsere Hauptaktivitätendatei. Dies ist das einzige Java, das wir in diesem Beispiel schreiben.

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

        final TextView newsTextView = findViewById(R.id.newsTextView);
        final TextView techTextView = findViewById(R.id.techTextView);
        final TextView entertainmentTextView = findViewById(R.id.entertainmentTextView);

        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_news:
                                newsTextView.setVisibility(View.VISIBLE);
                                techTextView.setVisibility(View.GONE);
                                entertainmentTextView.setVisibility(View.GONE);
                                break;
                            case R.id.action_tech:
                                newsTextView.setVisibility(View.GONE);
                                techTextView.setVisibility(View.VISIBLE);
                                entertainmentTextView.setVisibility(View.GONE);
                                break;
                            case R.id.action_entertainment:
                                newsTextView.setVisibility(View.GONE);
                                techTextView.setVisibility(View.GONE);
                                entertainmentTextView.setVisibility(View.VISIBLE);
                                break;
                        }
                        return false;
                    }
                });
    }
}

Schritt 2: Layoutressource erstellen

activity_main.xml

Hier ist das Layout unserer Hauptaktivität.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent">

    <TextView
        android_id="@+id/newsTextView"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_centerInParent="true"
        android_text="@string/txt_news" />

    <TextView
        android_id="@+id/techTextView"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_centerInParent="true"
        android_text="@string/txt_tech"
        android_visibility="gone" />

    <TextView
        android_id="@+id/entertainmentTextView"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_centerInParent="true"
        android_text="@string/txt_entertainment"
        android_visibility="gone" />

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

Schritt 3: Menü-Ressourcendatei erstellen

Unten Navigation main.xml

Das ist unser Menü. Stellen Sie sie unter die Menü Ressourcenverzeichnis.

<?xml version="1.0" encoding="utf-8"?>
<menu
    >
    <item
        android_id="@+id/action_news"
        android_enabled="true"
        android_icon="@drawable/ic_favorite_white_24dp"
        android_title="@string/txt_news"
        app_showAsAction="ifRoom" />
    <item
        android_id="@+id/action_tech"
        android_enabled="true"
        android_icon="@drawable/ic_access_time_white_24dp"
        android_title="@string/txt_tech"
        app_showAsAction="ifRoom" />
    <item
        android_id="@+id/action_entertainment"
        android_enabled="true"
        android_icon="@drawable/ic_audiotrack_white_24dp"
        android_title="@string/txt_entertainment"
        app_showAsAction="ifRoom" />
</menu>

Let\’s Blick auf einige mehr herunterladbare bottomnavigationview Beispiele.

Beispiel 1: Kotlin Android Simple BottomNavigationView mit Fragments Beispiel

Dies ist ein einfaches unten in Kotlin geschriebenes Navigationssicht-Beispiel. In diesem Beispiel können Sie 3 Fragmente durch Klicken auf das entsprechende untere Navigationsba-Element umschalten.

Die Fragmente enthalten einfach eine Textansicht mit einem Text. Sehen Sie sich die folgende Demo an:

Kotlin

Schritt 1: Abhängigkeiten

Es ist keine Abhängigkeit von einer speziellen oder einer dritten Partei erforderlich.

Schritt 2: Entwurfslayouts

Es gibt 4 Layouts:

  1. 3 Fragmentlayouts
  2. 1 Hauptaktivitätslayout.

Fragmentlayouts

Die allgemeine Gestaltung der Fragmentlayouts ist ähnlich. Alle haben eine Textsicht in der Mitte, die den Text fro te ausgewähltes Fragment anzeigen wird:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Learn"
        android:textSize="35dp"
        android:gravity="center"/>

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity-Layout

Auf der anderen Seite wird das Hauptaktivitätslayout ein Framelayout sowie die Bottomnavigationview enthalten:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.9"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/menu_bottom_navigation"
        android:layout_weight="0.1"/>

</LinearLayout>

Schritt 3: Fragments erstellen

Es werden 3 Fragmente vorhanden sein:

(a). fra1.kt

Das erste Fragment:

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class frag1 : Fragment() {

    override fun onCreateView(inflater: LayoutInflater,container: ViewGroup?,savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_1 , container , false)
    }

}

(b) frag2.kt

Der Code für das zweite Fragment:

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class frag2 : Fragment() {

    override fun onCreateView(inflater: LayoutInflater,container: ViewGroup?,savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_2 , container , false)
    }

}

(c). frag3.kt

Der Code für das dritte Fragment:

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class frag3 : Fragment() {

    override fun onCreateView(inflater: LayoutInflater,container: ViewGroup?,savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_3 , container , false)
    }

}

Schritt 4: Aktivität erstellen

Schließlich müssen Sie eine Aktivität erstellen, die die Fragmente hosten wird. Das Hauptsache hier ist, dass Sie eine Funktion haben, die ein Fragment der Aktivität über eine Fragmenttransaktion wie folgt setzt;

    fun setFragment(fr : Fragment){
        val frag = supportFragmentManager.beginTransaction()
        frag.replace(R.id.fragment,fr)
        frag.commit()
    }

Sie werden also im Grunde genommen diese Methode aufrufen und das entsprechende Fragment basierend auf dem ausgewählten Element der unteren Navigationssicht übergeben:

bottomNav.setOnNavigationItemSelectedListener {menu ->

            when(menu.itemId){

                R.id.btn1 -> {
                    setFragment(frag1())
                    true
                }

                R.id.btn2 -> {
                    setFragment(frag2())
                    true
                }

                R.id.btn3 -> {
                    setFragment(frag3())
                    true
                }

                else -> false
            }
        }

    }

Hier ist der Vollcode;

MainActivity.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.fragment.app.Fragment
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        bottomNav.menu.getItem(0).isCheckable = true
        setFragment(frag1())

        bottomNav.setOnNavigationItemSelectedListener {menu ->

            when(menu.itemId){

                R.id.btn1 -> {
                    setFragment(frag1())
                    true
                }

                R.id.btn2 -> {
                    setFragment(frag2())
                    true
                }

                R.id.btn3 -> {
                    setFragment(frag3())
                    true
                }

                else -> false
            }
        }

    }

    fun setFragment(fr : Fragment){
        val frag = supportFragmentManager.beginTransaction()
        frag.replace(R.id.fragment,fr)
        frag.commit()
    }

}

Referenz

Hier finden Sie die unten stehenden Code-Referenzlinks:

Nr. Link
1. Herunterladen code
2. Durchsuchen code 3. Folgen Code Autor

Beispiel 2-BottomNavigationView mit Fragmenten

In dieser Lektion möchten wir BottomNavigationView-Beispiele erforschen. Wir wollen uns so viele Beispiele ansehen, wie wir können. Seien Sie sich bewusst, dass einige Beispiele ältere Support-Bibliotheken verwenden können, aber Sie können den Code einfach auf androidx mit Android-Studio aktualisieren.

Dieses Beispiel wird in Java geschrieben. Es lehrt, wie die untere Navigation mit Symbolen angezeigt wird und jede Registerkarte mit Fragmenten verbunden wird.

Wenn eine Registerkarte ausgewählt wird, wird das entsprechende Fragment ebenfalls wiedergegeben.

Schritt 1: Favoriten erstellen

(a). FavoritesFragmemt

Favoritenfragment erstellen:

public class FavouriteFragment extends Fragment {

    public FavouriteFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_favourite, container, false);
    }
}

Schritt 2: Videofragment erstellen

(b) VideoFragmemt

Das Videos-Fragment:

public class VideoFragment extends Fragment {

    public VideoFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_video, container, false);
    }
}

Schritt 3: Musikfragment erstellen

(c). MusicFragmemt

Das Musikfragment:

public class MusicFragment extends Fragment {

    public MusicFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_music, container, false);
    }
}

Schritt 4: Hauptaktivität erstellen

(d). MainActivity

Die Aktivität, die all diese Fragmente hosten wird:

public class MainActivity extends AppCompatActivity {

    private Fragment fragment;
    private FragmentManager fragmentManager;

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

        fragmentManager = getSupportFragmentManager();
        fragment = new FavouriteFragment();
        final FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.add(R.id.main_container, fragment).commit();

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

        bottomNavigationView.setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(MenuItem item) {
                        switch (item.getItemId()) {
                            case R.id.action_favorites:
                                fragment = new FavouriteFragment();
                                break;
                            case R.id.action_video:
                                fragment = new VideoFragment();
                                break;
                            case R.id.action_music:
                                fragment = new MusicFragment();
                                break;
                        }
                        final FragmentTransaction transaction = fragmentManager.beginTransaction();
                        transaction.replace(R.id.main_container, fragment).commit();
                        return true;
                    }
                });
    }
}

Ausführen

Wenn Sie das Projekt ausführen, erhalten Sie die folgenden Schritte:

Beispiel

Herunterladen

Nein Link
1. Direkter Download Projekt-Autor verfolgen

Beispiel 3-BottomNavigationview with Shimmer Effect

Der Unterschied zu dem ersten Beispiel ist in der folgenden Abbildung dargestellt:

Untere

Lets go.

Es funktioniert nur, wenn Sie weiße Farbe für Hintergrund setzen android:background = @android:color/white

Hinweis Dieser Ripple-Effekt wird verschwinden, wenn Sie app:itemBackground Eigenschaft.

Behandlung mit aktiviertem/inaktivierter Status:

Sie müssen eine Selektordatei erstellen:

<?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:color="@android:color/darker_gray"  />
</selector>

Wenn Sie die graue Ripple-Effekt-Effekt ändern möchten, ändern Sie die Eigenschaft colorControlHighlight in AppTheme, so sieht es wie folgt aus:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="colorControlHighlight">@color/colorPrimaryRipple</item>
</style>

Verwenden Sie 26% Alpha für farbige Rippel.

<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryRipple">#423F51B5</color>

MainActivity

Hier ist der Code:


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

        final TextView textView = (TextView) findViewById(R.id.textView);

        bottomNavigationView.setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                        switch (item.getItemId()) {
                            case R.id.action_chat:
                                textView.setText(getResources().getString(R.string.text_chat));
                                break;
                            case R.id.action_offers:
                                textView.setText(getResources().getString(R.string.text_offers));
                                break;
                            case R.id.action_notifications:
                                textView.setText(getResources().getString(R.string.text_notifications));
                                break;
                        }
                        return true;
                    }
                });
    }
}

Code herunterladen

Direkt Herunterladen

Kredit

Dieser Code wurde von @Luksha

Beispiel 4-BottomNavigationView mit Swipeable-Fragmenten

Dieses Beispiel verbessert die anderen Beispiele, indem es die Möglichkeit gibt, von einem Fragment zum anderen Swipe zu wischen. Diese Swipe-Funktion wird über ViewPager hinzugefügt.

(a). Erstes Fragment

Der Code für \’FirstFragment\‘:


public class FirstFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_first, container, false);
    }

}

(b) Sekundär-Fragment

Der SecondFragment-Code:


public class SecondFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_second, container, false);
    }
}

(c). Dreier Fragment

Der Code ThirdFragment:

public class ThirdFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_third, container, false);
    }
}

(d). OnPageChangeAdapter

Der OnPageChangeAdapter-Code:


public abstract class OnPageChangeAdapter implements ViewPager.OnPageChangeListener {

    private int mFirstPosition = 0;

    public OnPageChangeAdapter(int firstPosition){
        mFirstPosition = firstPosition;
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        onPageSelected(mFirstPosition, position);
        mFirstPosition = position;
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    public abstract void onPageSelected(int lastposition, int position);
}

(e). MainActivity

Der MainActivity-Code:

public class MainActivity extends AppCompatActivity {

    private BottomNavigationView mNavigationMenuView;
    private ViewPager mViewPage;

    private ArrayList<Fragment> data = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        this.mViewPage = (ViewPager) findViewById(R.id.view_page);
        this.mNavigationMenuView = (BottomNavigationView) findViewById(R.id.demo_navigation);

        data.add(new FirstFragment());
        data.add(new SecondFragment());
        data.add(new ThirdFragment());

        mViewPage.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return data.get(position);
            }

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

        mViewPage.addOnPageChangeListener(new OnPageChangeAdapter(0) {

            @Override
            public void onPageSelected(int lastposition, int position) {
                mNavigationMenuView.getMenu().getItem(position).setChecked(true);
                mNavigationMenuView.getMenu().getItem(lastposition).setChecked(false);
            }
        });

        mNavigationMenuView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_recent:
                        mViewPage.setCurrentItem(0);
                        break;
                    case R.id.action_favorite:
                        mViewPage.setCurrentItem(1);
                        break;
                    case R.id.action_nearby:
                        mViewPage.setCurrentItem(2);
                        break;
                }
                return true;
            }
        });
    }
}

Code herunterladen

Download-Code unten:

Nr. Link
1. Code herunterladen
2. Projekt-Autor verfolgen