首先看下效果
進入頁面后额划,是一個列表和頂部是一張圖片的布局蔫骂,滑動列表竿滨,TitleBar 隨著上下滑動而"若隱若現(xiàn)"董瞻。感覺是不是像 CoordinatorLayout 和 CollapsingToolbarLayout 的效果
其實不太一樣,CoordinatorLayout 和 CollapsingToolbarLayout 的實現(xiàn)效果更多峻村,并且Gradle需要單獨引入Support包
compile 'com.android.support:design:26.+'
第一個的效果麸折,只要是ScrollView、 ListView 粘昨、RecycleView 都可以實現(xiàn)
ListView
以ListView為例垢啼,首先ListView設置數(shù)據(jù),添加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馁启,所以必須實現(xiàn)其 onScroll 方法。在 onScroll 方法中根據(jù)頂部圖片的位置高度和根布局滑動Y值芍秆,算出Alpha值进统。當然這里也考慮了 狀態(tài)欄的高度(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));
}
}
這樣就實現(xiàn)了滑動漸變的效果TitleBar了~ ScrollView 和 RecycleView 的實現(xiàn)都是根據(jù)頂部圖片和根布局滑動的Y值來計算的,大同小異~