Android Studio

리사이클러뷰(Recyclerview)를 사용하여 이미지 출력하기

리콜 2022. 12. 5. 14:03

리사이클러뷰는 안에 추가한 포스트 리스트 갯수 만큼만 가져와 보여주는 뷰이다.

많은수의 뷰를 일정 영역안에서 스크롤하며 계속 가져와 보여줄 수 있다는 장점이 있고 안에 넣은 뷰 만큼 가변되어 보여준다.

 

먼저 리사이클러뷰를 만들어준다. 프레그먼트의 레이아웃에 생성하였다.

<androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/PosterList"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:layout_constraintBottom_toTopOf="@+id/recyclerView"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

그뒤 프래그먼트.java에서 recyclerview객체를 생성한뒤 레이아웃을 넣어주었다.

onCreate에서 리사이클러뷰에 들어갈것들을 넣어주는 어댑터를 설정해준다.

private RecyclerView posterRecyclerView;

    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
                             posterRecyclerView = view.findViewById(R.id.PosterList);
                                posterRecyclerView.setHasFixedSize(true);
                                posterRecyclerView.setLayoutManager(new LinearLayoutManager(getActivity(), RecyclerView.HORIZONTAL, false));

                                posters = new ArrayList<Poster>();
                                posterAdapter = new PosterAdapter();
                                posterRecyclerView.setAdapter(posterAdapter);
                             }

어댑터는 아래와 같이 생겼다.  Glide를 이용하여 이미지뷰에 이미지를 넣고 그 이미지 뷰를 어댑터를 통해 리사이클러뷰에 넣어주는 것이다.

public class PosterAdapter extends RecyclerView.Adapter<PosterAdapter.PosterViewHolder> {
    private Context context;
    private ArrayList<Poster> posterList = new ArrayList<>();

    public PosterAdapter()
    {

    }
    public PosterAdapter(Context context, ArrayList<Poster> posterList){
        this.context = context;
        this.posterList = posterList;
    }


    @Override
    public PosterViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

        View v = LayoutInflater.from(context).inflate(R.layout.item_poster,parent,false);
        return new PosterViewHolder(v);
    }
    @Override
    public void onBindViewHolder(@NonNull final PosterViewHolder holder, int position) {
        Poster currentPoster = posterList.get(position);
        String imageUrl = currentPoster.getImageUrl();
        Glide.with(context).load(imageUrl).into(holder.imageView);
    }

    @Override
    public int getItemCount() {
        return posterList.size();
    }
    public class PosterViewHolder extends RecyclerView.ViewHolder{
        public ImageView imageView;

        public PosterViewHolder(View itemView)
        {
            super(itemView);
            imageView= itemView.findViewById(R.id.image_view);
        }
    }

}
<LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="10dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/image_view"
            android:layout_width="200dp"
            android:layout_height="300dp" />

    </LinearLayout>

그 뒤 저번의 volley로 요청하여 받아오는 makeRequest()에서

public void makeRequest(String url) {
        StringRequest request = new StringRequest(Request.Method.GET, url, new Response.Listener<String>() {
            @Override
            public void onResponse(String response) {
                Log.v("output popular", response); //요청 출력해보기
                Gson gson = new Gson();  //gson라이브러리 선언

                //ListView PosterList = view.findViewById(R.id.ListView);  리스트뷰 추가후 수정예정

                MovieList movieList = gson.fromJson(response, MovieList.class); //gson으로 Json파일 object로 변환


                Movie movie = movieList.results.get(0);
                //Movie movie2 = movieList.results.get(1);
                Movie movie3 = movieList.results.get(2);
                //Movie movie4 = movieList.results.get(3);

                posters = new ArrayList<Poster>();
                posters.add(new Poster(movie.title.toString(), movie.poster_path));
                //posters.add(new Poster(movie2.title.toString(), movie2.poster_path));
                posters.add(new Poster(movie3.title.toString(), movie3.poster_path.toString()));
                //posters.add(new Poster(movie4.title.toString(), movie4.poster_path.toString()));

                posterAdapter = new PosterAdapter(getActivity(), posters);
                posterRecyclerView.setAdapter(posterAdapter);
                Log.v("Poster", posters.get(0).toString());

            }

다음과 가팅 posters에 추가 한뒤 어댑터에 posters를 넣어주었다.

반응형