Android仿淘寶商品拖動查看詳情及標題欄漸變功能
更新時間：2016年09月13日 11:38:04 作者：lyhhj
這篇文章主要介紹了Android仿淘寶商品拖動查看詳情及標題欄漸變功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下
緒論
最近一直比較忙，也沒抽出時間來寫博客，也不得不說是自己犯了懶癌，人要是一懶就什么事都不想做了，如果不能堅持下來的話，那么估計就廢了，��。最近自己攢了好多東西，接下來的時間我會慢慢都分享出來的。好了廢話不多說了，下面我們開始正題：
今天要分享的是淘寶的詳情頁，之前在淘寶上買東西的時候看到淘寶的詳情頁效果比較不錯，所以今天就來仿一下它的效果吧，可能沒有淘寶的好，希望見諒啊。
先上效果圖：
這是淘寶的：
我自己做的：
怎么樣效果還差不多吧？GIF圖效果看的不太清楚，見諒。
下面我們來看看怎么實現(xiàn)的吧
實現(xiàn)
首先我們分析淘寶布局的界面難點大致就下面3個部分：
*標題欄漸變，文字漸變隱藏
*透明通知欄（支持到4.4）
*繼續(xù)拖動查看詳情，Scrollview有一個彈性的效果
前兩點我之前都已經(jīng)實現(xiàn)過了，這里就不做過多介紹了，不清楚的小伙伴可以看我之前的文章：
Android帶你解析ScrollView–仿QQ空間標題欄漸變
下面我們主要介紹一下Scrollview繼續(xù)拖動查看詳情有一個彈性動畫的效果：
仔細分析這個效果我們知道上面的布局可以滑動，當(dāng)滑動到下面的布局時候同時下面的布局依然可以滑動，所以我們自定義一個View來包含兩個Scrollview，上面一個下面一個；然后監(jiān)聽Scrollview滑動到底部添加動畫效果讓其滑動到下面的Scrollview，當(dāng)下面的Scrollview滑動到頂部的時候再添加一個向上的動畫讓其滑動到上面的Scrollview。
具體的可以看一下代碼，注釋已經(jīng)很詳細了：
import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.Log;
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的容器
*
*/
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 = 8.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;
/**
* 記錄當(dāng)前展示的是哪個view，0是topView，1是bottomView
*/
private int mCurrentViewIndex = 0;
/**
* 手滑動距離，這個是控制布局的主要變量
*/
private float mMoveLen;
private MyTimer mTimer;
private float mLastY;
/**
* 用于控制是否變動布局的另一個條件，mEvents==0時布局可以拖拽了，mEvents==-1時可以舍棄將要到來的第一個move事件，
* 這點是去除多點拖動劇變的關(guān)鍵
*/
private int mEvents;
boolean isTuninginterface=true;
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;
if(isTuninginterface){
isTuninginterface=false;
}
}
} 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();//獲得VelocityTracker類實例
else
vt.clear();
mLastY = ev.getY();
System.out.println("---ACTION_DOWN-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);//將事件加入到VelocityTracker類實例中
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(isTuninginterface){
isTuninginterface=false;
}
}
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：當(dāng)view確定自身已經(jīng)不再適合現(xiàn)有的區(qū)域時，該view本身調(diào)用這個方法要求parent view重新調(diào)用他的onMeasure onLayout來對重新設(shè)置自己位置。
requestLayout();
break;
case MotionEvent.ACTION_UP:
mLastY = ev.getY();
vt.addMovement(ev);
//參數(shù)：units 你想要指定的得到的速度單位，如果值為1，代表1毫秒運動了多少像素。如果值為1000，代表 1秒內(nèi)運動了多少像素
vt.computeCurrentVelocity(700);
// 獲取Y方向的速度 可以通過getXVelocity()和getYVelocity()獲得橫向和豎向的速率
float mYV = vt.getYVelocity();
if (mMoveLen == 0 || mMoveLen == -mViewHeight)
break;
if (Math.abs(mYV) < 500) {
// 速度小于一定值的時候當(dāng)作靜止釋放，這時候兩個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();
System.out.println("======onMeasure====mViewHeight======"+mViewHeight);
System.out.println("======onMeasure====mViewWidth======"+mViewWidth);
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;
Log.i("------getScrollY------", sv.getScrollY()+"");
Log.i("------getMeasuredHeight---getChildAt---", sv.getChildAt(0).getMeasuredHeight()+"");
Log.i("------getMeasuredHeight---sv---", sv.getMeasuredHeight()+"");
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();
}
}
}
}
最后我們在xml布局里面最外層用這個ScrollviewContainer包裹著兩個Scrollview分別為上面的布局和下面的布局就可以了，當(dāng)然因為我們上面的布局還涉及到標題欄漸變，所以上面的Scrollview要自定義滑動監(jiān)聽，上面提到的文章里面有詳細介紹。好了今天就到這里，有時間我會把代碼整理出來放到我的Github上的。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了android主線程和子線程之間消息傳遞詳解，主線程發(fā)送消息到子線程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
Android ListView實現(xiàn)仿iPhone實現(xiàn)左滑刪除按鈕的簡單實例
下面小編就為大家?guī)硪黄狝ndroid ListView實現(xiàn)仿iPhone實現(xiàn)左滑刪除按鈕的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了Android編程之軟件的安裝和卸載方法,涉及Android編程實現(xiàn)軟件的安裝、權(quán)限修改及卸載的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
本文主要講解Android SQLite,這里對數(shù)據(jù)庫SQLite 做了詳細的知識資料整理，并附示例代碼和實現(xiàn)效果圖，有需要的小伙伴可以參考下2016-08-08
本篇文章主要介紹了Android OKHttp3攔截器的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
圓角按鈕在我們現(xiàn)在的界面中常常會用到，最近在開發(fā)中就又遇到了，所以想著有沒有更快速更便捷的實現(xiàn)方法呢，所以就有了這篇文章，本文主要給大家介紹了關(guān)于Android中如何快速便捷的實現(xiàn)圓角按鈕的相關(guān)資料，需要的朋友可以參考下。2017-05-05
使用Compose制作抖音快手視頻進度條Loading動畫效果
這篇文章主要為大家介紹了使用Compose制作抖音快手視頻進度條Loading動畫效果，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家詳細介紹了Android仿淘寶商品詳情頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
本文主要介紹Android 登錄界面實現(xiàn)，這里主要講解類似Twitter的登錄界面的實現(xiàn)，有興趣的小伙伴可以參考下2016-08-08
這篇文章主要為大家詳細介紹了Android布局技巧之創(chuàng)建高效布局，具有一定的實用性，感興趣的小伙伴們可以參考一下2016-06-06