Fragment爲載體可自動佈局的CardView（GitHub上寫開源項目初體驗）

轉載請註明本文出自大苞米的博客（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 {

	@Override
	protected 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