使用cardlib生成卡片并使用毕加索加载图像

Question

我正在使用cardslib（https://github.com/gabrielemariotti/cardslib）创建一个带卡片的项目并使用毕加索（http://square.github.io/picasso/），以便动态创建卡片并使用我从Parse中检索到的网址将图片加载到其中一个for循环。

我遇到的问题是，即使我从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而不是自己的XML。

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