Android 사용자 정의 뷰 탐색 카드 슬라이딩 효과

Android 사용자 정의 View 모방 탐색 카드 가 미 끄 러 지 는 효과 인터넷 에서 많은 사람들 이 실현 방향 을 설명 했다.대부분 RecyclerView 로 이 루어 졌 지만 우 리 는 오늘 실현 방향 을 바 꾸 고 사용자 정의 View Group 으로 만 이 실현 을 해결 했다.
다음은 우리 가 먼저 실현 한 효 과 를 살 펴 보 자. 

이 사용자 정의 View 사용법 도 간단 합 니 다.먼저 github 에서 다운로드 하거나 fork 라 는 항목 을 레이아웃 에 추가 합 니 다.

<com.liyafeng.view.swipecard.SwipeCardLayout
 android:id="@+id/scl_layout"
 android:layout_width="match_parent"
 android:layout_height="match_parent"/>

예,쓸데없는 말 이 없습니다.사용자 정의 속성 은 자신의 요구 에 따라 추가 할 수 있 습 니 다.다음은 코드 초기 화 입 니 다:

public class SwipeCardActivity extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_swipe_card);
 SwipeCardLayout scl_layout=(SwipeCardLayout)findViewById(R.id.scl_layout);

 Queue<CardEntity> data = new LinkedList<>();
 CardEntity cardEntity1 = new CardEntity(R.drawable.f1, "        ");
 CardEntity cardEntity2 = new CardEntity(R.drawable.f2, "       ");
 CardEntity cardEntity3 = new CardEntity(R.drawable.f3, "       ");
 CardEntity cardEntity4 = new CardEntity(R.drawable.f4, "     ");
 CardEntity cardEntity5 = new CardEntity(R.drawable.f5, "       ");
 data.add(cardEntity1);
 data.add(cardEntity2);
 data.add(cardEntity3);
 data.add(cardEntity4);
 data.add(cardEntity5);
 scl_layout.setAdapter(new SwipeCardLayout.CardAdapter<CardEntity>(data) {
  @Override
  public View bindLayout() {
  return LayoutInflater.from(SwipeCardActivity.this).inflate(R.layout.card_layout,null);
  }

  @Override
  public void bindData(CardEntity data, View convertView) {

  ImageView iv_card = (ImageView)convertView.findViewById(R.id.iv_card);
  TextView tv_card = (TextView) convertView.findViewById(R.id.tv_card);
  iv_card.setImageResource(data.resId);
  tv_card.setText(data.content);
  }
 });
 scl_layout.setOnSwipeListener(new SwipeCardLayout.OnSwipeListener() {
  @Override
  public void onSwipe(int type) {
  switch (type) {
   case SwipeCardLayout.TYPE_RIGHT:
   Toast.makeText(SwipeCardActivity.this, "right", Toast.LENGTH_SHORT).show();

   break;
   case SwipeCardLayout.TYPE_LEFT:
   Toast.makeText(SwipeCardActivity.this, "left", Toast.LENGTH_SHORT).show();
   break;
  }
  }
 });
 }

 class CardEntity {

 public CardEntity(int resId, String content) {
  this.resId = resId;
  this.content = content;
 }

 public int resId;
 public String content;
 }
}

데 이 터 를 하나의 대기 열 로 추가 해 야 합 니 다.표시 하 는 순 서 는 대기 열의 순서 입 니 다.완전한 코드 가 업로드 되 었 습 니 다github
다음은 실현 원 리 를 간단히 말씀 드 리 겠 습 니 다.우 리 는 두 개의 사용자 정의 View Group 으로 두 개의 Card 를 정의 합 니 다.하 나 는 위 에 있 고 하 나 는 아래 에 있 으 며,그것 의 onTouch Event()방법 을 다시 써 서 손가락 을 따라 미 끄 러 지 는 것 을 실현 합 니 다.우리 가 손가락 을 놓 을 때 카드 가 이동 하 는 거리 가 짧 으 면 애니메이션 을 실행 하여 카드 를 원래 위치 로 리 셋 합 니 다.만약 에 이동 하 는 거리 가 멀 면 우 리 는 애니메이션 을 실행 하여 카드 를 화면 에서 옮 깁 니 다.애니메이션 이 끝 난 후에 우 리 는 아래 의 카드 를 View 의 bringToFront()방법 으로 위로 이동 합 니 다.그리고 화면 을 막 옮 긴 카드 는 하층 으로 내 려 갑 니 다.그리고 그것 을 시작 위치 로 리 셋 하면 됩 니 다.
이렇게 해서 우 리 는 두 개의 카드 교 체 를 통 해 보기 의 재 활용 을 실현 했다.이것 은 이 컨트롤 의 핵심 부분 이다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.