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

2019-10-21 21:27:02

字體：大中小

供稿：網(wǎng)友

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

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

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

這個(gè)自定義View用法也很簡(jiǎn)單，首先從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"/>

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

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ì)列來(lái)添加數(shù)據(jù)，顯示的順序就是隊(duì)列的順序。完整的代碼已經(jīng)上傳github

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。

注：相關(guān)教程知識(shí)閱讀請(qǐng)移步到Android開(kāi)發(fā)頻道。

上一篇：RecyclerView實(shí)現(xiàn)探探卡片滑動(dòng)效果

下一篇：RecyclerView+CardView實(shí)現(xiàn)橫向卡片式滑動(dòng)效果