首先看下效果
alpha.gif
进入页面后，是一个列表和顶部是一张图片的布局，滑动列表，TitleBar 随着上下滑动而"若隐若现"。感觉是不是像 CoordinatorLayout 和 CollapsingToolbarLayout 的效果
CollapsingToolbarLayout.gif
其实不太一样，CoordinatorLayout 和 CollapsingToolbarLayout 的实现效果更多，并且Gradle需要单独引入Support包
compile 'com.android.support:design:26.+'
第一个的效果，只要是ScrollView、 ListView 、RecycleView 都可以实现
ListView
以ListView为例，首先ListView设置数据，添加Header，然后设置滑动事件
ScrollViewAlphaListener alphaListener = new ScrollViewAlphaListener(new ListScrollListener());
alphaListener.setAlphaView(this, mTopImageIv, mRootLayout);
mHotelStrictOtherCityLv.setOnScrollListener(alphaListener);
ScrollViewAlphaListener 是自定义的滑动Listener。setAlphaView 方法分别设置了：上下文对象，顶部图片，根布局~
看下ScrollViewAlphaListener的主要内容
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
if (mHeaderView == null || mRootView == null) {
return;
}
int firstVisiblePosition = view.getFirstVisiblePosition();
int[] location = new int[2];
mHeaderView.getLocationInWindow(location);
final int headerHeight = mHeaderView.getHeight();
int[] rootLocation = new int[2];
mRootView.getLocationInWindow(rootLocation);
//相对于根布局的位置
int headerRealLocation = location[1] - (rootLocation[1] - ExtendUtils.getStatusBarHeight(mContext));
int yValue = -(headerRealLocation - firstVisiblePosition * headerHeight - ExtendUtils.getStatusBarHeight(mContext));
final float ratio = (float) Math.min(Math.max(yValue, 0), headerHeight) / headerHeight;
final int newAlpha = (int) (ratio * 255);
if (mAlphaListener != null) {
mAlphaListener.onScrollAlpha(newAlpha);
}
}
ScrollViewAlphaListener 是 implements AbsListView.OnScrollListener，所以必须实现其 onScroll 方法。在 onScroll 方法中根据顶部图片的位置高度和根布局滑动Y值，算出Alpha值。当然这里也考虑了 状态栏的高度(ExtendUtils.getStatusBarHeight(mContext))
public static int getStatusBarHeight(Context context) {
Rect frame = new Rect();
((Activity) context).getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
int statusBarHeight = frame.top;
if (statusBarHeight > 0) {
return statusBarHeight;
}
// 反射获取高度
try {
Class<?> c = Class.forName("com.android.internal.R$dimen");
Object obj = c.newInstance();
Field field = c.getField("status_bar_height");
int x = Integer.parseInt(field.get(obj).toString());
statusBarHeight = context.getResources().getDimensionPixelSize(x);
return statusBarHeight;
} catch (Exception e) {
e.printStackTrace();
}
// 以上均失效时，使用默认高度为25dp。
DisplayMetrics metrics = context.getResources().getDisplayMetrics();
statusBarHeight = (int) Math.ceil(25 * metrics.density);
return statusBarHeight;
}
最后在 ScrollViewAlphaListener 的回调中，处理对应View的渐变效果
private class ListScrollListener implements AlphaListener {
@Override
public void onScrollAlpha(int alpha) {
ViewUtils.setViewAlpha(alpha, mTitleView);
ViewUtils.setImageViewAlpha(alpha, mBackIv);
ViewUtils.setImageViewAlpha(255 - alpha, mBackBgIv);
mTitleTv.setTextColor(Color.argb(alpha, 0, 0, 0));
}
}
这样就实现了滑动渐变的效果TitleBar了~ ScrollView 和 RecycleView 的实现都是根据顶部图片和根布局滑动的Y值来计算的，大同小异~
