-----------------转载请注明出处：http://blog.csdn.net/android_cll
一：先来几张效果图，没有弄gif动画，也就是商品详情滑动到底部继续上滑查看图文详情、
二：实现步骤：
1.自定义一个父容器ScrollViewContainer装载两个ScrollView、
package com.zjtd.bzcommunity.util;
import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.ScrollView;
import java.util.Timer;
import java.util.TimerTask;
/**
* 包含两个ScrollView的容器
*
* @author
*/
public class ScrollViewContainer extends RelativeLayout {
/**
* 自动上滑
*/
public static final int AUTO_UP = 0;
/**
* 自动下滑
*/
public static final int AUTO_DOWN = 1;
/**
* 动画完成
*/
public static final int DONE = 2;
/**
* 动画速度
*/
public static final float SPEED = 6.5f;
private boolean isMeasured = false;
/**
* 用于计算手滑动的速度
*/
private VelocityTracker vt;
private int mViewHeight;
private int mViewWidth;
private View topView;
private View bottomView;
private boolean canPullDown;
private boolean canPullUp;
private int state = DONE;
/**
* 记录当前展示的是哪个view，0是topView，1是bottomView
*/
private int mCurrentViewIndex = 0;
/**
* 手滑动距离，这个是控制布局的主要变量
*/
private float mMoveLen;
private MyTimer mTimer;
private float mLastY;
/**
* 用于控制是否变动布局的另一个条件，mEvents==0时布局可以拖拽了，mEvents==-1时可以舍弃将要到来的第一个move事件，
* 这点是去除多点拖动剧变的关键
*/
private int mEvents;
private Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
if (mMoveLen != 0) {
if (state == AUTO_UP) {
mMoveLen -= SPEED;
if (mMoveLen <= -mViewHeight) {
mMoveLen = -mViewHeight;
state = DONE;
mCurrentViewIndex = 1;
}
} else if (state == AUTO_DOWN) {
mMoveLen += SPEED;
if (mMoveLen >= 0) {
mMoveLen = 0;
state = DONE;
mCurrentViewIndex = 0;
}
} else {
mTimer.cancel();
}
}
requestLayout();
}
};
public ScrollViewContainer(Context context) {
super(context);
init();
}
public ScrollViewContainer(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public ScrollViewContainer(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private void init() {
mTimer = new MyTimer(handler);
}
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
switch (ev.getActionMasked()) {
case MotionEvent.ACTION_DOWN:
if (vt == null)
vt = VelocityTracker.obtain();
else
vt.clear();
mLastY = ev.getY();
vt.addMovement(ev);
mEvents = 0;
break;
case MotionEvent.ACTION_POINTER_DOWN:
case MotionEvent.ACTION_POINTER_UP:
// 多一只手指按下或抬起时舍弃将要到来的第一个事件move，防止多点拖拽的bug
mEvents = -1;
break;
case MotionEvent.ACTION_MOVE:
vt.addMovement(ev);
if (canPullUp && mCurrentViewIndex == 0 && mEvents == 0) {
mMoveLen += (ev.getY() - mLastY);
// 防止上下越界
if (mMoveLen > 0) {
mMoveLen = 0;
mCurrentViewIndex = 0;
} else if (mMoveLen < -mViewHeight) {
mMoveLen = -mViewHeight;
mCurrentViewIndex = 1;
}
if (mMoveLen < -8) {
// 防止事件冲突
ev.setAction(MotionEvent.ACTION_CANCEL);
}
} else if (canPullDown && mCurrentViewIndex == 1 && mEvents == 0) {
mMoveLen += (ev.getY() - mLastY);
// 防止上下越界
if (mMoveLen < -mViewHeight) {
mMoveLen = -mViewHeight;
mCurrentViewIndex = 1;
} else if (mMoveLen > 0) {
mMoveLen = 0;
mCurrentViewIndex = 0;
}
if (mMoveLen > 8 - mViewHeight) {
// 防止事件冲突
ev.setAction(MotionEvent.ACTION_CANCEL);
}
} else
mEvents++;
mLastY = ev.getY();
requestLayout();
break;
case MotionEvent.ACTION_UP:
mLastY = ev.getY();
vt.addMovement(ev);
vt.computeCurrentVelocity(700);
// 获取Y方向的速度
float mYV = vt.getYVelocity();
if (mMoveLen == 0 || mMoveLen == -mViewHeight)
break;
if (Math.abs(mYV) < 500) {
// 速度小于一定值的时候当作静止释放，这时候两个View往哪移动取决于滑动的距离
if (mMoveLen <= -mViewHeight / 2) {
state = AUTO_UP;
} else if (mMoveLen > -mViewHeight / 2) {
state = AUTO_DOWN;
}
} else {
// 抬起手指时速度方向决定两个View往哪移动
if (mYV < 0)
state = AUTO_UP;
else
state = AUTO_DOWN;
}
mTimer.schedule(2);
try {
vt.recycle();
vt = null;//防止第二次报错
} catch (Exception e) {
e.printStackTrace();
}
break;
}
super.dispatchTouchEvent(ev);
return true;
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
topView.layout(0, (int) mMoveLen, mViewWidth,
topView.getMeasuredHeight() + (int) mMoveLen);
bottomView.layout(0, topView.getMeasuredHeight() + (int) mMoveLen,
mViewWidth, topView.getMeasuredHeight() + (int) mMoveLen
+ bottomView.getMeasuredHeight());
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (!isMeasured) {
isMeasured = true;
mViewHeight = getMeasuredHeight();
mViewWidth = getMeasuredWidth();
topView = getChildAt(0);
bottomView = getChildAt(1);
bottomView.setOnTouchListener(bottomViewTouchListener);
topView.setOnTouchListener(topViewTouchListener);
}
}
private OnTouchListener topViewTouchListener = new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
ScrollView sv = (ScrollView) v;
if (sv.getScrollY() == (sv.getChildAt(0).getMeasuredHeight() - sv
.getMeasuredHeight()) && mCurrentViewIndex == 0)
canPullUp = true;
else
canPullUp = false;
return false;
}
};
private OnTouchListener bottomViewTouchListener = new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
ScrollView sv = (ScrollView) v;
if (sv.getScrollY() == 0 && mCurrentViewIndex == 1)
canPullDown = true;
else
canPullDown = false;
return false;
}
};
class MyTimer {
private Handler handler;
private Timer timer;
private MyTask mTask;
public MyTimer(Handler handler) {
this.handler = handler;
timer = new Timer();
}
public void schedule(long period) {
if (mTask != null) {
mTask.cancel();
mTask = null;
}
mTask = new MyTask(handler);
timer.schedule(mTask, 0, period);
}
public void cancel() {
if (mTask != null) {
mTask.cancel();
mTask = null;
}
}
class MyTask extends TimerTask {
private Handler handler;
public MyTask(Handler handler) {
this.handler = handler;
}
@Override
public void run() {
handler.obtainMessage().sendToTarget();
}
}
}
}
2.布局xml的实现、
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/containerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical">
<!--父容器-->
<com.zjtd.bzcommunity.util.ScrollViewContainer
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/bottom"
android:layout_below="@+id/lintonei"
android:layout_marginBottom="-27dp">
<!--商品详情-->
<ScrollView
android:id="@+id/mymyscrollview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:scrollbars="none">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/layout_product"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/detial_product_img"
android:layout_width="match_parent"
android:layout_height="256dp"
android:background="@mipmap/guanggao3"
android:scaleType="fitXY" />
<com.zjtd.bzcommunity.view.SlideShowView
android:id="@+id/chaoshilunboyi"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
android:scaleType="fitXY"
android:src="@drawable/ic_launcher"
android:visibility="gone" />
</RelativeLayout>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#f3f2f8" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="127dp"
android:background="#ffffff">
<RelativeLayout
android:id="@+id/layout_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="@+id/view"
android:orientation="vertical">
<TextView
android:id="@+id/detial_product_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginTop="17dp"
android:ellipsize="end"
android:lines="2"
android:maxLines="2"
android:text="暂无商品 "
android:textColor="#262626"
android:textSize="16dp" />
<TextView
android:id="@+id/detial_product_num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/detial_product_name"
android:layout_marginLeft="12dp"
android:layout_marginTop="6dp"
android:text="已售00件"
android:textColor="#999999"
android:textSize="12dp" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="15dp"
android:layout_marginRight="17dp">
<TextView
android:id="@+id/textjrgwc"
android:layout_width="105dp"
android:layout_height="33dp"
android:background="@drawable/csspxqjrgwc"
android:gravity="center"
android:text="加入购物车"
android:textColor="#ffffff"
android:textSize="14dp"
android:visibility="gone" />
<LinearLayout
android:id="@+id/linearjjgwc"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/tvMinus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@mipmap/button_minus"
android:clickable="true"
android:gravity="center" />
<TextView
android:id="@+id/count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginBottom="3dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:gravity="center"
android:text="0"
android:textColor="#1a1a1a"
android:textSize="18dp" />
<TextView
android:id="@+id/tvAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="7dp"
android:background="@mipmap/button_add"
android:clickable="true"
android:gravity="center" />
</LinearLayout>
</RelativeLayout>
<TextView
android:id="@+id/detial_product_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/detial_product_num"
android:layout_marginLeft="12dp"
android:layout_marginTop="15dp"
android:text="¥0.00"
android:textColor="#f33637"
android:textSize="18dp"
android:textStyle="bold" />
<TextView
android:id="@+id/textyuanjia"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/detial_product_num"
android:layout_marginLeft="12dp"
android:layout_marginTop="19dp"
android:layout_toRightOf="@+id/detial_product_price"
android:text="原价:"
android:textSize="12dp" />
<TextView
android:id="@+id/zhejia"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/detial_product_num"
android:layout_marginTop="19dp"
android:layout_toRightOf="@+id/textyuanjia"
android:text="¥0.00"
android:textSize="12dp" />
</RelativeLayout>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#d9d9d9" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="140dp"
android:visibility="gone">
<TextView
android:id="@+id/textspgg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginTop="16dp"
android:textColor="#676767"
android:textSize="14dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="110dp"
android:visibility="gone">
<TextView
android:id="@+id/textname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginTop="21dp"
android:textColor="#262626"
android:textSize="14dp" />
<TextView
android:id="@+id/textdz"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textname"
android:layout_marginLeft="12dp"
android:layout_marginTop="12dp"
android:maxLength="20"
android:textColor="#989898"
android:textSize="13dp" />
<RelativeLayout
android:id="@+id/relativedh"
android:layout_width="64dp"
android:layout_height="37dp"
android:layout_alignParentRight="true"
android:layout_below="@+id/textname">
<TextView
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#d8d8d8" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="@mipmap/icon_iphone" />
</RelativeLayout>
<ImageView
android:id="@+id/imagdw"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textdz"
android:layout_marginLeft="10dp"
android:layout_marginTop="11dp"
android:src="@mipmap/ic_global_landmark_groupon_list" />
<TextView
android:id="@+id/textmishu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textdz"
android:layout_marginLeft="5dp"
android:layout_marginTop="12dp"
android:layout_toRightOf="@+id/imagdw"
android:textColor="#999999"
android:textSize="13dp" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="9dp"
android:background="#f2f2f2" />
<RelativeLayout
android:id="@+id/linearpl"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="15dp"
android:text="商品评价"
android:textColor="#303030"
android:textSize="15dp" />
<TextView
android:id="@+id/textsong_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="15dp"
android:layout_toLeftOf="@+id/xiangyou2_id"
android:text="全部评价"
android:textColor="#999999"
android:textSize="12dp" />
<ImageView
android:id="@+id/xiangyou2_id"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="13dp"
android:src="@mipmap/icon_you" />
<Button
android:id="@+id/chakangengduo"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="@drawable/ncpinglunchakan"
android:text="查看全部评价"
android:textColor="#CDCDCD"
android:textSize="12sp"
android:visibility="gone" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="9dp"
android:background="#f2f2f2" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="50dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="15dp"
android:text="商品详情"
android:textColor="#303030"
android:textSize="15dp" />
<ImageView
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="13dp"
android:src="@mipmap/icon_you" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#d9d9d9" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="90dp"
android:background="#ffffff">
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="20dp"
android:gravity="center_horizontal"
android:text="上滑查看图文详情"
android:textColor="#989898"
android:textSize="14dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
<!--图文详情-->
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="-50dp"
android:background="#ffffff">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.tencent.smtt.sdk.WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"></com.tencent.smtt.sdk.WebView>
</LinearLayout>
</ScrollView>
</com.zjtd.bzcommunity.util.ScrollViewContainer>
<!--标题栏-->
<LinearLayout
android:id="@+id/lintonei"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/title_layout_product"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="@color/titlebar_title">
<ImageView
android:id="@+id/iv_title_left"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="3dp"
android:src="@mipmap/farm_nav_fanhui" />
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:gravity="center"
android:text="商品详情"
android:textColor="@color/titlecolor"
android:textSize="18sp" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#d9d9d9" />
</LinearLayout>
<!--底部购物车-->
<RelativeLayout
android:id="@+id/bottom"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#3b3b38"
android:clickable="true"
android:gravity="center_vertical"
android:onClick="onClick"
android:orientation="horizontal">
<TextView
android:id="@+id/tvCost"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="89dp"
android:text="￥ 0.0"
android:textColor="#fff"
android:textSize="16dp" />
<TextView
android:id="@+id/tvSubmit"
android:layout_width="130dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:background="#4a4a47"
android:gravity="center"
android:text="去结算"
android:textColor="#fff"
android:textSize="16dp" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/relative_gwc"
android:layout_width="89dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp">
<ImageView
android:id="@+id/imgCart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="@mipmap/chaoshi_bottom_shopping_jicon" />
<TextView
android:id="@+id/tvount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="13dp"
android:background="@drawable/circle_red"
android:gravity="center"
android:text="0"
android:textColor="#fff"
android:textSize="12sp"
android:visibility="gone" />
</RelativeLayout>
</RelativeLayout>
注意：一个父容器里面两个scrollview，第一个scrollview装商品详情的布局框架，第二个scrollview装图文详情的布局框架，为了简单我的第二个scrollview放了一个webview、