RecyclerView加载无限滚动的图像列表

时间:2016-07-18 17:44:31

标签: android android-recyclerview recycler-adapter recyclerview-layout

我正在创建一个应用程序,显示RecyclerView中的一些漂亮女孩,当滚动到底部时负载更多。我遇到了一些问题,您可以在videos link here.

中看到它

或者:

予。添加更多项目时,它只显示一列而不是所有定义的3列。

II。向上滚动时,所有子视图都在快速移动,然后RecyclerView将我带到顶部并跳过所有项目。示例:当前项目为100并向上滚动,您站在列表顶部几毫秒。

我的项目有:

  1. build.grade: compile 'com.android.support:recyclerview-v7:23.4.0':由于JDK版本,我不想将RecyclerView更新为24。
  2. MainActivity扩展了AppCompatActivity:

    public class MainActivity extends AppCompatActivity {
    private RelativeLayout rootView;
    private RecyclerView mRecyclerView;
    private StaggeredGridLayoutManager mLayoutManager;
    private ImagesAdapter mAdapter;
    private Handler mHandler;
    
    private int currentOffset;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    
        currentOffset = 0;
        loading = true;
        mHandler = new Handler(getMainLooper());
        initRetrofit();
        initWidget();
    
        fetchingData(true);
    }
    
    private void initRetrofit() {
        Gson gson = new GsonBuilder().disableHtmlEscaping().create();
        OkHttpClient.Builder builderHttpClient = new OkHttpClient.Builder();
        //builderHttpClient.interceptors().add(new LoggingInterceptor());
        OkHttpClient client = builderHttpClient.build();
    
        NetworkManager.init(new Retrofit.Builder().baseUrl(APIConfig.BASE_URL).addConverterFactory(new ToStringConverterFactory()).addConverterFactory(GsonConverterFactory.create(gson)).client(client).build());
    }
    
    private void initWidget() {
        mRecyclerView = (RecyclerView) findViewById(R.id.rv_main);
        mLayoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);
        mAdapter = new ImagesAdapter(this, new ArrayList<PhotoItemModel>());
    
        mRecyclerView.setLayoutManager(mLayoutManager);
        mRecyclerView.addItemDecoration(new SpacesItemDecoration(15));
        mRecyclerView.setAdapter(mAdapter);
    
        mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                if (dy > 0) //check for scroll down
                {
                    visibleItemCount = mLayoutManager.getChildCount();
                    totalItemCount = mLayoutManager.getItemCount();
    
                    int[] items = mLayoutManager.findFirstCompletelyVisibleItemPositions(null);
                    if (items.length > 0) {
                        pastVisibleItems = items[0];
                    }
    
                    if (loading) {
                        if ((visibleItemCount + pastVisibleItems) >= totalItemCount) {
                            loading = false;
                            fetchingData();
                        }
                    }
                }
            }
        });
    }
    
    private void fetchingData() {
        currentOffset = mAdapter.getItemCount();
        mHandler.postDelayed(new Runnable() {
            @Override
            public void run() {
                NetworkManager.getPhotoByOffset(currentOffset, new Callback<GetPhotoResponse>() {
                    @Override
                    public void onResponse(Call<GetPhotoResponse> call, retrofit2.Response<GetPhotoResponse> response) {
                        if (null != response && null != response.body()) {
                            ResponseModel responseModel = response.body().getResponseModel();
                            List<PostItemModel> postItemModels = responseModel.getPostItemModels();
                            List<PhotoItemModel> photoItemModels = new ArrayList<>();
                            for (PostItemModel postItemModel : postItemModels) {
                                photoItemModels.addAll(postItemModel.getPhotos());
                            }
                            mAdapter.insertMoreItems(photoItemModels);
                            loading = true;
                        } else {
                            loading = true;
                            fetchingData();
                        }
                    }
    
                    @Override
                    public void onFailure(Call<GetPhotoResponse> call, Throwable t) {
                        t.printStackTrace();
                        loading = true;
                        fetchingData();
                    }
                });
            }
        }, 5000);
    }
    }
    
  3. 适配器:

    public class ImagesAdapter extends RecyclerView.Adapter<VHImage> {
    private MainActivity mainActivity;
    private List<PhotoItemModel> photoItemModels;
    
    public ImagesAdapter(MainActivity mainActivity, ArrayList<PhotoItemModel> photoItemModels) {
        this.mainActivity = mainActivity;
        this.photoItemModels = photoItemModels;
    }
    
    public List<PhotoItemModel> getPhotoItemModels() {
        return photoItemModels;
    }
    
    @Override
    public VHImage onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_image, parent, false);
        return new VHImage(mainActivity, view);
    }
    
    @Override
    public void onBindViewHolder(VHImage holder, int position) {
        holder.bindData(photoItemModels.get(position));
    }
    
    @Override
    public int getItemCount() {
        return photoItemModels.size();
    }
    
    public void insertMoreItems(List<PhotoItemModel> morePhotoItemModels) {
        int oldSize = photoItemModels.size();
        photoItemModels.addAll(morePhotoItemModels);
        notifyItemRangeInserted(oldSize, morePhotoItemModels.size());
    }
    }
    
  4. ViewHolder

    public class VHImage extends RecyclerView.ViewHolder implements View.OnClickListener {
    private MainActivity mainActivity;
    private ImageView ivImage;
    private View div1, div2;
    private PhotoItemModel photoItemModel;
    
    public VHImage(MainActivity mainActivity, View itemView) {
        super(itemView);
        this.mainActivity = mainActivity;
        ivImage = (ImageView) itemView.findViewById(R.id.iv_image);
        div1 = itemView.findViewById(R.id.v_div_1);
        div2 = itemView.findViewById(R.id.v_div_2);
        ivImage.setOnClickListener(this);
    }
    
    public void bindData(PhotoItemModel photoItemModel) {
        this.photoItemModel = photoItemModel;
        Glide.with(mainActivity.getApplicationContext())
                .load(photoItemModel.getAltSizesList().get(2).getUrl())
                .diskCacheStrategy(DiskCacheStrategy.RESULT)
                .listener(new RequestListener<String, GlideDrawable>() {
                    @Override
                    public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
                        div1.setVisibility(View.INVISIBLE);
                        div2.setVisibility(View.INVISIBLE);
                        return false;
                    }
    
                    @Override
                    public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
                        div1.setVisibility(View.VISIBLE);
                        div2.setVisibility(View.VISIBLE);
                        return false;
                    }
                })
                .into(ivImage);
    }
    
    @Override
    public void onClick(View view) {
        mainActivity.onImageClick(view, ((ImageView) view).getDrawable(), photoItemModel);
    }
    }
    
  5. 活动布局

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="0.5dp"
        android:visibility="invisible" />
    
    <ImageView
        android:id="@+id/iv_full_screen"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        android:visibility="invisible" />
    
    
    <ImageView
        android:id="@+id/iv_splash1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        android:visibility="gone" />
    
    <ImageView
        android:id="@+id/iv_splash2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        android:visibility="gone" />
    
    <ProgressBar
        android:id="@+id/pb_loading"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/iv_splash1"
        android:layout_centerHorizontal="true"
        android:layout_gravity="bottom"
        android:layout_marginBottom="3dp"
        android:layout_marginTop="20dp"
        android:indeterminate="true"
        android:max="1000"
        android:progressDrawable="@drawable/progress_drawable" />
    

  6. 项目布局

    <View
        android:id="@+id/v_div_1"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="#000000"
        android:visibility="invisible" />
    
    <View
        android:id="@+id/v_div_2"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="0.5dp"
        android:background="#000000"
        android:visibility="invisible" />
    
    <ImageView
        android:id="@+id/iv_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="0.5dp"
        android:adjustViewBounds="true" />
    

1 个答案:

答案 0 :(得分:0)

在下载图片之前,除非您从网络服务发送图像尺寸并在显示之前设置ImageView高度,否则无法找到图像。

例如,您的网络服务响应可能是这样的:

{
    "ImageLink" = "http://www.example.com/example.jpg"
    "ImageWidth" = 1024
    "ImageHeight" = 768
}

然后将ImageView大小设置为:

imageview.getLayoutParams().height = imageview.getWidth() * (ImageHeight/ImageWidth);

为了获得更好的性能,请在将ImageView布局大小添加到RecyclerView之前设置它。