高仿美团APP页面滑动标题栏渐变效果
2017-04-21 本文已影响3756人
李晨玮
最近公司的项目刚好需要这个效果，虽然GitHub上有很多成型的开源项目，不过都附带了很多其他的东西，为了这个效果去引用一个第三方库明显不合适，所以就决定自力更生了。
其实在日常软件中还是挺常见的，比如带Banner广告图的首页或者是带头部的个人中心，下面是美团和摩拜单车的实现效果:
摩拜单车
美团
实现思路:
如果单纯看摩拜单车这张效果图，由于背景色重叠的原因，可能看的不是那么的清楚，再看下美团的效果图，其实就可以很明显的发现头部（标题栏+状态栏）其实是没有动的，只是一开始呈透明装，然后随着内容的向上滑动在某个坐标点开始渐变颜色。
基于这样的思考，我们把代码实现拆分3点：
1、整体界面是个ScrollView，并且我们需要对滑动进行监听
2、确定坐标点，在什么时候开始变色，在什么时候停止变色
3、需要将状态栏透明化，并且让我们的内容区域可以扩展到状态栏
好了，理清思路，我们就可以开始干活了！
先看下我们实现的效果：
效果图
ObservableScrollView的实现
虽然谷歌官方给ScrollView提供了一个设置滑动监听方法setOnScrollChangeListener，不过这个方法需要基于API23之上（Android6.0系统），在日常开发中，我们需要对老系统用户进行兼容（当前兼容版本为Android4.1系统以上），所以这里我们需要去继承ScrollView并把这个监听事件通过接口的方式对外暴露，这里把这个View取名为ObservableScrollView。
package com.lcw.view;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView;
/**
* 重写ScrollView对外抛出滑动监听数据
* Create by: chenwei.li
* Date: 2017/4/18
* time: 10:09
* Email: lichenwei.me@foxmail.com
*/
public class ObservableScrollView extends ScrollView {
/**
* 回调接口监听事件
*/
private OnObservableScrollViewListener mOnObservableScrollViewListener;
public ObservableScrollView(Context context) {
super(context);
}
public ObservableScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ObservableScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
/**
* 添加回调接口，便于把滑动事件的数据向外抛
*/
public interface OnObservableScrollViewListener {
void onObservableScrollViewListener(int l, int t, int oldl, int oldt);
}
/**
* 注册回调接口监听事件
*
* @param onObservableScrollViewListener
*/
public void setOnObservableScrollViewListener(OnObservableScrollViewListener onObservableScrollViewListener) {
this.mOnObservableScrollViewListener = onObservableScrollViewListener;
}
/**
* This is called in response to an internal scroll in this view (i.e., the
* view scrolled its own contents). This is typically as a result of
* {@link #scrollBy(int, int)} or {@link #scrollTo(int, int)} having been
* called.
*
* @param l Current horizontal scroll origin. 当前滑动的x轴距离
* @param t Current vertical scroll origin. 当前滑动的y轴距离
* @param oldl Previous horizontal scroll origin. 上一次滑动的x轴距离
* @param oldt Previous vertical scroll origin. 上一次滑动的y轴距离
*/
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if (mOnObservableScrollViewListener != null) {
//将监听到的数据向外抛
mOnObservableScrollViewListener.onObservableScrollViewListener(l, t, oldl, oldt);
}
}
}
开始变色的坐标点
首先我们需要先了解Android系统的坐标轴，这里不像我们以前学数学的坐标轴一样，在中心建轴，以中心向上和右为正方向，向下和左为负方向。
在Android系统里是以屏幕的左上角为原点（0,0），向右为X正轴，向下为Y正轴。
坐标图.png
知道了坐标系，我们再来分解下效果图：
效果图1
效果图2
效果图3
一开始标题栏和状态栏呈透明色，随着页面的向上滑动标题栏和状态栏开始变色，当A点达到B点的时候完成颜色的完整变化，这里我们只需要测量出A点到B点的距离，然后跟ScrollView所监听到的滑动距离相比对并作出相对应的颜色变化，这样就可以了，其中的A点到顶部的距离和B点到顶部的距离，我们可以通过ViewTreeObserver得到对应的高度，然后相减即可。
实现代码：
package com.lcw.view;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.ViewTreeObserver;
import android.widget.LinearLayout;
import android.widget.TextView;
/**
* 高仿美团APP页面滑动标题栏渐变效果
* Create by: chenwei.li
* Date: 2017/4/18
* Time: 下午10:51
* Email: lichenwei.me@foxmail.com
*/
public class MainActivity extends AppCompatActivity implements ObservableScrollView.OnObservableScrollViewListener {
private ObservableScrollView mObservableScrollView;
private TextView mImageView;
private LinearLayout mHeaderContent;
private int mHeight;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//设置透明状态栏
StatusbarUtils.enableTranslucentStatusbar(this);
setContentView(R.layout.activity_main);
//初始化控件
mObservableScrollView = (ObservableScrollView) findViewById(R.id.sv_main_content);
mImageView = (TextView) findViewById(R.id.iv_main_topImg);
mHeaderContent = (LinearLayout) findViewById(R.id.ll_header_content);
//获取标题栏高度
ViewTreeObserver viewTreeObserver = mImageView.getViewTreeObserver();
viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
mImageView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
mHeight = mImageView.getHeight() - mHeaderContent.getHeight();//这里取的高度应该为图片的高度-标题栏
//注册滑动监听
mObservableScrollView.setOnObservableScrollViewListener(MainActivity.this);
}
});
}
/**
* 获取ObservableScrollView的滑动数据
*
* @param l
* @param t
* @param oldl
* @param oldt
*/
@Override
public void onObservableScrollViewListener(int l, int t, int oldl, int oldt) {
if (t <= 0) {
//顶部图处于最顶部，标题栏透明
mHeaderContent.setBackgroundColor(Color.argb(0, 48, 63, 159));
} else if (t > 0 && t < mHeight) {
//滑动过程中，渐变
float scale = (float) t / mHeight;//算出滑动距离比例
float alpha = (255 * scale);//得到透明度
mHeaderContent.setBackgroundColor(Color.argb((int) alpha, 48, 63, 159));
} else {
//过顶部图区域，标题栏定色
mHeaderContent.setBackgroundColor(Color.argb(255, 48, 63, 159));
}
}
}
透明状态栏的实现
关于透明状态栏这个东西，国内很多人把它叫成沉浸式状态栏，有人认同有人反对，因为谷歌官方对这个没有具体的定义，所以这里我就不发表看法了，反正我们就是要让状态栏变成透明，然后内容区域可以扩展到状态栏，这样就可以了。
1、首先我们需要对app的风格进行设置：
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:windowActionBar">false</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
2、再来我们要对状态栏进行透明化处理，其实这个东西我们也可以在xml里去做设置android:windowTranslucentStatus,不过现在国产手机满天飞的ROM真是无奈，有些奇葩的机型是没办法识别的，所以这里为了更好的兼容，我们可以在代码里面去实现。首先，我们需要判断当前的手机系统版本，4.4以上和5.0以上的处理方法是有区别的，具体实现代码：
package com.lcw.view;
import android.app.Activity;
import android.graphics.Color;
import android.os.Build;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
/**
* 设置系统状态栏和导航栏透明化
* Create by: chenwei.li
* Date: 2017/4/18
* Time: 下午11:01
* Email: lichenwei.me@foxmail.com
*/
public class StatusbarUtils {
/**
* 启用 透明状态栏
*
* @param activity
*/
public static void enableTranslucentStatusbar(Activity activity) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
Window window = activity.getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = activity.getWindow();
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
| WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.TRANSPARENT);
window.setNavigationBarColor(Color.TRANSPARENT);
}
}
}
关于上面的属性设置，从字面上大家应该也能看得懂，如果有不清楚的，可以查下谷歌方法提供的API：WindowManager.LayoutParams
在4.4以上及5.0以下的系统状态栏会成半透明状，在5.0及以上的系统可以实现完全透明。
如果此时你运行了代码你会发现，虽然状态栏透明化了，但是我们的布局内容并没有扩展到状态栏中，这里需要而外的提到一个属性fitsSystemWindows它是在Android4.4系统以后引入的，当你的内容需要显示在系统作用域中时（比如顶部状态栏，底部导航栏等），此时你需要在相关的第一个View属性中添加该属性，并设置属性值为true，它会按照View的排列顺序进行深度优先的作用在View上。
3、实现了以上的操作后，我们基本上已经成功了，此时你会发现你的标题栏已经可以扩展到透明的系统状态栏了，不过此时你会发现，状态栏离你的标题栏太靠近了，如果你想实现和上面效果图一样的效果，只需要在你的标题栏添加一个paddingTop值就可以，一般系统是25dp，当然如果你采用代码动态获取的方式也是可以的，这样可以做好更好的适配，毕竟国内各大厂商都有自己的一套标准。
具体实现代码：
activity_mian.xml
<?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">
<com.lcw.view.ObservableScrollView
android:id="@+id/sv_main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:scrollbars="none">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/tv_main_topContent"
android:layout_width="match_parent"
android:layout_height="280dp"
android:background="#b5b433"
android:gravity="center"
android:src="@mipmap/ic_launcher"
android:text="我是头部"
android:textSize="22sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="600dp"
android:background="#ffffff"
android:gravity="center"
android:src="@mipmap/ic_launcher"
android:text="我是内容"
android:textSize="22sp" />
</LinearLayout>
</com.lcw.view.ObservableScrollView>
<include layout="@layout/include_header_itl" />
</RelativeLayout>
include_header_itl.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ll_header_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00000000"
android:fitsSystemWindows="true"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:orientation="horizontal"
android:paddingTop="25dp">
<ImageView
android:id="@+id/iv_header_left"
android:layout_width="40dp"
android:layout_height="match_parent"
android:paddingLeft="8dp"
android:paddingRight="12dp"
android:src="@mipmap/icon_header_back" />
<TextView
android:id="@+id/tv_header_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:ellipsize="end"
android:gravity="center"
android:maxLines="2"
android:text="我是标题"
android:textColor="#ffffff"
android:textSize="16sp"
android:textStyle="bold" />
<ImageView
android:id="@+id/iv_header_img"
android:layout_width="40dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_gravity="center"
android:paddingLeft="12dp"
android:paddingRight="8dp"
android:src="@mipmap/icon_header_kefu" />
</RelativeLayout>
</LinearLayout>
源码下载:
好了，到这里就结束了，这里附上源码地址（欢迎Star，欢迎Fork）：源码下载
