Как показать изображение GridView во фрагментах Android с помощью Json (категории и подкатегории)

Question

Это категории и подкатегории.Там может быть подкатегория или нет.Используемый JsonCode приведен ниже.

categoryId - это то, что изменится для вызова подкатегорий.Например, если вы хотите увидеть подкатегории автомобилей

Код Json

[{"Id":1,"TitleEN":"Cars","TitleAR":"سيارات","Photo":"http://souq.hardtask.co//Files/CategoryPhotos/ce686544-9f51-4213-b5db-7c015b788e8d.png","ProductCount":"3","HaveModel":"0","SubCategories":[{"Id":6,"TitleEN":"Cat6","TitleAR":"قسم6","Photo":"http://souq.hardtask.co//Files/CategoryPhotos/ce686544-9f51-4213-b5db-7c015b788e8d.png","ProductCount":"3","HaveModel":"0","SubCategories":[]}]},{"Id":2,"TitleEN":"Cat2","TitleAR":"قسم2","Photo":"http://souq.hardtask.co//Images/no_image.png","ProductCount":"8","HaveModel":"0","SubCategories":[{"Id":13,"TitleEN":"cat1 -1 ","TitleAR":"cat1 - 1","Photo":"http://souq.hardtask.co//Images/no_image.png","ProductCount":"8","HaveModel":"0","SubCategories":[]}]},{"Id":3,"TitleEN":"Cat3","TitleAR":"قسم3","Photo":"http://souq.hardtask.co//Images/no_image.png","ProductCount":"2","HaveModel":"0","SubCategories":[]},{"Id":4,"TitleEN":"Cat4","TitleAR":"قسم4","Photo":"http://souq.hardtask.co//Images/no_image.png","ProductCount":"1","HaveModel":"0","SubCategories":[]},{"Id":5,"TitleEN":"Cat5","TitleAR":"قسم5","Photo":"http://souq.hardtask.co//Images/no_image.png","ProductCount":"0","HaveModel":"0","SubCategories":[]},{"Id":8,"TitleEN":"Cat8","TitleAR":"قسم8","Photo":"http://souq.hardtask.co//Images/no_image.png","ProductCount":"0","HaveModel":"0","SubCategories":[]},{"Id":9,"TitleEN":"Slide01","TitleAR":"Slide02","Photo":"http://souq.hardtask.co//Files/CategoryPhotos/2ba07cb2-49a0-47e4-aba6-ef10a916fb12.png","ProductCount":"0","HaveModel":"0","SubCategories":[]}]

ImageAdapter

public class ImageAdapter extends BaseAdapter {
    private Context mContext;

    public ImageAdapter(Context c){
        mContext = c;
    }

    @Override
    public int getCount(){
        return images.size();
    }

    @Override
    public Object getItem(int position){
        return images.get(position);
    }

    public long getItemId(int position){
        return 0;
    }

    public View getView(int position, View convertView, ViewGroup parent){
        ImageView imageview;
        if (convertView == null){
            imageview = new ImageView(mContext);
            imageview.setPadding(0, 0, 0, 0);
            //imageview.setLayoutParams(new GridLayout.MarginLayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
            imageview.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
            imageview.setAdjustViewBounds(true);
        } else {
            imageview = (ImageView) convertView;
        }

        Picasso.with(mContext).load(images.get(position)).placeholder(R.mipmap.ic_launcher).into(imageview);
        return imageview;
    }

    /*
    Custom methods
     */
    public void addItem(String url){
        images.add(url);
    }

    public void clearItems() {
        images.clear();
    }

    public ArrayList<String> images = new ArrayList<String>();
}

Модель фильма

public class Movie implements Parcelable {
    public String TitleEN;
    public String TitleAR;
    public String Photo;
    public int id;

    public Movie(){

    }

    protected Movie(Parcel in) {
        TitleEN = in.readString();
        TitleAR = in.readString();
        Photo = in.readString();
        id = in.readInt();
    }

    @Override
    public int describeContents() {
        return 0;
    }

    @Override
    public void writeToParcel(Parcel dest, int flags) {
        dest.writeString(TitleEN);
        dest.writeString(TitleAR);
        dest.writeString(Photo);
        dest.writeInt(id);
    }

    @SuppressWarnings("unused")
    public static final Parcelable.Creator<Movie> CREATOR = new Parcelable.Creator<Movie>() {
        @Override
        public Movie createFromParcel(Parcel in) {
            return new Movie(in);
        }

        @Override
        public Movie[] newArray(int size) {
            return new Movie[size];
        }
    };
}

Fragament_main

    public class Fragament_main extends Fragment {


        public View mainFragmentView;
        public String LOG_TAG = "ShowcaseFragment";
        public ArrayList<Movie> movies = new ArrayList<Movie>();
        private RequestQueue mRequestQueue;
        public ImageAdapter imageAdapter;
        public static Fragament_main instance;
        GridView gridview;
        public boolean isDualPane = false;

        // static to preserve sorting over orientation changes (activity restart)
        public static String sortOrder = "popularity.desc", moreParams = "";
        public static boolean setting_cached = false;
        public int gridPos = -1;

        public Fragament_main() {
            // Required empty public constructor

            instance = this;


        }




     @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            mainFragmentView = inflater.inflate(R.layout.fragment_main, container, false);
            mRequestQueue = Volley.newRequestQueue(getContext());

            // setup adapters
            imageAdapter = new ImageAdapter(getContext());
            gridview = (GridView) mainFragmentView.findViewById(R.id.gridView);
            gridview.setAdapter(imageAdapter);

            //updateUI(setting_cached);
            //gridview.setOnItemClickListener(new GridClickListener());
            // manage grid col count wrt Orientation
            if (this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE)
                setGridColCount(3);
            else
                setGridColCount(2);

            return mainFragmentView;
        }

        @Override
        public void onActivityCreated(Bundle savedInstanceState) {
            super.onActivityCreated(savedInstanceState);

        }

        @Override
        public void onSaveInstanceState(Bundle outState) {
            super.onSaveInstanceState(outState);
            outState.putInt("GRIDVIEW_POSITION", gridview.getFirstVisiblePosition());
        }

        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            if (savedInstanceState != null)
                gridPos = savedInstanceState.getInt("GRIDVIEW_POSITION");
        }

        @Override
        public void onDestroyView() {
            super.onDestroyView();
            mRequestQueue.cancelAll(new RequestQueue.RequestFilter() {
                @Override
                public boolean apply(Request<?> request) {
                    return true;
                }
            });
        }

        /*class GridClickListener implements AdapterView.OnItemClickListener {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
                if (isDualPane){
                    android.support.v4.app.FragmentTransaction ft = getActivity().getSupportFragmentManager().beginTransaction();
                    DetailActivityFragment detailActivityFragment = DetailActivityFragment.newInstance(movies.get(position));
                    ft.replace(R.id.detailContainer, detailActivityFragment);
                    ft.commit();
                } else {
                    Intent intent = new Intent(getContext(), DetailActivity.class);
                    intent.putExtra(Intent.EXTRA_TEXT, (Parcelable) movies.get(position));
                    startActivity(intent);
                }
            }
        }*/

      /*  public void updateUI(boolean cached){
            movies.clear();
            imageAdapter.clearItems();
            setting_cached = cached;
            if (!cached)
                getMovies(sortOrder, moreParams);
            else
                getFavorites();
        }
    */
        public void getMovies(String sortOrder, String moreParams){
            String url = "http://souq.hardtask.co/app/app.asmx/GetCategories?categoryId=0&countryId=1";
            JsonObjectRequest req = new JsonObjectRequest(url, null,
                    new Response.Listener<JSONObject>() {
                        @Override
                        public void onResponse(JSONObject response) {
                            try {
                                JSONArray items = response.getJSONArray("results");
                                JSONObject movieObj;
                                for (int i=0; i<items.length(); i++){
                                    movieObj = items.getJSONObject(i);
                                    Movie movie = new Movie();
                                    movie.id = movieObj.getInt("id");
                                    movie.TitleEN = movieObj.getString("original_title");
                                    movie.TitleAR = movieObj.getString("overview");
                                    movie.Photo = "http://souq.hardtask.co/app/app.asmx/GetCategories?categoryId=0&countryId=1" + movieObj.getString("poster_path");
                                    movies.add(movie);
                                    // Add image to adapter
                                    imageAdapter.addItem(movie.Photo);
                                }
                            } catch (JSONException e){
                                e.printStackTrace();
                            }
                            getActivity().runOnUiThread(new Runnable() {
                                @Override
                                public void run() {
                                    gridview.setAdapter(imageAdapter);
                                    if (gridPos > -1)
                                        gridview.setSelection(gridPos);
                                    gridPos = -1;
                                }
                            });
                        }
                    }, new Response.ErrorListener() {
                @Override
                public void onErrorResponse(VolleyError error) {
                    Log.d(LOG_TAG, "Error in JSON Parsing");
                }
            });

            mRequestQueue.add(req);
        }

       /* public void getFavorites(){
            movies.addAll((new MoviesDB()).getFavoriteMovies(getContext().getContentResolver()));
            for (Movie movie : movies){
                imageAdapter.addItem(movie.Photo);
            }
            gridview.setAdapter(imageAdapter);
            if (gridPos > -1)
                gridview.setSelection(gridPos);
            gridPos = -1;
        }*/

        public void updateFavoritesGrid(){
            if (setting_cached) {
                int p = gridview.getLastVisiblePosition();
                ///updateUI(true);
                gridview.smoothScrollToPosition(p);
            }
        }

        public void setGridColCount(int n){
            ((GridView) mainFragmentView.findViewById(R.id.gridView)).setNumColumns(n);
        }


    }

Я не знаю, как добавить данные Json в GridView.Не могли бы вы помочь мне?

Answer 1

Шаг 1 Добавьте следующие зависимости в файл gradle уровня приложения. Зависимости предназначены для retrofit, gsonConvertor butterknife and glide.

implementation 'com.squareup.retrofit2:retrofit:2.1.0'
implementation 'com.google.code.gson:gson:2.6.2'
implementation 'com.squareup.retrofit2:converter-gson:2.1.0'
implementation('com.squareup.retrofit2:retrofit:2.1.0') {
    // exclude Retrofit’s OkHttp dependency module and define your own module import
    exclude module: 'okhttp'
}
implementation 'com.google.code.gson:gson:2.6.2'
implementation 'com.squareup.retrofit2:converter-gson:2.1.0'
implementation 'com.squareup.okhttp3:logging-interceptor:3.4.1'
implementation 'com.squareup.okhttp3:okhttp:3.4.1'
implementation 'com.android.support:design:28.0.0'
implementation 'com.android.support:recyclerview-v7:28.0.0'

implementation "com.jakewharton:butterknife:$BUTTER_KNIFE_VERSION"
annotationProcessor "com.jakewharton:butterknife-compiler:$BUTTER_KNIFE_VERSION"
implementation 'com.github.bumptech.glide:glide:4.8.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0'

Шаг 2 Создайте класс по имени ApiClient и вставьте следующий код в этот класс

public class ApiClient {
private static Retrofit retrofit = null;

public static Retrofit getRetrofit() {
    HttpLoggingInterceptor interceptor = new HttpLoggingInterceptor();
    interceptor.setLevel(HttpLoggingInterceptor.Level.BODY);
    OkHttpClient client = new OkHttpClient.Builder().addInterceptor(interceptor).build();


    retrofit = new Retrofit.Builder()
            .baseUrl("http://souq.hardtask.co")
            .addConverterFactory(GsonConverterFactory.create())
            .client(client)
            .build();



    return retrofit;
}
}

Шаг 3 Создайте новый класс интерфейса по имени APIInterface и вставьтеследующий код в этом классе

 @GET("/app/app.asmx/GetCategories")
Call<List<Product>> getProducts(@QueryMap Map<String, String> params);

Шаг 4 Создание классов POJO в соответствии с ответом json.У нас есть два класса продуктов и их подкатегории. Итак, я создаю первый класс по имени Product

public class Product {

@SerializedName("Id")
@Expose
private Integer id;
@SerializedName("TitleEN")
@Expose
private String titleEN;
@SerializedName("TitleAR")
@Expose
private String titleAR;
@SerializedName("Photo")
@Expose
private String photo;
@SerializedName("ProductCount")
@Expose
private String productCount;
@SerializedName("HaveModel")
@Expose
private String haveModel;
@SerializedName("SubCategories")
@Expose
private List<SubCategory> subCategories = null;

public Integer getId() {
    return id;
}

public void setId(Integer id) {
    this.id = id;
}

public String getTitleEN() {
    return titleEN;
}

public void setTitleEN(String titleEN) {
    this.titleEN = titleEN;
}

public String getTitleAR() {
    return titleAR;
}

public void setTitleAR(String titleAR) {
    this.titleAR = titleAR;
}

public String getPhoto() {
    return photo;
}

public void setPhoto(String photo) {
    this.photo = photo;
}

public String getProductCount() {
    return productCount;
}

public void setProductCount(String productCount) {
    this.productCount = productCount;
}

public String getHaveModel() {
    return haveModel;
}

public void setHaveModel(String haveModel) {
    this.haveModel = haveModel;
}

public List<SubCategory> getSubCategories() {
    return subCategories;
}

public void setSubCategories(List<SubCategory> subCategories) {
    this.subCategories = subCategories;
}

}

И Подкатегория

public class SubCategory {

@SerializedName("Id")
@Expose
private Integer id;
@SerializedName("TitleEN")
@Expose
private String titleEN;
@SerializedName("TitleAR")
@Expose
private String titleAR;
@SerializedName("Photo")
@Expose
private String photo;
@SerializedName("ProductCount")
@Expose
private String productCount;
@SerializedName("HaveModel")
@Expose
private String haveModel;
@SerializedName("SubCategories")
@Expose
private List<Object> subCategories = null;

public Integer getId() {
    return id;
}

public void setId(Integer id) {
    this.id = id;
}

public String getTitleEN() {
    return titleEN;
}

public void setTitleEN(String titleEN) {
    this.titleEN = titleEN;
}

public String getTitleAR() {
    return titleAR;
}

public void setTitleAR(String titleAR) {
    this.titleAR = titleAR;
}

public String getPhoto() {
    return photo;
}

public void setPhoto(String photo) {
    this.photo = photo;
}

public String getProductCount() {
    return productCount;
}

public void setProductCount(String productCount) {
    this.productCount = productCount;
}

public String getHaveModel() {
    return haveModel;
}

public void setHaveModel(String haveModel) {
    this.haveModel = haveModel;
}

public List<Object> getSubCategories() {
    return subCategories;
}

public void setSubCategories(List<Object> subCategories) {
    this.subCategories = subCategories;
}

}

Шаг5 Теперь нам нужен вид для рециркуляционного держателя (в вашем случае - gridview layout).Для этого нам нужно создать новый файл макета в папке layout.Вы можете назвать его li_product_view

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

<RelativeLayout
    android:layout_width="200dp"
    android:layout_height="200dp">

    <ImageView
        android:id="@+id/ImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/ImageView"
        android:layout_alignTop="@id/ImageView"
        android:layout_alignRight="@id/ImageView"
        android:layout_alignBottom="@id/ImageView"
        android:text="@string/app_name"
        android:gravity="bottom|right" />

</RelativeLayout>

</RelativeLayout>

Шаг 6 Теперь нам нужно, чтобы itemHolder содержал представление для этой цели, мы создадим новый класс по имени ProductsItemHolder и получимследующий код

public class ProductsItemHolder extends RecyclerView.ViewHolder {
@BindView(R.id.ImageView)
ImageView imageView;
@BindView(R.id.tv_title)
TextView textView;
public ProductsItemHolder(@NonNull View itemView) {

    super(itemView);
    ButterKnife.bind(this,itemView);

}
public void bindData(Product datum, int position, int size) {
    Glide.with(itemView)
            .asBitmap()
            .load(datum.getPhoto())
            .into(imageView);

    textView.setText(datum.getTitleAR());

}
}

Шаг 7 Теперь нам нужен адаптер, который содержит данные для представления в обзоре переработчика.Создайте новый класс по имени ProductsAdapter и вставьте следующий код внутри этого класса

public class ProductsAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

private List<Product> mList;
@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
    View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.li_product_view, viewGroup, false);
    return new ProductsItemHolder(view);
}

@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder viewHolder, int position) {
    int size= mList.size();
    ((ProductsItemHolder) viewHolder).bindData(mList.get(position), position,size);
}

@Override
public int getItemCount() {
    return mList.size();
}
public void setData(List<Product> userLists) {
    this.mList = userLists;
    notifyDataSetChanged();
}
}

Шаг 8 Теперь внутри действия или фрагмента нам нужно получить ответ от json и передать егоответ на просмотрщик.

public class MainActivity extends AppCompatActivity {
APIInterface apiInterfacePages;
RecyclerView recyclerView;

List<MultipleResource.Datum> datumList= new ArrayList<>();
ProgressDialog dialog;
ProductsAdapter productsAdapter;
private List<Product> dataArrayList;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    apiInterfacePages= PageApiClient.getRetrofit().create(APIInterface.class);

    recyclerView= findViewById(R.id.recyclerView);
    productsAdapter= new ProductsAdapter();
    StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, LinearLayoutManager.VERTICAL);
    recyclerView.setLayoutManager(staggeredGridLayoutManager);
    getData();

}

private void getData() {
    dataArrayList = new ArrayList<>();


    Map<String, String> params = new HashMap<String, String>();
    params.put("categoryId", "0");
    params.put("countryId", "1");
    Call<List<Product>> call= apiInterfacePages.getProducts(params);
    call.enqueue(new Callback<List<Product>>() {
        @Override
        public void onResponse(Call<List<Product>> call, Response<List<Product>> response) {
            dataArrayList = response.body();
            productsAdapter.setData(dataArrayList);
            recyclerView.setAdapter(productsAdapter);


        }

        @Override
        public void onFailure(Call<List<Product>> call, Throwable t) {
            Log.i("Call response",t.getMessage());
        }
    });
}
}

Answer 2

Просмотрите этот пример , чтобы просмотреть изображения в сетке. Преобразуйте ваш jsonArray в ArrayList с помощью,

ArrayList<Cars> carsList = new Gson().fromJson(jsonArrayYouHave.toString(),new TypeToken<List<Cars>>() {
        }.getType());

Передайте этот массив на свой адаптер.

Используйте этот POJO,

    public class Cars {
    private String TitleAR;

    private String HaveModel;

    private String TitleEN;

    private String Id;

    private ArrayList<SubCategories> SubCategories;

    private String Photo;

    private String ProductCount;

    //Todo please add getter/setters for class Cars variables here

    public class SubCategories {
        private String TitleAR;

        private String HaveModel;

        private String TitleEN;

        private String Id;

        private ArrayList<String> SubCategories;

        private String Photo;

        private String ProductCount;

        //Todo please add getter/setters for class SubCategories variables here
    }

Я предлагаю использовать Retrofit, так как он предоставит вам проанализированный массив, который преобразуется в ответный POJO, который вы предоставили.Вы можете найти много примеров для Retrofit .