1. 程式人生 > >【Android檢視效果】仿QQ空間滑動改變標題欄顏色

【Android檢視效果】仿QQ空間滑動改變標題欄顏色

最近在倒騰公司之前的專案,發現之前的介面是個白色標題欄,不是很美觀,所以做了些改進。

先看效果圖

這裡寫圖片描述

簡單說下思路,整個佈局大體上是ScrollView裡面包含了一個ImageView和RecyclerView,所以先得到ImageView的高度,當ScrollView向上滑動時,設定標題欄的背景色、文字顏色,當超過ImageView的高度時,設定其背景為白色,字型為黑色。

首先想到的是ScrollView 的setOnScrollChangeListener方法,但是這是6.0之後才可以用

這裡寫圖片描述

偶爾發現5.0新增的NestedScrollView 可以設定這個滑動監聽,看了看原始碼

這裡寫圖片描述

原來如此,我們也仿照著寫個,先定義一個介面;

 public interface OnScrollChangedListener {
        /**
         * 滑動監聽
         *
         * @param scrollView ScrollView控制元件
         * @param x          x軸座標
         * @param y          y軸座標
         * @param oldx       上一個x軸座標
         * @param oldy       上一個y軸座標
         */
void onScrollChanged(ScrollView scrollView, int x, int y, int oldx, int oldy); }

然後自定義MyScrollView繼承於ScrollView

public class MyScrollView extends ScrollView {
    private OnScrollChangedListener mOnScrollChangedListener;

    public void setmOnScrollChangedListener(OnScrollChangedListener mOnScrollChangedListener) {
        this
.mOnScrollChangedListener = mOnScrollChangedListener; } public MyScrollView(Context context) { super(context); } public MyScrollView(Context context, AttributeSet attrs) { super(context, attrs); } public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } }

在他的onScrollChanged方法中調下我們剛寫的介面

  @Override
    protected void onScrollChanged(int x, int y, int oldx, int oldy) {
        super.onScrollChanged(x, y, oldx, oldy);
        if (mOnScrollChangedListener != null) {
            mOnScrollChangedListener.onScrollChanged(this, x, y, oldx, oldy);
        }
    }

然後是計算滑動高度,設定顏色

lsv.setmOnScrollChangedListener(new SlideToBottomScrollView.OnScrollChangedListener() {
            @Override
            public void onScrollChanged(ScrollView scrollView, int x, int y, int oldx, int oldy) {

                int minHeight = 50;
                int maxHeight = rl_userhome_top.getMeasuredHeight();
                if (maxHeight == 0) {
                    maxHeight = 500;
                }
                if (scrollView.getScrollY() <= minHeight) {
                    mAlpha = 0;
                } else if (scrollView.getScrollY() > maxHeight) {
                    mAlpha = 255;
                } else {
                    mAlpha = (scrollView.getScrollY() - minHeight) * 255 / (maxHeight - minHeight);
                }

                if (mAlpha <= 0) {
                    tv_title.setTextColor(Color.rgb(255, 255, 255));
                    iconColorFilter(Color.parseColor("#ffffff"));
                    rl_userhome_title.setBackgroundColor(Color.argb(0, 255, 255, 255));

                } else if (mAlpha >= 255) {
                    tv_title.setTextColor(Color.rgb(0, 0, 0));
                    iconColorFilter(Color.parseColor("#000000"));
                    rl_userhome_title.setBackgroundColor(Color.argb(mAlpha, 255, 255, 255));

                } else {
                    tv_title.setTextColor(Color.rgb(255 - mAlpha, 255 - mAlpha, 255 - mAlpha));
                    iconColorFilter(Color.rgb(255 - mAlpha, 255 - mAlpha, 255 - mAlpha));
                    rl_userhome_title.setBackgroundColor(Color.argb(mAlpha, mAlpha, mAlpha, mAlpha));

                }

            }
        });
 /**
     * 標題欄/導航欄icon 顏色改變
     *
     * @param color
     */
    private void iconColorFilter(int color) {
        PorterDuffColorFilter colorFilter = new PorterDuffColorFilter(color, PorterDuff.Mode.SRC_ATOP);
        iv_back.setColorFilter(colorFilter);
    }

注: 標題欄中,返回鍵是個圖片,我們可以使用PorterDuffColorFilter 這個類來改變圖片的顏色,其他用法可以自行百度。

總結: 平時還是應該多學習Android的原始碼,從中學習,提升自己。