Android 滑动渐变的TitleBar

首先看下效果

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值来计算的，大同小异~

Android 滑动渐变的TitleBar

ListView

推荐阅读更多精彩内容