android - 带有 Cardslib 库的 Material 卡

Question

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

问题是，卡片即将推出，但没有背景图片和操作按钮。

我要实现的卡片布局是:

这是 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"/>

这是 Activity 的代码

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 卡.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" />

内部 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 的帮助。这个图书馆太棒了:)

Answer 1

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

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

您的问题是布局。您的 RecyclerView 使用此卡片布局:card:list_card_layout_resourceID="@layout/native_recyclerview_card_layout"

您应该使用带有 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