android 사용자 정의 ScrollView 배경 이미지 신축 실현 코드 및 사고방식

  
  과 다 미터 음악 을 사용 하 는 도 시 는 이 UI 가 위아래 로 미 끄 러 질 수 있다 는 것 을 알 고 있 습 니 다.역할 은 지루 함 속 에서 답답 함 을 풀 수 있 습 니 다.이것 은 망치 회사 라 오 라 에 의 해'정서'라 고 부 르 는데 사실은'정취'라 고 부 르 는 것 이 더 적합 합 니 다.헤헤.이제 인터넷 을 옮 기 는 속도 가 이렇게 빨 라 졌 다.시장 에 서 는 더 이상 초기 에 앱 을 두 드 려 서 올 리 면 수 십 만 명의 사용 자 를 가 질 수 있 는 단계 가 아니다.최근 애플 은 안 드 로 이 드 다운 로드 량 이 애플 상점 을 따라 잡 을 까 봐(500 억 번 째 앱 을 다운로드 한 사용 자 는 10,000 달러 의 아 이 튠 즈 선물 카드 를 받 을 수 있다.그 밖 에 도500 억 이후 50 위 안에 든 사용자 도 500 달러 의 선물 카드 를 받 을 수 있 습 니 다.이동 전개 추세 에 대해 저 는 IT 를 옮 기 는 사람들의 마음 을 비교 하고 싶 습 니 다.멀 어 졌 습 니 다)사실은 UI 를 응용 하 는 효과 가 매우 큰 부분 입 니 다.만약 에 똑 같은 기능 을 가 진 두 가지 소프트웨어 가 있다 면 하 나 는'왕 이 뉴스'와 같은 기능 이 좋 고 다른 하 나 는'시 나 닷 컴 뉴스'와 비슷 할 뻔 했 습 니 다.사용자 의 당신 은 왕 이 클 라 이언 트 를 선택 할 것 이 라 고 확신 하기 어렵 지 않 습 니 다.결론 은'조작 성'이 제품 에 중요 한 요 소 를 가 진 다 는 것 입 니 다.
    그 다음 에 우 리 는 어떻게 실현 하 는 지 살 펴 보 겠 습 니 다.먼저 이 실현 방식 이 좋 지 않다 고 성명 하 겠 습 니 다.저 는 해결 방안 만 제시 할 뿐 여러분 들 은 자신의 생각 에 따라 혁신 을 할 수 있 습 니 다.
    도리:RelativeLayout+사용자 정의 스크롤 뷰.
    우 리 는 대체적으로 구조 가 그림 과 같다.
  
사실 기술적 인 함량 도 별로 없습니다.제 가 간단하게 소개 하 겠 습 니 다.빨간색 은 배경 사진 을 대표 하고 녹색 은 사용자 정의 ScrollView 를 대표 합 니 다.분홍색 은 당신 이 편집 하고 자 하 는 투명 한 구역 을 대표 합 니 다.설명 을 많이 할 뿐 모두 가 명확 할 것 입 니 다.코드 를 보 겠 습 니 다.
정서 적 효과(구체 적 인 리 셋 이벤트 요구 가 없 음)에 속 하기 때문에 사용자 정의 감청,리 셋 처리 가 필요 없습니다.제 가 직접 처리 할 UI 를 사용자 정의 컨트롤 에 주입 하면 그녀 가 편리 하고 저도 편리 합 니 다.
여기 서 설명 하 겠 습 니 다.앞부분 의 실현 에 오류 가 있 지만 자세히 읽 어 주시 기 바 랍 니 다.반드시 지식 을 배 울 수 있 을 것 이 라 고 믿 습 니 다.
우선 배경 그림 과 상단 라인 을 이 컨트롤 에 주입 합 니 다.이어서 우 리 는 온 터치 이벤트 사건 을 보 았 다.왜냐하면 처음부터 끝까지 그녀 가 작용 하고 있 기 때문이다.
   

    /***
  *     
  * 
  * @param ev
  */
 public void commOnTouchEvent(MotionEvent ev) {
  int action = ev.getAction();
  switch (action) {
  case MotionEvent.ACTION_DOWN:
   initTouchY = ev.getY();
   current_Top = initTop = imageView.getTop();
   current_Bottom = initBottom = imageView.getBottom();
   lineUp_current_Top = line_up_top = line_up.getTop();
   lineUp_current_Bottom = line_up_bottom = line_up.getBottom();
   break;
  case MotionEvent.ACTION_UP:
   /**      **/
   if (isNeedAnimation()) {
    animation();
   }
   isMoveing = false;
   touchY = 0;//       0.
   break;
  /***
   *           ，         deltaY   ，            ，                0.
   *             .
   */
  case MotionEvent.ACTION_MOVE:
   Log.e(TAG, "isMoveing=" + isMoveing);
   touchY = ev.getY();
   float deltaY = touchY - initTouchY;//     
   Log.e(TAG, "deltaY=" + deltaY);
   /**   : **/
   if (deltaY < 0 && inner.getTop() <= 0) {
    return;
   }
   //                  ，      
   isNeedMove();
   if (isMoveing) {
    //        
    if (normal.isEmpty()) {
     //          
     normal.set(inner.getLeft(), inner.getTop(),
       inner.getRight(), inner.getBottom());
    }
    //     (     1/3)
    float inner_move_H = deltaY / 5;
    inner.layout(normal.left, (int) (normal.top + inner_move_H),
      normal.right, (int) (normal.bottom + inner_move_H));
    /** image_bg **/
    float image_move_H = deltaY / 10;
    current_Top = (int) (initTop + image_move_H);
    current_Bottom = (int) (initBottom + image_move_H);
    imageView.layout(imageView.getLeft(), current_Top,
      imageView.getRight(), current_Bottom);
    /** line_up **/
    float line_up_H = inner_move_H;
    lineUp_current_Top = (int) (line_up_top + inner_move_H);
    lineUp_current_Bottom = (int) (line_up_bottom + inner_move_H);
    line_up.layout(line_up.getLeft(), lineUp_current_Top,
      line_up.getRight(), lineUp_current_Bottom);
   }
   break;
  default:
   break;
  }
 }

간단 한 설명:
MotionEvent.ACTION_DOWN:터치 하여 누 르 면 해당 하 는 좌 표를 얻 을 수 있 습 니 다.
MotionEvent.ACTION_MOVE:
안에 방법 이 있어 요.역할:우리 가 미 끄 러 지 는 것 은 ScrollView 자신 입 니까?아니면 우리 가 모 의 한 미끄럼 입 니까?
이 중에서 가장 많이 사용 되 는 것 은 view.layot(l,t,r,b)이다.역할 은 간단 하 다.설명 하지 않 는 다.자세 한 내용 은 소스 코드 를 참조 하 시기 바 랍 니 다.
MotionEvent.ACTION_UP:바로 뒷수습 을 하 는 것 입 니 다.주로 animation 방법 을 봅 니 다.
    여기 서 나 는 간단하게 설명 할 것 이다.왜냐하면 나 는 이곳 에서 약간의 시간 을 심 었 기 때문이다.
    예 를 들 어 우리 의 배경 그림 은 원래 좌표 가:(0,-190,800,300)이 고 손짓 에 따라(0,-100,800,390)90 픽 셀 로 옮 겼 다.그러면 우리 의 Translate Animation 은 어떻게 써 야 합 니까?나 는 예전 에 항상 마지막 좌표 가 초기 좌 표를 가리 키 는 것 이 아니 라 끝 이 아니 라 고 생각 했 는데 결국 너 는 발명 할 것 이다.애니메이션 은 기본적으로 작용 하지 않 고 스 쳐 지나 갈 것 이다.그 이 유 는 애니메이션 매개 변 수 는 플러스 라 고 생각 합 니 다.애니메이션 은(0,0)을 참고 물 로 하기 때 문 일 수도 있 습 니 다.따라서 애니메이션 을 Translate Animation line 로 써 야 합 니 다.up_Anim = new TranslateAnimation(0, 0,Math.abs(-190- （-100）), 0);이렇게 해서 우리 가 필요 로 하 는 애니메이션 효 과 는 실현 되 었 다.
    그러나 새로운 문제 가 또 발생 했다.
    당신 이 일정한 상태 로 내 려 간 후에 점점 위로 옮 기 면 빠르게 움 직 이 는 것 을 발명 하고 맨 위로 옮 길 때 갑자기 반등 효과 가 나타난다.이 효 과 는 물론 우리 가 필요 로 하 는 그런 것 이 아니다.우리 가 필요 로 하 는 효 과 는 일정한 수준 으로 내 려 간 다음 에 거꾸로 올 릴 때 점점 원점(중앙 위치)으로 옮 겨 서 멈 추 는 것 이다.상 당 김 이 라면 반등 효과 가 나타 나 지 않 고,하 당 김 이 풀 리 면 반등 효과 가 나타난다.
    복잡 하 게 묘사 되 어 있 습 니 다.구체 적 인 효 과 를 알 고 싶다 면 파 파 를 사용 해 보 세 요.사실 국내 에서 우수한 애플 리 케 이 션 UI 보다 외국 을 표절 한 것 입 니 다.페 이 스 북 을 사용 하면 발명 할 것 입 니 다.어떻게 하면 페 이 스 북 처럼 생 겼 는 지.다음 그림 을 보십시오.
 
    헤헤,죄송합니다.주제 에서 벗 어 났 습 니 다.위 에 있 는 문제 에 대해 간단히 설명 하 겠 습 니 다.
    우선,예 를 들 어 우리 가 손짓 으로 50 픽 셀 을 끌 어 내 렸 는데 사실은 스크롤 뷰 를 사용자 정의 하 는 아이,즉 리 니 어 레이 아웃 이라는 컨트롤 의 top 이 50 이 고 이때 getScrolly()의 값 은 0 입 니 다.그러나 이때 드 롭 다운 을 멈 추고 오히려 위로 끌 어 올 리 면 이때 getScrolly()는 0 부터 점점 커 집 니 다.우리 가 맨 위로 옮 기 면 스크롤 뷰 를 맨 아래로 옮 기 는 것 입 니 다.이때 isMoveing 은 true 이기 때문에 끌 어 올 리 면 반등 효과 가 나타 납 니 다.
    이 문 제 를 어떻게 해결 해 야 할 지 사실은 어렵 지 않 지만 나 는 오랫동안 고민 하고 시행 착 오 를 많이 걸 었 다.여기 서 제 가 마구 뛰 어 다 니 는 구간 과 어려움 을 설명 하 겠 습 니 다.그 당시 에 저 는 getScrolly()가 이렇게 말 을 듣 지 않 는데 제 가 굳이 ScrollView 의 아 이 를 조작 할 필요 가 있 겠 습 니까?왜 본 컨트롤 에 layot(l,t,r,b)를 직접 실행 하지 않 았 습 니까?나중에 이 논리 에 따라 update 를 진행 하 다가 차이 가 많 지 않 아 문제 가 다시 발생 했 습 니 다.드 롭 다운 할 때 ScrollView 자체 에 layot(l,t,r,b)를 실행 하면 반등 효 과 를 얻 을 수 있 습 니 다.그러나 이 때 는 미끄럼 을 할 수 없습니다.바로 ScrollView 자체 의 미끄럼 이 이유 없 이 금지 되 었 습 니 다.layot 일 때 매개 변수 가 잘못 되 었 다 고 의심 합 니 다.나중에 발명 을 자세히 수정 한 후에 불 성 이 미 끄 러 졌 다.그리고 구 글 은 한참 동안 소식 이 없 었 다.결국 포기 하고 다시 원점 으로 돌 아 왔 다.이어서 추측 하 다.공 을 들 이 는 것 은 마음 에 드 는 사람 을 저 버 리 지 않 는 셈 이지 요.결국 해결 방안 이 생각 났 으 니 도움 이 되 기 를 바 랍 니 다.
    그리고 위 에서 말 한 짧 은 말,예 를 들 어 우리 가 손짓 으로 50 픽 셀 을 당 겼 다 면 이때 touch 의 거 리 는 50 픽 셀 입 니 다.만약 에 이때 우리 가 반대로 당 겼 다 면 똑 같이 50 픽 셀 이 최초의 위치 로 돌아 가 야 합 니 다.여기까지 만 말 하면 모두 가 명확 해 졌 다 고 생각한다.우선 UP,DOWN 으로 나 누 어 작업 을 떠 나 야 합 니 다.DOWN 이 라면 드 롭 다운 후 끌 어 올 릴 때 사용자 정의 컨트롤 의 미끄럼 을 사용 하지 않 고 제스처 를 통 해 layot 를 실행 하여 50 픽 셀 을 실행 합 니 다.)
    위 에서 우 리 는 일부 코드 를 보 았 다.
   

/***
  *           inner.getMeasuredHeight():          
  * 
  * getHeight()：         
  * 
  * @return
  */
 public void isNeedMove() {
  int offset = inner.getMeasuredHeight() - getHeight();
  int scrollY = getScrollY();
  //   ScrollView  View         scrollY == 0,    true，
  //  ScrollView  View         getScrollY()==offset     ScrollView   .      true.
  if (scrollY == 0 || scrollY == offset) {
   isMoveing = true;
  }
 }

코드 는 간단 하지만 많이 설명 하고 명확 하지 않 으 면 소스 코드 를 자세히 보면 명확 합 니 다.
   
touch 이벤트 처리:

/***
  *     
  */
 public void animation() {
  TranslateAnimation image_Anim = new TranslateAnimation(0, 0,
    Math.abs(initTop - current_Top), 0);
  image_Anim.setDuration(200);
  imageView.startAnimation(image_Anim);
  imageView.layout(imageView.getLeft(), (int) initTop,
    imageView.getRight(), (int) initBottom);
  //       
  TranslateAnimation inner_Anim = new TranslateAnimation(0, 0,
    inner.getTop(), normal.top);
  inner_Anim.setDuration(200);
  inner.startAnimation(inner_Anim);
  inner.layout(normal.left, normal.top, normal.right, normal.bottom);
  /** line_up **/
  TranslateAnimation line_up_Anim = new TranslateAnimation(0, 0,
    Math.abs(line_up_top - lineUp_current_Top), 0);
  line_up_Anim.setDuration(200);
  line_up.startAnimation(line_up_Anim);
  line_up.layout(line_up.getLeft(), line_up_top, line_up.getRight(),
    line_up_bottom);
  normal.setEmpty();
  /**      **/
  if (current_Top > initTop + 50 && turnListener != null)
   turnListener.onTurn();
 }

설명:반환 값 이 true 이면 역할:ScrollView 의 미끄럼 을 금지 합 니 다.이때 Touch 이벤트 가 남아 있 습 니 다!!터치 사건 에 익숙 한 동창 이 라면 내 가 빈말 인 줄 알 았 을 거 야.하하,나 도 반찬 새 야.여기 걸 려 서 살 았 어.
마지막 으로 작은 버그 도 있 습 니 다.바로 그 상단 의 당 김 선 입 니 다.만약 에 ScrollView 관성 을 미 끄 러 뜨리 면 발명 할 것 입 니 다.상단 의 라인 이 따라 움 직 이지 않 았 습 니 다.사실은 관성 이 미 끄 러 질 때 우 리 는 getScrolly()의 가 치 를 얻 지 못 해서 생 긴 것 입 니 다.한참 동안 조 사 를 했 지만 관련 자 료 를 찾 지 못 했 습 니 다.이 문 제 는 임시로 여기에 남 았 습 니 다.시간 이 있 으 면 계속 합 니 다.
여기에 나 는 소스 코드 를 붙 일 것 이다

    /**    Touch       ：UP OR DOWN**/
   if (deltaY < 0 && state == state.NOMAL) {
    state = State.UP;
   } else if (deltaY > 0 && state == state.NOMAL) {
    state = State.DOWN;
   }

   if (state == State.UP) {
    deltaY = deltaY < 0 ? deltaY : 0;
    isMoveing = false;
    shutTouch = false;
   } else if (state == state.DOWN) {
    if (getScrollY() <= deltaY) {
     shutTouch = true;
     isMoveing = true;
    }
    deltaY = deltaY < 0 ? 0 : deltaY;
   }
    

효과 그림:
 
     
 화면 이 좀 추 하지만 UI 는 스스로 수요 에 따라 조정 할 수 있 습 니 다.