android 仿淘宝实现标题栏滑动渐变效果，gif有点丑，凑合看吧！

先上效果吧，效果实在太丑，不过功能是实现了。。。。

首先看界面都有什么

第一部分是android的透明状态栏（也有人叫沉浸式），这样能看起来好看点（虽然还是很丑，审美有限），哈哈哈

第二部分是一个LinearLayout 当然是被ScrollView包裹着的Linearlayout,其中包含了图片展示区，和列表展示区，当然也可以添加更多的功能

第一部分透明状态栏的实现

//设置状态栏全透明  5.0之后为正常  5.0一下会有黑色模块getWindow().requestFeature(Window.FEATURE_NO_TITLE);if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {//4.4 全透明状态栏    getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);}if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {//5.0 全透明实现    Window window = getWindow();    window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);    window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN            | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);    window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);    window.setStatusBarColor(Color.TRANSPARENT);//calculateStatusColor(Color.WHITE, (int) alphaValue)}

这一块是activity的onCreat方法下 setContentView之前实现的

然后把这个主题下设置成你activity的主题就OK了

<style name="AppNoActionBar" parent="Theme.AppCompat.Light.NoActionBar">    <item name="android:windowIsTranslucent">trueitem>    <item name="android:windowNoTitle">trueitem>    <item name="colorPrimary">@color/colorPrimaryitem>    <item name="colorPrimaryDark">@color/colorPrimaryDarkitem>style>

第二部分先是一个集成于NestedScrollView的自定义ScrollView

public class ScrllViewTranspael extends NestedScrollView {    public interface ScrollViewListener {        void onScrollChanged(ScrllViewTranspael scrollView, int x, int y, int oldx, int oldy);    }    private ScrollViewListener scrollViewListener = null;    public ScrllViewTranspael(Context context) {        super(context);    }    public ScrllViewTranspael(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);    }    public ScrllViewTranspael(Context context, AttributeSet attrs) {        super(context, attrs);    }    public void setScrollViewListener(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) {            scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);        }    }}

当scrollview和recyclerview共存时你需要把recyclerview的滑动禁止掉，顺便也隐藏scrollview的scrollbar

在xml布局scrollview中

recycler_view.setNestedScrollingEnabled(false);//禁止滑动事件<com.example.zgc.scrllviewtranspael.ScrllViewTranspael    android:layout_width="match_parent"    android:layout_height="match_parent"    android:id="@+id/scrllViewTranspael"    android:scrollbars="none">

然后主要的是滑动渐变

ViewTreeObserver vto = image_view.getViewTreeObserver();vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {    @Override    public void onGlobalLayout() {        title.getViewTreeObserver().removeOnGlobalLayoutListener(this);        height = image_view.getHeight() - (head_layout.getHeight() + 20);        scrllViewTranspael.setScrollViewListener(new ScrllViewTranspael.ScrollViewListener() {            @Override            public void onScrollChanged(ScrllViewTranspael scrollView, int x, int y, int oldx, int oldy) {                if (y <= 0) {  //设置标题的背景颜色                    head_layout.setBackgroundColor(Color.argb(0, 2, 181, 157));                    title.setVisibility(View.VISIBLE);                    title.setTextColor(Color.argb(0, 0, 0, 0));                } else if (y > 0 && y <= height) { //滑动距离小于banner图的高度时，设置背景和字体颜色颜色透明度渐变                    float scale = (float) y / height;                    float alpha = (255 * scale);                    title.setVisibility(View.VISIBLE);                    title.setTextColor(Color.argb((int) alpha, 255, 255, 255));                    head_layout.setBackgroundColor(Color.argb((int) alpha, 2, 181, 157));                } else if (y > 0 && y >= height) {  //滑动到banner下面设置普通颜色                    head_layout.setBackgroundColor(Color.argb(255, 2, 181, 157));                    title.setVisibility(View.VISIBLE);                    title.setTextColor(Color.argb((int) 255, 255, 255, 255));                }            }        });    }});

其中imag_view就是中间的图片，需要得到一个界限值height，就是里面的判断，这个界限值就是用来判断渐变效果的，也就是需要滑动多少滑动距离，而滑动距离取决于你想在什么时候渐变，可以自己定义，上面参数中 y就是坐标轴，y轴代表上下，x轴代表左右，在这个判断y轴的滑动距离下做需要的操作，这样一个滑动渐变效果的功能就实现了

传送门（滴滴滴，开车了）

更多相关文章

随机推荐