标题栏的颜色渐变效果

75 阅读 0 评论 50 点赞

我是靠谱客的博主怡然老虎，最近开发中收集的这篇文章主要介绍标题栏的颜色渐变效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

标题栏的颜色渐变我相信这个效果很常见了，淘宝就有。因为最近的项目中就有这个效果，所以也给大家写一写，希望有帮助。不多说，先上我项目的效果图：

1、先覆写一下ScrollView

public class ObservableScrollView extends ScrollView {

    private ScrollViewListener scrollViewListener = null;

    public ObservableScrollView(Context context) {
        super(context);
    }

    public ObservableScrollView(Context context, AttributeSet attrs,
                                int defStyle) {
        super(context, attrs, defStyle);
    }

    public ObservableScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void setOnScrollListener(ScrollViewListener scrollViewListener) {
        this.scrollViewListener = scrollViewListener;
    }

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

            if (oldy < y ) {// 手指向上滑动，屏幕内容下滑
                scrollViewListener.onScroll(oldy,y,false);

            } else if (oldy > y ) {// 手指向下滑动，屏幕内容上滑
                scrollViewListener.onScroll(oldy,y,true);
            }

        }
    }

    public  interface ScrollViewListener{//dy Y轴滑动距离，isUp 是否返回顶部
        void onScroll(int oldy,int dy,boolean isUp);
    }
}

2、界面布局

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" tools:context="com.youyu.myscrollview.MainActivity">
    <com.youyu.myscrollview.ObservableScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/bg"
                android:scaleType="centerCrop"
                android:src="@drawable/mishi"
                android:layout_width="match_parent"
                android:layout_height="250dp" />
            <android.support.v7.widget.RecyclerView
                android:layout_below="@id/bg"
                android:id="@+id/rv"
                android:layout_width="match_parent"
                android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>

        </RelativeLayout>

    </com.youyu.myscrollview.ObservableScrollView>

    <!--设置透明状态栏，左右用这个占位状态栏-->
    <View
        android:background="#00000000"
        android:id="@+id/action"
        android:layout_width="match_parent"
        android:layout_height="10dp"/>
    <android.support.v7.widget.Toolbar
        android:background="#00000000"
        android:layout_below="@id/action"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="40dp">
        <ImageView
            android:id="@+id/back"
            android:padding="8dp"
            android:background="@drawable/button_circle"
            android:src="@drawable/back_white"
            android:layout_width="30dp"
            android:layout_height="30dp" />
    </android.support.v7.widget.Toolbar>

</RelativeLayout>

3、设置标题栏和状态栏的颜色渐变

public class MainActivity extends AppCompatActivity {
    private RecyclerView mRv;
    private List<String> lists = new ArrayList<>();
    private RvAdapter mAdapter;

    private ObservableScrollView mScrollView;
    private View mAction;
    private Toolbar mToolbar;
    private ImageView mBack;

    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //设置透明状态栏，设置无标题栏(可以在主题中直接设置)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            //透明状态栏
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            //透明导航栏
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        }

        setContentView(R.layout.activity_main);

        mScrollView = (ObservableScrollView) findViewById(R.id.scrollView);
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mBack = (ImageView) findViewById(R.id.back);

        //获得手机状态栏的高度，设置给我们占位的View
        mAction = (View) findViewById(R.id.action);
        ViewGroup.LayoutParams lp = mAction.getLayoutParams();
        lp.width = DensityUtil.getScreenWidth(this);
        lp.height = (int) (getStatusBarHeight());
        mAction.setLayoutParams(lp);


        //设置假数据
        for (int i = 0; i < 20; i++) {
            lists.add("当前的条目" + i);
        }


        mRv = (RecyclerView) findViewById(R.id.rv);
        mAdapter = new RvAdapter(lists);
        mRv.setHasFixedSize(true);

        //防止与ScrollView冲突
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false) {
            @Override
            public boolean canScrollVertically() {
                return false;
            }
        };
        mRv.setLayoutManager(linearLayoutManager);
        mRv.setAdapter(mAdapter);

        //设置标题栏和状态栏滑动改变监听
        initView();

    }

    //当滚动的时候，状态栏的颜色变化
    private void initView() {

        //获取标题和头部图片的高度
        final float title_height = DensityUtil.dip2px(this, 40);
        final float head_height = DensityUtil.dip2px(this, 250);


        //滑动事件回调监听（一次滑动的过程一般会连续触发多次）
        mScrollView.setOnScrollListener(new ObservableScrollView.ScrollViewListener() {
            @Override
            public void onScroll(int oldy, int dy, boolean isUp) {

                float move_distance = head_height - title_height;
                //手指往上滑,距离未超过250dp
                if (!isUp && dy <= move_distance) {

                    //设置标题栏开始的颜色
                    mToolbar.setBackgroundColor(ContextCompat.getColor(MainActivity.this, R.color.main_color));
                    //设置状态栏开始的颜色
                    mAction.setBackgroundColor(ContextCompat.getColor(MainActivity.this, R.color.main_color));

                    //标题栏和状态栏逐渐从透明变成不透明
                    TitleBarAlphaChange(dy, move_distance);

                    //手指往上滑,距离超过250dp
                } else if (!isUp && dy > move_distance) {

                    TitleBarAlphaChange(1, 1);//设置不透明百分比为100%，防止因滑动速度过快，导致距离超过200dp,而标题栏透明度却还没变成完全不透的情况。

                    //改变还回按钮的图片
                    mBack.setImageResource(R.drawable.back_black);

                    //返回顶部，但距离头部位置大于250dp
                } else if (isUp && dy > move_distance) {

                    //返回顶部，但距离头部位置小于250dp
                } else if (isUp && dy <= move_distance) {

                    //标题栏和状态栏逐渐从不透明变成透明
                    TitleBarAlphaChange(dy, move_distance);//标题栏渐变

                    //还原还回按钮的图片
                    mBack.setImageResource(R.drawable.back_white);


                }
            }
        });
    }

    //设置标题栏和状态栏透明度变化
    private void TitleBarAlphaChange(int dy, float mHeaderHeight_px) {
        float rate = (float) Math.abs(dy) / Math.abs(mHeaderHeight_px);

        int alpha = (int) (rate * 255);

        //设置控件背景的透明度，传入int类型的参数（范围0~255）
        mToolbar.getBackground().setAlpha(alpha);
        mAction.getBackground().setAlpha(alpha);


        //变得完全透明
        // mBack.getBackground().setAlpha(255 - alpha);
        //我这里设置的是不完全透明
        mBack.getBackground().setAlpha(300 - alpha);
    }

    /**
     * 获取状态栏高度
     *
     * @return
     */
    private int getStatusBarHeight() {
        int result = 0;
        int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            result = getResources().getDimensionPixelSize(resourceId);
        }
        return result;
    }
}

就这样搞定，是不是很简单。上面的代码实现的效果图: