Android自定義View仿探探卡片滑動效果

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

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

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

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

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

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

是的，沒有一點廢話，自定義屬性可以根據(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, "向往的藍天白云");
 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;
 }
}

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: