Создайте карточки с карточками и загрузите изображения с помощью picasso

Question

Я использую cardslib (https://github.com/gabrielemariotti/cardslib), чтобы создать проект с карточками и использовать picasso (http://square.github.io/picasso/), чтобы динамически создавать открытки и загружать в них изображения с URL-адресами, которые я извлекаю из 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 вместо того, чтобы создавать свои собственные.

У меня есть некоторые пользовательские карты с примерами Пикассо в некоторых из моих проектов на GitHub: check this project for more examples