自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Android沉浸式狀態(tài)欄及懸浮效果

作者：佚名
移動(dòng)開(kāi)發(fā) Android
現(xiàn)在大多數(shù)的電商APP的詳情頁(yè)長(zhǎng)得幾乎都差不多，幾乎都是上面一個(gè)商品的圖片，當(dāng)你滑動(dòng)的時(shí)候，會(huì)有Tab懸浮在上面，這樣做用戶體驗(yàn)確實(shí)不錯(cuò)，如果Tab滑上去，用戶可能還需要滑下來(lái)，在來(lái)點(diǎn)擊Tab，這樣確實(shí)很麻煩。沉浸式狀態(tài)欄那，郭霖說(shuō)過(guò)谷歌并沒(méi)有給出沉浸式狀態(tài)欄這個(gè)明白，谷歌只說(shuō)了沉浸式模式（Immersive Mode）。

 [[177375]]

一、概述

現(xiàn)在大多數(shù)的電商APP的詳情頁(yè)長(zhǎng)得幾乎都差不多，幾乎都是上面一個(gè)商品的圖片，當(dāng)你滑動(dòng)的時(shí)候，會(huì)有Tab懸浮在上面，這樣做用戶體驗(yàn)確實(shí)不錯(cuò)，如果Tab滑上去，用戶可能還需要滑下來(lái)，在來(lái)點(diǎn)擊Tab，這樣確實(shí)很麻煩。沉浸式狀態(tài)欄那，郭霖說(shuō)過(guò)谷歌并沒(méi)有給出沉浸式狀態(tài)欄這個(gè)明白，谷歌只說(shuō)了沉浸式模式(Immersive Mode)。不過(guò)沉浸式狀態(tài)欄這個(gè)名字其實(shí)聽(tīng)不粗，隨大眾吧，但是Android的環(huán)境并沒(méi)有IOS環(huán)境一樣特別統(tǒng)一，比如華為rom的跟小米rom的虛擬按鍵完全不一樣，所有Android開(kāi)發(fā)者不容易。。。。。

二、淘寶的效果 

 

 

 

三、我們的效果 

 

 

 

只能傳2M，把我的美女都給壓失真了。。。。。。

四、實(shí)現(xiàn)類

自定義ScrollView (StickyScrollView)

StatusBarUtil //非常不錯(cuò)的狀態(tài)欄工具

五、布局 

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  3. xmlns:tools="http://schemas.android.com/tools" 
  4. android:layout_width="match_parent" 
  5. android:layout_height="match_parent"> 
  6.  
  7. <FrameLayout 
  8.     android:layout_width="match_parent" 
  9.     android:layout_height="match_parent"> 
  10.  
  11.     <com.xiaoyuan.StickyScrollView 
  12.         android:id="@+id/scrollView" 
  13.         android:layout_width="match_parent" 
  14.         android:layout_height="match_parent" 
  15.         android:focusable="true" 
  16.         android:focusableInTouchMode="true"> 
  17.  
  18.         <LinearLayout 
  19.             android:id="@+id/ll_content" 
  20.             android:layout_width="match_parent" 
  21.             android:layout_height="match_parent" 
  22.             android:orientation="vertical"> 
  23.  
  24.             <ImageView 
  25.                 android:layout_width="match_parent" 
  26.                 android:layout_height="500dip" 
  27.                 android:background="@mipmap/meinv"/> 
  28.  
  29.             <TextView 
  30.                 android:id="@+id/title" 
  31.                 android:layout_width="match_parent" 
  32.                 android:layout_height="50dp" 
  33.                 android:gravity="center" 
  34.                 android:text="美" /> 
  35.  
  36.             <TextView 
  37.                 android:layout_width="match_parent" 
  38.                 android:layout_height="50dip" 
  39.                 android:gravity="center" 
  40.                 android:text="女"/> 
  41.  
  42.             <TextView 
  43.                 android:layout_width="match_parent" 
  44.                 android:layout_height="50dip" 
  45.                 android:gravity="center" 
  46.                 android:text="美"/> 
  47.             <TextView 
  48.                 android:layout_width="match_parent" 
  49.                 android:layout_height="50dip" 
  50.                 android:gravity="center" 
  51.                 android:text="不"/> 
  52.             <TextView 
  53.                 android:layout_width="match_parent" 
  54.                 android:layout_height="50dip" 
  55.                 android:gravity="center" 
  56.                 android:text="美"/> 
  57.  
  58.             <LinearLayout 
  59.                 android:layout_width="match_parent" 
  60.                 android:layout_height="wrap_content" 
  61.                 android:orientation="vertical" 
  62.                 android:tag="sticky"> 
  63.  
  64.                 <LinearLayout 
  65.                     android:layout_width="match_parent" 
  66.                     android:layout_height="45dp" 
  67.                     android:background="#ffffff" 
  68.                     android:orientation="horizontal"> 
  69.  
  70.                     <TextView 
  71.                         android:id="@+id/infoText" 
  72.                         android:layout_width="0dp" 
  73.                         android:layout_height="match_parent" 
  74.                         android:layout_weight="1" 
  75.                         android:gravity="center" 
  76.                         android:text="美女信息" 
  77.                         android:textColor="#000000" 
  78.                         android:textSize="16dp" /> 
  79.  
  80.                     <TextView 
  81.                         android:id="@+id/secondText" 
  82.                         android:layout_width="0dp" 
  83.                         android:layout_height="match_parent" 
  84.                         android:layout_weight="1" 
  85.                         android:gravity="center" 
  86.                         android:text="美女介紹" 
  87.                         android:textColor="#000000" 
  88.                         android:textSize="16dp" /> 
  89.                 </LinearLayout> 
  90.             </LinearLayout> 
  91.  
  92.             <FrameLayout 
  93.                 android:id="@+id/tabMainContainer" 
  94.                 android:layout_width="match_parent" 
  95.                 android:layout_height="wrap_content" 
  96.                 android:background="#ffffff" 
  97.                 android:minHeight="400dp"> 
  98.  
  99.             </FrameLayout> 
  100.         </LinearLayout> 
  101.     </com.xiaoyuan.StickyScrollView> 
  102.  
  103.     <RelativeLayout 
  104.         android:id="@+id/ll_good_detail" 
  105.         android:layout_width="match_parent" 
  106.         android:layout_height="49dp" 
  107.         android:background="#00000000" 
  108.         android:paddingTop="@dimen/spacing_normal"> 
  109.  
  110.         <TextView 
  111.             android:layout_width="wrap_content" 
  112.             android:layout_height="wrap_content" 
  113.             android:textColor="#ffffff" 
  114.             android:layout_alignParentLeft="true" 
  115.             android:layout_marginLeft="10dip" 
  116.             android:layout_centerHorizontal="true" 
  117.             android:text="返回"/> 
  118.  
  119.         <TextView 
  120.             android:layout_width="wrap_content" 
  121.             android:layout_height="wrap_content" 
  122.             android:textColor="#ffffff" 
  123.             android:layout_centerInParent="true" 
  124.             android:layout_centerHorizontal="true" 
  125.             android:layout_marginLeft="10dip" 
  126.             android:text="美女"/> 
  127.  
  128.         <TextView 
  129.             android:layout_width="wrap_content" 
  130.             android:layout_height="wrap_content" 
  131.             android:textColor="#ffffff" 
  132.             android:layout_alignParentRight="true" 
  133.             android:layout_marginRight="10dip" 
  134.             android:layout_centerHorizontal="true" 
  135.             android:text="分享"/> 
  136.  
  137.     </RelativeLayout> 
  138.  
  139. </FrameLayout> 
  140.  
  141. </RelativeLayout>  

注意：我們把要懸浮的Tab設(shè)置了android:tag=”sticky”這樣的屬性

六、實(shí)現(xiàn)代碼

  1. public class MainActivity extends AppCompatActivity implements View.OnClickListener, StickyScrollView.OnScrollChangedListener { 
  2.  
  3. TextView oneTextView, twoTextView; 
  4. private StickyScrollView stickyScrollView; 
  5. private int height; 
  6. private LinearLayout llContent; 
  7. private RelativeLayout llTitle; 
  8. private FrameLayout frameLayout; 
  9. private TextView title; 
  10.  
  11. @Override 
  12. protected void onCreate(Bundle savedInstanceState) { 
  13.     super.onCreate(savedInstanceState); 
  14.     setContentView(R.layout.activity_main); 
  15.     initView(); 
  16.     initListeners(); 
  17.  
  18. } 
  19.  
  20. /** 
  21.  * 初始化View 
  22.  */ 
  23. private void initView() { 
  24.     stickyScrollView = (StickyScrollView) findViewById(R.id.scrollView); 
  25.     frameLayout = (FrameLayout) findViewById(R.id.tabMainContainer); 
  26.     title = (TextView) findViewById(R.id.title); 
  27.     oneTextView = (TextView) findViewById(R.id.infoText); 
  28.     llContent = (LinearLayout) findViewById(R.id.ll_content); 
  29.     llTitle = (RelativeLayout) findViewById(R.id.ll_good_detail); 
  30.     oneTextView.setOnClickListener(this); 
  31.     twoTextView = (TextView) findViewById(R.id.secondText); 
  32.     twoTextView.setOnClickListener(this); 
  33.  
  34.     stickyScrollView.setOnScrollListener(this); 
  35.     StatusBarUtil.setTranslucentForImageView(MainActivity.this, 0, title); 
  36.     FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) llTitle.getLayoutParams(); 
  37.     params.setMargins(0, getStatusHeight(), 0, 0); 
  38.     llTitle.setLayoutParams(params); 
  39.  
  40.     //默認(rèn)設(shè)置一個(gè)Frg 
  41.     getSupportFragmentManager().beginTransaction().replace(R.id.tabMainContainer, Fragment.newInstance()).commit(); 
  42. } 
  43.  
  44. /** 
  45.  * 獲取狀態(tài)欄高度 
  46.  * @return 
  47.  */ 
  48. private int getStatusHeight() { 
  49.     int resourceId = MainActivity.this.getResources().getIdentifier("status_bar_height", "dimen", "android"); 
  50.     return getResources().getDimensionPixelSize(resourceId); 
  51.  
  52. } 
  53.  
  54. @Override 
  55. public void onClick(View v) { 
  56.     if (v.getId() == R.id.infoText) { 
  57.         getSupportFragmentManager().beginTransaction().replace(R.id.tabMainContainer, Fragment.newInstance()).commit(); 
  58.     } else if (v.getId() == R.id.secondText) { 
  59.         getSupportFragmentManager().beginTransaction().replace(R.id.tabMainContainer, Fragment1.newInstance()).commit(); 
  60.  
  61.     } 
  62. } 
  63.  
  64. private void initListeners() { 
  65.     //獲取內(nèi)容總高度 
  66.     final ViewTreeObserver vto = llContent.getViewTreeObserver(); 
  67.     vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { 
  68.         @Override 
  69.         public void onGlobalLayout() { 
  70.             height = llContent.getHeight(); 
  71.             //注意要移除 
  72.             llContent.getViewTreeObserver() 
  73.                     .removeGlobalOnLayoutListener(this); 
  74.  
  75.         } 
  76.     }); 
  77.  
  78.     //獲取Fragment高度 
  79.     ViewTreeObserver viewTreeObserver = frameLayout.getViewTreeObserver(); 
  80.     viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { 
  81.         @Override 
  82.         public void onGlobalLayout() { 
  83.             height = height - frameLayout.getHeight(); 
  84.             //注意要移除 
  85.             frameLayout.getViewTreeObserver() 
  86.                     .removeGlobalOnLayoutListener(this); 
  87.         } 
  88.     }); 
  89.  
  90.     //獲取title高度 
  91.     ViewTreeObserver viewTreeObserver1 = llTitle.getViewTreeObserver(); 
  92.     viewTreeObserver1.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { 
  93.         @Override 
  94.         public void onGlobalLayout() { 
  95.             height = height - llTitle.getHeight() - getStatusHeight();//計(jì)算滑動(dòng)的總距離 
  96.             stickyScrollView.setStickTop(llTitle.getHeight() + getStatusHeight());//設(shè)置距離多少懸浮 
  97.             //注意要移除 
  98.             llTitle.getViewTreeObserver() 
  99.                     .removeGlobalOnLayoutListener(this); 
  100.         } 
  101.     }); 
  102.  
  103. } 
  104.  
  105. @Override 
  106. public void onScrollChanged(int l, int t, int oldl, int oldt) { 
  107.     if (t <= 0) { 
  108.         llTitle.setBackgroundColor(Color.argb((int) 0, 255, 255, 255)); 
  109.         StatusBarUtil.setTranslucentForImageView(MainActivity.this, 0, title); 
  110.     } else if (t > 0 && t <= height) { 
  111.         float scale = (float) t / height; 
  112.         int alpha = (int) (255 * scale); 
  113.         llTitle.setBackgroundColor(Color.argb((int) alpha, 227, 29, 26));//設(shè)置標(biāo)題欄的透明度及顏色 
  114.         StatusBarUtil.setTranslucentForImageView(MainActivity.this, alpha, title);//設(shè)置狀態(tài)欄的透明度 
  115.     } else { 
  116.         llTitle.setBackgroundColor(Color.argb((int) 255, 227, 29, 26)); 
  117.         StatusBarUtil.setTranslucentForImageView(MainActivity.this, 255, title); 
  118.     } 
  119. } 
  120.  }  

注意：stickyScrollView.setStickTop(int height)我們通過(guò)這個(gè)方法可以設(shè)置Tab距離多高開(kāi)始懸浮

我們通過(guò)監(jiān)聽(tīng)ScrollView滑動(dòng)距離來(lái)不斷改變我們標(biāo)題欄跟狀態(tài)欄的透明度來(lái)達(dá)到效果，在這里我們計(jì)算了幾個(gè)高度(滑動(dòng)距離)。最后來(lái)算出滑動(dòng)總距離，根據(jù)滑動(dòng)的距離跟滑動(dòng)的總距離來(lái)算出透明度的數(shù)值。

StatusBarUtil.setTranslucentForImageView(MainActivity.this, 0, title);我們通過(guò)工具來(lái)實(shí)現(xiàn)圖片深入狀態(tài)欄。里面的傳的View是圖片下面的View。

六、總結(jié)

效果倒是不錯(cuò)，美女也不錯(cuò)、但是在Android4.4之前根本就沒(méi)有沉浸式這個(gè)東西，大家可以下載源碼來(lái)研究。自己動(dòng)手實(shí)現(xiàn)一遍記得比較清楚。工作了。太忙了。最后感謝一下dota群的高叔(博客地址不知道)提供思路。

責(zé)任編輯：龐桂玉 來(lái)源： Android開(kāi)發(fā)中文站
Android
相關(guān)推薦

2017-02-17 11:00:57

狀態(tài)欄Android

2021-08-09 20:29:27

Android沉浸式狀態(tài)欄

2017-12-05 12:44:57

Android沉浸式狀態(tài)欄APP

2022-11-23 14:47:29

北向開(kāi)發(fā)鴻蒙

2015-02-12 14:49:36

CGToast狀態(tài)欄提示Status

2013-07-18 16:09:10

自定義iOS狀態(tài)欄iOS開(kāi)發(fā)iOS學(xué)習(xí)

2022-02-22 09:16:41

AndroidWindows狀態(tài)欄

2012-12-24 14:42:48

iOS自定義狀態(tài)欄

2014-06-06 14:03:13

iOS狀態(tài)欄提示控件原理

2021-06-15 15:04:38

Android 12安卓通話

2013-11-20 15:08:32

iOS開(kāi)發(fā)狀態(tài)欄

2021-06-15 15:28:31

谷歌Android開(kāi)發(fā)

2018-05-16 09:11:19

Android狀態(tài)欄移動(dòng)系統(tǒng)

2022-03-16 15:30:25

barAndroid開(kāi)發(fā)者

2011-06-02 09:23:58

Android 效果

2016-11-18 08:41:23

2011-06-16 11:15:04

2023-05-30 14:50:20

界面開(kāi)發(fā)鴻蒙

2021-10-20 07:39:12

谷歌安卓 Android 12

2023-07-12 23:27:24

Powerline編輯器
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)