안 드 로 이 드 모방 위 챗 목록 슬라이딩 삭제 가능 한 슬라이딩 컨트롤(1)

이번 에는 목록 이 미 끄 러 지면 서 삭 제 된 세 번 째 라운드 입 니 다.위 챗 을 모방 한 목록 이 미 끄 러 지면 삭 제 됩 니 다.먼저 이전 효과 그림: 

 앞의 글 에서 말 했 듯 이 오픈 소스 프레임 워 크 SwipeListView 의 실현 원 리 는 각 목록 item 에 상하 2 층 view 가 포함 되 어 있 고 일반 상태 에서 상층 의 view 는 하층 의 view 를 덮 고 있 습 니 다.사용자 가 상층 의 view 를 미 끄 러 지면 하층 의 view 가 표 시 됩 니 다.그러나 위 챗 목록 의 아 이 템 을 자세히 살 펴 보면 이 실현 방안 이 아 닌 것 이 분명 합 니 다.위 챗 의 아 이 템 은 단층 view 가 되 어야 합 니 다.다만 이 아 이 템 은 있 는 ListView 의 너 비 를 초과 하고 사용자 가 아 이 템 을 미 끄 러 뜨 릴 때 아 이 템 이 화면 을 초과 하 는 view 는 화면 에 나타 납 니 다.이런 미끄럼 실현 도 좋 습 니 다.
위 챗 의 실현 원 리 를 추측 한 이상 이 제 는 구체 적 인 실현 방안 을 찾 아야 합 니 다.저 는 처음에 생각 한 것 이 비교적 간단 합 니 다.가로 선형 레이아웃 LinearLayout 를 써 서 두 개의 키 구 조 를 포함 하 게 하 는 줄 알 았 습 니 다.왼쪽 의 서브 레이아웃 폭 은 부모 구 조 를 채 우 는 너비 로 설정 되 었 고 다른 키 구 조 는 자 연 스 럽 게 부모 구조의 표시 범 위 를 초과 할 것 이 라 고 생각 했 습 니 다.그러나 구체 적 으로 테스트 할 때 왼쪽 에 있 는 하위 레이아웃 이 부모 레이아웃 을 채 우 는 너비 로 설정 되 어 있 더 라 도 실제 표 시 될 때 두 개의 하위 레이아웃 이 부모 레이아웃 의 표시 범위 에 포함 되 어 있 고 오른쪽 에 있 는 하위 레이아웃 은 부모 레이아웃 의 표시 범 위 를 초과 할 수 없습니다.
한동안 고민 하 다가 우연히 ScrollView 의 또 다른 유형 이 Horizontal ScrollView 라 는 것 이 생각 났 습 니 다.이 안 드 로 이 드 가 제공 하 는 Horizontal ScrollView 는 하위 view 가 표시 범 위 를 초과 할 수 있 습 니 다.그러면 저 는 Horizontal ScrollView 를 직접 사용 하여 이 아 이 템 을 실현 할 수 있 습 니 다.저 는 컨트롤 을 사용자 정의 하여 Horizontal ScrollView 를 계승 하기 로 결 정 했 습 니 다.코드 안에 두 개의 키 레이아웃 을 직접 추가 하고 왼쪽 의 레이아웃 폭 을 이 컨트롤 의 자체 너비 로 채 워 서 오른쪽 에 있 는 레이아웃 이 컨트롤 의 표시 범 위 를 초과 하도록 합 니 다.그러나 신기 하지 않 습 니 다.Horizontal ScrollView 는 비교적 오만 하고 통제 하기 어렵 습 니 다.기이 한 bug 가 끊임없이 나타 납 니 다.예 를 들 어 왼쪽 의 서브 레이아웃 이 보 여 졌 지만 오른쪽 에 있 는 서브 레이아웃 은 초기 화 되 지 않 았 습 니 다.미 끄 러 지 기 는 커 녕 머리 가 썩 어 결국 어 쩔 수 없 이 잠시 내 려 놓 을 수 밖 에 없 었 다.
마지막 으로 사용자 정의 뷰 그룹 을 사용 하여 이 아 이 템 을 실현 할 생각 을 했 습 니 다.현재 많은 app 들 이 처음 시작 할 때 소개 적 인 네 비게 이 션 인터페이스 가 나타 납 니 다.사용자 가 한 페이지 한 페이지 미 끄 러 지고 네 비게 이 션 소 개 를 본 후에 app 에 들 어 갑 니 다.현재 이런 네 비게 이 션 소 개 는 대부분 ViewPager 로 이 루어 져 야 합 니 다.ViewPager 는 미 끄 러 지 는 두 개의 하위 페이지 를 동시에 화면 에 표시 할 수 있어 서 좋 은 체험 효 과 를 가 집 니 다.그러나 ViewPager 는 이후 슈퍼 port.v4 에서 도입 되 었 습 니 다.처음에는 없 었 습 니 다.처음에 이런 네 비게 이 션 소 개 는 어떤 방안 으로 이 루어 졌 습 니까?당연히 사용자 정의 ViewGroup 입 니 다.사실 supprot.v4.ViewPager 자체 가 사용자 정의 ViewGroup 입 니 다.사용자 정의 ViewGroup 을 사용 하여 네 비게 이 션 을 실현 하 는 것 에 대해 csdn 에 큰 소 가 전문 적 으로 글 을 써 서 소개 한 적 이 있 습 니 다.여 기 는 자세히 말 하지 않 겠 습 니 다.
이 편 에 서 는 사용자 정의 ViewGroup 을 사용 하여 item 의 하위 view 를 구현 하 는 방법 을 설명 합 니 다.부모 레이아웃 의 표시 범 위 를 초과 할 수 있 습 니 다.
SwipeItemView 를 쓰 고 ViewGroup 에서 계승 합 니 다.구조 방법 에서 왼쪽 레이아웃 의 인용 id 와 오른쪽 레이아웃 의 인용 id 를 입력 하고 왼쪽 레이아웃 과 오른쪽 레이아웃 을 초기 화 하 며 SwipeItemView 에 하위 view 로 추가 합 니 다.코드 는 다음 과 같 습 니 다.

private void init(Context context, AttributeSet attrs) {
    mScroller = new Scroller(context);

    ......

    if(mPrimaryViewID == -1)
      throw new RuntimeException(
          "Illegal attribute 'primaryView', make sure you have set it");

    mPrimaryView = LayoutInflater.from(getContext()).inflate(
        mPrimaryViewID, null);
    mPrimaryView.setClickable(false);
    addView(mPrimaryView, 0);
    if(mSlidingViewID != -1) {
      mSlidingView = LayoutInflater.from(getContext()).inflate(
          mSlidingViewID, null);
      mSlidingView.setClickable(false);
      addView(mSlidingView, 1);
    }
  }  

다음은 VIEwGroup 의 onMeasure()방법 을 다시 써 서 이 SwipeItemView 와 그 하위 view 의 폭 을 측정 해 야 합 니 다.그 중에서 먼저 들 어 가 는 height Measure Spec 에 포 함 된 height Size 를 가 져 와 야 합 니 다.height Size 의 값 이 height Measure Spec 와 같 을 때 전체 SwipeItemView 의 폭 을 측정 합 니 다.이것 은 우리 가 추가 로 처리 하지 않 습 니 다.height Size 가 들 어 오 는 height MeasureSpec 과 같 지 않 을 때 SwipeItemView 에 포 함 된 하위 view 의 너비 와 높이 를 측정 하 는 데 사 용 됩 니 다.여기 서 추가 처 리 를 하 겠 습 니 다.주로 SwipeItemView 디 스 플레이 범 위 를 초과 한 오른쪽 mSlidingView 를 대상 으로 합 니 다.넓 은 것 은 그 내용 만 감 싸 면 됩 니 다.넓 은 것 과 화면 범위 가 같 고 싶 지 않 습 니 다.따라서 이러한 매개 변 수 를 구성 합 니 다 MeasureSpec.MakeMeasureSpec(0,MeasureSpec.UNSPECIFIED).구체 적 인 코드 는 다음 과 같 습 니 다.

@Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);

    if(heightSize != heightMeasureSpec) {
      mPrimaryView.measure(MeasureSpec.makeMeasureSpec(widthSize, widthMode),
          MeasureSpec.makeMeasureSpec(heightSize, heightMode));

      if(mSlidingView != null) {
        mSlidingView.measure(MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED),
            MeasureSpec.makeMeasureSpec(heightSize, heightMode));
      }

    } else {
      mPrimaryView.measure(widthMeasureSpec, heightMeasureSpec);
      if(mSlidingView != null)
        mSlidingView.measure(widthMeasureSpec, heightMeasureSpec);
    }
  } 

     
그 다음 에 View Group 의 onLayout()방법 을 다시 쓰 는 것 입 니 다.하위 view 가 SwipeItemView 에 있 는 구체 적 인 위 치 를 배치 하 는 데 사 용 됩 니 다.주로 오른쪽 에 있 는 mSlidingView 를 왼쪽 에 있 는 mPrimary View 의 오른쪽 에 배열 하 는 것 입 니 다.구체 적 인 코드 는 다음 과 같 습 니 다.

@Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {
    mPrimaryView.layout(l, t, r, b);
    if(mSlidingView != null)
      mSlidingView.layout(r, t, r + mSlidingView.getMeasuredWidth(), b);
  }  

 자,구체 적 인 SwipeItemView 초기 화가 완료 되 었 습 니 다.다음 작업 은 무엇 을 해 야 합 니까?위의 구조 방법 을 보 세 요.mScroller=new Scroller(context)코드 를 보 았 습 니까?이 mScroller 를 사용 하여 SwipeItemView 가 미 끄 러 지 는 애니메이션 효 과 를 만들어 야 합 니 다.ViewGroup 에 서 는 scrollBy()와 scrollTo()두 가지 방법 으로 이 ViewGroup 보기 내용 의 위 치 를 이동 하 는 것 을 알 고 있 습 니 다.그 중에서 scrollBy()는 매개 변수 가 지정 한 거 리 를 이동 하고 scrollTo()방법 은 매개 변수 가 지정 한 위치 로 이동 합 니 다.그러나 scroll By()는 괜 찮 습 니 다.매번 거 리 를 조금 만 이동 하면 사용자 에 게 연속 적 인 애니메이션 효과 라 는 느낌 을 줄 수 있 습 니 다.그러나 scrollTo()는 순간 이동 입 니 다.중간 에 애니메이션 효과 가 없어 서 매우 갑 작 스 럽 습 니 다.그러면 우 리 는 mScroller 라 는 대상 을 사용 해 야 합 니 다.
Scroller 는 안 드 로 이 드 가 제공 하 는 모 바 일 애니메이션 효 과 를 실현 하 는 데 사 용 됩 니 다.Scroller 자 체 는 이동 하 는 애니메이션 을 실행 하 는 것 이 아 닙 니 다.Scroller 는 지휘자 로 서 더 많은 것 같 습 니 다.Scroller.startScroll()방법 을 호출 할 때 이 방법 은 우리 가 이동 하 는 초기 위치,이동 하 는 거리 와 시간 이 필요 합 니 다.간단하게 이해 하면 지정 한 시간 이 10s 라 고 가정 합 니 다.그러면 3s 일 때...ViewGroup 의 보기 내용 은 어느 위치 로 이동 해 야 합 니까?7s,어느 위치 로 이동 해 야 합 니까?그리고 이 시간 에 Scroller 가 계산 한 위 치 는 Scroller.getCurrX()와 Scroller.getCurrY()를 통 해 얻 을 수 있 습 니 다.이 과정 에서 Scroller 는 ViewGroup 의 coptute Scroll()방법 을 되 돌려 줍 니 다.이 리 셋 방법 에서...저 희 는 scrollto()를 호출 하여 구체 적 인 이동 작업 을 수행 합 니 다.우리 가 실현 하 는 이 scrollToWith Animation()방법 은 뒤의 SwipeListView 에 특정한 아 이 템 을 이동 시 키 고 이동 과정 에 애니메이션 효 과 를 가 져 다 주 는 방법 입 니 다.코드 는 다음 과 같 습 니 다:

 @Override
  public void computeScroll() {
    if(mScroller.computeScrollOffset()) {
      scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
    }
  }

  /**
   * just like scrollTo(), but with animation :D
   * */
  public void scrollToWithAnimation(int scrollX, int scrollY) {
    mScroller.abortAnimation();
    mScroller.startScroll(getScrollX(), getScrollY(),
        scrollX - getScrollX(), getScrollY() - scrollY, 300);
  }

 다음은 SwipeListView 라 는 사용자 정의 ListView 가 필요 합 니 다.다음 편 계속.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.