Androidまねる淘宝商品はドラッグして詳細とタイトルバーのグラデーション機能を調べます。
序論
最近ずっと忙しくて、時間を割いてブログを書きに来ませんでした。自分が怠惰癌を起こしたと言わざるを得ません。怠けると何もしたくなくなります。最近は自分でたくさんのものを集めました。これからはゆっくりと共有します。じゃ、余計な話はしません。じゃ、本題を始めます。
今日分かち合うのはタオバオの詳細ページで、前にタオバオの上で買い物する時タオバオの詳しいページの効果が比較的に悪くないことを見て、だから今日はその効果をまねにきます。
先に効果図を書きます
これはタオバオです
自分で作ったのです
どのように効果が似ていますか?GIF図の効果はよく分かりません。ご了承ください。
これからどうやって実現するかを見ましょう。
実現する
まず私達はtaobaoレイアウトのインターフェースの難点を分析します。
*タイトルバーのグラデーション、テキストのグラデーションの非表示
*透明通知欄(4.4まで対応)
*ドラッグして詳細を確認してください。Srollviewは弾力性のある効果があります。
前の2時までにもう実現しました。ここではあまり紹介しません。よく分からない仲間は前の文章を見てもいいです。
AndroidはSrollViewCを解析してQQ空間のタイトルバーのグラデーションをまねます。
以下では主にScrllviewを紹介します。引き続きドラッグして詳細を見ると弾性動画の効果があります。
この効果を詳しく分析すると、上のレイアウトがスライドできることが分かります。下のレイアウトにスライドすると、下のレイアウトもスライドできます。だから、私達はViewをカスタマイズして二つのSrollviewを含みます。上の一つは下の一つです。次にScrllviewを監督して最後までスライドさせます。アニメーション効果を追加して下のScrllviewにスライドさせます。下のScrllviewを上にスライドさせる時に上のアニメーションを追加して上のScrrollviewにスライドさせます。
具体的にコードを見ることができます。コメントはもう詳しくなりました。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
最近ずっと忙しくて、時間を割いてブログを書きに来ませんでした。自分が怠惰癌を起こしたと言わざるを得ません。怠けると何もしたくなくなります。最近は自分でたくさんのものを集めました。これからはゆっくりと共有します。じゃ、余計な話はしません。じゃ、本題を始めます。
今日分かち合うのはタオバオの詳細ページで、前にタオバオの上で買い物する時タオバオの詳しいページの効果が比較的に悪くないことを見て、だから今日はその効果をまねにきます。
先に効果図を書きます
これはタオバオです
自分で作ったのです
どのように効果が似ていますか?GIF図の効果はよく分かりません。ご了承ください。
これからどうやって実現するかを見ましょう。
実現する
まず私達はtaobaoレイアウトのインターフェースの難点を分析します。
*タイトルバーのグラデーション、テキストのグラデーションの非表示
*透明通知欄(4.4まで対応)
*ドラッグして詳細を確認してください。Srollviewは弾力性のある効果があります。
前の2時までにもう実現しました。ここではあまり紹介しません。よく分からない仲間は前の文章を見てもいいです。
AndroidはSrollViewCを解析してQQ空間のタイトルバーのグラデーションをまねます。
以下では主にScrllviewを紹介します。引き続きドラッグして詳細を見ると弾性動画の効果があります。
この効果を詳しく分析すると、上のレイアウトがスライドできることが分かります。下のレイアウトにスライドすると、下のレイアウトもスライドできます。だから、私達はViewをカスタマイズして二つのSrollviewを含みます。上の一つは下の一つです。次にScrllviewを監督して最後までスライドさせます。アニメーション効果を追加して下のScrllviewにスライドさせます。下のScrllviewを上にスライドさせる時に上のアニメーションを追加して上のScrrollviewにスライドさせます。
具体的にコードを見ることができます。コメントはもう詳しくなりました。
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;
/**
* 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;
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: view , view parent view onMeasure onLayout 。
requestLayout();
break;
case MotionEvent.ACTION_UP:
mLastY = ev.getY();
vt.addMovement(ev);
// :units , 1, 1 。 1000, 1
vt.computeCurrentVelocity(700);
// Y getXVelocity() getYVelocity()
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();
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レイアウトの中で一番外側の階にこのScrollview Continerで二つのScrllviewを包んでいます。上のレイアウトは上のレイアウトと下のレイアウトでいいです。もちろん上のレイアウトはタイトルバーのグラデーションにも関連していますので、上のScrollviewは自主的にスライドして監督します。上記の文章の中に詳しく紹介されています。はい、今日はここまでです。時間があればコードを整理して私のGigthubに置いておきます。以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。