Поскольку мы имеем дело сФрагменты, я изменю свой базовый класс MainActivity на Android.Support.V7.App.AppCompatActivity, и да, мы будем использовать библиотеку поддержки Android V4. Так как я имею дело с фрагментами, я изменю свой базовый класс MainActivity на Android.Support.V7.App.AppCompatActivity, и да, мы будем использоватьПоддержка Android библиотек V4 и V7.Проверьте этот блог на понимание библиотек поддержки
public class MainActivity : Android.Support.V7.App.AppCompatActivity
Создайте макет для нашей MainActivity. Мы добавим FrameLayout для хранения нашего фрагмента, ViewPager иBottomNavigationView из библиотеки Android.Support.Design, что-то вроде ниже:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/fragment_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/bottom_navigation" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/bottom_navigation" />
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="start"
android:layout_alignParentBottom="true"
android:background="@android:color/white"
app:menu="@menu/navigation_main" />
</RelativeLayout>
Также создайте макет для фрагмента.Я сделаю это просто со значком и надписью, вы можете оставить здесь все, что пожелаете:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/imageView"
android:src="@drawable/abc_ic_star_black_48dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Fragment"
android:textAlignment="center"
android:textSize="@dimen/abc_text_size_display_1_material"
android:layout_below="@id/imageView"
android:layout_centerVertical="false" />
</RelativeLayout>
Давайте перейдем к этой нижней навигации.Во-первых, нам нужны элементы навигации (вкладки) для BottomNavigationView, для этого мы добавим меню навигации.
navigation_main.xml // Имя XML-файла
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:orderInCategory="0"
android:id="@+id/menu_genres"
android:enabled="true"
android:title="Genres"
android:icon="@drawable/tab_genres"
app:showAsAction="always" />
<item
android:orderInCategory="1"
android:id="@+id/menu_titles"
android:enabled="true"
android:title="Titles"
android:icon="@drawable/tab_titles"
app:showAsAction="always" />
<item
android:orderInCategory="2"
android:id="@+id/menu_stream"
android:enabled="true"
android:title="Stream"
android:icon="@drawable/tab_stream"
app:showAsAction="always" />
<item
android:orderInCategory="3"
android:id="@+id/menu_showtimes"
android:enabled="true"
android:title="Showtimes"
android:icon="@drawable/tab_showtimes"
app:showAsAction="always" />
</menu>
Обратите внимание на orderInCategory, это порядок элементов табуляции слева направо.
Хорошо, теперь мы соединили взгляды, с которыми мы будем работать.Теперь давайте перейдем к этому BottomNavigationView.
В MainActivity возьмите BottomNavigationView и настройте его.
bottomNavigationView= FindViewById<BottomNavigationView>(Resource.Id.bottom_navigation);
Кроме того, BottomNavigationView скрывает метки, если вкладкирасти больше, чем 3. Итак, давайте изменим это.Добавьте этот вспомогательный метод в свой код и вызовите его при настройке BottomNavigationView следующим образом:
RemoveShiftMode(_navigationView);//Below the FindViewById
private void RemoveShiftMode(BottomNavigationView view) // a Method in the Activity
{
var menuView = (BottomNavigationMenuView) view.GetChildAt(0);
try
{
var shiftingMode = menuView.Class.GetDeclaredField("mShiftingMode");
shiftingMode.Accessible = true;
shiftingMode.SetBoolean(menuView, false);
shiftingMode.Accessible = false;
for (int i = 0; i < menuView.ChildCount; i++)
{
var item = (BottomNavigationItemView)menuView.GetChildAt(i);
item.SetShiftingMode(false);
// set checked value, so view will be updated
item.SetChecked(item.ItemData.IsChecked);
}
} catch (System.Exception ex) {
System.Diagnostics.Debug.WriteLine((ex.InnerException??ex).Message);
}
}
И теперь все будет в порядке.И это все.мы закончили с настройкой BottomNavigationView.Мы еще не реализовали фрагменты для каждой вкладки, поэтому нажатие на вкладки ничего не даст.Мы представим фрагменты внутри ViewPager.
Теперь давайте настроим ViewPager.Сначала адаптер,
public class ViewPagerAdapter : FragmentPagerAdapter
{
Fragment[] _fragments;
public ViewPagerAdapter(FragmentManager fm, Fragment[] fragments) : base(fm)
{
_fragments = fragments;
}
public override int Count => _fragments.Length;
public override Fragment GetItem(int position) => _fragments[position];
}
Затем ViewPager,
// find the view
_viewPager = FindViewById<ViewPager>(Resource.Id.viewpager);
// set the adapter
_viewPager.Adapter = new ViewPagerAdapter(SupportFragmentManager, _fragments);
и это должно быть для настройки ViewPager.
Когда пользователь перемещается между представлениями ViewPager, вызывается событие ViewPager.PageSelected.Точно так же, когда пользователь нажимает на вкладку (пункт меню навигации) в BottomNavigationView, происходит событие BottomNavigationView.NavigationItemSelected.Мы должны связать эти два события, чтобы синхронизировать BottomNavigationView и ViewPager.Вот как мы собираемся это сделать.
Объявите обработчик событий для BottomNavigationView и ViewPager следующим образом:
// wireup the page selection event
_viewPager.PageSelected += ViewPager_PageSelected;
// wire up the selection event
_navigationView.NavigationItemSelected += NavigationView_NavigationItemSelected;
Когда выбрана страница ViewPager, мыуведомить BottomNavigationView и наоборот.Вот так
private void ViewPager_PageSelected(object sender, ViewPager.PageSelectedEventArgs e)
{
var item = _navigationView.Menu.GetItem(e.Position);
_navigationView.SelectedItemId = item.ItemId;
}
void NavigationView_NavigationItemSelected(object sender,
BottomNavigationView.NavigationItemSelectedEventArgs e)
{
_viewPager.SetCurrentItem(e.Item.Order, true);
}
И все.Теперь BottomNavigationView и ViewPager отображают выбранный фрагмент / страницу / вкладку и обновляют друг друга плавным переходом.
И наконец, загрузите фрагменты для этих вкладок.