[안드로이드] RecyclerView 아이템 클릭 상세화면 보여주는 방법

이번 시간에는 RecyclerView로 리스트를 보여줄 때

아이템 클릭 시 상세하면 보여주는 방법에

대해 알아보겠습니다.

---

목차

1. 실행 화면

2. person 클래스 만들기 Person.java

3. pserson 화면 만들기 person_item.xml

4. 상세 화면 (액티비티 추가) 

5. 상세 화면 구성 activity_detail.xml

6. 상세 코드 구현 DetailActivity.java 

7. PersonAdapter 만들기 PersonAdapter.java

8. 메인 화면 구성 activity_main.xml

9. 메인 코드 구현 MainActivity.java

---

1. 실행 화면

 

 

2. person 클래스 만들기 Person.java

public class Person {

    private String id; //아이디
    private String name; //이름
    private String age; // 나이
    private String sex; // 성별

    public Person(String id, String name, String age, String sex) {
        this.id = id;
        this.name = name;
        this.age = age;
        this.sex = sex;
    }

    public String getId() {
        return id;
    }

    public String getName() {
        return name;
    }

    public String getAge() {
        return age;
    }

    public String getSex() {
        return sex;
    }
}

2021.12.31 - [안드로이드] - [안드로이드 스튜디오] 자바 클래스 생성하는 방법

[안드로이드 스튜디오] 자바 클래스 생성하는 방법

 

3. pserson 화면 만들기 person_item.xml

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

    <androidx.cardview.widget.CardView
        android:id="@+id/layout_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:backgroundTint="@color/purple_200"
        app:cardCornerRadius="20dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/id_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="20dp"
                android:text="Id"
                android:textColor="@color/white"
                android:textSize="15sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/name_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="20dp"
                android:text="Name"
                android:textColor="@color/white"
                android:textSize="15sp"
                android:textStyle="bold" />
        </LinearLayout>

    </androidx.cardview.widget.CardView>
</LinearLayout>

2022.01.01 - [안드로이드] - [안드로이드 스튜디오] 레이아웃 추가하는 방법

[안드로이드 스튜디오] 레이아웃 추가하는 방법

res -> values -> colors.xml

<color name="purple_200">#FFBB86FC</color>

 

 

4. 상세 화면 (액티비티 추가) DetailActivity.java

app -> 마우스 오른쪽 -> New -> Activity -> Empty Activity

 

 

5. 상세 화면 구성 activity_detail.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".DetailActivity">

    <!-- ID -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ID:"
            android:textColor="@color/black"
            android:textSize="30sp" />

        <TextView
            android:id="@+id/detail_id_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:textColor="@android:color/black" />
    </LinearLayout>

    <!-- 이름 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="이름:"
            android:textColor="@color/black"
            android:textSize="30sp" />

        <TextView
            android:id="@+id/detail_name_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:textColor="@android:color/black"
            />
    </LinearLayout>

    <!-- 나이 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="나이:"
            android:textSize="30sp"
            android:textColor="@android:color/black"
            />

        <TextView
            android:id="@+id/detail_age_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:textColor="@android:color/black"
            />
    </LinearLayout>

    <!-- 성별 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="성별:"
            android:textSize="30sp"
            android:textColor="@android:color/black"
            />

        <TextView
            android:id="@+id/detail_sex_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:textColor="@android:color/black"
            />
    </LinearLayout>
</LinearLayout>

 

6. 상세 코드 구성 DetailActivity.java

public class DetailActivity extends AppCompatActivity {

    TextView detail_id_text, detail_name_text, detail_age_text, detail_sex_text;

    String id, name, age, sex;

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

        detail_id_text = findViewById(R.id.detail_id_text);
        detail_name_text = findViewById(R.id.detail_name_text);
        detail_age_text = findViewById(R.id.detail_age_text);
        detail_sex_text = findViewById(R.id.detail_sex_text);

        //메인엑티비티에서 받아온 데이터
        Intent intent = getIntent();

        id = intent.getExtras().getString("id");
        name = intent.getExtras().getString("name");
        age = intent.getExtras().getString("age");
        sex = intent.getExtras().getString("sex");

        detail_id_text.setText(id);
        detail_name_text.setText(name);
        detail_age_text.setText(age);
        detail_sex_text.setText(sex);
    }
}

 

7. PersonAdapter 만들기 PersonAdapter.java

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

    ArrayList<Person> psersonList = new ArrayList<Person>();
    
    public PersonAdapter(ArrayList<Person> psersonList) {
        this.psersonList = psersonList;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {

        LayoutInflater inflater = LayoutInflater.from(viewGroup.getContext());
        View view = inflater.inflate(R.layout.person_item, viewGroup, false);

        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, final int position) {
        
        Person person = psersonList.get(position);
        
        //화면에 데이터 담기
        holder.setItem(person);

        //아이템 클릭 이벤트
        holder.card_view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                int mPostion = holder.getAdapterPosition();

                Context context = view.getContext();

                Intent detailActivity = new Intent(context, DetailActivity.class);

                detailActivity.putExtra("id"    ,psersonList.get(mPostion).getId()); //아이디
                detailActivity.putExtra("name"  ,psersonList.get(mPostion).getName()); //이름
                detailActivity.putExtra("age"   ,psersonList.get(mPostion).getAge()); //나이
                detailActivity.putExtra("sex"   ,psersonList.get(mPostion).getSex()); //성별

                ((MainActivity)context).startActivity(detailActivity);
            }
        });
    }

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

    static class ViewHolder extends RecyclerView.ViewHolder{

        TextView id_text, name_text;
        CardView card_view;

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

            id_text = itemView.findViewById(R.id.id_text);
            name_text = itemView.findViewById(R.id.name_text);
            card_view = itemView.findViewById(R.id.layout_container);
        }

        public void setItem(Person person){

            id_text.setText(person.getId());
            name_text.setText(person.getName());
        }
    }
}

 

8. 메인 화면 구성 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

</LinearLayout>

 

9. 메인 코드 구현 MainActivity.java

public class MainActivity extends AppCompatActivity {

    PersonAdapter personAdapter;

    RecyclerView recyclerView;

    ArrayList<Person> personList = new ArrayList<Person>();

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

        createDate();

        recyclerView = findViewById(R.id.recyclerView);

        personAdapter = new PersonAdapter(personList);

        recyclerView.setAdapter(personAdapter);
    }

    //샘플 데이터 생성
    public void createDate(){

        for(int i = 0; i < 10; i++){
            Person person = new Person("id"+i, "name"+i, "age"+i, "sex"+i);
            personList.add(person);
        }
    }
}

 

2022.01.08 - [안드로이드] - [안드로이드] 밀어서 화면 변경 ViewPager2 화면 변경하면 표시(Indicator) 해주는 방법

[안드로이드] 밀어서 화면 변경 ViewPager2 화면 변경하면 표시(Indicator) 해주는 방법

2022.01.09 - [안드로이드] - [안드로이드] 밀어서 화면 변경 ViewPager2 화면 변경 표시(Indicator) 직접 만드는 방법

[안드로이드] 밀어서 화면 변경 ViewPager2 화면 변경 표시(Indicator) 직접 만드는 방법

2022.01.10 - [안드로이드] - [안드로이드] 밀어서 화면 변경 ViewPager2 화면 변경 버튼 만드는 방법

[안드로이드] 밀어서 화면 변경 ViewPager2 화면 변경 버튼 만드는 방법