본문 바로가기

아옳옳의 코딩공부/아옳옳의 안드로이드스튜디오

2021-04-19안드로이드 스튜디오(RecycleView )

반응형

리스트뷰와는 다르게 다양한 항목구성가능 하고 또 따로 디자인도 가능하다 

 

어댑터뷰와 다르게 뷰 홀더를 필수로 해주어야 한다 

 

어댑터 클래스에 이너 클래스로 뷰 홀더를 만들어 준다 .

여기서 중요한점은 상속을 받을때 뷰 홀더를 만들고 어댑터클래스를 상속해줘야 오류가 없으니 순서 지켜서 상속 해주어야 한다 

 

여기까지가 필수 요소이다 .  (나머지 생략 ) 

 

이제 코드를 보고 한번 복습 해보자 

 

파일목록

 

어댑터 클래스

// 뷰홀더 먼저 만들고 해야지 안그러면 임플리먼트 안된다 .
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder>{
    Context context;

    ArrayList<Recycler_Model> list;
    RecyclerView recyclerView;

    //생성자 
    public MyAdapter(Context context, ArrayList<Recycler_Model> list, RecyclerView recyclerView) {
        this.context = context;
        this.list = list;
        this.recyclerView = recyclerView;
    }
    
    //2번 뷰홀더 생성되면서 인플레이터 한 텍스트뷰 사용 가능 
    class MyViewHolder extends RecyclerView.ViewHolder{
        TextView titleText , authorText;
        
        //뷰홀더의 생성자 생성과 동시에 findViewById 해줌 
        public MyViewHolder(View itemView) {
            super(itemView);
            this.titleText = itemView.findViewById(R.id.titleText);
            this.authorText = itemView.findViewById(R.id.authorText);
        }
    }
    @NonNull
    @Override //1번 콜백 메소드 임플리먼트 해주고 아래에서 리턴으로 뷰홀더를 생성하면 
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.item_recycler, parent , false);
        view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int postion = recyclerView.getChildAdapterPosition(v);
                Recycler_Model recycler_model = list.get(postion);
                Toast.makeText(context.getApplicationContext(), recycler_model.getTitle(),Toast.LENGTH_LONG).show();
            }
        }); // 뷰홀더 인스턴스
        return new MyViewHolder(view);
    }
    @Override   // 3. 여기로 뷰홀더가 들어와 사용 가능하게 된다. 
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
        Recycler_Model recycler_model = list.get(position);
        holder.titleText.setText(recycler_model.getTitle());
        holder.authorText.setText(recycler_model.getAuthor());
    }
    @Override   // 사이즈만큼 만들어 주겠다 
    public int getItemCount() {
        return list.size();
    }
}



메인클래스 

public class MainActivity extends AppCompatActivity {

    RecyclerView recyclerView;
    ArrayList<Recycler_Model> list;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        recyclerView = findViewById(R.id.recyclerView);
        list = new ArrayList<>();
        // 데이터 담아주기 
        list.add(new Recycler_Model("질서 너머", "조던 피터슨"));
        list.add(new Recycler_Model("달러 구트 꿈 백화점", "이미에"));
        list.add(new Recycler_Model("제 12회 젋은 작가상 수상작품집", "전하영"));
        list.add(new Recycler_Model("흔한남매 7", "흔한남매원작"));
        list.add(new Recycler_Model("주린이가 가장 알고싶은 최다질문 Top 77", "엄승환"));
        list.add(new Recycler_Model("멀록의 진화 과정", "멀록왕 아옳옳"));
        
        //어댑터 생성하면서 데이터 던져 주고 
        MyAdapter myAdapter = new MyAdapter(this, list,recyclerView);
        //레이아웃 매니저 설정 
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        //리사이클뷰에 어댑터 장착 
        recyclerView.setAdapter(myAdapter);

    }
}

 

데이터를 담아줄 클래스 

plic class Recycler_Model {

    String title;
    String author;
    public Recycler_Model(String title, String author) {
        this.title = title;
        this.author = author;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getAuthor() {
        return author;
    }

    public void setAuthor(String author) {
        this.author = author;
    }
}

이렇게 잘 나오는것을 볼 수있는데 여기서 중요한점은 리사이클뷰는 구분선이 따로 없다는게 단점이다. 

그래서 실습에서는 xml에 

이렇게 뷰를 하나 추가해주면서 임의로 선을 추가해준것을 볼수 있다. 

 

이번엔 카드뷰를 추가한 RecyclerView 실습이다. 

일단 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="wrap_content"
    android:orientation="vertical">
    <androidx.cardview.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_margin="20dp"
        card_view:cardCornerRadius="10dp">
        <ImageView
            android:id="@+id/iv_photo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"

            android:src="@mipmap/ic_launcher" />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="16dp">

            <TextView
                android:id="@+id/info_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="#106897"
                android:textSize="18dp" />

            <TextView
                android:id="@+id/info_age"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/info_email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>
</LinearLayout>

이렇게 카드뷰를 추가해주고 이번엔 이미지를 추가하기 위하여 이미지뷰도 추가한것을 볼수 있다 .

 

어댑터(데이터클래스 생략 ) 

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

    ArrayList<Item> itemArrayList;

    public MyAdapter(ArrayList<Item> itemArrayList) {
        this.itemArrayList = itemArrayList;
    }

    @NonNull
    @Override//1. 인플레이터 하고 뷰홀더 인스턴스화
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.card_item, parent , false);
        return new MyViewHolder(view);
    }

    @Override// 직접적인 텍스트와 이미지 셋팅 
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
        holder.nameTxt.setText(itemArrayList.get(position).getName());
        holder.ageInt.setText(itemArrayList.get(position).getAge()+"세");
        holder.emailTxt.setText(itemArrayList.get(position).getEmail());
        holder.imageView.setImageResource(itemArrayList.get(position).getResid());
    }

    @Override// 사이즈만큼 만들어 주겠다 
    public int getItemCount() {
        return itemArrayList.size();
    }
    
    //뷰홀더 클래스 
    class MyViewHolder extends RecyclerView.ViewHolder{
        TextView nameTxt;
        TextView ageInt;
        TextView emailTxt;
        ImageView imageView;
        //인스턴스화 하면서 각종 뷰들 findViewById 해줌 
        //이렇게 해주면 다음에 또 findViewById할 필요 없음 
        public MyViewHolder(View itemView) {
            super(itemView);
            this.nameTxt = itemView.findViewById(R.id.info_text);
            this.ageInt = itemView.findViewById(R.id.info_age);
            this.emailTxt = itemView.findViewById(R.id.info_email);
            this.imageView = itemView.findViewById(R.id.iv_photo);
        }
    }

}

메인

public class MainActivity extends AppCompatActivity {

    ArrayList<Item> itemArrayList;
    RecyclerView recyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        recyclerView = findViewById(R.id.recyclerView);

        itemArrayList = new ArrayList<>();
        itemArrayList.add(new Item("아옳이", 12, "아옳이@아옿옳옳" ,R.drawable.a));
        itemArrayList.add(new Item("아옳옳", 52,"아옳옳@아옿옳옳",R.drawable.b));
        itemArrayList.add(new Item("아오오롷", 35,"아오오롷@아옿옳옳",R.drawable.c));
        itemArrayList.add(new Item("옳옳", 5,"옳옳@아옿옳옳",R.drawable.d));
        itemArrayList.add(new Item("멀록왕아옳옳", 560,"멀록왕아옳옳@아옿옳옳",R.drawable.e));

        MyAdapter adapter = new MyAdapter(itemArrayList);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setAdapter(adapter);


    }
}

 

이렇게 잘 출력 되는것을 볼수 있다 .

반응형