材料卡与Cardslib库

时间:2015-01-13 11:16:06

标签: android android-5.0-lollipop android-recyclerview cardslib

我正在从Github的Cardslib库中实现新的Material Card设计。图书馆链接:Cardslib Github 但是我无法在Recycler视图中实现多张卡片。如果有人已经实现了新的Cardslib v2库,那将非常有用。

问题在于,卡片即将到来,但那些卡片没有背景图像和操作按钮。

我想要实现的卡片布局是:

Card Layout

以下是RecyclerView的代码

<it.gmariotti.cardslib.library.recyclerview.view.CardRecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="10dp"
        card:list_card_layout_resourceID="@layout/native_recyclerview_card_layout"
        android:id="@+id/card_recyclerview"/>

以下是活动的代码

public class AboutActivity extends ActionBarActivity {


    final int TOTAL_CARDS = 3;
    //private CardArrayAdapter
    private CardArrayRecyclerViewAdapter mCardArrayAdapter;
    private CardRecyclerView mRecyclerView;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.about_activity);
        ArrayList<Card> cards = new ArrayList<>();

        mCardArrayAdapter = new CardArrayRecyclerViewAdapter(this, cards);

        //Staggered grid view
        CardRecyclerView mRecyclerView = (CardRecyclerView) findViewById(R.id.card_recyclerview);
        mRecyclerView.setHasFixedSize(false);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));

        //Set the empty view
        if (mRecyclerView != null) {
            mRecyclerView.setAdapter(mCardArrayAdapter);
        }

        //Load cards
        new LoaderAsyncTask().execute();
    }

    private ArrayList<Card> initCard() {

        ArrayList<Card> cards = new ArrayList<Card>();

        for (int i = 0; i < TOTAL_CARDS; i++) {


            MaterialLargeImageCard card = new MaterialLargeImageCard(this);
            //card.setInnerLayout(R.layout.native_material_largeimage_text_card);
            card.setTextOverImage("Italian Beaches");
            card.setDrawableIdCardThumbnail(R.drawable.card_background_01);

            //Set the title and subtitle in the card
            card.setTitle("This is my favorite local beach");
            card.setSubTitle("A wonderful place");

            // Set supplemental actions
            TextSupplementalAction t1 = new TextSupplementalAction(this, R.id.action1);
            t1.setOnActionClickListener(new BaseSupplementalAction.OnActionClickListener() {
                @Override
                public void onClick(Card card, View view) {
                    Toast.makeText(AboutActivity.this, " Click on Text SHARE ", Toast.LENGTH_SHORT).show();
                }
            });
            card.addSupplementalAction(t1);

            //Set the layout for supplemental actions
            card.setLayout_supplemental_actions_id(R.layout.about_card_supplemental_actions);

            //Very important call: build the card
            card.build();
            cards.add(card);

        }

        return cards;
    }

    private void updateAdapter(ArrayList<Card> cards) {
        if (cards != null) {
            mCardArrayAdapter.addAll(cards);
        }
    }

    class LoaderAsyncTask extends AsyncTask<Void, Void, ArrayList<Card>> {

        LoaderAsyncTask() {
        }

        @Override
        protected ArrayList<Card> doInBackground(Void... params) {
            //elaborate images
            //SystemClock.sleep(1000); //delay to simulate download, don't use it in a real app

            ArrayList<Card> cards = initCard();
            return cards;

        }

        @Override
        protected void onPostExecute(ArrayList<Card> cards) {
            //Update the adapter
            updateAdapter(cards);
            //displayList();
        }
    }
}

更新:

material_card.xml:

<it.gmariotti.cardslib.library.view.CardViewNative
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card="http://schemas.android.com/apk/res-auto"
    android:id="@+id/list_cardId"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/native_recyclerview_card.base"
    card:card_layout_resourceID="@layout/native_material_largeimage_text_card"/>

在布局xml中:

<it.gmariotti.cardslib.library.recyclerview.view.CardRecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/myCardList"
        card:list_card_layout_resourceID="@layout/material_card" />

Inside For循环:

ArrayList<BaseSupplementalAction> actions = new ArrayList<BaseSupplementalAction>();

            // Set supplemental actions
            TextSupplementalAction t1 = new TextSupplementalAction(this, R.id.action1);
            t1.setOnActionClickListener(new BaseSupplementalAction.OnActionClickListener() {
                @Override
                public void onClick(Card card, View view) {
                    Toast.makeText(AboutActivity.this," Click on Text SHARE "+card.getTitle(),Toast.LENGTH_SHORT).show();
                }
            });
            actions.add(t1);



            //Create a Card, set the title over the image and set the thumbnail
            MaterialLargeImageCard card =
                    MaterialLargeImageCard.with(this)
                            .setTextOverImage("Italian Beaches "+i)
                            .setTitle("This is my favorite local beach "+i)
                            .setSubTitle("A wonderful place")
                            .useDrawableId(R.drawable.card_background_01)
                            .setupSupplementalActions(R.layout.about_card_supplemental_actions, actions)
                            .build();

            card.setOnClickListener(new Card.OnCardClickListener() {
                @Override
                public void onClick(Card card, View view) {
                    Toast.makeText(AboutActivity.this," Click on ActionArea ",Toast.LENGTH_SHORT).show();
                }
            });

            card.build(); 
            cards.add(card);

更新2

在做了一些实验后,我认为这可能是罪魁祸首

<it.gmariotti.cardslib.library.recyclerview.view.CardRecyclerView
        android:id="@+id/myCardList"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="10dp"
        card:list_card_layout_resourceID="@layout/material_card" />

这里即使我将material_card重命名为其他内容,它也可以很好地编译。我认为“card:list_card_layout_resourceID =”@ layout / material_card“”不会被触发。

更新3

终于解决了。问题出在xml声明中。我错误地复制了它。 xmlns:card =“http://schemas.android.com/apk/res-auto”是正确的

非常感谢@Gabriele的帮助。这个图书馆只是摇滚:)

1 个答案:

答案 0 :(得分:4)

你可以在这里找到一个例子:

https://github.com/gabrielemariotti/cardslib/blob/dev/demo/stock/src/main/java/it/gmariotti/cardslib/demo/fragment/nativeview/NativeRecyclerViewMaterialCardFragment.java

您的问题是布局。 您的RecyclerView使用此卡布局: 卡:list_card_layout_resourceID =&#34; @布局/ native_recyclerview_card_layout&#34;

您应该使用带有material_card_layout的卡片布局。

示例(上例中使用的布局): https://github.com/gabrielemariotti/cardslib/blob/dev/demo/stock/src/main/res/layout/native_recyclerview_material_card_layout.xml

另外,我建议你使用构建器代替卡的标准构造函数。

注意。 我正在调查一个错误: https://github.com/gabrielemariotti/cardslib/issues/361