标题栏颜色渐变和顶部悬浮效果(标题栏颜色随着页面上滑渐变,页面某模块到达标题栏下方是位置固定,不再随页面滚动)

购物类App在商品详情页面经常有一种效果,随着页面上滑顶部标题栏的颜色随之渐变,当商品评论,商品介绍等选项卡到达标题栏下方时,选项卡位置不再随着页面移动,固定在标题栏下方(具体效果可以查看Tao宝)。为达到上述效果,我简单写了个Demo(页面很丑)

下面是效果图:(忽略页面很丑)

这是页面最初效果

这是页面最初效果

这是页面上滑过程中标题栏颜色渐变

这是页面上滑过程中标题栏颜色渐变

这是标题栏颜色变化后的最终效果和蓝色固定的悬浮模块

这是标题栏颜色变化后的最终效果和固定的悬浮模块

这是悬浮模块到达顶部后不再移动

这是悬浮模块到达顶部后不再移动

具体实现代码:

xml文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.zzjt.backgroundcolorchange.MyScrollView
        android:id="@+id/msv"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="2000dp"
                android:background="#ff0000" />

            <TextView
                android:id="@+id/tv_on_remove"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:background="#0000ff"
                android:text="停留" />
        </RelativeLayout>
    </com.zzjt.backgroundcolorchange.MyScrollView>

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#0000ff00" />

    <View
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_below="@id/tv_title" />

    <TextView
        android:id="@+id/tv_no_remove2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="#0000ff"
        android:layout_below="@id/tv_title"
        android:visibility="gone"
        android:text="停留" />

</RelativeLayout>

自定义ScrollView

import android.content.Context;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ScrollView;

public class MyScrollView extends ScrollView {

    protected static final int ACTION_UP = 0;
    private onMyScrollViewScrollListener listener;

    public MyScrollView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub
    }

    public MyScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }

    public MyScrollView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }

    public void setOnMyScrollViewScrollListener(onMyScrollViewScrollListener listener) {
        this.listener = listener;
    }

    float downY = 0;
    Handler handler=new Handler(){
        public void handleMessage(android.os.Message msg) {
            if(msg.what==ACTION_UP){

                if(downY!=getScrollY()){
                    downY=getScrollY();
                    listener.onScroll(downY);
                    handler.sendEmptyMessageDelayed(ACTION_UP, 5);
                }else{
                    handler.removeCallbacksAndMessages(null);
                    downY=0;
                }
            }
        }
    };
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (listener != null) {
            switch (ev.getAction()) {
                case MotionEvent.ACTION_DOWN:
                // downY=getY();
                break;
                case MotionEvent.ACTION_MOVE:
                downY = this.getScrollY();
                listener.onScroll(downY);
                break;
                case MotionEvent.ACTION_UP:
                downY = this.getScrollY();
                handler.sendEmptyMessageDelayed(ACTION_UP, 5);
                break;
                case MotionEvent.ACTION_CANCEL:
                handler.sendEmptyMessageDelayed(ACTION_UP, 5);
                break;

                default:
                break;
            }
        }

        return super.onTouchEvent(ev);
    }

    interface onMyScrollViewScrollListener {
        public void onScroll(float scrollY);
    }
}

Activity

import android.annotation.SuppressLint;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {


    private MyScrollView scrollView;
    private TextView tv;
    private TextView tv_on_move;
    private View view;
    private TextView tv_on_move2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        scrollView = (MyScrollView) findViewById(R.id.msv);
        tv = (TextView) findViewById(R.id.tv_title);
        tv_on_move = (TextView) findViewById(R.id.tv_on_remove);
        tv_on_move2 = (TextView) findViewById(R.id.tv_no_remove2);
        view = findViewById(R.id.view);
        scrollView.setOnMyScrollViewScrollListener(new MyScrollView.onMyScrollViewScrollListener() {

            private int measuredHeight;

            @SuppressLint("NewApi")
            @Override
            public void onScroll(float scrollY) {
                //   Log.i("scroll1", scrollY+"");
                int scale = (int) (scrollY / 300 * 255);
                if (scale > 255) {
                    scale = 255;
                }
                if (scale < 0) {
                    scale = 0;
                }
                tv.setBackgroundColor(Color.argb(scale, 0, 255, 0));
                int[] location1 = new int[2];
                view.getLocationOnScreen(location1);
                int[] location = new int[2];
                tv_on_move.getLocationOnScreen(location);
                if (location[1] < location1[1]) {
                    tv_on_move.setVisibility(View.GONE);
                    tv_on_move2.setVisibility(View.VISIBLE);
                } else {
                    tv_on_move.setVisibility(View.VISIBLE);
                    tv_on_move2.setVisibility(View.GONE);
                }
                Log.i("scroll2", location[1] + ":" + location1[1]);
            }
        });
    }

}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值