如何从 json api 在网格视图中显示数据

Question

我正在处理一个项目，我想在 JSON API 的网格视图中显示数据。请帮我;我是新来的。我的 JSON 包含一个图像 URL，我还希望该图像显示在网格视图中。下面是我的 JSON API。

{
    "status": 200,
    "msg": "success",
    "data": [
        {
            "category_name": "ELECTRONICS",
            "category_description": "ELECTRONICS Items",
            "category_image": "images/uploads/a8cee9e723f669813b999ee6bfe611f42018-05-1712-36-17.jpg"
        },
        {
            "category_name": "Sports",
            "category_description": "Sports Accesories",
            "category_image": "images/uploads/76f2c9778df71ae83d04bc0d6178042f2018-05-1712-36-17.jpg"
        },
        {
            "category_name": "Dress",
            "category_description": "All Kind of dress",
            "category_image": "images/uploads/05a5efb96308db381116e90478fce2272018-05-1712-36-17.jpg"
        },
        {
            "category_name": "Cars",
            "category_description": "Automobiles",
            "category_image": ""
        }
    ]
}

Answer 1

以下是您问题的简要解决方案：

• 创建一个类，该类将创建具有以下属性的对象： categoryName、CategoryDe​​scription 和 category_image。
• 您需要能够解析 JSON，并在执行此操作时生成上述类的对象： watch this
• 将 RecyclerView 与 GridLayoutManager 一起使用（here is a helping video，它使用 LinearLayoutManager，因此您必须改用 GridLayoutManager）

GridLayoutManager 将项目排列在二维网格中，就像棋盘上的正方形一样。将 RecyclerView 与 GridLayoutManager 一起使用可提供类似于旧 GridView 布局的功能。

Answer 2

您的 JSON 文件可能位于服务器上或资产文件夹中，并且使用 recyclerView 的 GridLayoutManager 而不是 LinearLayoutManager 对您将要做的事情有好处。

Answer 3

PhotosFragment.java

public class PhotosFragment extends Fragment{

    private Contxt ctx;
    private ViewGroup vg;

    private RecyclerView recyclerPhotos;
    private PhotosGridAdapter photosGridAdapter;

    private ArrayList<PagePhotosModel> allPhotosList = new ArrayList<>();

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        ctx = context;
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        vg = (ViewGroup) inflater.inflate(R.layout.fragment_photos, container, false);
        vg.setClickable(true);
        return vg;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        findViews();

        initRecycler();

        getDataFromSever();
    }

    private void findViews() {
        recyclerPhotos = (RecyclerView) getView().findViewById(R.id.recycler_photos);
    }

    private void initRecycler(ArrayList<PagePhotosModel> allPhotosList) {
            photosGridAdapter = new PhotosGridAdapter(ctx, allPhotosList, PhotosFragment.this);
            RecyclerView.LayoutManager mLayoutManager = new GridLayoutManager(ctx, 2);
            recyclerPhotos.setLayoutManager(mLayoutManager);
            recyclerPhotos.setItemAnimator(new DefaultItemAnimator());
            recyclerPhotos.setAdapter(photosGridAdapter);
    }

    // Implement retrofit Or volley to get json data from server
    private getDataFromSever(){

    //here use the method whatever you want to get data from serverand add data to allPhotosList

    photosGridAdapter.updateDataInList(allPhotosList);

    }
}

fragment_photos.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorGrayBg"
    android:orientation="vertical">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_photos"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="@dimen/_4sdp"
        android:layout_marginTop="@dimen/_4sdp"
        android:stretchMode="columnWidth"
        android:visibility="visible">

    </android.support.v7.widget.RecyclerView>

</LinearLayout>

PhotosGridAdapter.java

public class PhotosGridAdapter extends RecyclerView.Adapter<PhotosGridAdapter.MyViewHolder> {

    private Context ctx;
    private PhotosFragment photosFragment;
    private ArrayList<PagePhotosModel> photosList;

    public class MyViewHolder extends RecyclerView.ViewHolder {
        private final ImageView imgPhoto;

        public MyViewHolder(View view) {
            super(view);
            imgPhoto = (ImageView) view.findViewById(R.id.img_photo);
        }
    }

    public PhotosGridAdapter(Context ctx, ArrayList<PagePhotosModel> photosList, PhotosFragment photosFragment) {
        this.ctx = ctx;
        this.photosList = photosList;
        this.photosFragment = photosFragment;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.item_photo_grid, parent, false);

        return new MyViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(final MyViewHolder holder, final int position) {
        final PagePhotosModel photosModel = photosList.get(position);

        Glide.with(ctx)
                .load(UrlImage)
                .asBitmap()
                .centerCrop()
                .placeholder(R.drawable.image_placeholder) // can also be a drawable
                .error(R.drawable.image_placeholder) // will be displayed if the image cannot be loaded
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .override(Target.SIZE_ORIGINAL, Target.SIZE_ORIGINAL)
                .into(imgUserImage);

    }

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

    public void updateDataInList(ArrayList<PagePhotosModel> photosList) {
        this.photosList = photosList;
        notifyDataSetChanged();
    }

}

item_photo_grid.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

                <ImageView
                    android:id="@+id/img_photo"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/_130sdp"
                    android:background="@color/colorGrayLight"
                    android:src="@drawable/image_placeholder" />


</FrameLayout>

Answer 4

您需要做的就是制作模型和适配器，然后在将数据填充到 RecyclerView 时使用 GridLayoutManager