Android Imitation Xiaomi Mall bottom navigation Bar II (Bottomnavigationbar, Viewpager and fragment linkage use)

Introduction

In the previous article "Android imitation Xiaomi Mall bottom navigation bar (based on Bottomnavigationbar)" We use the Bottomnavigationbar control simulation to achieve the Xiaomi Mall bottom navigation bar effect. Next, we will use the Bottomnavigationbar control and viewpager space linkage to realize the sliding navigation of the main interface.

Navigation is one of the most important aspects of mobile apps and plays a vital role in whether the user experience is good or bad. Good navigation makes an app easier to use and lets users get started quickly. Conversely, poor app navigation can be annoying and user-forsaken. To create a smooth user navigation experience, we have to rely on one of the most common features of smartphones: touch.

Touch changing the application view is now one of the most popular navigation designs. In this article, we will take the necessary steps to realize the linkage between the horizontal sliding navigation and the bottom navigation in the application.

Fundamentals

Our mainactivity contains the Viewpager component, which encapsulates several different sub-interfaces, each with a different fragment. The first thing we want to do is declare a fragmentpageradapter, and use it to switch between the unused interface fragment.

Viewpager is a View that is responsible for paging, as described in its name. It's exactly a viewgroup that contains multiple view pages, which are responsible for switching the view when the finger is sliding horizontally across the screen. To generate these view pages, you need to provide a pageradapter to do and data binding and to generate the final view page.

Viewpager through Setadapter () to establish a connection with Pageradapter. This connection is bidirectional, on the one hand, Viewpager will have the Pageradapter object, so that you can call Pageradapter method when needed, on the other hand, Viewpager will call Setadapter in Pageradapter (). The Registerdatasetobserver () method registers a Pagerobserver object that is generated by itself so that when pageradapter is needed (such as notifydatasetchanged () or Notifydatasetinvalidated (), you can call Observer's onChanged () or oninvalidated () method to enable Pageradapter to send information in viewpager direction.

PageAdapter is a supporter of Viewpager, Viewpager will call it to get the page you want to display, and PageAdapter will notify Viewpager when the data changes. This class is also the base class for Fragmentpageradapter and Fragmentstatepageradapter. If inherited from this class, you need to implement at least Instantiateitem (), Destroyitem (), GetCount (), and Isviewfromobject ().

Fragmentpageradapter inherits from Pageradapter. This class is more focused on Fragment per page than the generic Pageradapter. As the document describes, each generated Fragment in the class will be stored in memory, so it is suitable for those relatively static pages, the number is less, if you need to deal with a lot of pages, and the data is more dynamic, memory-intensive situation, You should use Fragmentstatepageradapter. Fragmentpageradapter overloads implement several necessary functions, so the function from Pageradapter, we only need to implement GetCount (), can. And, because of the implementation of Fragmentpageradapter.instantiateitem (), a new virtual function GetItem () is called, so we also need to implement at least one GetItem (). Therefore, in general, compared to inheriting from Pageradapter, it is more convenient.

Setting the Viewpager listener event
When a page of Viewpager is selected, the corresponding label for the Bottomnavigationbar control needs to be selected accordingly.

 Viewpager.addonpagechangelistener (this );  @Override  public  void  onpagescrolled  (int  position, float  Positionoffset, int  positionoffsetpixels) {}  @Override  public  void  onpageselected  (int  position) {bottomnavigationbar.selecttab (position); }  @Override  public  void  onpagescrollstatechanged  ( int  state) {} 

set Bottomnavigationbar listening events
When a label for the Bottomnavigationbar control is selected, the corresponding page of the Viewpager is selected.

    bottomNavigationBar.setTabSelectedListener(this);    @Override    publicvoidonTabSelected(int position) {        viewPager.setCurrentItem(position);    }    @Override    publicvoidonTabUnselected(int position) {    }    @Override    publicvoidonTabReselected(int position) {    }

Achieve Results

Main code

Main interface layout file Activity_main,xml:

<?xml version= "1.0" encoding= "Utf-8"?><linearlayout  android:id  = "@+id/activity_main"  xmlns:android  =     "http://schemas.android.com/apk/res/android"  xmlns:tools  = "Http://schemas.android.com/tools"     android:layout_width  = "match_parent"  android:layout_height  = "match_parent"  android:orientation  = "vertical"  tools:context  =" com.rainsong.mishop.MainActivity " >     <android.support.v4.view.viewpager  android:id  =" @+id/view_pager " android:layout_width  = "match_parent"  android:layout_height  = "0DP"  android:layout_weight  =" 1 "/>     <com.ashokvarma.bottomnavigation.BottomNavigationBarandroid:id="@+id/bottom_ Navigation_bar "android:layout_width="match_parent "android:layout_height=" Wrap_content "android:layout_gravity=" Bottom "/>                                </linearlayout>

Mainactivity.java

Packagecom. Rainsong. Mishop;Import Android. OS. Bundle;Import Android. Support. V4. App. Fragment;Import Android. Support. V4. View. Viewpager;Import Android. Support. V7. App. Appcompatactivity;Importcom. Ashokvarma. Bottomnavigation. Bottomnavigationbar;Importcom. Ashokvarma. Bottomnavigation. Bottomnavigationitem;Importcom. Rainsong. Mishop. Adapter. Sectionspageradapter;Importcom. Rainsong. Mishop. Fragment. Catagoryfragment;Importcom. Rainsong. Mishop. Fragment. Discoverfragment;Importcom. Rainsong. Mishop. Fragment. Homefragment;Importcom. Rainsong. Mishop. Fragment. Usercentralfragment;Import Java. Util. ArrayList;Import Java. Util. List;public class Mainactivity extends appcompatactivity implements Bottomnavigationbar. Ontabselectedlistener, Viewpager. Onpagechangelistener{Private Viewpager Viewpager;Private Bottomnavigationbar Bottomnavigationbar;Private list<fragment> fragments;@Override protected void OnCreate (Bundle savedinstancestate) {Super. OnCreate(savedinstancestate);Setcontentview (R. Layout. Activity_main);Initview ();} private void Initview () {Initbottomnavigationbar ();Initviewpager ();} private void Initbottomnavigationbar () {Bottomnavigationbar = (Bottomnavigationbar) Findviewbyid (R. ID. Bottom_navigation_bar);Bottomnavigationbar. Settabselectedlistener(this);Bottomnavigationbar. ClearAll();Bottomnavigationbar. SetMode(Bottomnavigationbar. MODE_fixed);Bottomnavigationbar. Setbackgroundstyle(Bottomnavigationbar. BACKGROUND_style_static);Bottomnavigationbar. AddItem(New Bottomnavigationitem (R. drawable. Icon_main_home_selected, R. String. Home). Setinactiveiconresource(R. drawable. Icon_main_home_normal). Setactivecolorresource(R. Color. Orange)). AddItem(New Bottomnavigationitem (R. drawable. Icon_main_category_selected, R. String. Category). Setinactiveiconresource(R. drawable. Icon_main_category_normal). Setactivecolorresource(R. Color. Orange)). AddItem(New Bottomnavigationitem (R. drawable. Icon_main_discover_selected, R. String. Discover). Setinactiveiconresource(R. drawable. Icon_main_discover_normal). Setactivecolorresource(R. Color. Orange)). AddItem(New Bottomnavigationitem (R. drawable. Icon_main_mine_selected, R. String. Mine). Setinactiveiconresource(R. drawable. Icon_main_mine_normal). Setactivecolorresource(R. Color. Orange)). Initialise();} private void Initviewpager () {Viewpager = (Viewpager) Findviewbyid (R. ID. View_pager);Fragments = new Arraylist<fragment> ();Fragments. Add(New Homefragment ());Fragments. Add(New Catagoryfragment ());Fragments. Add(New Discoverfragment ());Fragments. Add(New Usercentralfragment ());Viewpager. Setadapter(New Sectionspageradapter (Getsupportfragmentmanager (), fragments));Viewpager. Addonpagechangelistener(this);Viewpager. Setcurrentitem(0);} @Override public void ontabselected (int position) {Viewpager. Setcurrentitem(position);} @Override public void ontabunselected (int. position) {} @Override public void ontabreselected (int positio    n) {} @Override public void onpagescrolled (int position, float positionoffset, int positionoffsetpixels) {} @Override public void onpageselected (int position) {Bottomnavigationbar. Selecttab(position);} @Override public void onpagescrollstatechanged (int state) {}}

Sectionspageradapter.java

 PackageCom.rainsong.mishop.adapter;ImportAndroid.support.v4.app.Fragment;ImportAndroid.support.v4.app.FragmentManager;ImportAndroid.support.v4.app.FragmentPagerAdapter;ImportJava.util.List;/** * Created by Maxliaops on 17-1-6. * * Public  class sectionspageradapter extends fragmentpageradapter {List<fragment> fragments; Public Sectionspageradapter(Fragmentmanager FM, list<fragment> fragments) {Super(FM); This. fragments = fragments; }@Override     PublicFragmentGetItem(intPosition) {returnFragments.get (position); }@Override     Public int GetCount() {returnFragments.size (); }}

Demo:https://github.com/maxliaops/android-exercise/tree/master/mishop

Android Imitation Xiaomi Mall bottom navigation Bar II (Bottomnavigationbar, Viewpager and fragment linkage use)