购物类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]);
}
});
}
}