Android实现渐变title栏

最近用美团外卖点餐看到这样一个效果：



顶部的title栏伴随着滑动有这样的一个效果，看起来很不错。

正好项目中可能需要用到，于是打算自己实现一波。

后面在百度、谷歌之后，发现ToolBar+CoordinatorLayout可以很轻易的实现这种效果。

但是在项目中，并没有采用Android新特性的一些东西，所以就得基于目前状况想办法了。

先上一下最终的效果图：



项目中并没有使用ToolBar这种控件，而是全部自己写的xml文件当做title，整个页面又是由ListView构成。顶部的遮罩背景是添加的一个HeaderView。

贴一下这个页面的布局：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical">

<ListView
android:id="@+id/share_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="@null"
android:scrollbars="none" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<FrameLayout
android:id="@+id/profile_header"
android:layout_width="match_parent"
android:layout_height="@dimen/activity_head_normal_height"
android:background="#00ffffff">

<ImageView
android:id="@+id/profile_play_entry"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical|right"
android:scaleType="center"
android:src="@drawable/play_entry" />

<TextView
android:id="@+id/profile_page"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="我的"
android:textColor="#ffffff"
android:textSize="16sp" />

</FrameLayout>

<View
android:id="@+id/divider"
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/dark_gray" />

</LinearLayout>

</FrameLayout>

使用了一个布局固定在顶部，利用FrameLayout进行遮盖。那么要怎么样实现图中的效果呢？

起初，我是想着自定义View，然后重写onTouchEvent事件，但是后面考虑到滑动距离，上滑、下滑等等很多可能性之后，可能需要各种各样的逻辑判断，会显得非常复杂，所以便放弃了这种思路。

后面考虑到，其实我只需要获得到ListView顶端滑出屏幕的纵向距离，然后计算alpha值，赋给title的父布局应该就可以实现了。

若是使用ScrollView，则会有个方法getScrollY可以直接获得到滑出的Y值，但是ListView我试了一下，获得的Y值总是0，所以得另想办法了。

在网上找到这样的一个方法：

public int getScrollY() {
View c = mListView.getChildAt(0);
if (c == null) {
return 0;
}
int firstVisiblePosition = mListView.getFirstVisiblePosition();
int top = c.getTop();
return -top + firstVisiblePosition * c.getHeight() ;
}

就是通过item高度，以及第一个child的top值来计算出滑出的距离。

结合这个思路，写出如下代码：

private AbsListView.OnScrollListener mScrollListener = new AbsListView.OnScrollListener() {
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
if (scrollState == AbsListView.OnScrollListener.SCROLL_STATE_IDLE && !nothingToLoad) {
// 如果到达最后一行
if (shareList.getLastVisiblePosition() == shareList.getAdapter().getCount() - 1) {
loadMore(); // 加载更多
}
}
}

@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
float scrollY = getScrollY();
float alpha = getAlpha(scrollY);
profilePage.setAlpha(alpha);
if (alpha > 0.5) { // alpha > 0.5设置黑色图标
if (isWhite) {
entryPlay.setImageResource(R.drawable.play_entry1);
profilePage.setTextColor(Color.BLACK);
ObjectAnimator animator = ObjectAnimator.ofFloat(entryPlay, "alpha", 0.5f, 1);
animator.setDuration(1000);
animator.start();
}
isWhite = false;
} else { // 否则设置白色
if (!isWhite) {
entryPlay.setImageResource(R.drawable.play_entry);
profilePage.setTextColor(Color.WHITE);
ObjectAnimator animator = ObjectAnimator.ofFloat(entryPlay, "alpha", 0.5f, 1);
animator.setDuration(1000);
animator.start();
}
isWhite = true;
}
if (Math.abs(alpha - 1) < 0.03) {
divider.setVisibility(View.VISIBLE);
} else {
divider.setVisibility(View.GONE);
}
header.setBackgroundColor(Color.argb((int) (alpha * 255), 255, 255, 255));
}
};

/**
* 计算ListView顶部滑动Y值
*
* @return
*/
public float getScrollY() {
float scrollY;
View c = shareList.getChildAt(0);
if (c == null) {
return 0;
}
int firstVisiblePosition = shareList.getFirstVisiblePosition();
int top = c.getTop();
if (firstVisiblePosition > 0) {
scrollY = mHeaderView.getHeight() - getResources().getDimension(R.dimen.activity_head_normal_height); // 当HeaderView完全滑出时，alpha值为1，直接设置其高度值
} else {
scrollY = -top;
}
if (scrollY > mHeaderView.getHeight() - getResources().getDimension(R.dimen.activity_head_normal_height)) {
scrollY = mHeaderView.getHeight() - getResources().getDimension(R.dimen.activity_head_normal_height);
}
return scrollY;
}

/**
* 根据滑动Y值计算alpha值
*
* @param scrollY
* @return
*/
public float getAlpha(float scrollY) {
if (mHeaderView.getHeight() != 0) {
return scrollY / (mHeaderView.getHeight() - getResources().getDimension(R.dimen.activity_head_normal_height));
}
return 0;
}

activity_head_normal_height就是title栏的高度，所以能够滑动的最高距离是ListView的HeaderView的高度减去title的高度，当滑出高度大于这个高度，alpha直接就等于1了。

通过上述代码，即可实现之前的效果了。

疑问：

当HeaderView完全滑出的时候，c.getHeight() != mHeaderView.getHeight()，按理说c应该是跟mHeaderView是一致的；

在滑动过程中，白色变黑色如何能够让它更自然的过渡呢（图标、文字）？目前是alpha = 0.5这个阈值，直接由白变黑，由黑变白，显得不太自然。

欢迎网友们一起探讨~