使用Android中的Firebase在单个RecyclerView中获取两个不同的视图

时间:2017-09-14 10:22:14

标签: android firebase youtube android-recyclerview android-viewholder

我开发了一个应用程序,其中有两个帖子

  • 使用毕加索的图片文章
  • 使用Youtube Api的视频帖子。

我已经使用 RecyclerView Firebase recyclerAdapter 实现了两者,但问题是我不知道如何区分两种视图,如果我使用视频视图 Youtube Api 它附带图像视图,并且复制到recyclerView中的所有项目,然后在所有项目中只播放一个视频。我想要的是,如果我想要显示图像,那么该项目只能获取图像,如果我想显示视频,那么reyclerView项目只能获得视频而不重复。喜欢 Instagram 。我搜索了很多论坛,但没有得到任何帮助。请帮忙。我使用Firebase作为我的数据库,而ViewHolders就是根据它。

图片和视频帖子的类文件:

FirebaseRecyclerAdapter <post, postViewHolder> firebaseRecyclerAdapter = new FirebaseRecyclerAdapter<post, postViewHolder>(
    post.class,
    R.layout.post_row_recycle_home,
    postViewHolder.class,
    mDatabaseReference
) {
    @Override
    protected void populateViewHolder(postViewHolder viewHolder, post model, int position) {
        viewHolder.setimage(getApplicationContext(), model.getImage());
        viewHolder.setYoutube(model.getYoutube()); 
    }
};

mrecyclerView.setAdapter(firebaseRecyclerAdapter);

持有人:

public static class postViewHolder extends RecyclerViewPager.ViewHolder{

    View mView;

    public postViewHolder(View itemView) {
        super(itemView);
        mView = itemView;
    }

    public void setYoutube(final String youtube){
        final YouTubePlayerView youPlay = (YouTubePlayerView) mView.findViewById(R.id.youtuber);
        youPlay.initialize("SOME KEY",
            new YouTubePlayer.OnInitializedListener() {
                @Override
                public void onInitializationSuccess(YouTubePlayer.Provider provider,
                                                    YouTubePlayer youTubePlayer, boolean b) {

                    youTubePlayer.cueVideo(youtube);
                }
                @Override
                public void onInitializationFailure(YouTubePlayer.Provider provider,
                                                    YouTubeInitializationResult youTubeInitializationResult) {

            }
        });
    }

    public void setimage(final Context ctx, final String image){
        final ImageView post_image = (ImageView)mView.findViewById(R.id.post_image);

         Picasso.with(ctx).load(image)
            .networkPolicy(NetworkPolicy.OFFLINE).into(post_image, new Callback() {

            @Override
            public void onSuccess() {
            }
            @Override
            public void onError() {
                Picasso.with(ctx).load(image).into(post_image);
            }
        });
    }
}

示例屏幕截图:

enter image description here

3 个答案:

答案 0 :(得分:8)

您可以使用适配器getItemViewType方法确定要显示的视图类型。在firebaseRecyclerAdapter内添加以下内容:

private static final int TYPE_YOUTUBE = 1111;
private static final int TYPE_IMAGE = 2222;

@Override
public int getItemViewType(int position) {
    //note: classes should start with uppercase
    Post model = getItem(position);
    if (model.isYoutube()) { //note: you'll have to define this method
        return TYPE_YOUTUBE; 
    } else {
        return TYPE_IMAGE;
    }
}

然后在onCreateViewHolder内查看要创建的类型:

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    RecyclerView.ViewHolder holder;
    switch (viewType) {
        case TYPE_YOUTUBE:
                //note: save an inflater when you construct the adapter
                return new YtViewHolder(inflater.inflate(R.layout.item_youtube, parent, false));
        case TYPE_IMAGE:
                return new ImgViewHolder(inflater.inflate(R.layout.item_image, parent, false));
        }

    }

分离您的VH模型:

public abstract class PostViewHolder extends RecyclerView.ViewHolder { //note: extends changed
    public abstract void bind(final String input){
}

public static class YtViewHolder extends PostViewHolder { //note: extends changed

    private YouTubePlayerView mView;

    public YtViewHolder(View itemView) {
        super(itemView);
        mView = (YouTubePlayerView) itemView.findViewById(R.id.youtuber);
    }

    public void bind(final String youtube){
        mView.initialize("SOME KEY",
            new YouTubePlayer.OnInitializedListener() {
                @Override
                public void onInitializationSuccess(YouTubePlayer.Provider provider, YouTubePlayer youTubePlayer, boolean b) {
                    youTubePlayer.cueVideo(youtube);
                }

                @Override
                public void onInitializationFailure(YouTubePlayer.Provider provider, YouTubeInitializationResult youTubeInitializationResult) {

                }
        });
    }

}

public static class ImgViewHolder extends PostViewHolder {

    private ImageView mView;

    public ImageView(View itemView) {
        super(itemView);
        mView = (ImageView) itemView.findViewById(R.id.post_image);
    }

    public void bind(final String image){
        Picasso.with(mView.getContext()).load(image).networkPolicy(NetworkPolicy.OFFLINE).into(mView, new Callback() {

            @Override
            public void onSuccess() {
            }
            @Override
            public void onError() {
                Picasso.with(ctx).load(image).into(mView);
            }
        });
    }

}

您的填充方法可以简化如下:

@Override
protected void populateViewHolder(PostViewHolder viewHolder, post model, int position) {
    viewHolder.bind(model.isYoutube()? model.getYoutube() : model.getImage());
}

不同的项目:

  

然后所有项目中只播放一个视频

这有点令人担忧。如果我理解正确,列表中的每个项目都具有相同的图像和视频。这可能意味着您将相同的模型返回到每个位置。确保如果实现getItem,则为每个位置返回不同的项目(Firebase适配器默认情况下会执行此操作)。还要确保model.getYoutube等没有返回静态数据。

答案 1 :(得分:2)

只需使用viewType即可为您解决此问题。

首先FirebaseRecyclerAdapter应该包含RecyclerView.ViewHolder.class而不是postViewHolder.class

然后你在每个孩子的类型之间切换,假设图像携带类型1和视频携带类型2,你在onCreateViewHolder之间实现了getItemViewType < / p>

代码应如下所示: -

protected void populateViewHolder(final RecyclerView.ViewHolder viewHolder, final post model,
                                          final int position) {
            switch (model.getType()) {
                case 1:
                    populateType1((ViewHolder1) viewHolder, model, position);
                    break;
                case 2:
                    populateType2((ViewHolder2) viewHolder, model, position);
                    break;
            }

onCreatView应如下所示: -

 @Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            switch (viewType) {
                case 1:
                    View modelType1 = LayoutInflater.from(parent.getContext())
                            .inflate(R.layout.item_type1, parent, false);
                    return new ViewHolder1(modelType1);
                case 2:
                    View modelType2 = LayoutInflater.from(parent.getContext())
                            .inflate(R.layout.item_type2, parent, false);
                    return new ViewHolder2(modelType2);
            }
            return super.onCreateViewHolder(parent, viewType);
        }

getItemViewType

@Override
        public int getItemViewType(int position) {
            post model = getItem(position);
            switch (model.getType()) {
                case 1:
                    return model1;
                case 2:
                    return model2;

            }
            return super.getItemViewType(position);
        }

答案 2 :(得分:-1)

具有两个视图的viewHolders

public class MultiViewAdapter extends RecyclerView.Adapter {

private ArrayList dataSet;
Context mContext;
int total_types;


/*
   Image TypeViewHolder
 */
public class ImageTypeViewHolder extends RecyclerView.ViewHolder {

    ImageView img;
    public ImageTypeViewHolder(View itemView) {
        super(itemView);
        this.img = (ImageView) itemView.findViewById(R.id.imageview);


    }
}

/*
    Youtube View Holder
 */
public  class YoutubeTypeViewHolder extends RecyclerView.ViewHolder {



    public YoutubeTypeViewHolder(View itemView) {
        super(itemView);

        // add

    }
}


public MultiViewAdapter(ArrayList data, Context context) {
    this.dataSet = data;
    this.mContext = context;
    total_types = dataSet.size();
}


@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

    View view;
    switch (viewType) {

        case typeImage:
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.type_image, parent, false);
            return new ImageTypeViewHolder(view);

        case typeVideo:
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.type_video, parent, false);
            return new YoutubeTypeViewHolder(view);
    }
    return null;
}

@Override
public int getItemViewType(int position) {

    switch (position) {

        case 0:
            return typeImage;
        case 1:
            return typeVideo;


    }
}


@Override
public void onBindViewHolder(final RecyclerView.ViewHolder holder, final int listPosition) {

    Post object = getItem(listPosition);

    if (object != null) {
        switch (object.type) {

            case typeImage:

                ((ImageTypeViewHolder) holder).image.setImageResource(object.data);
                break;
            case typeVideo:
                // ADD video
                break;

        }
    }
}





   @Override
   public int getItemCount() {
       return dataSet.size();
   }
}