AndroidスライドグラデーションのTitleBar

3550 ワード

まず効果を見て
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値から計算され、大同小異~