Android自定義View仿探探卡片滑動(dòng)效果

更新時(shí)間：2020年04月08日 11:06:49 作者：pop1234o

這篇文章主要為大家詳細(xì)介紹了Android自定義View仿探探卡片滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Android自定義View仿探探卡片滑動(dòng)這種效果網(wǎng)上有很多人已經(jīng)講解了實(shí)現(xiàn)思路，大多都用的是RecyclerView來實(shí)現(xiàn)的，但是我們今天來換一種實(shí)現(xiàn)思路，只用一個(gè)自定義的ViewGroup來搞定這個(gè)實(shí)現(xiàn)。

下面我們先看一下實(shí)現(xiàn)的效果：

這個(gè)自定義View用法也很簡單，首先從github上下載或者fork這個(gè)項(xiàng)目，在布局中添加：

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

是的，沒有一點(diǎn)廢話，自定義屬性可以根據(jù)自己的需求來添加。下面是代碼中初始化：

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, "向往的藍(lán)天白云");
 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;
 }
}

這里必須要用一個(gè)隊(duì)列來添加數(shù)據(jù)，顯示的順序就是隊(duì)列的順序。完整的代碼已經(jīng)上傳github

接下來簡單說一下實(shí)現(xiàn)原理，我們用兩個(gè)自定義的ViewGroup來定義兩個(gè)Card，一個(gè)在上，一個(gè)在下，且重寫它的onTouchEvent()方法，來實(shí)現(xiàn)跟隨手指來滑動(dòng)。當(dāng)我們松開手指的時(shí)候，如果Card移動(dòng)的距離短，那么就執(zhí)行動(dòng)畫將Card重置到原來位置，如果移動(dòng)的距離比較遠(yuǎn)，我們就執(zhí)行動(dòng)畫將Card移出屏幕，當(dāng)動(dòng)畫結(jié)束后，我們將下面的Card通過View的bringToFront()方法移動(dòng)到上層，而剛剛移出屏幕的那個(gè)Card就會(huì)到下層，然后再將它重置到起始位置即可。
這樣我們通過兩個(gè)Card交替來實(shí)現(xiàn)了視圖的復(fù)用，這是這個(gè)控件的核心部分。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: