리싸이클러뷰 만들기

 

Person.java

package com.techtown.recyclerview;

public class Person {
    String name;
    String mobile;

    public Person(String name, String mobile) {
        this.name = name;
        this.mobile = mobile;
    }
    public String getName(){

        return name;
    }
    public void setName(String name){

        this.name = name;
    }
    public String getMobile(){

        return mobile;
    }
    public void setMobile(String mobile){

        this.mobile = mobile;
    }
}

리싸이클러뷰란 리스트 모양으로 보여줄 수 있는 위젯으로 리싸이클러뷰가 있습니다.리싸이클러뷰는 기본적으로 상하 스크롤이 가능하지만 좌우 스크롤도 만들 수 있습니다.그리고 각각 아이템이 화면에 보일 떄 메모리를 효율적으로 사용할수 있도록 캐시(Cache)메커니즘이 구현되어 있습니다.리싸이클러뷰를 이용해서 리스트 모양으로 보여주는 방법을 알라보겠습니다

 

RecyclerView라는 새로운 프로젝트를 만듭니다.패키지 이름은 org.techtown.recyclerview로 입력합니다,프로젝트 창이 열리면 activity_main.xml 파일을 엽니다. 최상위 레이웃을 LinearLayout으로 변경하고 orientation속성 값은 vertical로 설정합니다.기존에 있던 텍스트뷰는 삭제한 후 RecyclerView를 끌어다 화면에 놓습니다.RecyclerView의 layout_width속성과layout_height 속성 값은 모두 match_parent로 설정하여  이뷰가 화면 전체를 채우게 합니다.

 

그리고 id속성 값을recyclerView로 설정합니다.또 리싸이클러뷰는 선택 위젯이기 떄문에 어댑터가 데이터 관리와 뷰 객체 관리를 담당합니다.리싸이클러뷰는 껍데기 역할을 한다고 생각하면 쉽숩니다.어댐터를 만들기 전에 아댑터 안에 들어갈 각 아이템의 데이터를 담아둘 클래스를 하나 정의합니다, 여기에서는 전화번호부 처럼 사람 목록을 보여 줄 예정이므로 Person이라는 이름의 클래스를 하나 만듭니다.왼쪽 프로젝트 창에서 /app/java/org.techtown.recyclerview폴더를 선택한 후 마우스 오른쪽 버튼을 누릅니다 메뉴가 보이면 New Java Class 메뉴를 눌러 새로운 클래스를 만듭니다.Person.java 파일이 만들어지면 다음 코드를 입력합니다.

 

 

name은 사람 이름.mobile은 전화번호를 저장해두기 위한 변수입니다.이 클래스에 생성자 하나와 get,set메서드를 추가해 보겠습니다.클래스를 위한 중괄호 안에 커서를 두고 마우스 오른쪽 버튼을 누릅니다.메뉴가 보이면Generate>>>Constructor매뉴를 누릅니다.Crtl을 누른 상태에서 name,mobile 두 개의 파라미터를 선택한후 OK버튼을 눌러 생성자를 추가합니다.생성자를 추가했으면 이제 get,set메서드를 추가합니다.클래스를 위한 중괄호 안에 커서를 두고 다시 마우스 오른쪽 버튼을 누릅니다.메뉴가 보이면 Generate>>>Getter and Setter메뉴를 누릅니다.ctrl을 누른 상태에서name,mobile 두 개의 파라미터를 선택한 후 OK 버튼을 눌러 get,set 메서드를 추가합니다.

 

PersinAdapter.java

package com.techtown.recyclerview;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

public class PersonAdapter extends RecyclerView.Adapter<PersonAdapter.ViewHolder> {
    ArrayList<Person> items = new ArrayList<Person>();

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(viewGroup.getContext());
        View itemView = inflater.inflate(R.layout.person_item, viewGroup, false);

        return new ViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder viewHolder, int position) {
        Person item = items.get(position);
        viewHolder.setItem(item);
    }

    @Override
    public int getItemCount() {

        return items.size();
    }

    public void addItem(Person item) {

        items.add(item);
    }

    public void setItems(ArrayList<Person> items) {

        this.items = items;
    }

    public Person getItem(int position) {

        return items.get(position);
    }

    public void setItem(int position, Person item) {

        items.set(position, item);
    }

    static class ViewHolder extends RecyclerView.ViewHolder {
        TextView textView;
        TextView textView2;

        public ViewHolder(View itemView) {
            super(itemView);

            textView = itemView.findViewById(R.id.textView);
            textView2 = itemView.findViewById(R.id.textView2);
        }

        public void setItem(Person item) {
            textView.setText(item.getName());
            textView2.setText(item.getMobile());
        }

    }

}

 

PersinAdapter.java 파일이 만들어지면 그 안에 먼저 ViewHolder 클래스를 static으로 정의합니다.

리스트 형태로 보일 떄 가가의 아이템은 뷰로 만드렁지면 가가의 아이템을 위한 뷰는 뷰홀더에 담아두게 됩니다.이 뷰홀더 역할을 하는 클래스를 PersinAdapter 클래스 안에 넣어둔다고 생각하면 됩니다.RecyclerView.ViewHolder 클래스를 상속하여 상속하여 정의된 ViewHolder 클래스의 생서자에는 뷰 객체가 전달됨니다. 그리고 전달 받은 이 객체를 부모 클래스의 변수에 담아두고 생성자 안에서 super메서드를 호출하면 됨니다.그리고 전달받은 뷰 객체의 이미지나 텍스트뷰를 findViewByld메서드로 찾아 변수에 활당하면 setIem메서드에서 참조할 수 있습니다.setItem 메서드는 이 뷰홀더에 들어 있는 뷰 객체의 데이터를 다른 것으로 보이도록 하는 역할을 합니다.각 아이템을 위해 XML레이아웃을 person_item.xml로 만들었다는 것을 전제로 했습니다.따라서 /app/res/layout 폴더 안에 person_item.xml파일을 만들고 레이아웃을 구성합니다.

이 레이크아웃은 앞 단락에서 만들었던 것과 동일합니다.카드뷰를 사용하고 있고 왼쪽에는 이미지 하나,오른쪽에는 텍스트뷰 두 개를 보여주는 레이아웃입니다.텍스트뷰에는 textView와textView2라는 id속성 값을 설정합니다.이 id값은 뷰홀더 안에서 덱스트뷰를 fndViewById메서드로 찾을 떄 사용되므로 XML 레이아웃에 설정된 id값과 어텝터 소스 코드에서 사용하는 id값이 동일해야 합니다.그리고 레이아웃을 상속하여 새로운 뷰를 만들 때는 XML 레이아웃과 뷰 소스 코드가 한 쌍으로 필요했지만 XML 레이아웃만 있으면 됩니다.XML레이아웃ViewGroup객체에 인플레이션한 후 ViewHolder 객체에 넣어 둘 것이기 떄문입니다.Person 객체를 ArrayList안에 넣어 관리하기 떄문에 이 어댑터를 사용하는 소스 코드에서 어댑터Person 객체를 넣거나 가져갈 수 있도록 addItem,setItems,getItem,setItem 메서드를 PersinAdapter에 추가합니다

 

MainActivity.java

package com.techtown.recyclerview;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;

 public class MainActivity extends AppCompatActivity {

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

        RecyclerView recyclerView = findViewById(R.id.recyclerView);

        LinearLayoutManager layoutManager = new LinearLayoutManager(this,LinearLayoutManager.VERTICAL,false);
        recyclerView.setLayoutManager(layoutManager);

        PersonAdapter adapter = new PersonAdapter();

        adapter.addItem(new Person("김민수","010-1000-1000"));
        adapter.addItem(new Person("김하늘","010-2000-2000"));
        adapter.addItem(new Person("홍길동","010-3000-3000"));

        recyclerView.setAdapter(adapter);
    }
}

리싸이클러뷰에는 레이아웃 매니저를 설정할 수 있습니다.레이아웃 매니저는 리싸이클러뷰가 보일 기본적인 형태를 설정 할 떄 사용하는 데 자주 사용하는 형태는 세로 방향,가로 방향,격자 모양입니다. 다시 말해 보통 리스트 모양으로도 보여줄 수 있는 거죠 여기에서는 LinearLayoutManager 객체를 사용하면서 방향을 VERTICAL로 설정했기 떄문에 세로 방향 스크롤로 보이게 됩니다. 마약 가로 방향 스크롤로 보여주고 싶다면 HORIZONTAL로 설정하면 되고격자 모양어로 보여 주고 싶다면 GridLayoutManager 객테를 사용하면 칼럼의 수를 지정하면 됨니다.

기싸이클러뷰에 레이아웃 매니저 객체를 설정하기 위해 setLayoutManager 메서드를 호출합니다.그리고 그 아래에서는 PersonAdapter 객체를 만든 후 setAdapter 메서드를 호출하면서 파라미터로 전달합니다. 이렇게 하면 리싸이클러뷰가 어댑터와 상호작용하면서 리스트 모양으로 보여주게 됩니다,어댑터에 Persin객체를 추가할 때는 addItem 메서드를 사용합니다. 세 개의 Person 객체를 만들어 추가했으니 화면에는 세 개의 아이탬이 보이게 될 것입니다.

리싸이클러뷰를 사용한 앱 화면 실행화면