2. 程式人生 > >android 自定義ViewGroup實現仿淘寶的商品詳情頁

android 自定義ViewGroup實現仿淘寶的商品詳情頁

阿新 • • 發佈：2019-01-03

最近公司在新版本上有一個需要， 要在首頁新增一個滑動效果， 具體就是仿照X寶的商品詳情頁， 拉到頁面底部時有一個粘滯效果，

 如下圖 X東的商品詳情頁，如果使用者繼續向上拉的話就進入商品圖文描述介面：


剛開始是想拿來主義，直接從網上找個現成的demo來用， 但是網上無一例外的答案都特別統一： 幾乎全部是ScrollView中再套兩個ScrollView，或者是一個LinearLayout中套兩個ScrollView。 通過指定父view和子view的focus來切換滑動的處理介面---即通過view的requestDisallowInterceptTouchEvent方法來決定是哪一個ScrollView來處理滑動事件。

使用以上方法雖然可以解一時之渴， 但是存在幾點缺陷：

1  擴充套件性不強 ： 如果後續產品要求不止是兩頁滑動呢，是三頁滑動呢， 難道要嵌3個ScrollView並通過N個判斷來實現嗎

2  相容性不強 ： 如果需要在某一個子頁中需要處理左右滑動事件或者雙指操作事件呢， 此方法就無法實現了

3 個人原因 ： 個人喜歡自己掌握主動性，事件的處理自己來控制更靠譜一些(PS:就如同一份感情一樣，需要細心去經營^_^)

總和以上原因， 自己實現了一個ViewGroup，實現文章開頭提到的效果， 廢話不多說  直接上原始碼，以下只是部分主要原始碼，並對每一個方法都做了註釋，可以參照註釋理解。   文章最後對這個ViewGroup加了一點實現的細節以及如何使用此VIewGroup， 以及demo地址

package com.mcoy.snapscrollview;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.ViewGroup;
import android.widget.Scroller;

/**
 * @author jiangxinxing---mcoy in English
 * 
 * 瞭解此ViewGroup之前， 有兩點一定要做到心中有數
 * 一個是對Scroller的使用， 另一個是對onInterceptTouchEvent和onTouchEvent要做到很熟悉
 * 以下幾個網站可以做參考用
 * http://blog.csdn.net/bigconvience/article/details/26697645
 * http://blog.csdn.net/androiddevelop/article/details/8373782
 * http://blog.csdn.net/xujainxing/article/details/8985063
 */
public class McoySnapPageLayout extends ViewGroup {
	
        。。。。
	

	public interface McoySnapPage {
		/**
		 * 返回page根節點
		 * 
		 * @return
		 */
		View getRootView();

		/**
		 * 是否滑動到最頂端
		 * 第二頁必須自己實現此方法，來判斷是否已經滑動到第二頁的頂部
		 * 並決定是否要繼續滑動到第一頁
		 */
		boolean isAtTop();

		/**
		 * 是否滑動到最底部
		 * 第一頁必須自己實現此方法，來判斷是否已經滑動到第二頁的底部
		 * 並決定是否要繼續滑動到第二頁
		 */
		boolean isAtBottom();
	}

	public interface PageSnapedListener {

		/**
		 * @mcoy
		 * 當從某一頁滑動到另一頁完成時的回撥函式
		 */
		void onSnapedCompleted(int derection);
	}
	
       。。。。。。

	/**
	 * 設定上下頁面
	 * @param pageTop
	 * @param pageBottom
	 */
	public void setSnapPages(McoySnapPage pageTop, McoySnapPage pageBottom) {
		mPageTop = pageTop;
		mPageBottom = pageBottom;
		addPagesAndRefresh();
	}

	private void addPagesAndRefresh() {
		// 設定頁面id
		mPageTop.getRootView().setId(0);
		mPageBottom.getRootView().setId(1);
		addView(mPageTop.getRootView());
		addView(mPageBottom.getRootView());
		postInvalidate();
	}
	
	/**
	 * @mcoy add
	 * computeScroll方法會呼叫postInvalidate()方法， 而postInvalidate()方法中系統
	 * 又會呼叫computeScroll方法， 因此會一直在迴圈互相呼叫， 迴圈的終結點是在computeScrollOffset()
	 * 當computeScrollOffset這個方法返回false時，說明已經結束滾動。
	 * 
	 * 重要：真正的實現此view的滾動是呼叫scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
	 */
	@Override
	public void computeScroll() {
		//先判斷mScroller滾動是否完成
		if (mScroller.computeScrollOffset()) {
			if (mScroller.getCurrY() == (mScroller.getFinalY())) {
				if (mNextDataIndex > mDataIndex) {
				    mFlipDrection = FLIP_DIRECTION_DOWN;
				    makePageToNext(mNextDataIndex);
				} else if (mNextDataIndex < mDataIndex) {
				    mFlipDrection = FLIP_DIRECTION_UP;
				    makePageToPrev(mNextDataIndex);
				}else{
				    mFlipDrection = FLIP_DIRECTION_CUR;
				}
				if(mPageSnapedListener != null){
					mPageSnapedListener.onSnapedCompleted(mFlipDrection);
				}
			}
			//這裡呼叫View的scrollTo()完成實際的滾動
			scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
			//必須呼叫該方法，否則不一定能看到滾動效果
			postInvalidate();
		}
	}
	
	private void makePageToNext(int dataIndex) {
		mDataIndex = dataIndex;
        mCurrentScreen = getCurrentScreen();
	}

	private void makePageToPrev(int dataIndex) {
		mDataIndex = dataIndex;
        mCurrentScreen = getCurrentScreen();
	}
	
	public int getCurrentScreen() {
		for (int i = 0; i < getChildCount(); i++) {
			if (getChildAt(i).getId() == mDataIndex) {
				return i;
			}
		}
		return mCurrentScreen;
	}
	
	public View getCurrentView() {
		for (int i = 0; i < getChildCount(); i++) {
			if (getChildAt(i).getId() == mDataIndex) {
				return getChildAt(i);
			}
		}
		return null;
	}
	
	/*
	 * (non-Javadoc)
	 * 
	 * @see
	 * android.view.ViewGroup#onInterceptTouchEvent(android.view.MotionEvent)
	 * 重寫了父類的onInterceptTouchEvent()，主要功能是在onTouchEvent()方法之前處理
	 * touch事件。包括：down、up、move事件。
	 * 當onInterceptTouchEvent()返回true時進入onTouchEvent()。
	 */
	@Override
	public boolean onInterceptTouchEvent(MotionEvent ev) {
		final int action = ev.getAction();
		if ((action == MotionEvent.ACTION_MOVE)
				&& (mTouchState != TOUCH_STATE_REST)) {
			return true;
		}
		final float x = ev.getX();
		final float y = ev.getY();

		switch (action) {
		case MotionEvent.ACTION_MOVE:
			// 記錄y與mLastMotionY差值的絕對值。
            // yDiff大於gapBetweenTopAndBottom時就認為介面拖動了足夠大的距離，螢幕就可以移動了。
			final int yDiff = (int)(y - mLastMotionY);
			boolean yMoved = Math.abs(yDiff) > gapBetweenTopAndBottom;
			if (yMoved) {
				if(MCOY_DEBUG) {
					Log.e(TAG, "yDiff is " + yDiff);
					Log.e(TAG, "mPageTop.isFlipToBottom() is " + mPageTop.isAtBottom());
					Log.e(TAG, "mCurrentScreen is " + mCurrentScreen);
					Log.e(TAG, "mPageBottom.isFlipToTop() is " + mPageBottom.isAtTop());
				}
				if(yDiff < 0 && mPageTop.isAtBottom() && mCurrentScreen == 0 
						|| yDiff > 0 && mPageBottom.isAtTop() && mCurrentScreen == 1){
					Log.e("mcoy", "121212121212121212121212");
					mTouchState = TOUCH_STATE_SCROLLING;
				}
			}
			break;
		case MotionEvent.ACTION_DOWN:
			// Remember location of down touch
			mLastMotionY = y;
			Log.e("mcoy", "mScroller.isFinished() is " + mScroller.isFinished());
			mTouchState = mScroller.isFinished() ? TOUCH_STATE_REST
					: TOUCH_STATE_SCROLLING;
			break;
		case MotionEvent.ACTION_CANCEL:
		case MotionEvent.ACTION_UP:
			// Release the drag
			mTouchState = TOUCH_STATE_REST;
			break;
		}
		boolean intercept = mTouchState != TOUCH_STATE_REST;
		Log.e("mcoy", "McoySnapPageLayout---onInterceptTouchEvent return " + intercept);
		return intercept;
	}
	
	/*
	 * (non-Javadoc)
	 * 
	 * @see android.view.View#onTouchEvent(android.view.MotionEvent)
	 * 主要功能是處理onInterceptTouchEvent()返回值為true時傳遞過來的touch事件
	 */
	@Override
	public boolean onTouchEvent(MotionEvent ev) {
		Log.e("mcoy", "onTouchEvent--" + System.currentTimeMillis());
	    if (mVelocityTracker == null) {
            mVelocityTracker = VelocityTracker.obtain();
        }
        mVelocityTracker.addMovement(ev);
        
		final int action = ev.getAction();
		final float x = ev.getX();
		final float y = ev.getY();
		switch (action) {
		case MotionEvent.ACTION_DOWN:
			if (!mScroller.isFinished()) {
				mScroller.abortAnimation();
			}
			break;
		case MotionEvent.ACTION_MOVE:
		    if(mTouchState != TOUCH_STATE_SCROLLING){
                 // 記錄y與mLastMotionY差值的絕對值。
                 // yDiff大於gapBetweenTopAndBottom時就認為介面拖動了足夠大的距離，螢幕就可以移動了。
                final int yDiff = (int) Math.abs(y - mLastMotionY);
                boolean yMoved = yDiff > gapBetweenTopAndBottom;
                if (yMoved) {
                	mTouchState = TOUCH_STATE_SCROLLING;
                }
            }
            // 手指拖動螢幕的處理
            if ((mTouchState == TOUCH_STATE_SCROLLING)) {
                // Scroll to follow the motion event
                final int deltaY = (int) (mLastMotionY - y);
                mLastMotionY = y;
                final int scrollY = getScrollY();
                if(mCurrentScreen == 0){//顯示第一頁，只能上拉時使用
                	if(mPageTop != null && mPageTop.isAtBottom()){
                		scrollBy(0, Math.max(-1 * scrollY, deltaY));
                	}
                }else{
                	if(mPageBottom != null && mPageBottom.isAtTop()){
                		 scrollBy(0, deltaY);
                	}
                }
            }
			break;
		case MotionEvent.ACTION_CANCEL:
		case MotionEvent.ACTION_UP:
			// 彈起手指後，切換螢幕的處理
			if (mTouchState == TOUCH_STATE_SCROLLING) {
			    final VelocityTracker velocityTracker = mVelocityTracker;
                velocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);
                int velocityY = (int) velocityTracker.getYVelocity();
                if (Math.abs(velocityY) > SNAP_VELOCITY) {
                    if( velocityY > 0 && mCurrentScreen == 1 && mPageBottom.isAtTop()){
                        snapToScreen(mDataIndex-1);
                    }else if(velocityY < 0  && mCurrentScreen == 0){
                        snapToScreen(mDataIndex+1);
                    }else{
                        snapToScreen(mDataIndex);
                    }
                } else {
                    snapToDestination();
                }
                if (mVelocityTracker != null) {
                    mVelocityTracker.recycle();
                    mVelocityTracker = null;
                }
			}else{
			}
			mTouchState = TOUCH_STATE_REST;
			break;
		
		default:
			break;
		}
		return true;
	}
	
	private void clearOnTouchEvents(){
		mTouchState = TOUCH_STATE_REST;
		 if (mVelocityTracker != null) {
             mVelocityTracker.recycle();
             mVelocityTracker = null;
         }
	}

    private void snapToDestination() {
		// 計算應該去哪個屏
		final int flipHeight = getHeight() / 8;
        
        int whichScreen = -1;
        final int topEdge = getCurrentView().getTop();

        if(topEdge < getScrollY() && (getScrollY()-topEdge) >= flipHeight && mCurrentScreen == 0){
            //向下滑動    
            whichScreen = mDataIndex + 1;
        }else if(topEdge > getScrollY() && (topEdge - getScrollY()) >= flipHeight && mCurrentScreen == 1){
            //向上滑動
            whichScreen = mDataIndex - 1;
        }else{
            whichScreen = mDataIndex;
        }
        Log.e(TAG, "snapToDestination mDataIndex = " + mDataIndex);
    	Log.e(TAG, "snapToDestination whichScreen = " + whichScreen);
        snapToScreen(whichScreen);
	}
	
	private void snapToScreen(int dataIndex) {
        if (!mScroller.isFinished())
            return;
       
        final int direction = dataIndex - mDataIndex;
        mNextDataIndex = dataIndex;
        boolean changingScreens = dataIndex != mDataIndex;
        View focusedChild = getFocusedChild();
        if (focusedChild != null && changingScreens) {
            focusedChild.clearFocus();
        }
        //在這裡判斷是否已到目標位置~
        int newY = 0;
		switch (direction) {
		case 1:  //需要滑動到第二頁
			Log.e(TAG, "the direction is 1");
			newY = getCurrentView().getBottom(); // 最終停留的位置
			break;
		case -1:  //需要滑動到第一頁
			Log.e(TAG, "the direction is -1");
			Log.e(TAG, "getCurrentView().getTop() is "
					+ getCurrentView().getTop() + " getHeight() is "
					+ getHeight());
			newY = getCurrentView().getTop() - getHeight(); // 最終停留的位置
			break;
		case 0:  //滑動距離不夠， 因此不造成換頁，回到滑動之前的位置
			Log.e(TAG, "the direction is 0");
			newY = getCurrentView().getTop(); //第一頁的top是0， 第二頁的top應該是第一頁的高度
			break;
		default:
			break;
		}
        final int cy = getScrollY(); // 啟動的位置
        Log.e(TAG, "the newY is " + newY + " cy is " + cy);
        final int delta = newY - cy; // 滑動的距離，正值是往左滑<—，負值是往右滑—>
        mScroller.startScroll(0, cy, 0, delta, Math.abs(delta));
        invalidate();
    }
    
   

}

McoySnapPage是定義在VIewGroup的一個介面， 比如說我們需要類似某東商品詳情那樣，有上下兩頁的效果。 那我就需要自己定義兩個類實現這個介面，並實現介面的方法。getRootView需要返回當前頁需要顯示的佈局內容；isAtTop需要返回當前頁是否已經在頂端； isAtBottom需要返回當前頁是否已經在底部

onInterceptTouchEvent和onTouchEvent決定當前的滑動狀態， 並決定是有當前VIewGroup攔截touch事件還是由子view去消費touch事件

Demo地址： http://download.csdn.net/detail/zxm317122667/8926295

轉自：http://blog.csdn.net/zxm317122667/article/details/47018357


相關推薦

android 自定義ViewGroup實現仿淘寶的商品詳情頁

最近公司在新版本上有一個需要， 要在首頁新增一個滑動效果， 具體就是仿照X寶的商品詳情頁， 拉到頁面底部時有一個粘滯效果，  如下圖 X東的商品詳情頁，如果使用者繼續向上拉的話就進入商品圖文描述介面： 剛開始是想拿來主義，直接從網上找個現成的demo來用， 但是網上無一

自定義ViewGroup實現仿淘寶的商品詳情頁

最近公司在新版本上有一個需要， 要在首頁新增一個滑動效果， 具體就是仿照X寶的商品詳情頁， 拉到頁面底部時有一個粘滯效果，  如下圖 X東的商品詳情頁，如果使用者繼續向上拉的話就進入商品圖文描述介面： 剛開始是想拿來主義，直接從網上找個現成的demo來用， 但是網上無一

android自定義ProgressBar（仿淘寶）的載入效果

三種方式實現自定義圓形頁面載入中效果的進度條 To get a ProgressBar in the default theme that is to be used on white/light back ground, use one of the inverse st

Android自定義控制元件-仿淘寶ios客戶端天貓商品詳情介面動效

效果圖 原始碼和例子 效果描述 一個自定義控制元件繼承自ScrollView,下拉時header會放大鬆開後會恢復原狀,上滑時header會被下面的內容吃掉蓋住而且會稍稍往上滑，在header高度範圍內滑動時導航欄背景和導航欄的按鈕會反向改變透明度形成一種對比

Android自定義控制元件——仿淘寶、網易、彩票等廣告條、Banner的製作

最近翻看以前的某專案時，發現了一個極其常用的效果——廣告條，或者也稱不上自定義元件，但是使用頻率還是相當普遍的。 開啟市面上各大App主介面，或多或少會出現這樣的東西，甚至一個應用中出現N多個，這種展示廣告的效果，不僅動態效果好，而且眾所周知的“不佔屏”，想想在手機裝

Android 仿淘寶商品詳情頁下拉足跡Demo

DropDownMultiPager 仿淘寶等商品詳情頁下拉足跡效果SimpleDemo 可colne之後看MainActivity的呼叫，方便二次開發 依賴 compile 'com.nin

Android開發之仿淘寶商品詳情頁

看到有人在問如何實現淘寶商品詳情頁效果，手癢了就擼了一個，獻上效果圖 大致梳理一下思路，這裡不提供原始碼 狀態列透明使用開源庫StatusBarCompat，為了相容手機4.4 dependencies { compile ('com.

【商城開發三】Android 仿淘寶商品詳情頁下拉足跡修改版

開發商城的快有半個月了，需要做到詳情頁下拉足跡的效果，網上找了找沒找到，找到一個差不多還有點問題，然後在基礎上進行了二次開發 感謝http://blog.csdn.net/yaphetzhao/article/details/53736471  YaphetZhao的部落格

Vue實現仿淘寶商品詳情屬性選擇的功能

先看下效果圖：（同個屬性內部單選，屬性與屬性之間可以多選） 主要實現過程： 所使用到的資料型別是（一個大數組裡面嵌套了另一個數組）具體格式如下： attrAndValuees: [ { 'attrId': 1,

仿淘寶商品詳情頁TabLayout+ListView

第一次寫部落格，我是一名Android的小碼農寫程式碼也有三四年了。有點好玩的跟大家分享一下 專案對商品詳情頁改版有新需求。頂部是一個漸變的Title包括“寶貝”，“詳情”，“推薦”三個文字，下邊是一個豎向滑動的列表顯示商品詳情和推薦商品。要求兩部分關聯起來，也就是點橫向的

仿淘寶商品詳情頁[帶有視訊和圖片的輪播功能]

因為工作需求的原因，自己寫了一個demo，既實現了功能，又能與大家分享，很高興！Demo已上傳GitHub，https://github.com/xinniangdeweidao/CloneTaobaoProductsDetails.git 轉載請註明出處，謝謝！

仿淘寶商品詳情頁，上拉檢視更多詳情demo（Activity和Fragment）。2種應用場景

最近專案中有個功能，在課程播放頁，有個講師詳情頁：上面展示文字資訊，下面展示一個webView，但是webView，要通過上拉才出現。網上找的一個開源的demo。對裡面進行了一定的修改，以符合專案要求： https://github.com/cnbleu/

仿淘寶商品詳情頁中（繼續拖動到圖文詳情）

核心view 有2個 一個是自定義的ViewGroup 一個是自定義的ScrollView 首先是自定義的ScrollView public class MyScrollView extends ScrollView { public My

利用ionic裡的和 modal 做個仿淘寶商品詳情頁頂部輪播圖的demo

做這個demo之前首先得了解淘寶app商品詳情頁頂部輪播圖都有哪些構造。 1.幾張圖片輪播展示； 2.點選圖片出現全屏圖片輪播展示； 3.點選第幾張圖，全屏展示對應圖片； 4.全屏展示的圖片可以拖拽放大； 5.全屏圖片可以長按儲存。（這點在這個demo中不會出現，因為博主這

自定義view，仿淘寶快遞的物流資訊的時間軸

　學了Android有一段時間了，一直沒有時間寫部落格，趁著週末有點空，就把自己做的一些東西寫下來． 一方面鍛鍊一下自己的寫文件的能力，另一方面分享程式碼的同時也希望能與大家交流一下技術，共同學習，共同進步． 　廢話不多少說，我們先來看看我們自定義view

Android自定義ListView實現仿微信側滑刪除

經常在遇到問題第一時間都會在網上搜索解決的方法，因此看到很多前輩們的比較精闢的技術文章，學習了很多東西，現在將自己平時工作中開發的一些小功能坐下總結，也寫出來，既方便自己理清思路記憶功能塊實現思路，又能與大家一起交流分享技術。 第一次寫文章，哪裡有不對的希望大

Android開發仿淘寶商品詳情瀏覽效果 兩步曲

效果圖： 第一步佈局檔案： <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/andr

Android仿京東、淘寶商品詳情頁上拉檢視更多詳情

老規矩，先上圖，沒圖說個J8 高清原圖GIF圖，請移步：https://github.com/kangkanger/SlideSeeMoreLayout/blob/master/screenshots/2.gif 相信現在只要做電商的APP，95%的UI設計師都會抄這個介面，所以把

Android 仿淘寶商品詳情標題欄變色，佈局層疊效果

如圖效果 思路：如圖可以將圖片中佈局分成三個部分，1標題欄透明背景，2上半部分佈局，3下半部分佈局，當我們向上拉動的時候，1佈局實現漸變，從透明變到白色，2佈局背景色漸變到白色，23佈局隨滾動條上拉，並且慢慢改變2佈局paddingtop的屬性，其中1佈局漂浮在整個scro

仿淘寶商品詳情頁面Android

1、需求： 要實現一個類似淘寶、京東的商品詳情頁面。首先是在看一些前輩的思路，檢視之後，發現博主qifengdeqingchen的文章不錯，然後去下載下來檢視demo。 2、查閱資料 來看看前輩的思路圖。使用兩個scrollView，兩個scr