Android immersive status bar and suspension effect

  [[177375]]

1. Overview

Now, the detail pages of most e-commerce apps look almost the same. They are almost all pictures of a product. When you slide, a tab will float on top. This is a good user experience. If the tab slides up, the user may need to slide down and click the tab again, which is really troublesome. As for the immersive status bar, Guo Lin said that Google did not give a clear explanation of the immersive status bar. Google only said immersive mode. However, the name of the immersive status bar is not bad. Just follow the crowd. However, the Android environment is not as unified as the IOS environment. For example, the virtual buttons of Huawei ROM and Xiaomi ROM are completely different. It is not easy for all Android developers. ...

2. The effect of Taobao

3. Our results

It can only transfer 2M, and my beauties are distorted. . . . .

4. Implementation Class

Custom ScrollView (StickyScrollView)

StatusBarUtil // Very good status bar tool

5. Layout

 <?xml version= "1.0" encoding= "utf-8" ?>
 <RelativeLayout 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" > 
 
 <FrameLayout
    android:layout_width= "match_parent"  
    android:layout_height= "match_parent" > 
 
    <com.xiaoyuan.StickyScrollView
        android:id= "@+id/scrollView"  
        android:layout_width= "match_parent"  
        android:layout_height= "match_parent"  
        android:focusable= "true"  
        android:focusableInTouchMode= "true" > 
 
 <LinearLayout
            android:id= "@+id/ll_content"  
            android:layout_width= "match_parent"  
            android:layout_height= "match_parent"  
            android:orientation= "vertical" > 
 
 <ImageView
                android:layout_width= "match_parent"  
                android:layout_height= "500dip"  
                android:background= "@mipmap/meinv" /> 
 
 <TextView
                android:id= "@+id/title"  
                android:layout_width= "match_parent"  
                android:layout_height= "50dp"  
                android:gravity= "center"  
 android:text= "beautiful" /> 
 
 <TextView
                android:layout_width= "match_parent"  
                android:layout_height= "50dip"  
                android:gravity= "center"  
 android:text= "female" /> 
 
 <TextView
                android:layout_width= "match_parent"  
                android:layout_height= "50dip"  
                android:gravity= "center"  
 android:text= "beautiful" />
 <TextView
                android:layout_width= "match_parent"  
                android:layout_height= "50dip"  
                android:gravity= "center"  
 android:text= "No" />
 <TextView
                android:layout_width= "match_parent"  
                android:layout_height= "50dip"  
                android:gravity= "center"  
 android:text= "beautiful" /> 
 
 <LinearLayout
                android:layout_width= "match_parent"  
                android:layout_height= "wrap_content"  
                android:orientation= "vertical"  
                android:tag= "sticky" > 
 
 <LinearLayout
                    android:layout_width= "match_parent"  
                    android:layout_height= "45dp"  
                    android:background= "#ffffff"  
                    android:orientation= "horizontal" > 
 
 <TextView
                        android:id= "@+id/infoText"  
                        android:layout_width= "0dp"  
                        android:layout_height= "match_parent"  
                        android:layout_weight= "1"  
                        android:gravity= "center"  
 android:text= "Beauty information"  
                        android:textColor= "#000000"  
                        android:textSize= "16dp" /> 
 
 <TextView
                        android:id= "@+id/secondText"  
                        android:layout_width= "0dp"  
                        android:layout_height= "match_parent"  
                        android:layout_weight= "1"  
                        android:gravity= "center"  
 android:text= "Beauty introduction"  
                        android:textColor= "#000000"  
                        android:textSize= "16dp" />
                </LinearLayout>
 </LinearLayout> 
 
 <FrameLayout
                android:id= "@+id/tabMainContainer"  
                android:layout_width= "match_parent"  
                android:layout_height= "wrap_content"  
                android:background= "#ffffff"  
                android:minHeight= "400dp" > 
 
 </FrameLayout>
 </LinearLayout>
    </com.xiaoyuan.StickyScrollView> 
 
 <RelativeLayout
        android:id= "@+id/ll_good_detail"  
        android:layout_width= "match_parent"  
        android:layout_height= "49dp"  
        android:background= "#00000000"  
        android:paddingTop= "@dimen/spacing_normal" > 
 
 <TextView
            android:layout_width= "wrap_content"  
            android:layout_height= "wrap_content"  
            android:textColor= "#ffffff"  
            android:layout_alignParentLeft= "true"  
            android:layout_marginLeft= "10dip"  
            android:layout_centerHorizontal= "true"  
 android:text= "Return" /> 
 
 <TextView
            android:layout_width= "wrap_content"  
            android:layout_height= "wrap_content"  
            android:textColor= "#ffffff"  
            android:layout_centerInParent= "true"  
            android:layout_centerHorizontal= "true"  
            android:layout_marginLeft= "10dip"  
 android:text= "Beauty" /> 
 
 <TextView
            android:layout_width= "wrap_content"  
            android:layout_height= "wrap_content"  
            android:textColor= "#ffffff"  
            android:layout_alignParentRight= "true"  
            android:layout_marginRight= "10dip"  
            android:layout_centerHorizontal= "true"  
 android:text= "Share" /> 
 
 </RelativeLayout> 
 
 </FrameLayout> 
 
 </RelativeLayout>

Note: We set the attribute android:tag="sticky" for the Tab to be suspended

6. Implementation Code

 public class MainActivity extends AppCompatActivity implements View .OnClickListener, StickyScrollView.OnScrollChangedListener { 
 
 TextView oneTextView, twoTextView;
 private StickyScrollView stickyScrollView;
 private int height;
 private LinearLayout llContent;
 private RelativeLayout llTitle;
 private FrameLayout frameLayout;
 private TextView title; 
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
 initView();
 initListeners(); 
 
 } 
 
 /**
 * Initialize View  
 */
 private void initView() {
    stickyScrollView = (StickyScrollView) findViewById(R.id.scrollView);
    frameLayout = (FrameLayout) findViewById(R.id.tabMainContainer);
    title = (TextView) findViewById(R.id.title);
    oneTextView = (TextView) findViewById(R.id.infoText);
    llContent = (LinearLayout) findViewById(R.id.ll_content);
    llTitle = (RelativeLayout) findViewById(R.id.ll_good_detail);
    oneTextView.setOnClickListener(this);
    twoTextView = (TextView) findViewById(R.id.secondText);
    twoTextView.setOnClickListener(this); 
 
    stickyScrollView.setOnScrollListener(this);
    StatusBarUtil.setTranslucentForImageView(MainActivity.this, 0, title);
    FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) llTitle.getLayoutParams();
    params.setMargins(0, getStatusHeight(), 0, 0);
    llTitle.setLayoutParams(params); 
 
 //Set a Frg by default
    getSupportFragmentManager().beginTransaction(). replace (R.id.tabMainContainer, Fragment.newInstance()). commit ();
 } 
 
 /**
 * Get the status bar height
 * @return  
 */
 private int getStatusHeight() {
 int resourceId = MainActivity.this.getResources().getIdentifier( "status_bar_height" , "dimen" , "android" );
 return getResources().getDimensionPixelSize(resourceId); 
 
 } 
 
 @Override
 public void onClick( View v) {
    if (v.getId() == R.id.infoText) {
        getSupportFragmentManager().beginTransaction(). replace (R.id.tabMainContainer, Fragment.newInstance()). commit ();
    } else if (v.getId() == R.id.secondText) {
        getSupportFragmentManager().beginTransaction(). replace (R.id.tabMainContainer, Fragment1.newInstance()). commit (); 
 
 }
 } 
 
 private void initListeners() {
 //Get the total height of the content
    final ViewTreeObserver vto = llContent.getViewTreeObserver();
    vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
 @Override
 public void onGlobalLayout() {
            height = llContent.getHeight();
 //Note to remove
            llContent.getViewTreeObserver()
                    .removeGlobalOnLayoutListener(this); 
 
 }
 }); 
 
 //Get the Fragment height
    ViewTreeObserver viewTreeObserver = frameLayout.getViewTreeObserver();
    viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
 @Override
 public void onGlobalLayout() {
            height = height - frameLayout.getHeight();
 //Note to remove
            frameLayout.getViewTreeObserver()
                    .removeGlobalOnLayoutListener(this);
 }
 }); 
 
 //Get the title height
    ViewTreeObserver viewTreeObserver1 = llTitle.getViewTreeObserver();
    viewTreeObserver1.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
 @Override
 public void onGlobalLayout() {
 height = height - llTitle.getHeight() - getStatusHeight(); //Calculate the total sliding distance
 stickyScrollView.setStickTop(llTitle.getHeight() + getStatusHeight()); //Set the suspension distance
 //Note to remove
            llTitle.getViewTreeObserver()
                    .removeGlobalOnLayoutListener(this);
 }
 }); 
 
 } 
 
 @Override
 public void onScrollChanged( int l, int t, int oldl, int oldt) {
 if (t <= 0) {
        llTitle.setBackgroundColor(Color.argb(( int ) 0, 255, 255, 255));
        StatusBarUtil.setTranslucentForImageView(MainActivity.this, 0, title);
    } else if (t > 0 && t <= height) {
 float scale = ( float ) t / height;
 int alpha = ( int ) (255 * scale);
 llTitle.setBackgroundColor(Color.argb(( int ) alpha, 227, 29, 26)); //Set the transparency and color of the title bar
 StatusBarUtil.setTranslucentForImageView(MainActivity.this, alpha, title); //Set the transparency of the status bar
 } else {
        llTitle.setBackgroundColor(Color.argb(( int ) 255, 227, 29, 26));
        StatusBarUtil.setTranslucentForImageView(MainActivity.this, 255, title);
 }
 }
 }

Note: stickyScrollView.setStickTop(int height) We can use this method to set the height of the Tab to start floating

We achieve this effect by monitoring the sliding distance of ScrollView to continuously change the transparency of our title bar and status bar. Here we calculate several heights (sliding distances) and finally calculate the total sliding distance, and calculate the transparency value based on the sliding distance and the total sliding distance.

StatusBarUtil.setTranslucentForImageView(MainActivity.this, 0, title); We use the tool to make the image go deep into the status bar. The View that is transmitted is the View under the image.

VI. Conclusion

The effect is good, and the beauties are also good, but there was no such thing as immersion before Android 4.4. You can download the source code to study it. I will remember it more clearly if I implement it myself. I am working. I am too busy. Finally, I would like to thank Uncle Gao (I don’t know the blog address) in the dota group for providing ideas.