Android沉浸式状态栏 + actionBar渐变 + scrollView顶部伸缩效果
2017-12-08 16:40
856 查看
闲话不多说，直接上图。
给大家讲讲我的编程思想吧。
第一部分：沉浸式状态栏（API-Level 19, Android4.4 KitKat 之后加入的东西），而且在Api-Level 21版本中新增了一个属性（下面会说到）。所以，style文件应该声明三份。
values
<style name="TranslucentTheme" parent="@style/AppTheme"> </style>
values-19
<style name="TranslucentTheme" parent="@style/AppTheme"> <item name="android:windowTranslucentStatus">true</item> <item name="android:windowTranslucentNavigation">false</item> </style>
values-V21
<style name="TranslucentTheme" parent="@style/AppTheme"> <item name="android:windowTranslucentStatus">true</item> <item name="android:windowTranslucentNavigation">false</item> <!-- v-21 中新增的属性 --> <item name="android:statusBarColor">@android:color/transparent</item> </style>
至于以上属性的含义及使用方式，就不多做解释了。详细可参见 https://www.jb51.nethttps://www.geek-share.com/detail/2697105265.html
第二部分：actionBar渐变
因为要实现actionBar渐变，所以我没有使用系统的actionBar。而是自定义了一个继承自LinearLayout的ViewGroup。
直接给各位看代码
package test.com.widget;
import android.content.Context;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;
import test.com.R;
import test.com.impl.ActionBarClickListener;
/**
* 支持渐变的 actionBar
* Created by 晖仔(Milo) on 2016/12/28.
* email:303767416@qq.com
*/
public final class TranslucentActionBar extends LinearLayout {
private View layRoot;
private View vStatusBar;
private View layLeft;
private View layRight;
public TextView tvTitle;
private TextView tvLeft;
private TextView tvRight;
private View iconLeft;
private View iconRight;
public TranslucentActionBar(Context context) {
this(context, null);
}
public TranslucentActionBar(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public TranslucentActionBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
private void init() {
setOrientation(HORIZONTAL);
View contentView = inflate(getContext(), R.layout.actionbar_trans, this);
layRoot = contentView.findViewById(R.id.lay_transroot);
vStatusBar = contentView.findViewById(R.id.v_statusbar);
tvTitle = (TextView) contentView.findViewById(R.id.tv_actionbar_title);
tvLeft = (TextView) contentView.findViewById(R.id.tv_actionbar_left);
tvRight = (TextView) contentView.findViewById(R.id.tv_actionbar_right);
iconLeft = contentView.findViewById(R.id.iv_actionbar_left);
iconRight = contentView.findViewById(R.id.v_actionbar_right);
}
/**
* 设置状态栏高度
*
* @param statusBarHeight
*/
public void setStatusBarHeight(int statusBarHeight) {
ViewGroup.LayoutParams params = vStatusBar.getLayoutParams();
params.height = statusBarHeight;
vStatusBar.setLayoutParams(params);
}
/**
* 设置是否需要渐变
*/
public void setNeedTranslucent() {
setNeedTranslucent(true, false);
}
/**
* 设置是否需要渐变,并且隐藏标题
*
* @param translucent
*/
public void setNeedTranslucent(boolean translucent, boolean titleInitVisibile) {
if (translucent) {
layRoot.setBackgroundDrawable(null);
}
if (!titleInitVisibile) {
tvTitle.setVisibility(View.GONE);
}
}
/**
* 设置标题
*
* @param strTitle
*/
public void setTitle(String strTitle) {
if (!TextUtils.isEmpty(strTitle)) {
tvTitle.setText(strTitle);
} else {
tvTitle.setVisibility(View.GONE);
}
}
/**
* 设置数据
*
* @param strTitle
* @param resIdLeft
* @param strLeft
* @param resIdRight
* @param strRight
* @param listener
*/
public void setData(String strTitle, int resIdLeft, String strLeft, int resIdRight, String strRight, final ActionBarClickListener listener) {
if (!TextUtils.isEmpty(strTitle)) {
tvTitle.setText(strTitle);
} else {
tvTitle.setVisibility(View.GONE);
}
if (!TextUtils.isEmpty(strLeft)) {
tvLeft.setText(strLeft);
tvLeft.setVisibility(View.VISIBLE);
} else {
tvLeft.setVisibility(View.GONE);
}
if (!TextUtils.isEmpty(strRight)) {
tvRight.setText(strRight);
tvRight.setVisibility(View.VISIBLE);
} else {
tvRight.setVisibility(View.GONE);
}
if (resIdLeft == 0) {
iconLeft.setVisibility(View.GONE);
} else {
iconLeft.setBackgroundResource(resIdLeft);
iconLeft.setVisibility(View.VISIBLE);
}
if (resIdRight == 0) {
iconRight.setVisibility(View.GONE);
} else {
iconRight.setBackgroundResource(resIdRight);
iconRight.setVisibility(View.VISIBLE);
}
if (listener != null) {
layLeft = findViewById(R.id.lay_actionbar_left);
layRight = findViewById(R.id.lay_actionbar_right);
layLeft.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
listener.onLeftClick();
}
});
layRight.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
listener.onRightClick();
}
});
}
}
}
下面是actionbar_trans.xml的代码
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/lay_transroot" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" android:orientation="vertical"> <View android:id="@+id/v_statusbar" android:layout_width="match_parent" android:layout_height="1.0dp" /> <RelativeLayout android:layout_width="match_parent" android:layout_height="45dp" android:orientation="vertical"> <RelativeLayout android:id="@+id/lay_actionbar_left" android:layout_width="100dp" android:layout_height="match_parent" android:orientation="horizontal"> <ImageView android:id="@+id/iv_actionbar_left" android:layout_width="20dp" android:layout_height="20dp" android:layout_centerVertical="true" android:layout_marginLeft="10dp" android:background="@mipmap/ic_left_light" android:visibility="gone" /> <TextView android:id="@+id/tv_actionbar_left" style="@style/text_white" android:layout_height="match_parent" android:layout_marginLeft="10dp" android:layout_toRightOf="@+id/iv_actionbar_left" android:gravity="center_vertical" android:maxLength="2" android:singleLine="true" android:text="返回" android:visibility="gone" /> </RelativeLayout> <TextView android:id="@+id/tv_actionbar_title" style="@style/text_white" android:layout_centerInParent="true" android:text="标题" android:textSize="16sp" /> <RelativeLayout android:id="@+id/lay_actionbar_right" android:layout_width="100dp" android:layout_height="match_parent" android:layout_alignParentRight="true" android:gravity="right" android:orientation="horizontal"> <View android:id="@+id/v_actionbar_right" android:layout_width="20dp" android:layout_height="20dp" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="10dp" android:visibility="gone" /> <TextView android:id="@+id/tv_actionbar_right" style="@style/text_white" android:layout_height="match_parent" android:layout_marginRight="10dp" android:layout_toLeftOf="@+id/v_actionbar_right" android:gravity="center_vertical|right" android:singleLine="true" android:visibility="gone" /> </RelativeLayout> </RelativeLayout> </LinearLayout>
这里我即没有用到 android:fitsSystemWindows="true" 属性，也没有用到 StatusBarUtils ，因为我发现使用的时候很容易造成兼容问题。
所以，我的做法是声明了一个高度为0.0dp的 statusbar，背景为透明，然后获取状态栏高度并赋值到它上，来实现兼容。事实证明，这样做的兼容效果最好。
获取状态栏高度代码：
/**
* 获取状态栏高度
*
* @return
*/
public int getStatusBarHeight() {
//获取status_bar_height资源的ID
int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
//根据资源ID获取响应的尺寸值
return getResources().getDimensionPixelSize(resourceId);
}
return 0;
}
设置 statusbar高度：
/**
* 设置状态栏高度
*
* @param statusBarHeight
*/
public void setStatusBarHeight(int statusBarHeight) {
ViewGroup.LayoutParams params = vStatusBar.getLayoutParams();
params.height = statusBarHeight;
vStatusBar.setLayoutParams(params);
}
开启渐变：
/**
* 设置是否需要渐变
*/
public void setNeedTranslucent() {
setNeedTranslucent(true, false);
}
/**
* 设置是否需要渐变,并且隐藏标题
*
* @param translucent
*/
public void setNeedTranslucent(boolean translucent, boolean titleInitVisibile) {
if (translucent) {
layRoot.setBackgroundDrawable(null);
}
if (!titleInitVisibile) {
tvTitle.setVisibility(View.GONE);
}
}
第三步：实现ScrollView顶部伸缩
到了这里，必须得说一下，因为是个人项目中用到，所以并没有把功能做的很强大，本人都是以最简单、有效的方式实现的。所以，代码并不像gitHub上那些被下载很多次的开源项目一样，有很高的扩展性。
时间关系，我直接贴代码吧，代码里我都写了注释的。
package test.com.widget;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Color;
import android.support.annotation.ColorInt;
import android.support.v4.graphics.ColorUtils;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.ScrollView;
import test.com.R;
import test.com.utils.SizeUtils;
/**
* Created by 晖仔(Milo) on 2017/2/13.
* email:303767416@qq.com
*/
public class TranslucentScrollView extends ScrollView {
static final String TAG = "TranslucentScrollView";
//伸缩视图
private View zoomView;
//伸缩视图初始高度
private int zoomViewInitHeight = 0;
// 记录首次按下位置
private float mFirstPosition = 0;
// 是否正在放大
private Boolean mScaling = false;
//渐变的视图
private View transView;
//渐变颜色
private int transColor = Color.WHITE;
//渐变开始位置
private int transStartY = 50;
//渐变结束位置
private int transEndY = 300;
//渐变开始默认位置，Y轴，50dp
private final int DFT_TRANSSTARTY = 50;
//渐变结束默认位置，Y轴，300dp
private final int DFT_TRANSENDY = 300;
private TranslucentScrollView.TranslucentChangedListener translucentChangedListener;
public interface TranslucentChangedListener {
/**
* 透明度变化，取值范围0-255
*
* @param transAlpha
*/
void onTranslucentChanged(int transAlpha);
}
public TranslucentScrollView(Context context) {
super(context);
}
public TranslucentScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public TranslucentScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public void setTranslucentChangedListener(TranslucentScrollView.TranslucentChangedListener translucentChangedListener) {
this.translucentChangedListener = translucentChangedListener;
}
/**
* 设置伸缩视图
*
* @param zoomView
*/
public void setPullZoomView(View zoomView) {
this.zoomView = zoomView;
zoomViewInitHeight = zoomView.getLayoutParams().height;
if (zoomViewInitHeight == LayoutParams.MATCH_PARENT || zoomViewInitHeight == WindowManager.LayoutParams.WRAP_CONTENT) {
zoomView.post(new Runnable() {
@Override
public void run() {
zoomViewInitHeight = TranslucentScrollView.this.zoomView.getHeight();
}
});
}
}
/**
* 设置渐变视图
*
* @param transView 渐变的视图
*/
public void setTransView(View transView) {
setTransView(transView, getResources().getColor(R.color.colorPrimary), SizeUtils.dip2px(getContext(), DFT_TRANSSTARTY), SizeUtils.dip2px(getContext(), DFT_TRANSENDY));
}
/**
* 设置渐变视图
*
* @param transView 渐变的视图
* @param transColor 渐变颜色
* @param transEndY 渐变结束位置
*/
public void setTransView(View transView, @ColorInt int transColor, int transStartY, int transEndY) {
this.transView = transView;
//初始视图-透明
this.transView.setBackgroundColor(ColorUtils.setAlphaComponent(transColor, 0));
this.transStartY = transStartY;
this.transEndY = transEndY;
this.transColor = transColor;
if (transStartY > transEndY) {
throw new IllegalArgumentException("transStartY 不得大于 transEndY .. ");
}
}
/**
* 获取透明度
*
* @return
*/
private int getTransAlpha() {
float scrollY = getScrollY();
if (transStartY != 0) {
if (scrollY <= transStartY) {
return 0;
} else if (scrollY >= transEndY) {
return 255;
} else {
return (int) ((scrollY - transStartY) / (transEndY - transStartY) * 255);
}
} else {
if (scrollY >= transEndY) {
return 255;
}
return (int) ((transEndY - scrollY) / transEndY * 255);
}
}
/**
* 重置ZoomView
*/
private void resetZoomView() {
final ViewGroup.LayoutParams lp = zoomView.getLayoutParams();
final float h = zoomView.getLayoutParams().height;// ZoomView当前高度
// 设置动画
ValueAnimator anim = ObjectAnimator.ofFloat(0.0F, 1.0F).setDuration(200);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float cVal = (Float) animation.getAnimatedValue();
lp.height = (int) (h - (h - zoomViewInitHeight) * cVal);
zoomView.setLayoutParams(lp);
}
});
anim.start();
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
int transAlpha = getTransAlpha();
if (transView != null) {
Log.d(TAG, "[onScrollChanged .. in ], 透明度 == " + transAlpha);
transView.setBackgroundColor(ColorUtils.setAlphaComponent(transColor, transAlpha));
}
if (translucentChangedListener != null) {
translucentChangedListener.onTranslucentChanged(transAlpha);
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (zoomView != null) {
ViewGroup.LayoutParams params = zoomView.getLayoutParams();
switch (event.getAction()) {
case MotionEvent.ACTION_UP:
//手指离开后恢复图片
mScaling = false;
resetZoomView();
break;
case MotionEvent.ACTION_MOVE:
if (!mScaling) {
if (getScrollY() == 0) {
mFirstPosition = event.getY();
} else {
break;
}
}
int distance = (int) ((event.getY() - mFirstPosition) * 0.6);
if (distance < 0) {
break;
}
mScaling = true;
params.height = zoomViewInitHeight + distance;
Log.d(TAG, "params.height == " + params.height + ", zoomViewInitHeight == " + zoomViewInitHeight + ", distance == " + distance);
zoomView.setLayoutParams(params);
return true;
}
}
return super.onTouchEvent(event);
}
}
总结
以上所述是小编给大家介绍的Android沉浸式状态栏 + actionBar渐变 + scrollView顶部伸缩，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android沉浸式状态栏 + actionBar渐变 + scrollView顶部伸缩
- Android沉浸式状态栏 + actionBar渐变 + scrollView顶部伸缩
- android 自定义scrollview 仿QQ空间效果 下拉伸缩顶部图片，上拉回弹 上拉滚动顶部title 颜色渐变
- Android延时启动效果+轮播图+点击进入+沉浸式状态栏+按钮点击颜色渐变效果+好看的UI框架
- Android随着scrollView或者recyclerView滑动状态栏颜色渐变效果
- Android ScrollView顶部搜索栏或者标题栏渐变效果
- Extended ActionBar沉浸式状态栏（顶部状态栏填充与actionBar颜色相同）
- Android之高仿QQ6.6.0侧滑效果（背景动画、透明+沉浸式状态栏、渐变效果）
- android ScrollView顶部使用Viewpager的轮播图，下拉图片能放大效果
- Android利用贝塞尔曲线实现ScrollView滑动到顶部后阴影反馈效果
- Android使用systembartint库实现沉浸式状态栏效果
- 【Android UI设计与开发】第10期：顶部标题栏（一）ActionBar详细概述和简单示例
- 顶部布局随ScrollView滑动透明度渐变（QQ空间效果）
- 去掉ScrollView拉到尽头顶部和底部渐变效果
- Android中的沉浸式状态栏效果
- Android利用贝塞尔曲线实现ScrollView滑动到顶部后阴影反馈效果
- android实现沉浸式状态栏效果
- Android的TitleBar实现透明度渐变效果
- Android ScrollView向上滑动控件顶部悬浮效果实现
- android ScrollView 滑到头部或尾部可伸缩放大效果