Android enables navigation tab suspension in app _android

First of all, "hungry." Navigation tab bar suspension effect diagram.

You can see that the "category", "Sort", and "filter" in the above image is suspended at the top of the app, and the state changes with ScrollView (or maybe not scrollview, where the sliding UI control is scrolled as ScrollView). Like the role of this navigation tab suspension is believed that we all can realize that the tab bar will not be slid out of the screen with the scrolling of ScrollView, which increases the interactivity and convenience of the user.

See the above effect, I believe everyone is eager to, then let us start.

The first thing you should understand is that the tab bar's state change is to monitor the ScrollView sliding distance. As for how to get the ScrollView sliding distance? Take a look at another: "Android ScrollView to achieve the sliding distance listener method," here is not too much to describe.

Well, according to the above, we get the scrollview of the slide. The next question to think about is how to make the tab bar to achieve the effect of suspension? There are two methods given here, the first is to use WindowManager to dynamically add a view suspended at the top; the second is to constantly reset the tab bar layout position with the ScrollView slide.

Let's take a look at the first implementation, first of all, XML layout.

The layout of the activity, Activity_main.xml:

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android= "http://schemas.android.com/apk/res/" Android "Android:layout_width=" Match_parent "android:layout_height=" match_parent "android:orientation=" "Vertical" &

  Gt 
    <relativelayout android:id= "@+id/rl_title" android:layout_width= "match_parent" android:layout_height= "50DP" android:background= "@color/colorprimary" > <imageview android:id= "@+id/iv_back" Android:layout_ Width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_centervertical= "true" android:l ayout_marginleft= "10DP" android:src= "@drawable/new_img_back"/> <textview android:layout_width= "Wra P_content "android:layout_height=" Wrap_content "android:layout_centerinparent=" true "android:text=" @stri 

  Ng/app_name "android:textcolor=" @android: Color/white "android:textsize=" 18sp "/> </RelativeLayout> <com.yuqirong.tabsuspeNddemo.view.MyScrollView android:id= "@+id/mscrollview" android:layout_width= "Match_parent" Android:layout_heig ht= "Match_parent" > <linearlayout android:layout_width= "match_parent" android:layout_height= "Wrap_co" Ntent "android:background=" #cccccc "android:orientation=" vertical "> <imageview android:id = "@+id/iv_pic" android:layout_width= "match_parent" android:layout_height= "180DP" Android:scaletype = "Centercrop" android:src= "@drawable/ic_bg_personal_page"/> <include layout= "@layout/tab_layout"/&G

      T <linearlayout android:layout_width= "match_parent" android:layout_height= "90DP" android:layout_m Arginbottom= "5DP" android:layout_marginleft= "15DP" android:layout_marginright= "15DP" android:layou t_margintop= "15DP" android:background= "@android: Color/white" android:orientation= "Horizontal" > & Lt;/linearlayout> <linearlayout android:layout_width= "match_parent" android:layout_height= "90DP" an
        Droid:layout_marginbottom= "5DP" android:layout_marginleft= "15DP" android:layout_marginright= "15DP" android:layout_margintop= "15DP" android:background= "@android: Color/white" android:orientation= "Horizontal "> </LinearLayout> <linearlayout android:layout_width=" Match_parent "Android:lay out_height= "90DP" android:layout_marginbottom= "5DP" android:layout_marginleft= "15DP" android:layou t_marginright= "15DP" android:layout_margintop= "15DP" android:background= "@android: Color/white" and roid:orientation= "Horizontal" > </LinearLayout> <linearlayout android:layout_width= "match _parent "android:layout_height=" 90DP "android:layout_marginbottom=" 5DP "android:layout_marginleft= "15DP" android:layout_marginright= "15DP" android:layout_margintop= "15DP" android:background= "@android: Color/white" android:orientation= "Horizontal" > </LinearLayout> <linearlayout android:layout_width= "M Atch_parent "android:layout_height=" 90DP "android:layout_marginbottom=" 5DP "Android:layout_marginl eft= "15DP" android:layout_marginright= "15DP" android:layout_margintop= "15DP" android:background= "@
        Android:color/white "android:orientation=" horizontal "> </LinearLayout> <linearlayout
        Android:layout_width= "Match_parent" android:layout_height= "90DP" android:layout_marginbottom= "5DP"
        android:layout_marginleft= "15DP" android:layout_marginright= "15DP" android:layout_margintop= "15DP" Android:background= "@android: Color/white" android:orientation= "Horizontal" > </linearlayout&gt

      ; <linearlayouT android:layout_width= "match_parent" android:layout_height= "90DP" android:layout_marginbottom= "5d" P "android:layout_marginleft=" 15DP "android:layout_marginright=" 15DP "android:layout_margintop=" 15 DP "android:background=" @android: Color/white "android:orientation= Horizontal" > </linearlayou t> </LinearLayout> </com.yuqirong.tabsuspenddemo.view.MyScrollView> </LinearLayout>

Layout of the

tab bar, Tab_layout.xml:

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android= "http://schemas.android.com/apk/res/" Android "android:id=" @+id/ll_tab "android:layout_width=" match_parent "android:layout_height=" 40DP "Android:backgro und= "@color/colorprimary" android:orientation= "horizontal" > <textview android:layout_width= "0DP" Androi d:layout_height= "Match_parent" android:layout_weight= "1" android:gravity= "center" android:text= "classification" Androi D:textcolor= "@android: Color/white" android:textsize= "18sp"/> <textview android:layout_width= "0DP" an droid:layout_height= "Match_parent" android:layout_weight= "1" android:gravity= "center" android:text= "Sort" an
    Droid:textcolor= "@android: Color/white" android:textsize= "18sp"/> <textview android:layout_width= "0DP"
    android:layout_height= "Match_parent" android:layout_weight= "1" android:gravity= "center" android:text= "filter" Android:textcolor= "@android: ColOr/white "android:textsize=" 18sp "/> </LinearLayout> 

Many of the blank linearlayout in the above layout are mainly elongated scrollview, and the effect picture is this:

And then we'll look at OnCreate (Bundle savedinstancestate):

@Override
protected void onCreate (Bundle savedinstancestate) {
  super.oncreate (savedinstancestate);
  Getsupportactionbar (). Hide ();
  Setcontentview (r.layout.activity_main);
  Mscrollview = (Myscrollview) Findviewbyid (R.id.mscrollview);
  Mscrollview.setonscrolllistener (this);
  Ll_tab = (linearlayout) Findviewbyid (r.id.ll_tab);
  WindowManager = (WindowManager) getsystemservice (Context.window_service);
}

We first onCreate(Bundle savedInstanceState) added a sliding distance listener to ScrollView and got a WindowManager object. One more thing to note: We've called out the getSupportActionBar().hide(); title bar (mainactivity inherited appcompatactivity). This is because the presence of the title bar causes the value of the y-axis to be added to the height of the title bar (you can also keep the title bar and then add the title bar height ^_^!).

Then you onWindowFocusChanged(boolean hasFocus) get the tab bar's height, value, and so on getTop() , so that you can reserve it below.

@Override public
void Onwindowfocuschanged (Boolean hasfocus) {
  super.onwindowfocuschanged (hasfocus);
  if (hasfocus) {
    tabheight = Ll_tab.getheight ();
    Tabtop = Ll_tab.gettop ();
    ScrollTop = Mscrollview.gettop ();
  }
}

Then, in the callback method of the slider listener, onScroll(int scrollY) control whether the display or the floating window is hidden.

@Override public
void onscroll (int scrolly) {
  log.i (TAG, "scrolly =" + scrolly + ", Tabtop =" + tabtop);
  if (scrolly > Tabtop) {
 //If not shown if
    (!isshowwindow) {
      ShowWindow ();
    }
  } else {
 //if displayed
    if (isshowwindow) {
      removewindow ();
    }
  }
}

The above code is relatively simple, I do not have to describe too much. Here are removeWindow() showWindow() two methods:

Displays window private void Removewindow () {if (ll_tab_temp!= null) Windowmanager.removeview (LL_TAB_TEMP);
Isshowwindow = false; //Remove window private void ShowWindow () {if (ll_tab_temp = = null) {ll_tab_temp = Layoutinflater.from (this). Inflat
  E (r.layout.tab_layout, NULL);
    } if (layoutparams = = null) {layoutparams = new windowmanager.layoutparams (); Layoutparams.type = WindowManager.LayoutParams.TYPE_PHONE;
    The type of suspension window, generally set to 2002, represents above all applications, but under the status bar Layoutparams.format = pixelformat.rgba_8888; Layoutparams.flags = WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL | WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE; Suspension window behavior, such as layoutparams.gravity, modeless dialog box, etc. = Gravity.top;
    The alignment mode of the suspension window layoutparams.width = WindowManager.LayoutParams.MATCH_PARENT;
    Layoutparams.height = Tabheight; layoutparams.x = 0; The position of the suspension window x layoutparams.y = scrolltop;
  Position of the suspension window y} windowmanager.addview (Ll_tab_temp, layoutparams);
Isshowwindow = true; }

These two methods are also very simple, and there are comments, I believe you can read.

Finally, don't forget to apply permission to display the suspension window in the Androidmanifest.xml:

<uses-permission android:name= "Android.permission.SYSTEM_ALERT_WINDOW"/>

Here, the whole code is all that. Let's see how it works:

It is worth noting: if this method to achieve the tab bar suspension has a disadvantage, that is, if the app is not given permission to display the suspension window, then the function becomes chicken.

Summarize

The above is the entire content of this article, I hope this article on the Android developers of the study or work can help, if you have questions you can message exchange.