? ? ? ?說到蘋果的卡片布局我就想起當年我的摯愛--web OS系統了。在功能機轉換到智能機的時代，Web oS系統是那樣的出類撥萃，傲壓群雄，只可惜現在流落到只能在電視上才能看到他的身影了。記得我的第一臺智能手機就是諾基亞的N81，為了這臺手機，我花掉了我的全部獎學金，還跟家里說謊掉錢了。一心只讀圣年書的我，從QQ都不知道掉進了智能手機的坑。

? ? ? ?在被諾基亞N81深深吸引的我很快就被Paml pixi這款手機迷倒了。多后臺，卡片式管理，動感的“小彩虹菜單”，迷人的便簽，還有那個酷帥的手勢操作，前衛的點金石無線充電。接著就是Paml pixi plus-->Pre-->Pre plus-->Pre2-->Pre3-->I touch.很快全都落盡我的懷里。然后就在各種論壇折騰，那種樂趣只能剩下回憶了。在web OS被HP拋棄后，才慢慢接觸了黑莓8830，蘋果，最后才是android。不得不說，Android的開源給了他強大的生命力。

? ? ? ?曾幾何時，我希望用Android系統復活Web OS，至少能把他的UI設計傳承下來。于是想盡辦法設計開發了一整套UI出來，在大學的時候，導師對我的作品非常給了很大的鼓勵。

? ? ? 如今，Android已不是當年所可以比擬的了，各種開源的如汗牛充棟。各種開發控件及UI設計，簡直就是淋漓滿目。特效更是流暢動感。這里說說v7的RecyclerView吧。RecyclerView的拓展能力非常優秀。不僅替代了傳統的ListView，GridView，還為瀑布流這種怪異的布局的實現變得非常方便。之前還在為滑動刪除，拖動換位這樣的控件搞的焦頭爛額，如今就僅僅是幾句代碼的事情了。最近我就用ReCyclerView變著法子來實現WEB OS的幾個經典UI（代碼比較粗糙）

? ? ??

? ? ? ?讓我們看看RecyclerView的神奇之處吧：

? ? ? ?在這里要涉及到幾個類，RecyclerView，ItemTouchHelper，ItemTouchHelper.Callback,LinearLayoutManager,RecyclerView.Adapter,RecyclerView.ViewHolder等。

? ? ? 首先，你要是現實ItemTouchHelper.Callback這個抽象類，實現里面的抽象方法

? ? ??getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) ? //配置可以拖動的方向和是否可以被滑動刪除，UP，DOWN，LEFT，RIGHT表示四個方向，START，END表示刪除的動作方向。

? ? ??onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) ? //交換的時候被調用

? ? ??onSwiped(RecyclerView.ViewHolder viewHolder, int direction) ? ?//移除的時候被調用

? ? ? onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) ? ? ?// 選中的ITEM發生改變被調用

? ? ? clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) ? ? ?//取消選中狀態被調用

? ? ? 然后

? ? ? ItemTouchHelper.Callback callback = new SimpleItemTouchHelperCallback(); ?//實例化Callback

? ? ? itemTouchHelper = new ItemTouchHelper(callback); ? //實例化

? ? ? itemTouchHelper.attachToRecyclerView(recyclerView); ? //綁定RecyclerView

? ? ? 就這樣一個可拖動Item，滑動item移除的ListView就搞定了。當然，基本的適配器，設置豎線線性布局還是很有必要的。

public class SimpleItemTouchHelperCallback extends ItemTouchHelper.Callback{private DragEvent mEvent;public SimpleItemTouchHelperCallback(DragEvent event){this.mEvent = event;}@Overridepublic boolean isItemViewSwipeEnabled() {return super.isItemViewSwipeEnabled();}@Overridepublic int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {final int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN | ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;final int swipFlags = ItemTouchHelper.START | ItemTouchHelper.END;return makeMovementFlags(dragFlags,swipFlags);}@Overridepublic boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {if(viewHolder.getItemViewType() != target.getItemViewType()) return false;mEvent.onItemSwap(viewHolder.getAdapterPosition(),target.getAdapterPosition());return true;}@Overridepublic void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {mEvent.onItemRemove(viewHolder.getAdapterPosition());}@Overridepublic void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {if(actionState != ItemTouchHelper.ACTION_STATE_IDLE){if(viewHolder instanceof OnViewHolderStatChanageListener){if(actionState == ItemTouchHelper.ACTION_STATE_SWIPE){OnViewHolderStatChanageListener listener = (OnViewHolderStatChanageListener)viewHolder;listener.onItemSelectedSwiped();}else if(actionState == ItemTouchHelper.ACTION_STATE_DRAG){OnViewHolderStatChanageListener listener = (OnViewHolderStatChanageListener)viewHolder;listener.onItemSelectedDrag();}}}super.onSelectedChanged(viewHolder, actionState);}@Overridepublic void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {super.clearView(recyclerView, viewHolder);if(viewHolder instanceof OnViewHolderStatChanageListener){OnViewHolderStatChanageListener listener = (OnViewHolderStatChanageListener)viewHolder;listener.onItemNormal();}} }
在這里我還定義了一個接口，DragEvent，為了我以后可以再其他地方干一些事。同樣，這個類的實現同樣適用表格布局的RecyclerView。那個便簽就是那樣實現的。

然而事情才剛剛開始。我想，如果把RecyclerView設置為橫向線性布局呢？是不是同樣適用呢？懷著猜想的嘗試了下，發現問題了，橫線的Item可以交換位置，卻不能豎向刪除。其實從

getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder)這個方法的視線可以看出：

int ?dragFlags 表示Item的可移動方向；

int ?swipFlags 表示Item刪除操作的方向；

只需要把Start | End 換成 UP | Down 即可。橫線的RecyclerView是不是很像那個卡片布局的樣子了？再對Item的布局做一下調整就OK了?？雌饋肀萓C瀏覽器的卡片頁面高端多了，那個還不能調整頁的順序，這個一點壓力也沒有。RecyclerView其實還有很多妙用，之前就在網看到有人用RecyclerView做柱形圖，這樣的腦洞想不佩服都不行。

? ? ? ? ?有句話說，方法總比困難多。我想問題的時候總會習慣性的去想想有沒有別的途徑或者方法可以實現。很多人一看到不規則的UI的時候就會想到如何從寫控件，事件分發，事件攔截，事件分析，布局分配，視圖重繪等機械式的思考過程，這樣就不會有創新可言了。不管怎么樣，多一種思路就多一種出路。有時候可以想想，比如線程安全有哪些類或者那些方式可以實現，比如，Vector，Collection.synchronizedList()，Thread.join()，synchronized關鍵字，CountDownLatch，ReentrantLock，Handler等。有時候覺得編程很寫文章有點類似，會的詞匯多了，寫出來的文章多爛都不覺得那么乏味。

后續：http://blog.csdn.net/rj113/article/details/65660756

總結

以上是生活随笔為你收集整理的用RecyclerView来实现苹果后台样式的卡片布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。