生成与毕加索cardslib和负载图像卡 [英] Generate cards with cardslib and load images with picasso

问题描述

我使用cardslib（ https://github.com/gabrielemariotti/cardslib ）创建用卡，使用毕加索项目（ http://square.github.io/picasso/ ），在为了动态地创建卡和负载的图片到他们，我是从解析检索一个for循环的URL。

我的问题是，即使我检索解析正确的数据，只有一个图像中的所有卡片加载。标题，字幕等正确加载每个单独卡，只有图像，到处都是一样的。

我的code是：

 最后的ArrayList＆LT;卡＆GT;卡=新的ArrayList＆LT;卡＆GT;（）;
    最后CardArrayAdapter mCardArrayAdapter =新CardArrayAdapter（这一点，卡）;    mRecyclerView =（CardListView）this.findViewById（R.id.carddemo_largeimage_text）;    AnimationAdapter animCardArrayAdapter =新SwingBottomInAnimationAdapter（mCardArrayAdapter）;
    animCardArrayAdapter.setAbsListView（mRecyclerView）;
    mRecyclerView.setExternalAdapter（animCardArrayAdapter，mCardArrayAdapter）;
    ParseQuery＆LT;＆的parseObject GT;查询= ParseQuery.getQuery（地）;    query.findInBackground（新FindCallback＆LT;＆的parseObject GT;（）{
        公共无效完成（列表＆LT;＆的parseObject GT;名单，ParseException的E）{
            如果（E == NULL）{                对于（i = 0; I＆LT;则为list.size（）;我++）{
                    ID =新的String（）;
                    ID = List.get（ⅰ）.getString（图片）;
                    的System.out.println（ⅰ++ ID）;
                    MaterialLargeImageCar​​d卡=
                            MaterialLargeImageCar​​d.with（mContext）
                                    .setTextOverImage（List.get㈠.getString（place_id））
                                    .setTitle（List.get㈠.getString（字幕））
                                    .setSubTitle（List.get（I）.getString（说明））
                                    .useDrawableExternal（新MaterialLargeImageCar​​d.DrawableExternal（）{
                                        @覆盖
                                        公共无效setupInnerViewElements（ViewGroup中父母，查看viewImage）{                                            Picasso.with（mContext）.setIndicatorsEnabled（真）; //只为调试测试
                                            Picasso.with（mContext）
                                                    .load（id）的
                                                    .error（R.drawable.ic_launcher）
                                                    .into（（ImageView的）viewImage）;
                                        }
                                    }）
                                    .setupSupplementalActions（R.layout.carddemo_native_material_supplemental_actions_large，行动）
                                    。建立（）;
                    cards.add（卡）;
                    mCardArrayAdapter.notifyDataSetChanged（）;
                    card.setOnClickListener（新Card.OnCardClickListener（）{
                        @TargetApi（Build.VERSION_ codeS.LOLLIPOP）
                        @覆盖
                        公共无效的onClick（卡牌，查看视图）{
                            Toast.makeText（mContext，点击ActionArea，Toast.LENGTH_SHORT）.show（）;
                            onClickStart（）;
                            意图myIntent =新意图（MainActivity.this，ParallaxToolbarScrollViewActivity.class）;
                            //yIntent.putExtra(\"key，值）; //可选参数                            MainActivity.this.startActivity（myIntent）;                        }
                    }）;                }            }其他{
                Log.d（得分，错误：+ e.getMessage（））;
            }
        }
    }）;
 

我使用的布局是：
activity_main.xml中

 ＆LT;的RelativeLayout的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
的xmlns：工具=htt​​p://schemas.android.com/tool​​s
的xmlns：卡=htt​​p://schemas.android.com/apk/res-auto
的xmlns：皮尤=htt​​p://schemas.android.com/apk/res-auto
机器人：layout_width =match_parent
机器人：layout_height =match_parent工具：上下文=MainActivity。＆GT;
＆LT; it.gmariotti.cardslib.library.view.CardListView
    机器人：ID =@ + ID / carddemo_largeimage_text
    机器人：layout_width =match_parent
    机器人：layout_height =WRAP_CONTENT
    卡：list_card_layout_resourceID =@布局/ rowcard
    风格=@风格/ card_external
    /＆GT;＆LT; / RelativeLayout的＆GT;
 

rowcard.xml

 ＆LT;的RelativeLayout的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
的xmlns：工具=htt​​p://schemas.android.com/tool​​s
的xmlns：卡=htt​​p://schemas.android.com/apk/res-auto
的xmlns：皮尤=htt​​p://schemas.android.com/apk/res-auto
机器人：layout_width =match_parent
机器人：layout_height =match_parent工具：上下文=MainActivity。＆GT;
＆LT; it.gmariotti.cardslib.library.view.CardViewNative
    机器人：ID =@ + ID / list_cardId
    机器人：layout_width =match_parent
    机器人：layout_height =WRAP_CONTENT
    卡：card_layout_resourceID =@布局/ native_material_largeimage_text_card
    风格=@风格/ card_external
    /＆GT;＆LT; / RelativeLayout的＆GT;
 

native_material_largeimage_text_card.xml

 ＆LT; LinearLayout中的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
的xmlns：卡=htt​​p://schemas.android.com/apk/res-auto
的xmlns：皮尤=htt​​p://schemas.android.com/apk/res-auto
机器人：方向=垂直
机器人：layout_width =match_parent
机器人：layout_height =WRAP_CONTENT＆GT;
＆LT;！ - 卡可见的布局 - ＆GT;
＆LT; it.gmariotti.cardslib.library.view.ForegroundLinearLayout
    机器人：ID =@ + ID / card_main_layout
    风格=@风格/ card.native.main_layout_foreground
    机器人：方向=垂直
    机器人：layout_width =match_parent
    机器人：layout_height =match_parent
    ＆GT;
    ＆LT; it.gmariotti.cardslib.library.view.component.CardThumbnailView
        风格=@风格/ card.native.card_thumbnail_outer_layout
        机器人：ID =@ + ID / card_thumbnail_layout
        机器人：layout_width =match_parent
        卡：card_thumbnail_layout_resourceID =@布局/ native_thumbnail_largematerial
        机器人：layout_height =match_parent/＆GT;
    ＆LT;！ - 主要内容查看 - ＆GT;
    ＆LT;的FrameLayout
        机器人：ID =@ + ID / card_main_content_layout
        风格=@风格/ card.native.material_large_image_content_outer_layout
        机器人：layout_width =match_parent
        机器人：layout_height =match_parent/＆GT;
＆LT; /it.gmariotti.cardslib.library.view.ForegroundLinearLayout>
＆LT;查看
    机器人：layout_width =FILL_PARENT
    机器人：layout_height =1DP
    机器人：背景=@色/ greydiv/＆GT;
＆LT; ViewStub
    机器人：ID =@ + ID / card_supplemental_actions_vs
    机器人：inflatedId =@ + ID / card_supplemental_actions
    机器人：layout_width =match_parent
    机器人：layout_height =WRAP_CONTENT/＆GT;＆LT; / LinearLayout中＆GT;
 

和native_thumbnail_largematerial.xml

 ＆LT;的FrameLayout的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
机器人：layout_width =match_parent
机器人：layout_height =@扪/ card_material_largeimage_height＆GT;
＆LT; com.fmsirvent.ParallaxEverywhere.PEWImageView
    的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    机器人：ID =@ + ID / card_thumbnail_image
    机器人：transitionName =测试
    机器人：layout_height =match_parent
    机器人：layout_width =match_parent
    机器人：scaleType =centerCrop
    风格=@风格/ card.native.card_thumbnail_image/＆GT;
＆LT;的FrameLayout
    机器人：layout_width =match_parent
    机器人：layout_height =match_parent
    机器人：paddingRight =@扪/ card_thumbnail_image_text_over_padding_right
    机器人：paddingLeft =@扪/ card_thumbnail_image_text_over_padding_left
    机器人：paddingTop =@扪/ card_thumbnail_image_text_over_padding_top
    机器人：paddingBottom会=@扪/ card_thumbnail_image_text_over_padding_bottom＆GT;
    ＆LT;的TextView
        机器人：layout_width =match_parent
        机器人：layout_height =WRAP_CONTENT
        机器人：layout_gravity =底
        机器人：fontFamily中=@字符串/ card_font_fontFamily_image_text_over
        机器人：ID =@ + ID / card_thumbnail_image_text_over
        风格=@风格/ card_thumbnail_image_text_over_textstyle
        /＆GT;
＆LT; /＆的FrameLayout GT;＆LT; /＆的FrameLayout GT;
 

解决方案

我用CardsLib和几乎所有我的卡，以及毕加索。我建议你​​是要延伸卡和接收的parseObject作为卡参数CustomCard。

这将使你的code简单多了，以及你将这种方式添加你的卡到列表：

 为（的parseObject号码：列表）{
    cards.add（新MyCustomCard（mContext，P））;
}
 

您定制的卡将是这个样子：

 公共类MyCustomCard扩展卡实现Card.OnCardClickListener {    私有静态最后弦乐LOG_TAG = MyCustomCard.class.getSimpleName（）;
    私人的parseObject的parseObject;    公共MyCustomCard（上下文的背景下，数据的parseObject）{
        超（背景下，R.layout.my_custom_layout）;
        this.parseObject =数据;
        this.setOnClickListener（本）;
    }    @覆盖
    公共无效setupInnerViewElements（ViewGroup中父母，查看视图）{
        super.setupInnerViewElements（父母，视图）;        ImageView的ImageView的=（ImageView的）view.findViewById（R.id.data_thumbnail）;
        TextView的标题=（TextView中）view.findViewById（R.id.title）;
        TextView的文本=（TextView的）view.findViewById（R.id.text）;        如果（的parseObject！= NULL）{
            。Picasso.with（的getContext（））负载（parseObject.getString（图片报））符合（）成（ImageView的）。
            title.setText（parseObject.getString（标题））;
            text.setText（parseObject.getString（文本））;
        }
    }    @覆盖
    公共无效的onClick（卡牌，查看视图）{
       //如果你的卡需要点击的东西。你不需要
       //覆盖的onclick如果你不希望对卡单击功能    }
}
 

您甚至可以延长MaterialLargeImageCar​​d并使用它自己的XML，而不是使自己的。

我在我的几个在GitHub上的项目毕加索例子一些定制卡：<一href=\"https://github.com/fnk0/GithubViewer/tree/master/app/src/main/java/com/gabilheri/githubviewer/cards\"相对=nofollow>检查这个项目更多的例子

I am using cardslib (https://github.com/gabrielemariotti/cardslib) to create a project with cards and use picasso (http://square.github.io/picasso/), in order to dynamically create cards and load pictures into them with urls that I retrieve from Parse in a for loop.

The problem I have is that even though I retrieve the correct data from Parse, only one image is loaded in all of the cards. The titles, subtitles etc are loaded correctly for each separate card, only the image is the same everywhere.

My code is :

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());
            }
        }
    });

The layouts I use are: 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>

And 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>

解决方案

I use CardsLib and picasso together for almost all my cards. What I recommend you is to make a CustomCard which extends card and receives a ParseObject as a parameter for the card.

It would make your code much simpler as well as you would add your cards to the list this way:

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

Your custom card would look something like this:

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

    }
}

You could even extend the MaterialLargeImageCard and use it's own XML instead of making your own.

I have some custom cards with Picasso examples in a few of my projects on github: check this project for more examples

这篇关于生成与毕加索cardslib和负载图像卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！