使用 cardslib 生成卡片并使用 picasso 加载图像

Question

我正在使用 cardslib (https://github.com/gabrielemariotti/cardslib) to create a project with cards and use picasso (http://square.github.io/picasso/)，以便动态创建卡片并使用我在 for 循环中从 Parse 检索到的 url 将图片加载到卡片中。

我遇到的问题是，即使我从 Parse 中检索到正确的数据，所有卡片中也只加载了一张图像。为每张单独的卡片正确加载标题、副标题等，只有图像到处都是一样的。

我的代码是：

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


    final    CardArrayAdapter mCardArrayAdapter = new CardArrayAdapter(this,cards);

    mRecyclerView = (CardListView) this.findViewById(R.id.carddemo_largeimage_text);



    AnimationAdapter animCardArrayAdapter = new SwingBottomInAnimationAdapter(mCardArrayAdapter);
    animCardArrayAdapter.setAbsListView(mRecyclerView);
    mRecyclerView.setExternalAdapter(animCardArrayAdapter, mCardArrayAdapter);




    ParseQuery<ParseObject> query = ParseQuery.getQuery("places");

    query.findInBackground(new FindCallback<ParseObject>() {
        public void done(List<ParseObject> List, ParseException e) {
            if (e == null) {

                for ( i=0; i<List.size();i++){
                    id=new String();
                    id=List.get(i).getString("picture");
                    System.out.println(i+"        "+ id);


                    MaterialLargeImageCard card =
                            MaterialLargeImageCard.with(mContext)
                                    .setTextOverImage(List.get(i).getString("place_id"))
                                    .setTitle(List.get(i).getString("subtitle"))
                                    .setSubTitle(List.get(i).getString("description"))
                                    .useDrawableExternal(new MaterialLargeImageCard.DrawableExternal() {
                                        @Override
                                        public void setupInnerViewElements(ViewGroup parent, View viewImage) {

                                            Picasso.with(mContext).setIndicatorsEnabled(true);  //only for debug tests
                                            Picasso.with(mContext)
                                                    .load(id)
                                                    .error(R.drawable.ic_launcher)
                                                    .into((ImageView) viewImage);
                                        }
                                    })
                                    .setupSupplementalActions(R.layout.carddemo_native_material_supplemental_actions_large, actions)
                                    .build();
                    cards.add(card);
                    mCardArrayAdapter.notifyDataSetChanged();


                    card.setOnClickListener(new Card.OnCardClickListener() {
                        @TargetApi(Build.VERSION_CODES.LOLLIPOP)
                        @Override
                        public void onClick(Card card, View view) {
                            Toast.makeText(mContext, " Click on ActionArea ", Toast.LENGTH_SHORT).show();
                            onClickStart();
                            Intent myIntent = new Intent(MainActivity.this, ParallaxToolbarScrollViewActivity.class);
                            //yIntent.putExtra("key", value); //Optional parameters

                            MainActivity.this.startActivity(myIntent);

                        }
                    });



                }

            } else {
                Log.d("score", "Error: " + e.getMessage());
            }
        }
    });

我使用的布局是： activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card="http://schemas.android.com/apk/res-auto"
xmlns:pew="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"

tools:context=".MainActivity">


<it.gmariotti.cardslib.library.view.CardListView
    android:id="@+id/carddemo_largeimage_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card:list_card_layout_resourceID="@layout/rowcard"
    style="@style/card_external"
    /></RelativeLayout>

rowcard.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card="http://schemas.android.com/apk/res-auto"
xmlns:pew="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"

tools:context=".MainActivity">
<it.gmariotti.cardslib.library.view.CardViewNative
    android:id="@+id/list_cardId"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card:card_layout_resourceID="@layout/native_material_largeimage_text_card"
    style="@style/card_external"
    /></RelativeLayout>

native_material_largeimage_text_card.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card="http://schemas.android.com/apk/res-auto"
xmlns:pew="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Card visible layout -->
<it.gmariotti.cardslib.library.view.ForegroundLinearLayout
    android:id="@+id/card_main_layout"
    style="@style/card.native.main_layout_foreground"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <it.gmariotti.cardslib.library.view.component.CardThumbnailView
        style="@style/card.native.card_thumbnail_outer_layout"
        android:id="@+id/card_thumbnail_layout"
        android:layout_width="match_parent"
        card:card_thumbnail_layout_resourceID="@layout/native_thumbnail_largematerial"
        android:layout_height="match_parent"/>
    <!-- Main Content View -->
    <FrameLayout
        android:id="@+id/card_main_content_layout"
        style="@style/card.native.material_large_image_content_outer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</it.gmariotti.cardslib.library.view.ForegroundLinearLayout>
<View
    android:layout_width="fill_parent"
    android:layout_height="1dp"
    android:background="@color/greydiv"/>
<ViewStub
    android:id="@+id/card_supplemental_actions_vs"
    android:inflatedId="@+id/card_supplemental_actions"


    android:layout_width="match_parent"
    android:layout_height="wrap_content"/></LinearLayout>

和native_thumbnail_largematerial.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="@dimen/card_material_largeimage_height">
<com.fmsirvent.ParallaxEverywhere.PEWImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/card_thumbnail_image"
    android:transitionName="test"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:scaleType="centerCrop"
    style="@style/card.native.card_thumbnail_image"/>
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingRight="@dimen/card_thumbnail_image_text_over_padding_right"
    android:paddingLeft="@dimen/card_thumbnail_image_text_over_padding_left"
    android:paddingTop="@dimen/card_thumbnail_image_text_over_padding_top"
    android:paddingBottom="@dimen/card_thumbnail_image_text_over_padding_bottom">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:fontFamily="@string/card_font_fontFamily_image_text_over"
        android:id="@+id/card_thumbnail_image_text_over"
        style="@style/card_thumbnail_image_text_over_textstyle"
        />
</FrameLayout></FrameLayout>

Answer 1

我几乎所有的卡片都同时使用 CardsLib 和 picasso。我建议您制作一个 CustomCard 来扩展卡片并接收一个 ParseObject 作为卡片的参数。

这将使您的代码更加简单，并且您可以通过这种方式将卡片添加到列表中：

for(ParseObject p : List) {
    cards.add(new MyCustomCard(mContext, p));
}

您的自定义卡片看起来像这样：

public class MyCustomCard extends Card implements Card.OnCardClickListener {

    private static final String LOG_TAG = MyCustomCard.class.getSimpleName();
    private ParseObject parseObject;

    public MyCustomCard(Context context, ParseObject data) {
        super(context, R.layout.my_custom_layout);
        this.parseObject = data;
        this.setOnClickListener(this);
    }

    @Override
    public void setupInnerViewElements(ViewGroup parent, View view) {
        super.setupInnerViewElements(parent, view);

        ImageView imageView = (ImageView)         view.findViewById(R.id.data_thumbnail);
        TextView title = (TextView) view.findViewById(R.id.title);
        TextView text = (TextView) view.findViewById(R.id.text);

        if(parseObject != null) {
            Picasso.with(getContext()).load(parseObject.getString("picture")).fit().into(imageView);
            title.setText(parseObject.getString("title"));
            text.setText(parseObject.getString("text"));
        }
    }

    @Override
    public void onClick(Card card, View view) {
       // in case your cards need to click on something. You don't need to 
       // override onCLick if you don't wish to have click functionality on the cards

    }
}

您甚至可以扩展 MaterialLargeImageCard 并使用它自己的 XML 而不是自己制作。

我在 github 上的一些项目中有一些带有 Picasso 示例的自定义卡片：check this project for more examples

使用 cardslib 生成卡片并使用 picasso 加载图像

Generate cards with cardslib and load images with picasso

android

material-design

picasso

cardslib