Android 沉浸式状态栏及悬浮效果
作者:小_源 发布时间:2023-07-29 23:03:15
一、概述
现在大多数的电商APP的详情页长得几乎都差不多,几乎都是上面一个商品的图片,当你滑动的时候,会有Tab悬浮在上面,这样做用户体验确实不错,如果Tab滑上去,用户可能还需要滑下来,在来点击Tab,这样确实很麻烦。沉浸式状态栏那,郭霖说过谷歌并没有给出沉浸式状态栏这个明白,谷歌只说了沉浸式模式(Immersive Mode)。不过沉浸式状态栏这个名字其实听不粗,随大众吧,但是Android的环境并没有iOS环境一样特别统一,比如华为rom的跟小米rom的虚拟按键完全不一样,所有Android开发者不容易。。。。。
二、淘宝的效果
三、我们的效果
只能传2M,把我的美女都给压失真了。。。。。。
四、实现类
自定义ScrollView (StickyScrollView)
StatusBarUtil //非常不错的状态栏工具
五、布局
<?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="美" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dip"
android:gravity="center"
android:text="女"/>
<TextView
android:layout_width="match_parent"
android:layout_height="50dip"
android:gravity="center"
android:text="美"/>
<TextView
android:layout_width="match_parent"
android:layout_height="50dip"
android:gravity="center"
android:text="不"/>
<TextView
android:layout_width="match_parent"
android:layout_height="50dip"
android:gravity="center"
android:text="美"/>
<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="美女信息"
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="美女介绍"
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="返回"/>
<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="美女"/>
<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="分享"/>
</RelativeLayout>
</FrameLayout>
</RelativeLayout>
注意:我们把要悬浮的Tab设置了android:tag=”sticky”这样的属性
六、实现代码
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();
}
/**
* 初始化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);
//默认设置一个Frg
getSupportFragmentManager().beginTransaction().replace(R.id.tabMainContainer, Fragment.newInstance()).commit();
}
/**
* 获取状态栏高度
* @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() {
//获取内容总高度
final ViewTreeObserver vto = llContent.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
height = llContent.getHeight();
//注意要移除
llContent.getViewTreeObserver()
.removeGlobalOnLayoutListener(this);
}
});
//获取Fragment高度
ViewTreeObserver viewTreeObserver = frameLayout.getViewTreeObserver();
viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
height = height - frameLayout.getHeight();
//注意要移除
frameLayout.getViewTreeObserver()
.removeGlobalOnLayoutListener(this);
}
});
//获取title高度
ViewTreeObserver viewTreeObserver1 = llTitle.getViewTreeObserver();
viewTreeObserver1.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
height = height - llTitle.getHeight() - getStatusHeight();//计算滑动的总距离
stickyScrollView.setStickTop(llTitle.getHeight() + getStatusHeight());//设置距离多少悬浮
//注意要移除
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));//设置标题栏的透明度及颜色
StatusBarUtil.setTranslucentForImageView(MainActivity.this, alpha, title);//设置状态栏的透明度
} else {
llTitle.setBackgroundColor(Color.argb((int) 255, 227, 29, 26));
StatusBarUtil.setTranslucentForImageView(MainActivity.this, 255, title);
}
}
}
注意:stickyScrollView.setStickTop(int height)我们通过这个方法可以设置Tab距离多高开始悬浮
我们通过监听ScrollView滑动距离来不断改变我们标题栏跟状态栏的透明度来达到效果,在这里我们计算了几个高度(滑动距离)。最后来算出滑动总距离,根据滑动的距离跟滑动的总距离来算出透明度的数值。
StatusBarUtil.setTranslucentForImageView(MainActivity.this, 0, title);我们通过工具来实现图片深入状态栏。里面的传的View是图片下面的View。
以上所述是小编给大家介绍的Android 沉浸式状态栏及悬浮效果,希望对大家有所帮助
来源:http://blog.csdn.net/xiaoyuan511/article/details/53146514
猜你喜欢
- 实验目的在C#和Rest/Restful以及其它的Web服务交互过程中,大量使用到JSON传递数据,如何快捷的转化C#对象到JSON和转化J
- 具体代码如下所示:***web.xml***<?xml version="1.0" encoding="
- 一、介绍在实际的软件项目开发过程中,我可以很负责任的跟大家说,如果你真的实际写代码的时间超过5年,你对增删改查这类简单的功能需求开发,可以说
- 本文实例为大家分享了java简单实现斗地主发牌的具体代码,供大家参考,具体内容如下问题:参考斗地主的游戏规则,完成一个发牌的功能(54张牌,
- 本文实例为大家分享了Android实现支付宝支付密码输入界面的具体代码,供大家参考,具体内容如下效果图:主要代码:import java.u
- 前言古语有云:道为术之灵,术为道之体;以道统术,以术得道。其中:“道”指“规律、道理、理论”,“术”指“方法、技巧、技术”。意思是:“道”是
- 已知两个链表list1和list,2,各自非降序排列,将它们合并成另外一个链表list3,并且依然有序,要求保留所有节点。实现过程中,lis
- 一、获取android工程里面的各种资源的id; 1.1 string型 比如下面: << string name=”OK”&g
- 知识点:1.使用SQL Helper创建数据库2.数据的增删查改(PRDU:Put、Read、Delete、Update)背景知识:上篇文章
- 本文实例总结了Android开发中Toast显示消息的方法。分享给大家供大家参考,具体如下:Android中提供一种简单的Toast消息提示
- 先上图下拉刷新跟原生开发一样,下拉刷新在flutter里提供的有组件实现 RefreshIndicator一直不明白为啥组件中都提供下拉刷新
- 微服务治理Spring Cloud 工具套件为微服务治理提供了全面的技术支持。这些治理工具主要包括服务的注册与发现、负载均衡管理、动态路由、
- java有两种类型的classload,一种是user-defined的,一种是jvm内置的bootstrap class loader,所
- Bitmap (android.graphics.Bitmap)Bitmap是Android系统中的图像处理的最重要类之一。用它可以获取图像
- 本文实例讲述了C++实现的链表类。分享给大家供大家参考。具体如下:#include <iostream>using namesp
- 背景后台系统需要接入 企业微信登入,满足企业员工快速登入系统流程图简单代码说明自定义一套 springsecurity 认证逻辑主要就是 根
- 本文实例为大家分享了Android实现图片设置圆角形式的具体代码,供大家参考,具体内容如下1.自定义的图片圆角形式CircleImageVi
- 工作中有做过手机App项目,前端和android或ios程序员配合完成整个项目的开发,开发过程中与ios程序配合基本没什么问题,而andro
- 目标效果: 点击动画按钮之后每张牌各自旋转 散开到屏幕上半部分的任意位置之后回到初始位置 比较像LOL男刀的技能动画 : )1: 创建卡牌对
- 背景今天面试字节算法岗时被问到的问题,让我用C++实现一个softmax函数。softmax是逻辑回归在多分类问题上的推广。大概的公式如下: