ANDROID仿淘宝商品浏览滑（拖）动查看详情界面

最新推荐文章于 2022-10-01 13:07:43 发布

CarrotRol

最新推荐文章于 2022-10-01 13:07:43 发布

阅读量5k

点赞数 1

分类专栏：自定义控件

自定义控件专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个Android应用中类似淘宝商品页展示的滑动效果实现方案，通过两个ScrollView分别放置产品简介和详细内容，利用自定义事件处理实现平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：http://dwtedx.com/itshare_311.html

由于目前的项目也是在做商城的应用、自然少不点商品的展示页、个人觉得淘宝的商品展示页非常不错、在网上找了很多资源、最后自己动集成了一个Demo、本Demo实现了Android类似于淘宝商品页展示的滑动效果（继续拖动，查看图文详情）、如果拖动了一半就会自动滑动到顶部、并带有动画效果、原理是通过两个ScrollView来实现的、上面的ScrollView放产品简介、下面的ScrollView放详细介绍、下面是应用简单的截图、具体效果大家可以下载源代码导入Eclipse查看

仿淘宝商品浏览界面

事件处理程序

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();
	}

};

重写dispatchTouchEvent方法

id="cproIframe_u2248002_2" width="120" height="45" src="http://pos.baidu.com/acom?adn=0&at=128&aurl=&cad=1&ccd=24&cec=UTF-8&cfv=17&ch=0&col=zh-CN&conBW=0&conOP=1&cpa=1&dai=2&dis=0&hn=0&layout_filter=tabcloud%2Cimage&ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DIJh3EYLeCbpZsQXbTLvKfDJcGzt0Uny1m5iAAxzAiUzIhHlCYRFRo1mp82LPakAJ%26wd%3D%26eqid%3Dab5efdb500007440000000055628bf0c&ltu=http%3A%2F%2Fdwtedx.com%2Fitshare_311.html&lu_161=0&lunum=6&n=71014130_cpr&pcs=1017x707&pis=10000x10000&ps=1692x18&psr=1440x900&pss=1017x1725&qn=edbd971beae5cdee&rad=&rsi0=120&rsi1=45&rsi5=4&rss0=%23D9DADB&rss1=%23D9DADB&rss2=%23CE4450&rss3=&rss4=&rss5=&rss6=%23CE4450&rss7=&scale=&skin=&td_id=2248002&titFF=%E5%AE%8B%E4%BD%93&titFS=14&titTA=left&tn=baiduTlinkInlay&tpr=1445511778335&ts=1&version=2.0&wn=0&xuanting=0&dtm=BAIDU_DUP2_SETJSONADSLOT&dc=2&di=u2248002&ti=Android%E4%BB%BF%E6%B7%98%E5%AE%9D%E5%95%86%E5%93%81%E6%B5%8F%E8%A7%88%E6%BB%91%EF%BC%88%E6%8B%96%EF%BC%89%E5%8A%A8%E6%9F%A5%E7%9C%8B%E8%AF%A6%E6%83%85%E7%95%8C%E9%9D%A2_DD%E5%8D%9A%E5%AE%A2&tt=1445511778321.109.2387.2387" align="center,center" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="margin: 0px; padding: 0px; border-width: 0px; border-style: initial; outline: 0px; font-family: inherit;font-size:undefined; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit;">

@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();
		} catch (Exception e) {
			e.printStackTrace();
		}
		break;

	}
	super.dispatchTouchEvent(ev);
	return true;
}