Imitate the bottom navigation bar of Zhihu
Here’s the original version:
Function introduction:
1> Create NavigationBottom menu file in res/menu folder as follows:
Copy the codeYou can look at BottomMenuItem and call getTitle() to get the title of the current TAB app:nb_tabActiveResId: Sets the image ID of the current item(TAB) when it is selected. App :nb_tabInActiveResId: Sets the image ID of the current item(TAB) when it is not selected. App :nb_insetLeft: sets the distance between the background image of the current Item(TAB) and the left edge. App :nb_insetRight: sets the distance between the background image of the current Item and the right edge of the current TAB. Set the distance between the background image of the current Item(TAB) and the bottom edge, as illustrated belowCopy the codeNote:
1) the default internal insetLeft insetRight, insetTop, insetBottom default is 12 dp. App :nb_insetLeft, app:nb_insetTop, app:nb_insetRight, nb_insetBottom app:nb_insetLeft, app:nb_insetTop, app:nb_insetRight, nb_insetBottom The default value is 12DP. This way, when you set the icon and find that there are individual ICONS and other different sizes, you can use the above four attributes to fine-tune the size of the specified icon to achieve the overall purpose of consistency. 2) If the sum of insetLeft and insetRight is greater than the width of a Tab, an exception will be raised: IllegalArgumentException (XML attribute of "app:insetLeft" or "app:insetRight" is too large!) 3) The same goes for insetTop and insetBottomCopy the code
In the figure: A, B, C, D respectively corresponding to insetLeft, nb_insetTop, nb_insetRight, nb_insetBottom.
2> Use in XML files:
Copy the codeApp :nb_defaultIndex: NavigationBottom set the TAB to be selected initially. Just pass in index, which is like an array, starting at 0. Default 0 when not set app:nb_scrollDuration: Sets the time required when NavigationBottom hides. That is, you can set the speed at which it falls to hide. If this parameter is not set, the default value is 500msCopy the codeNote:
The layout_width in the MyNavigationBottom tag is ideally match_parent. When the size is specific, an exception is thrown: IllegalArgumentException (NavigationBottom's width must be match_parent,which couldn't less than screenSize) When it is wrAP_content, internal onMeasure() automatically adjusts it to match_parent. Do not set layout_height to match_parent. Set layout_height to a specific value, such as 48dpCopy the codeNavigationBottom = (MyNavigationBottom) findViewById(R.i.navigationbtn1); navigationBottom = (MyNavigationBottom) findViewById(R.I.navigationbtn1); 2) Then you can set the listening event: navigationBottom.setOnTabListener(new OnTabSelectListener() { @Override public void onTabSelected(int index, View view) { Log.d("kklog", "######onTabSelected index=====>" + index + "######"); Toast.makeText(MainActivity.this, index + "", Toast.LENGTH_SHORT).show(); }}); Navigationbottom.hide (); Navigationbottom.show (); navigationbottom.show (); 5) in the end, when you need to know what is the currently selected TAB, you can do it: navigationBottom. GetSelectedIndex (); 6) When you want to create RecyclerView connection, my method is: rewrite setOnTouchListener (), then listen ACTION_MOVE, and execute corresponding operation, my code is as follows, for reference only: recyclerView.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View view, MotionEvent motionEvent) { x= (int) motionEvent.getX(); y= (int) motionEvent.getY(); switch (motionEvent.getAction()){ case MotionEvent.ACTION_MOVE: int deltaY=y-lastY; if(deltaY>=0){ //down navigationBottom.show(); }else{ //up navigationBottom.hide(); } break; } lastX=x; lastY=y; return false; }});Copy the codeRun screenshot:
