Android沉浸式状态栏 + actionBar渐变 + scrollView顶部伸缩效果

闲话不多说,直接上图。

给大家讲讲我的编程思想吧。

第一部分:沉浸式状态栏(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>

至于以上属性的含义及使用方式,就不多做解释了。详细可参见 //www.jb51.net/article/104485.htm

第二部分: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顶部伸缩,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 详解Android中的沉浸式状态栏效果实例

    无意间了解到沉浸式状态栏,感觉贼拉的高大上,于是就是试着去了解一下,就有了这篇文章.下面就来了解一下啥叫沉浸式状态栏.传统的手机状态栏是呈现出黑色条状的,有的和手机主界面有很明显的区别.这一样就在一定程度上牺牲了视觉宽度,界面面积变小. Google从android kitkat(Android 4.4)开始,给我们开发者提供了一套能透明的系统ui样式给状态栏和导航栏,这样的话就不用向以前那样每天面对着黑乎乎的上下两条黑栏了,还可以调成跟Activity一样的样式,形成一个完整的主题,和IOS7

  • Android之沉浸式状态栏的实现方法、状态栏透明

    现在越来越多的软件都开始使用沉浸式状态栏了,下面总结一下沉浸式状态栏的两种使用方法 注意!沉浸式状态栏只支持安卓4.4及以上的版本 状态栏:4.4上是渐变色,5.0上是完全透明,本文模拟器为4.4演示 效果图: 注意!两种方法的区别: 第一种:为顶部栏跟随当前activity的布局文件的背景的颜色,使用方便,不过也有点问题就是,如果有底部虚拟导航键的话,导航键的背景跟顶部的颜色一样,比如: 第二种:是通过设置顶部栏的颜色来显示的,可以解决第一种的不足,比如: 第一种使用方法: 第一.首先在val

  • 解决Android 沉浸式状态栏和华为虚拟按键冲突问题

    对于现在的 App 来说,布局页面基本都会用到沉浸式状态栏,单纯的沉浸式状态栏很容易解决,但是在华为手机上存在一个底部虚拟按键的问题,会导致页面底部和顶部出现很大的问题,比如页面底部导航栏被按键覆盖,导致底部无法操作,顶部状态栏布局被撑的很高,丑的不忍直视,这里就将两者的冲突问题一并解决!先看下实现的效果图: 这是我自己的手机,OnePlus 3T 7.1.1版本(免费广告,没给我钱的啊),不是华为的手机,但是有个虚拟按键可以设置,可以看到底部导航栏没有问题,顶部状态栏也成功实现,效果图看完,下

  • 快速解决Android7.0下沉浸式状态栏变灰的问题

    1.绪论 现在基本上所有的应用都会去实现沉浸式状态栏,这个是应用的标配,如果你开发的应用没有,那这个吐槽点就多了,"这美工有审美观么""程序猿这么菜,沉浸式都不会?"-.. 咳咳-.. 开个玩笑啊,各有各的设计思想,不能怪程序猿. 2.问题 那么说到沉浸式状态栏的问题是什么呢?不知道大家有没有遇到过,应用在android7.0系统以下的手机上运行,沉浸式状态栏是正常的,但是在7.0以上的手机上运行就感觉没有沉浸式了,是分层的.无论怎么修改状态栏背景色都没用,看下图:

  • Android沉浸式状态栏微技巧(带你真正理解沉浸式模式)

    其实说到沉浸式状态栏这个名字我也是感到很无奈,真不知道这种叫法是谁先发起的.因为Android官方从来没有给出过沉浸式状态栏这样的命名,只有沉浸式模式(Immersive Mode)这种说法.而有些人在没有完全了解清楚沉浸模式到底是什么东西的情况下,就张冠李戴地认为一些系统提供的状态栏操作就是沉浸式的,并且还起了一个沉浸式状态栏的名字. 比如之前就有一个QQ群友问过我,像饿了么这样的沉浸式状态栏效果该如何实现? 这个效果其实就是让背景图片可以利用系统状态栏的空间,从而能够让背景图和状态栏融为一体

  • Android 高仿QQ 沉浸式状态栏

    前言: 在进入今天正题前,还是老样子先谈谈感想吧,最近感觉整个都失去了方向感,好迷茫!找工作又失败了,难道Android真的饱和了?这两天我一直没出门,除了下楼哪外卖就是宅宿舍了,静想了许久,我还是不能忘了初心,我相信我找不到工作的原因有很多,最关键的还是要技术够硬才行啊,奔跑吧孩子!接下来我就给大家介绍怎样快速打造沉浸式状态栏吧,虽然感觉有点相见恨晚,但其实不完! 一:何为沉浸式状态栏? 沉浸式状态栏是Google从Android 4.4开始,给我们开发者提供的一套能透明的系统ui样式,这样样

  • Android 沉浸式状态栏及悬浮效果

    一.概述 现在大多数的电商APP的详情页长得几乎都差不多,几乎都是上面一个商品的图片,当你滑动的时候,会有Tab悬浮在上面,这样做用户体验确实不错,如果Tab滑上去,用户可能还需要滑下来,在来点击Tab,这样确实很麻烦.沉浸式状态栏那,郭霖说过谷歌并没有给出沉浸式状态栏这个明白,谷歌只说了沉浸式模式(Immersive Mode).不过沉浸式状态栏这个名字其实听不粗,随大众吧,但是Android的环境并没有iOS环境一样特别统一,比如华为rom的跟小米rom的虚拟按键完全不一样,所有Androi

  • Android沉浸式状态栏实现

    苹果上的UI基本上都是这个效果,然而Android机上的顶部状态栏总是和app的主题颜色不搭.还好如今的api19以上的版本,我们也能做出这样的效果. 第一步: // 需要setContentView之前调用 private void setTranslucentStatus() { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { // 透明状态栏 getWindow().addFlags( WindowManager.Lay

  • Android App仿QQ制作Material Design风格沉浸式状态栏

    一.概述 近期注意到QQ新版使用了沉浸式状态栏,ok,先声明一下效果图: 恩,接下来正题. 首先只有大于等于4.4版本支持这个半透明状态栏的效果,但是4.4和5.0的显示效果有一定的差异,所有本文内容为: 1.如何实现半透明状态栏效果在大于4.4版本之上. 2.如何让4.4的效果与5.0的效果尽可能一致. 先贴下模拟器效果图,以便和实现过程中做下对比 4.4 模拟器 5.x 真机 二.实现半透明状态栏 因为本例使用了NavigationView,所以布局代码稍多,当然如果你不需要,可以自己进行筛

  • Android 实现沉浸式状态栏的方法

    沉浸式状态栏的来源就是很多手机用的是实体按键,没有虚拟键,于是开了沉浸模式就只有状态栏消失了.于是沉浸模式成了沉浸式状态栏. 我们先来看下具体的效果 开启沉浸模式后,状态栏消失,从顶部向下滑动,状态栏出现,退出沉浸模式,状态栏也出现了. 我们的代码基于前一篇文章.首先是两个开启沉浸模式和关闭沉浸模式的函数 @SuppressLint("NewApi") public static void hideSystemUI(View view) { view.setSystemUiVisibi

  • Android编程中沉浸式状态栏的三种实现方式详解

    本文实例讲述了Android编程中沉浸式状态栏的三种实现方式.分享给大家供大家参考,具体如下: 沉浸式状态栏 Google从android kitkat(Android 4.4)开始,给我们开发者提供了一套能透明的系统ui样式给状态栏和导航栏,这样的话就不用向以前那样每天面对着黑乎乎的上下两条黑栏了,还可以调成跟Activity一样的样式,形成一个完整的主题,和IOS7.0以上系统一样了. 首先看下效果 首先看下第一种方式 系统的方式沉浸式状态栏实现 步奏一 //当系统版本为4.4或者4.4以上

  • 另外两种Android沉浸式状态栏实现思路

    关于沉浸式状态栏相信大家都不陌生,IOS系统很早就有,android5.0及以后版本都支持给状态栏着色,而目前android主流版本还是4.4,网上通用实现4.4(API19)沉浸式状态栏也都是依赖于可以将状态栏变为透明的属性,再为其着色,主要实现代码: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout

随机推荐