Fragment為載體可自動布局的CardView（GitHub上寫開源項目初體驗），cardviewgithub

Fragment為載體可自動布局的CardView（GitHub上寫開源項目初體驗），cardviewgithub

轉載請註明本文出自大苞米的部落格（http://blog.csdn.net/a396901990），謝謝支援！

開篇廢話：

前些天一直在看Android5.0 的Material Desgin，裡面新增了一個新的控制項——CardView。從Google這次直接提供了CardView控制項就可以看出它已經變的非常流行了。

在此之前我們可以通過設定圓角邊框來類比CardView效果，但現在既然Google已經提供了新控制項就沒有理由不用它了。而我之前在學自訂布局的時候寫了一個CardView自動布局的小Demo——ANDROID自訂視圖——仿瀑布布局（附源碼）

剛好最近正好在學Git，而且也想試試CardView在5.0以前版本的使用效果，所以將它稍微改造了下寫成一個Library形式的Demo放在Github上。在介紹之前先來看下示範效果：

     

簡介：

剛才已經說過本文的Demo是從之前文章裡的Demo改造過來的，所以需要詳細瞭解的話推薦先閱讀之前那篇文章。

下面簡單介紹一下這個Demo的功能：

1.使用了Google在Android5.0提供的新控制項CardView：

我在之前介紹Android 5.0 Material Desgin的文章中介紹過如何在5.0裡使用CardView，這個例子則介紹如何在5.0之下使用它。

2.以Fragment為載體顯示CardView：

對比上個demo，本例的CardView裡面裝載的不是一個簡單視圖，而是一個Fragment，所以我們可以把一系列的邏輯放在一個CardView之內。

3.可以動態設定螢幕上顯示的CardView數量：

在很多的app中大家都習慣使用viewpager來左右滑動視圖切換fragment去顯示不同的內容，但隨著螢幕越來越大和平板等因素一個螢幕顯示多個Fragment會更加直觀並且能更加合理的利用空間。

比如示範中豎屏和橫屏中螢幕上每行顯示的CardView數目不同。

4.可以動態增加和刪除CardView

對比上個demo，不僅使用Fragment作為CardView的載體，並且可以動態刪除和添加CardView（添加功能還沒時間寫，但介面已經寫好了）。

5.以Library形式放在GitHub上開源

仿照GitHub上的開源項目，我將這個Demo做成以Library形式放在GitHub上開源，如果大家有需要可以將自訂的fragment（需要繼承自library包中CardFragment）加入到以library包中的CardManger中，並使用library包中的CardScrollView作為布局即可實現上面效果（稍後詳解）

不足：

1.項目中的註解還沒加。。。習慣不好應該是邊寫邊加。。。

2.刪除時CardView中的子view的觸摸事件有些問題，會慢慢改進。。。

3.轉螢幕或者退出重進時沒做恢複和記錄處理。。。

4.還有太多不足的地方，大家就看看就好了，如果大家有改進意見可以留言。如果能直接在Github上提pull request更好了。。。

使用：

1.將項目clone下來或直接下載解壓：

GitHub地址為：https://github.com/a396901990/CardView_AutoLayout

2.匯入eclipse中目錄結構如下所示：

autolayoutLib就是我封裝好的library檔案

cardviewLib是Google在Android 5.0中support-7中的cardview jar包。

MainActivity是示範程式

他們的關係是cardviewLib是autolayoutLib的library，autolayoutLib是MainActivity的library

3.使用：

這裡簡單介紹下MainActivity裡是如何使用封裝好的autolayoutLib：

1.首先要使自訂的Fragment繼承autolayoutLib中的CardFragment，並有些必須要調用的方法：

// 首先必須繼承library包中CardFragment類public class IDFragment    extends CardFragment{    ImageView arrow;    LinearLayout expandedView;    boolean isShow = false;    @Override    public View onCreateView( LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState )    {        return super.onCreateView(inflater, container, savedInstanceState);    }    @SuppressLint("InflateParams")     @Override    public void onActivityCreated( Bundle savedInstanceState )    {    // 需要為該fragment的rootview設定觸摸監聽，具體實現看library包中CardFragment類        getView().setOnTouchListener(this);                super.onActivityCreated(savedInstanceState);        // 需要調用CardFragment中的setCardView()方法去設定fragment的視圖        setCardView(getActivity().getLayoutInflater().inflate(R.layout.id_card, null, false));                // 如果需要設定標題則需要調用CardFragment中的setTitle()方法        setTitle("RESUME");        arrow = (ImageView) getView().findViewById(R.id.arrow);        expandedView = (LinearLayout) getView().findViewById(R.id.expandedView);        arrow.setOnClickListener(new View.OnClickListener()            {                @Override                public void onClick( View arg0 )                {                    expandedView.setVisibility(isShow ? View.VISIBLE : View.GONE);                    arrow.setImageDrawable(isShow ? getResources().getDrawable(android.R.drawable.arrow_up_float) : getResources().getDrawable(android.R.drawable.arrow_down_float));                    isShow = !isShow;                }            });    }}

主要就是以上四個註解中的內容必須要實現，剩餘的就正常寫fragment

2.在Activity中添加自訂的CardFragment到CardManager中：

public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);initCrads();setContentView(R.layout.main_layout);}// 將需要顯示的Fragment存放在CardManager類中，接收的類型是一個CardFragment類型的List（必須在setContentView之前調用）    public void initCrads()    {        List<CardFragment> mCardFragments =  new ArrayList<CardFragment>();         mCardFragments.add(new IDFragment());        mCardFragments.add(new CalcFragment());        mCardFragments.add(new PicFragment());        mCardFragments.add(new ClockFragment());                CardManager.getInstance().setCardFragments(mCardFragments);    }}

3.Activity中的布局檔案要使用CardScrollView：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:auto="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <com.dean.autolayout.CardScrollView        android:id="@+id/myScrollView"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_margin="5dip"        auto:columns="1" >    </com.dean.autolayout.CardScrollView></LinearLayout>

如何使用已經介紹完畢，下面來簡單介紹一下autolayoutLib：

autolayoutLib：

所有邏輯都封裝在這個library中，大家可以根據上面介紹的autolayoutLib使用步驟來作為切入口來瞭解它。

簡單回憶下上面使用autolayoutLib的三步驟：

1.首先要使自訂的Fragment繼承autolayoutLib中的CardFragment

2.在Activity中添加自訂的CardFragment到CardManager中

3.Activity中的布局檔案要使用CardScrollView

所以可以看出autolayoutLib中無非就是這3個類。

下面來看下它的目錄結構：

主要需要看的我已經用紅線框起來了，下面來簡單介紹一下它們的作用：

CardFragmentAdapter：

繼承自FragmentPagerAdapter，作用就是CardFragment的適配器。

CardScrollView：

繼承自ScrollView，在這個layout中存放了所有需要顯示的視圖，CardFragment的添加刪除和適配器的操作都在其中。

CardManager：

一個存放所有CardFragment的model類，我將其定義為單例模式這樣可以在全域儲存一份就可以了

AutoCardLayout：

通過這個自訂的laiyout可以實現根據設定的列值來顯示每行的CardView數量，別且會按照類似於瀑布布局的方式來顯示他們。具體可以看之前的文章有詳細講這個類。

CardFragment：

自訂Fragment的基類，繼承自Fragment。封裝了一些處理CardFragment的方法。

cardview_container.xml：

CardView的布局類，可以在這裡設定CardView的圓角大小和背景等等。

結束：

首先原諒我沒有詳細的介紹autolayoutLib。主要原因就是我實在沒時間了，寫到這時已經淩晨3點了。

最近實在是太忙了，開始系統的學習Git，還有裝逼神器vim，而且腦子裡還有幾個Demo準備實現。最關鍵的是馬上魔獸6.0要開了，基友已經開催了。。。

如果大家對這個demo有興趣的話可以下載下來看看，但想直接把這個lib用在項目裡是不可能的，具體原因我在上面簡介的時候提過了。主要也是我太懶了，沒時間去完善它，畢竟寫它的目的主要是為了練習使用git。

過些日子等不忙時可能會繼續沿著它擴充一些新的功能。

為防止有人懶得看文章，我這裡再把GitHub的地址寫一下：

https://github.com/a396901990/CardView_AutoLayout