안 드 로 이 드 슬라이딩 충돌 의 완벽 한 해결 방안
안 드 로 이 드 개발 에 서 는 간단 한 레이아웃 이 라면 쉽게 해결 할 수 있 지만 복잡 한 페이지,특히 작은 화면 휴대 전 화 를 호 환 하기 위해 ScrollView 를 사용 한 후에 클릭 이벤트 의 충돌 이 많이 발생 한다.가장 전형 적 인 것 은 ScrollView 에 ListView 가 삽입 되 어 있다 는 것 이다.안 드 로 이 드 를 처음 접 한 대부분의 친구 들 이 이 구 덩이 를 밟 았 다 고 생각 합 니 다.다음은 편집장 을 따라 해결 방안 을 살 펴 보 겠 습 니 다.
같은 방향 미끄럼 충돌
예 를 들 어 ScrollView 는 ListView 를 끼 워 넣 거나 ScrollView 는 자신 을 끼 워 넣 습 니 다.
여기 서 먼저 효과 도 를 보 겠 습 니 다.
위의 그림 은 쇼핑 소프트웨어 에서 흔히 볼 수 있 는 위 에서 그림 과 글 의 상세 한 정 보 를 조회 하 는 것 이다.이 애니메이션 효과 의 실현 에 대해 사실은 전체적인 효 과 를 실현 한다.방법 은 매우 많다.인터넷 에 관련 된 예 가 많 지만 일부 디 테 일 에 대한 처리 가 뚜렷 하지 않다.예 를 들 어아래 에 표 시 된 부분(예 를 들 어 아래 그림 의 자세 한 내용)은 ScrollView 와 같은 컨트롤(예 를 들 어 WebView)이 라면 새로운 문제 가 발생 할 수 있 습 니 다.여기 서 그림 의 상세 한 상황 을 배경 으로 같은 방향 으로 미끄럼 충돌 에 대한 분석 을 해 보 겠 습 니 다.
전체적인 사고 방식.
여기 다음 그림 보 세 요.
여러 개의 ScrollView 내장 설명도
우선,이 그림 에 대해 설정 을 합 니 다.
1.검은색 상 자 는 핸드폰 화면 을 나타 낸다
2.녹색 상 자 는 바깥쪽 의 ScrollView 를 나타 낸다.
3.빨간색 상자 두 개 는 안에 포 함 된 두 가지 ScrollView 컨트롤 을 대표 합 니 다.여 기 는 SUp,SDown 이 라 고 부 릅 니 다.
자,이제 전체 절 차 를 실현 하 는 과정 을 분석 해 보 겠 습 니 다.
언제든지 SUp 과 SDown 이 볼 수 있 는 부분 은 휴대 전화 화면의 높이 라 는 점 을 분명히 해 야 한다.이 점 을 알 게 되면 우 리 는 다음 과 같은 절차 로 전개 할 수 있다.
우선,우 리 는 외부의 ScrollView 가 미끄럼 사건 을 차단 하지 않도록 확보 합 니 다.그러면 SUp 은 반드시 이번 사건 을 얻 고 그 Action 에 따라Move 이 벤트 는 아래로 미 끄 러 지고 자체 미끄럼 거리+화면 높이=자체 높이 일 때 SUp 이 아래로 미 끄 러 졌 다 고 볼 수 있 습 니 다.이때 외부 ScrollView 는 미끄럼 이 벤트 를 차단 하여 전체 보기 가 계속 아래로 미 끄 러 질 수 있 도록 합 니 다.이때 아래쪽 SDown 이 표 시 됩 니 다.
마찬가지 로 이 때 는 외부 ScrollView 가 미끄럼 사건 을 차단 하 는 것 을 허용 하지 않 고 SDown 에서 처리 하 며 Action 에 따라move 이 벤트 는 위로 미 끄 러 지고 자신 이 미 끄 러 질 수 있 는 거리 가 0 일 때 SDown 이 상단 까지 미 끄 러 졌 음 을 의미 합 니 다.이때 외부 ScrollView 는 미 끄 러 지 는 이 벤트 를 차단 할 권 리 를 얻 고 전체 보기 가 위로 계속 미 끄 러 질 수 있 도록 합 니 다.이때 SUp 이 다시 표시 되 고 새로운 순환 차단 을 시작 합 니 다.
이렇게 전체적인 절 차 는 움 직 이 는 그림 의 효 과 를 실현 할 수 있다.자,원 리 를 말 하고 코드 를 보 세 요.
코드 구현
SUp 구현
public class UpScrollView extends ScrollView {
/**
*
*/
private int mScreenHeight;
/**
*
*/
private float mLastY;
/**
* View
*/
private int mScrollY;
/**
* View
*/
private int mChildH;
public UpScrollView(Context context) {
super(context);
init(context);
}
public UpScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public UpScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
private void init(Context context) {
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics dm = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(dm);
mScreenHeight = dm.heightPixels;
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
// View
getParent().getParent().requestDisallowInterceptTouchEvent(true);
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
mLastY = (int) ev.getY();
break;
case MotionEvent.ACTION_MOVE:
float y = ev.getY();
float deltaY = y - mLastY;
mChildH = this.getChildAt(0).getMeasuredHeight();
int translateY = mChildH - mScrollY;
// ， translateY ， ， View
if (deltaY < 0 && translateY == mScreenHeight) {
getParent().getParent().requestDisallowInterceptTouchEvent(false);
}
break;
default:
break;
}
return super.onTouchEvent(ev);
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
mScrollY = t;
}
}onScrollChanged 는 View 클래스 에서 이 루어 집 니 다.API 를 보면 두 번 째 매개 변수 t 설명 을 볼 수 있 습 니 다.
@param t Current vertical scroll origin.SDown 실현
public class MyWebView extends WebView {
public float oldY;
private int t;
public MyWebView(Context context) {
super(context);
init();
}
public MyWebView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public MyWebView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
WebSettings settings = getSettings();
settings.setJavaScriptEnabled(true);
setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
getParent().getParent().requestDisallowInterceptTouchEvent(true);
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
oldY = ev.getY();
break;
case MotionEvent.ACTION_MOVE:
float Y = ev.getY();
float Ys = Y - oldY;
if (Ys > 0 && t == 0) {
getParent().getParent().requestDisallowInterceptTouchEvent(false);
}
break;
}
return super.onTouchEvent(ev);
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
this.t = t;
super.onScrollChanged(l, t, oldl, oldt);
}
}이런 종류의 실현 은 앞에서 말 한 원리 에 따라 잘 이해 할 수 있 을 것 이다.
외부 스크롤 뷰
public class CustomerScrollViews extends ScrollView {
/**
*
*/
private int mScreenHeight;
private UpScrollView upScrollView;
private MyWebView myWebView;
private boolean init = false;
private float fator = 0.2f;
private int factorHeight;
private boolean upShow = true;
public CustomerScrollViews(Context context) {
super(context);
init(context);
}
public CustomerScrollViews(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public CustomerScrollViews(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
private void init(Context context) {
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics dm = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(dm);
mScreenHeight = dm.heightPixels;
factorHeight = (int) (mScreenHeight * fator);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if (!init) {
LinearLayout parentView = (LinearLayout) getChildAt(0);
// view
upScrollView = (UpScrollView) parentView.getChildAt(0);
myWebView = (MyWebView) parentView.getChildAt(2);
// //
upScrollView.getLayoutParams().height = mScreenHeight;
myWebView.getLayoutParams().height = mScreenHeight;
init = true;
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
if (changed) {
scrollTo(0, 0);
}
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_UP:
int scrollY = getScrollY();
if (upShow) {
if (scrollY <= factorHeight) {
smoothScrollTo(0, 0);
} else {
smoothScrollTo(0, mScreenHeight);
upShow = false;
}
} else {
int scrollpadding = mScreenHeight - scrollY;
if (scrollpadding >= factorHeight) {
this.smoothScrollTo(0, 0);
upShow = true;
} else {
this.smoothScrollTo(0, mScreenHeight);
}
}
return true;
}
return super.onTouchEvent(ev);
}
}여기 서 중요 한 부분 을 말씀 드 리 겠 습 니 다.
upScrollView = (UpScrollView) parentView.getChildAt(0);
myWebView = (MyWebView) parentView.getChildAt(2);dual_scrollview_activity_layout1.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.example.dreamwork.activity.superscrollview.CustomerScrollViews
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.example.dreamwork.activity.superscrollview.UpScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="@drawable/taobao" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="@drawable/taobao" />
<TextView
android:textSize="20sp"
android:padding="10dp"
android:gravity="center"
android:layout_marginTop="20dp"
android:layout_marginBottom="60dp"
android:text=" "
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</com.example.dreamwork.activity.superscrollview.UpScrollView>
<include layout="@layout/selector_tab_items" />
<com.example.dreamwork.activity.superscrollview.MyWebView
android:id="@+id/web"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</com.example.dreamwork.activity.superscrollview.CustomerScrollViews>
</LinearLayout>이렇게 하면 이전의 child(1)가 왜 뛰 어 넘 었 는 지 이해 할 수 있 을 것 이다.
쓰다
public class DualScrollViewActivity1 extends Activity implements View.OnClickListener {
private MyWebView webView;
private TextView sinaTv, qqTv, baiduTv;
private View line1, line2, line3;
private final String BAIDU = "http://www.baidu.com";
private final String QQ = "http://www.qq.com";
private final String SINA = "http://sina.cn";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
InitView();
sinaTv.performClick();
}
private void InitView() {
setContentView(R.layout.dual_scrollview_activity_layout1);
webView = V.f(this, R.id.web);
sinaTv = V.f(this, R.id.one);
sinaTv.setOnClickListener(this);
qqTv = V.f(this, R.id.two);
qqTv.setOnClickListener(this);
baiduTv = V.f(this, R.id.three);
baiduTv.setOnClickListener(this);
line1 = V.f(this, R.id.line1);
line2 = V.f(this, R.id.line2);
line3 = V.f(this, R.id.line3);
}
@Override
public void onClick(View v) {
reset();
String url = "";
switch (v.getId()) {
case R.id.one:
line1.setVisibility(View.VISIBLE);
url = SINA;
break;
case R.id.two:
line2.setVisibility(View.VISIBLE);
url = QQ;
break;
case R.id.three:
line3.setVisibility(View.VISIBLE);
url = BAIDU;
break;
default:
break;
}
webView.loadUrl(url);
}
private void reset(){
line1.setVisibility(View.GONE);
line2.setVisibility(View.GONE);
line3.setVisibility(View.GONE);
}
}여기 서 미끄럼 충돌 에 대한 해결 방법 은 내부 에서 밖으로 전개 되 는 것 입 니 다.기본적으로 꼭대기 층 View 는 차단 능력 을 잃 게 하고 바닥 View 의 미끄럼 거리 에서 서로 다른 논리 적 판단 으로 꼭대기 층 의 차단 여 부 를 제어 합 니 다.이것 도 비교적 이해 하고 실현 하기 쉬 운 사고방식 이다.물론 이런 미끄럼 충돌 에 대해 서 는 다양한 사고 가 있 는데 여 기 는 그 중 하나 일 뿐이다.
실제 개발 개발 에 서 는 같은 방향 으로 미 끄 러 지 는 특성 을 가 진 컨트롤 이 내장 되 어 있 을 때 발생 하 는 문 제 는 미끄럼 충돌 뿐만 아니 라 내용 이 불완전 하거나 표시 되 지 않 는 경우 도 있다.
ScrollView 내장 ListView 와 같은 경우 가 가장 흔 합 니 다.이 경우 ListView 를 사용자 정의 하여 높 은 값 으로 계산 하면 특정한 의미 에서 미 끄 러 지 는 특성 을 잃 게 됩 니 다.그러나 이렇게 하면 ListView 는 보기 회수 체 제 를 잃 은 것 같 습 니 다.이 럴 때 많은 그림 을 불 러 오 면 효과 가 좋 지 않 습 니 다.이러한 상황 에 대해 서 는 ListView 에 헤드 뷰 와 footView 를 추가 하 는 것 도 해결 방법 이지 만 실제 UI 상황 에서 도 허용 해 야 한다.
ScrollView 에 RecyclerView 를 끼 워 넣 을 때 조금 번 거 롭 습 니 다.ScrollView 를 사용자 정의 해 야 하고 LinearLayoutManager 를 사용자 정의 해 야 합 니 다.
서로 다른 방향 미끄럼 충돌
예 를 들 어 ScrollView 에 ViewPager 를 끼 워 넣 거나 ViewPager 에 ScrollView 를 끼 워 넣 는 경우 가 전형 적 이다.현재 대부분의 응용 최 외층 은 ViewPager+Fragment 의 아래쪽 전환(예 를 들 어 위 챗)구조 로 이 럴 때 미끄럼 충돌 이 발생 하기 쉽다.그러나 ViewPager 에는 ListView 가 내장 되 어 있 든 ScrollView 가 내장 되 어 있 든 미끄럼 충돌 은 없습니다.공식 적 인 것 이기 때문에 이런 것들 을 고려 했 을 수도 있 기 때문에 비교적 완선 합 니 다.
복잡 한 미끄럼 충돌 은 기본적으로 이 두 충돌 이 결 합 된 결과 이다.
미끄럼 충돌 해결 사고
미끄럼 충돌 은 본질 적 으로 두 가지 서로 다른 방향(또는 같은 방향)의 View 이다.그 중 하 나 는 주도 적 인 위 치 를 차지 하고 매번 에 외부의 미끄럼 행 위 를 앞 다 투어 처리 하기 때문에 매우 어색 한 사용자 체험 을 초래 할 수 있다.분명히 가로로 한 번 미 끄 러 졌 을 뿐 수직 목록 은 수직 방향 에서 동작 이 발생 했다.즉,이 주도 적 인 위 치 를 차지 하 는 View 는 매번 자신 도 모 르 게 이 미끄럼 동작 을 막 았 기 때문에 미끄럼 충돌 을 해결 하려 면 이 주도 적 인 위 치 를 차지 하 는 View 에 게 언제 차단 해 야 하 는 지,언제 차단 해 서 는 안 되 는 지,다음 층 의 View 에서 이 미끄럼 동작 을 처리 해 야 한 다 는 것 을 명확 하 게 알려 야 한다.
여기 서 모 르 는 학생 들 은 안 드 로 이 드 터치 사건 의 배포 체 제 를 알 아 볼 수 있 습 니 다.이것 도 미끄럼 충돌 을 해결 하 는 핵심 지식 입 니 다.
미끄럼 충돌
여기 배경 상황 을 말씀 드 리 겠 습 니 다.이전에 드 롭 다운 리 셋,업 로드 를 더 많이 할 때 PullToRefreshview 라 는 컨트롤 을 사 용 했 습 니 다.편리 하기 때문에 3 자 프로젝트 를 가 져 오지 않 아 도 됩 니 다.그 내부 에 ListView,GridView 와 ScrollView 를 설치 할 수 있어 서 매우 편리 하고 사용 하기에 매우 불편 하 다 고 할 수 있다.그러나 어느 날 프로젝트 수요 로 인해 ListView 상단 에 라운드 맵 컨트롤 Banner View 를 추가 했다.그 결과 라운드 맵 이 미 끄 러 졌 을 때 수직 드 롭 다운 리 셋 구성 요소 와 충돌 한 것 으로 나 타 났 다.
앞서 말 한 바 와 같이 미끄럼 충돌 을 해결 하 는 관건 은 Touch 를 받 은 View 에 이번 사건 을 차단 해 야 하 는 지 를 명 확 히 알려 주 는 것 이다.
해결 방법
해결 방안 1,외부 차단 메커니즘 고려
여기 에는 PullToRefreshView 에 ViewPager 가 포 함 된 셈 이다.터치 이 벤트 를 우선 받 을 때마다 PullToRefreshView 가 필수 적 이다.이렇게 하면 알 수 있 습 니 다.코드 를 보 세 요.
PullToRefreshview 에서:
@Override
public boolean onInterceptTouchEvent(MotionEvent e) {
int y = (int) e.getRawY();
int x = (int) e.getRawX();
boolean resume = false;
switch (e.getAction()) {
case MotionEvent.ACTION_DOWN:
// down , y
mLastMotionY = y;
mLastMotionX = x;
resume = false;
break;
case MotionEvent.ACTION_MOVE:
// deltaY > 0 ,< 0
int deltaY = y - mLastMotionY;
int deleaX = x - mLastMotionX;
if (Math.abs(deleaX) > Math.abs(deltaY)) {
resume = false;
} else {
//
if (isRefreshViewScroll(deltaY)) {
resume = true;
}
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
break;
}
return resume;
}
if (Math.abs(deleaX) > Math.abs(deltaY)) {
resume = false;
}해결 방안 2,내용 역방향 사고 분석
때때로 우 리 는 도 입 된 제3자 컨트롤 을 수정 하고 싶 지 않 거나 수정 할 수 없 을 때 도 있다.현재 Touch 에서 전달 되 고 있 는 사건 의 마지막 View 역방향 을 고려 해 야 합 니 다.우선,안 드 로 이 드 에서 View 의 Touch 이벤트 전달 체 제 를 통 해 우 리 는 Touch 사건 을 알 고 있 습 니 다.먼저 반드시 최 외층 View 에 의 해 차단 되 어야 합 니 다.만약 에 이 최 외층 View 를 변경 할 수 없다 면 어 쩔 수 없 지 않 습 니까?사실은 그렇지 않 습 니 다.안 드 로 이 드 가 이렇게 높 은 시스템 은 반드시 이 문 제 를 고려 했 을 것 입 니 다.좋 습 니 다.쓸데없는 말 은 하지 않 고 코드 를 먼저 보 세 요.
private BannerView carouselView;
private Context mContext;
private PullToRefreshView refreshView;
.........
refreshView.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
carouselView.getParent().requestDisallowInterceptTouchEvent(false);
return false;
}
});
carouselView.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
carouselView.getParent().requestDisallowInterceptTouchEvent(true);
int x = (int) event.getRawX();
int y = (int) event.getRawY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
lastX = x;
lastY = y;
break;
case MotionEvent.ACTION_MOVE:
int deltaY = y - lastY;
int deltaX = x - lastX;
if (Math.abs(deltaX) < Math.abs(deltaY)) {
carouselView.getParent().requestDisallowInterceptTouchEvent(false);
} else {
carouselView.getParent().requestDisallowInterceptTouchEvent(true);
}
default:
break;
}
return false;
}
});
public abstract void requestDisallowInterceptTouchEvent (boolean disallowIntercept)PS:이 방법의 명칭 과 그 인자 의 사용 논 리 는 나 로 하여 금 매우 재 미 있 는 말 을 생각 나 게 합 니 다.적의 적은 친구 입 니 다.구 글 의 신 들 이 어떻게 생각 하 는 지 모 르 겠 습 니 다.굳이 반 논 리 를 해 야 합 니 다.
본론 으로 돌아가다.여기 서 차단 이 직접적 이 고 명확 합 니 다.carouselView 의 onTouch 방법 에서 들 어 갈 때마다 부모 View 가 이번 사건 을 차단 하지 않 는 다 고 설정 한 다음 에 MOTIONMOVE 때 미 끄 러 지 는 거리 에 따라 부 뷰 가 Touch 사건(즉,미 끄 러 지 는 행위)을 차단 할 권리 가 있 는 지 를 판단 한다.
총결산
자,본 논문 의 내용 은 여기 서 대체적으로 끝났다.본 글 은 해결 방법 을 제공 하 는 사고 일 뿐 구체 적 인 장면 에서 상호작용 은 구체 적 인 업무 수요 에 부합된다.그러나 어쨌든 클릭 사건 의 절단 과 처리 시 기 를 찾 는 것 이 가장 중요 하 다.이 관건 을 둘러싸 고 그 에 상응하는 해결 방법 을 찾 을 수 있다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Kotlin의 기초 - 2부지난 글에서는 Kotlin이 무엇인지, Kotlin의 특징, Kotlin에서 변수 및 데이터 유형을 선언하는 방법과 같은 Kotlin의 기본 개념에 대해 배웠습니다. 유형 변환은 데이터 변수의 한 유형을 다른 데이터...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
