Moja pierwotna odpowiedź dotyczyła BottomNavigationView
, ale teraz jest BottomAppBar
. Na górze dodałem sekcję z linkiem do implementacji.
Dolny pasek aplikacji
BottomAppBar
Obsługuje przycisk Pływający działania.
Zdjęcie stąd . Zobacz dokumentację i ten samouczek, aby uzyskać pomoc dotyczącą konfigurowania BottomAppBar
.
Dolny widok nawigacji
Poniższy pełny przykład pokazuje, jak utworzyć dolny widok nawigacji podobny do obrazu w pytaniu. Zobacz także Nawigacja u dołu w dokumentacji.
Dodaj bibliotekę wsparcia projektowania
Dodaj tę linię do pliku build.grade swojej aplikacji obok innych elementów biblioteki obsługi.
implementation 'com.android.support:design:28.0.0'
Zastąp numer wersji tym, który jest aktualny.
Utwórz układ działania
Jedyną specjalną rzeczą, którą dodaliśmy do układu, jest BottomNavigationView
. Aby zmienić kolor ikony i tekstu po kliknięciu, możesz użyć a selector
zamiast bezpośredniego określania koloru. Zostało to pominięte dla uproszczenia.
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>
Zwróć uwagę, że layout_alignParentBottom
faktycznie umieszczaliśmy go na dole.
Zdefiniuj pozycje menu
XML powyżej dla widoku nawigacji dolnej, do którego się odwołano bottom_nav_menu
. To właśnie definiuje każdy element z naszego punktu widzenia. Zrobimy to teraz. Wszystko, co musisz zrobić, to dodać zasób menu, tak jak w przypadku paska akcji lub paska narzędzi.
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>
Będziesz musiał dodać odpowiednie ikony do swojego projektu. Nie jest to zbyt trudne, jeśli przejdziesz do Plik> Nowy> Zasób obrazu i wybierzesz Pasek akcji i ikony kart jako typ ikony.
Dodaj odbiornik wybranego elementu
Nie dzieje się tu nic specjalnego. Po prostu dodajemy odbiornik do dolnego paska nawigacyjnego w onCreate
metodzie naszego działania .
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;
}
});
}
}
Potrzebujesz więcej pomocy?
Nauczyłem się, jak to zrobić, oglądając następujący film na YouTube. Głos komputera jest trochę dziwny, ale demonstracja jest bardzo wyraźna.