BottomNavigationView combined with ViewPager and viewpager

BottomNavigationView combined with ViewPager and viewpager

BottomNavigationView is a bottom navigation bar component launched by Google. Before these bottom navigation components are available, Android Developers mostly use RadioGroup, in the previous project development, we used Google's BottomNaviationView and ViewPager to build a UI framework. Now the project has been completed and summarized as follows:

To use BottomNaviationView, you need to add a dependency Library:

In the build. gradle file in app moudle, add the following dependencies under the dependencies node:

compile 'com.android.support:design:25.3.0'  

After adding the dependency, we can use it in the layout file. The activity_main.xml file is as follows:

<? 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: id = "@ + id/activity_main" android: layout_width = "match_parent" android: layout_height = "match_parent" android: orientation = "vertical" tools: context = "com. qj. simpleuiframe. mainActivity "> <! -- Status Bar --> <View android: layout_width = "match_parent" android: layout_height = "24dp" android: background = "@ color/color661BB5D7"/> <! -- Title bar --> <TextView android: id = "@ + id/title" android: layout_width = "match_parent" android: layout_height = "40dp" android: background = "@ color/color1BB5D7" android: gravity = "center" android: textColor = "@ color/colorFFFFFF" android: textSize = "20sp"/> <android. support. v4.view. viewPager android: id = "@ + id/viewpager" android: layout_width = "match_parent" android: layout_height = "0dp" android: layout_weight = "1"/> <! -- Bottom navigation bar --> <android. support. design. widget. bottomNavigationView android: id = "@ + id/bnv" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: background = "? Android: attr/windowBackground "app: itemIconTint =" @ drawable/tab_text_color_selector "app: itemTextColor =" @ drawable/tab_text_color_selector "app: menu = "@ menu/navigation"/> </LinearLayout>

Let's talk about BottomNaviationView in the bottom navigation bar:
App: menu = "@ menu/navigation": There is a menu folder under our res folder, and a navigation file in the menu folder, it contains information about the navigation bar at the bottom.

Let's take a look at the navigation. xml file.

<?xml version="1.0" encoding="utf-8"?>  <menu xmlns:android="http://schemas.android.com/apk/res/android">        <item          android:id="@+id/tab_one"          android:icon="@drawable/tab_one_selector"          android:title="@string/tab_one"/>        <item          android:id="@+id/tab_two"          android:icon="@drawable/tab_two_selector"          android:title="@string/tab_two"/>        <item          android:id="@+id/tab_three"          android:icon="@drawable/tab_three_selector"          android:title="@string/tab_three"/>  </menu> 

We can see that there are three navigation buttons in total. Let's take the first one as an example to briefly describe:
The id and title attributes are very simple. Let's take a look at the icon attributes. The bottom navigation buttons are usually in the following format (most of the time ), the text below is specified by our title attribute, and the image above is determined by our icon attribute. Let's take a look at this simple tab_one_selector selector:

<?xml version="1.0" encoding="utf-8"?>  <selector xmlns:android="http://schemas.android.com/apk/res/android">      <item android:drawable="@mipmap/commend_select" android:state_pressed="true"/>      <item android:drawable="@mipmap/commend_select" android:state_selected="true"/>      <item android:drawable="@mipmap/commend"/>  </selector> 

The app: menu = "@ menu/navigation" is finished.
Let's talk about it below.

App: itemIconTint = "@ drawable/tab_text_color_selector"
App: itemTextColor = "@ drawable/tab_text_color_selector"

App: itemIconTint is used to set the icon color of the navigation button at the bottom.

App: itemTextColor is used to set the text color of the navigation button at the bottom.

In most cases, the logo and the file color are the same (for the sake of uniform style), so they both use the same color selector.

Speaking of this, the BottomNaviationView control is over. The following explains the status bar control in the activity_main.xml file. The reason for writing the status bar in the layout is that the subject of our application has no ActionBar and the status bar is transparent, therefore, we need to write the status bar and title bar by ourselves (to meet the requirements for defining the status bar and title bar of different styles)

Next, let's take a look at the topic of appTheme:

<! -- Base application theme. --> <style name = "AppTheme" parent = "Theme. AppCompat. Light. NoActionBar"> <! -- Full screen, no title bar, and transparent status bar --> <item name = "colorPrimary"> @ color/colorPrimary </item> <item name = "colorPrimaryDark"> @ color/colorPrimaryDark </ item> <item name = "col1_cent"> @ color/col1_cent </item> <item name = "android: windowTranslucentStatus "> true </item> </style>

We can see that the parent topic of AppTheme has no ActionBar, and we have set its windowTranslucentStatus to true, that is, the status bar is transparent.
In this way, our Activity is completely full screen. Without the status bar and title bar, we can define the status bar and title bar ourselves!
The activity_main.xml file is finished. Let's take a look at the code in MainActivity. Java.

Public class MainActivity extends FragmentActivity implements BottomNavigationView. onNavigationItemSelectedListener, ViewPager. onPageChangeListener {private ViewPager mViewPager; private BottomNavigationView mBottomNavigationView; private TextView mTitle; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); initView (); initData (); initListener ();} private void initView () {mTitle = (TextView) findViewById (R. id. title); mBottomNavigationView = (BottomNavigationView) findViewById (R. id. bnv); mViewPager = (ViewPager) findViewById (R. id. viewpager);} private void initData () {} private void initListener () {mBottomNavigationView. setOnNavigationItemSelectedListener (this); // The system selects the first one by default, but the system selects the first method without the onNavigationItemSelected (MenuItem) method. If you want to execute the clickTabOne () method as soon as you enter the page, manually call to select the first mBottomNavigationView. setSelectedItemId (R. id. tab_one); // call mViewPager according to the actual situation. addOnPageChangeListener (this); // set adapter mViewPager for viewpager. setAdapter (new ViewPagerAdapter (getSupportFragmentManager ();} @ Override public boolean onNavigationItemSelected (@ NonNull MenuItem item) {// linkage between BottomNaviationView and ViewPager, when a tab button of BottomNaviationView is selected and the page corresponding to ViewPager is set to be selected, int itemId = item. getItemId (); switch (itemId) {case R. id. tab_one: clickTabOne (); return true; // return true. Otherwise, the tab button does not change color and case R is not selected. id. tab_two: clickTabTwo (); return true; case R. id. tab_three: clickTabThree (); return true; default: break;} return false;} @ Override public void onPageScrolled (int position, float positionOffset, int positionOffsetPixels) {}@ Override public void onPageSelected (int position) {// linkage between ViewPager and BottomNaviationView. When a page of ViewPager is selected, at the same time, set the tab button corresponding to BottomNaviationView to switch (position) {case 0: mBottomNavigationView. setSelectedItemId (R. id. tab_one); break; case 1: mBottomNavigationView. setSelectedItemId (R. id. tab_two); break; case 2: mBottomNavigationView. setSelectedItemId (R. id. tab_three); break; default: break; }}@ Override public void onPageScrollStateChanged (int state) {} private void clickTabOne () {// to prevent page switching, the problem of sliding over the intermediate page removes the animation effect mViewPager when the page switches slowly. setCurrentItem (0, false); mTitle. setText ("One");} private void clickTabTwo () {mViewPager. setCurrentItem (1, false); mTitle. setText ("Two");} private void clickTabThree () {mViewPager. setCurrentItem (2, false); mTitle. setText ("Three ");}}

There are detailed comments in the code, so I will not talk about them here. Here we will talk about how to set the adapter for ViewPager. The ViewPagerAdapter object is created in the code.

Public class ViewPagerAdapter extends FragmentPagerAdapter {// because the page is fixed, the fragment required by the Adapter is created in advance. private Fragment [] mFragments = new Fragment [] {new OneFragment (), new TwoFragment (), new ThreeFragment ()}; public ViewPagerAdapter (FragmentManager fm) {super (fm) ;}@ Override public Fragment getItem (int position) {return mFragments [position] ;}@ Override public int getCount () {return 3 ;}}