AndroidスライドグラデーションのTitleBar
3550 ワード
まず効果を見て
alpha.gif
ページに入ると、リストと上部に画像のレイアウトがあり、スライドリスト、TitleBarは上下にスライドして「隠れている」.CoordinatorLayoutとCollapsingToolbarLayoutの効果のような感じがしますか?
CollapsingToolbarLayout.gif
実は違います.CoordinatorLayoutとCollapsingToolbarLayoutの実現効果はもっと多く、GradleはSupportパッケージを単独で導入する必要があります.
1つ目の効果は、ScrollView、ListView、RecycleViewであれば可能です
ListView
ListViewを例にとると、まずListViewがデータを設定し、Headerを追加し、次にスライドイベントを設定する
ScrollViewAlphaListenerは、カスタムスライドListenerです.setAlphaViewメソッドでは、コンテキストオブジェクト、上部ピクチャ、ルートレイアウトがそれぞれ設定されています.
ScrollViewAlphaListenerの主な内容を見てみましょう
ScrollViewAlphaListenerはimplements AbsListViewである.OnScrollListenerなので、onScrollメソッドを実装する必要があります.onScrollメソッドでは,トップピクチャの位置高さとルートレイアウトのスライドY値からAlpha値を算出する.もちろんここではステータスバーの高さも考慮した(ExtendUtils.getStatusBarHeight(mContext))
最後にScrollViewAlphaListenerのコールバックにおいて,対応するViewのグラデーション効果を扱う.
これでスライドグラデーションの効果を実現したTitleBar~ScrolViewとRecycleViewの実現はいずれもトップピクチャとルートレイアウトのスライドのY値から計算され、大同小異~
alpha.gif
ページに入ると、リストと上部に画像のレイアウトがあり、スライドリスト、TitleBarは上下にスライドして「隠れている」.CoordinatorLayoutとCollapsingToolbarLayoutの効果のような感じがしますか?
CollapsingToolbarLayout.gif
実は違います.CoordinatorLayoutとCollapsingToolbarLayoutの実現効果はもっと多く、GradleはSupportパッケージを単独で導入する必要があります.
compile 'com.android.support:design:26.+'
1つ目の効果は、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~ScrolViewとRecycleViewの実現はいずれもトップピクチャとルートレイアウトのスライドのY値から計算され、大同小異~