当前位置: 首页 > 科技观察

Android沉浸式状态栏和悬浮效果

时间:2023-03-16 00:13:29 科技观察

一、概览现在大部分电商APP的详情页看起来都差不多。几乎都是上述产品的图片。当你滑动的时候,会有一个标签漂浮在上面。以上,用户体验真的很好。如果Tab向上滑动,用户可能需要向下滑动才能再次点击Tab,确实很麻烦。对于沉浸式状态栏,郭琳表示谷歌并未给出沉浸式状态栏的理解。Google只提到了沉浸式模式(ImmersiveMode)。不过“沉浸式状态栏”这个名字听上去也不算太刺耳,就跟普罗大众一样吧,不过安卓环境不像IOS环境那么统一。比如华为rom的虚拟按键和小米rom的虚拟按键完全不一样,这对所有安卓开发者来说都不容易。....2.淘宝的效果3.我们的效果只能传到2M,压制扭曲了我所有的美颜。.....四、现实类自定义ScrollView(StickyScrollView)StatusBarUtil//非常不错的状态栏工具五、布局注意:我们把要悬浮的Tab设置了android:tag=”sticky”这样的属性六、实现代码publicclassMainActivityextendsAppCompatActivityimplementsView.OnClickListener,StickyScrollView.OnScrollChangedListener{TextViewoneTextView,twoTextView;privateStickyScrollViewstickyScrollView;privateintheight;privateLinearLayoutllContent;privateRelativeLayoutllTitle;privateFrameLayoutframeLayout;privateTextViewtitle;@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();initListeners();}/***初始化View*/privatevoidinitView(){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.LayoutParamsparams=(FrameLayout.LayoutParams)llTitle.getLayoutParams();params.setMargins(0,getStatusHeight(),0,0);llTitle.setLayoutParams(params);//默认设置一个FrggetSupportFragmentManager().beginTransaction().replace(R.id.tabMainContainer,Fragment.newInstance()).commit();}/***获得状态栏高度*@return*/privateintgetStatusHeight(){intresourceId=MainActivity.this.getResources().getIdentifier("status_bar_height","dimen","android");returngetResources().getDimensionPixelSize(resourceId);}@OverridepublicvoidonClick(Viewv){if(v.getId()==R.id.infoText){getSupportFragmentManager().beginTransaction().replace(R.id.tabMainContainer,Fragment.newInstance()).commit();}elseif(v.getId()==R.id.secondText){getSupportFragmentManager()。beginTransaction().replace(R.id.tabMainContainer,Fragment1.newInstance()).commit();}}privatevoidinitListeners(){//获取内容总高度finalViewTreeObservervto=llContent.getViewTreeObserver();vto.addOnGlobalLayoutListener(newViewTreeObserver.OnGlobalLayoutListener(){@OverridepublicvoidonGlobalLayout(){height=llContent.getHeight();//注意要移去llContent.getViewTreeObserver().removeGlobalOnLayoutListener(this);}});//获取Fragment高度ViewTreeObserverviewTreeObserver=frameLayout.getViewTreeObserver();viewTreeObserver.addOnGlobalLayoutListener(newViewTreeObserver.OnGlobalLayoutListener(){@OverridepublicvoidonGlobalLayout(){height=height-frameLayout.get/NoteHeight()去除frameLayout.getViewTreeObserver().removeGlobalOnLayoutListener(this);}});//获取标题高度)llTitle.getHeight()-getStatusHeight();//计算滑动总距离stickyScrollView.setStickTop(llTitle.getHeight()+getStatusHeight());//设置hover的距离//注意去掉llTitle.getViewTreeObserver().removeGlobalOnLayoutListener(this);}});}@OverridepublicvoidonScrollChanged(intl,intt,intoldl,intoldt){if(t<=0){llTitle.setBackgroundColor(Color.argb((int)0,255,255,255));StatusBarUtil.setTranslucentForImageView(MainActivity.this,0,title);}elseif(t>0&&t<=height){floatscale=(float)t/height;intalpha=(int)(255*scale);llTitle.setBackgroundColor(Color.argb((int)alpha,227,29,26));//设置标题栏的透明度和颜色StatusBarUtil.setTranslucentForImageView(MainActivity.this,alpha,title);//设置状态栏的透明度}else{llTitle.setBackgroundColor(Color.argb((int)255,227,29,26));StatusBarUtil.setTranslucentForImageView(MainActivity.this,255,title);}}}注意:stickyScrollView.setStickTop(intheight)我们可以通过这个方法来设置Tab开始浮动的高度。我们通过监听ScrollView的滑动距离不断改变我们的标题栏和状态栏的透明度来实现效果。这里我们计算几个高度(滑动距离)最终计算出滑动的总距离,根据滑动的距离和滑动的总距离计算出透明度的值。StatusBarUtil.setTranslucentForImageView(MainActivity.this,0,title);我们使用工具将图像深入到状态栏中。里面的View就是图片下方的View。六、总结效果不错,美颜也不错,但是Android4.4之前,没有身临其境的感觉,可以下载源码研究下。自己做,记得更清楚。已经在工作了。太忙了。最后感谢dota群的高叔(不知道博客地址)提供的思路。