안 드 로 이 드 모방 타 오 바 오 상품 드래그 자세 한 내용 및 제목 표시 줄 그 라 데 이 션 기능 보기
요즘 계속 바 빠 서 블 로 그 를 쓸 시간 도 못 내 고 게 으 른 암 에 걸 렸 다 고 할 수 밖 에 없어 요.사람 이 게 으 르 면 아무 일 도 하고 싶 지 않 아 요.버 티 지 못 하면 폐 기 될 것 같 아 요."최근 에 스스로 많은 것 을 모 았 으 니 다음 시간 은 천천히 나 누 겠 습 니 다.자,쓸데없는 말 은 그만 하고 다음 주 제 를 시작 하 겠 습 니 다.
오늘 공유 할 것 은 타 오 바 오의 상세 페이지 입 니 다.예전 에 타 오 바 오 에서 물건 을 살 때 타 오 바 오의 상세 페이지 를 보 니 효과 가 좋 았 습 니 다.그래서 오늘 은 타 오 바 오의 효 과 를 본 떠 보 겠 습 니 다.타 오 바 오 가 좋 지 않 을 수도 있 습 니 다.양 해 를 바 랍 니 다.
선행 효과 도:
이것 은 타 오 바 오의 것 이다.
내 가 직접 만 든 것:
어 때?아직 많이 안 나 왔 지?GIF 그림 효 과 는 잘 보이 지 않 습 니 다.양해 해 주 십시오.
어떻게 이 루어 졌 는 지 한번 보도 록 하 겠 습 니 다.
이루어지다
먼저 우 리 는 타 오 바 오 구조의 인터페이스 난점 을 분석 하 는데 대체적으로 다음 세 부분 이다.
*제목 표시 줄 그 라 데 이 션,텍스트 그 라 데 이 션 숨 기기
*투명 알림 표시 줄(4.4 까지 지원)
*계속 드래그 해서 자세 한 내용 을 확인 하 세 요.Scrollview 는 탄력 적 인 효과 가 있 습 니 다.
앞의 두 시 에 저 는 이미 이 루어 졌 습 니 다.여 기 는 소 개 를 많이 하지 않 겠 습 니 다.잘 모 르 는 친구 들 은 제 가 예전 에 한 글 을 볼 수 있 습 니 다.
Android 에서 ScrollViewC 모방 QQ 공간 제목 표시 줄 그 라 데 이 션 을 분석 합 니 다.
다음은 Scrollview 가 계속 드래그 하여 자세 한 내용 을 살 펴 보면 탄력 적 인 애니메이션 효과 가 있 습 니 다.
이 효 과 를 자세히 분석 하면 위의 구조 가 미 끄 러 질 수 있다 는 것 을 알 고 있 습 니 다.아래 의 구조 로 미 끄 러 질 때 아래 의 구 조 는 미 끄 러 질 수 있 습 니 다.그래서 우 리 는 하나의 View 를 사용자 정의 하여 두 개의 Scrollview 를 포함 하고 위 에 있 는 하 나 는 다음 을 포함 합 니 다.그 다음 에 Scrollview 가 끝까지 미 끄 러 지 는 것 을 감청 하고 애니메이션 효 과 를 추가 하여 아래 의 Scrollview 가 위로 미 끄 러 질 때 위로 미 끄 러 지 는 Scrollview 를 추가 합 니 다.
구체 적 으로 코드 를 볼 수 있 습 니 다.주석 은 이미 상세 합 니 다.
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 Container 로 두 개의 Scrollview 를 감 싸 서 위의 레이아웃 과 아래 의 레이아웃 으로 나 누 면 됩 니 다.물론 우리 위의 레이아웃 은 제목 표시 줄 의 그 라 데 이 션 과 관련 되 기 때문에 위의 Scrollview 는 미끄럼 감청 을 사용자 정의 해 야 합 니 다.위 에서 언급 한 글 에 상세 하 게 소개 되 어 있 습 니 다.자,오늘 은 여기까지.시간 나 면 코드 를 정리 해서 제 Github 에 올 려 놓 을 게 요.이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Bitrise에서 배포 어플리케이션 설정 테스트하기이 글은 Bitrise 광고 달력의 23일째 글입니다. 자체 또는 당사 등에서 Bitrise 구축 서비스를 사용합니다. 그나저나 며칠 전 Bitrise User Group Meetup #3에서 아래 슬라이드를 발표했...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.