프로그래밍(programming)/안드로이드(android)
[210504] 안드로이드 카드뷰(CardView)
하빌리즘
2021. 5. 4. 22:39
반응형
(210517 수정)
카드뷰(CardView)는 FrameLayout을 확장한 형태로써 리스트 형식으로 보여주는데
둥근 모서리와 그림자의 추가로 레이아웃을 보다 더 예쁘고 깔끔하게 해줘서
많은 개발자들이 이용하고 있다. (단순히 레이아웃이 카드 모양과 닮았다고 해서 카드뷰이다.)
일반적으로 리스트 형식으로 사용하니까
재사용이 가능한 RecyclerView를 사용하겠다.
우선 가장 중요한 카드 모양을 만들기 위한
속성부터 알아보겠다.
cardElevation : 카드의 그림자를 생성 및 설정
cardCornerRadius : 카드의 모서리를 둥글게 설정
cardBackGroundColor : 카드의 배경색을 설정
contentPadding : 카드 내부 간격을 설정
.....
속성들이 몇 개 더 있지만 주로 사용하는 것들로 구성해보았다.
이제 카드뷰를 만들어보자.
먼저, 카드뷰 라이브러리를 build.gradle Module:app에 추가한다.
|
1
2
3
4
5
|
dependencies {
implementation 'androidx.cardview:cardview:1.0.0'
implementation 'androidx.recyclerview:recyclerview:1.2.0'
}
|
cs |
그리고나서 레이아웃을 만들건데 activity_main.xml에는 껍데기인 리사이클러뷰만 추가해놓고
카드를 만들 새 레이아웃 파일인 card_item.xml을 생성한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<?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"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
card_view:cardCornerRadius="20dp"
card_view:cardElevation="15dp"
card_view:contentPadding="10dp"
card_view:cardBackgroundColor="@color/white">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="@+id/cardImg"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="@drawable/maple"
android:scaleType="centerCrop" />
<TextView
android:id="@+id/cardTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="이름"
android:layout_below="@+id/cardImg"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"/>
<TextView
android:id="@+id/cardContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="내용"
android:layout_below="@+id/cardTitle"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp" />
<ImageView
android:layout_width="20dp"
android:layout_height="30dp"
android:src="@android:drawable/ic_menu_delete"
android:layout_below="@id/cardImg"
android:layout_alignParentRight="true"
android:layout_margin="5dp" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
|
cs |
CardView 안에 RelativeLayout을 만들어서
제목과 내용 반대쪽에 삭제이미지 버튼을 놓는다.
다음으로 카드 아이템의 데이터(이미지뷰, 제목, 내용)를 담고 있는 모델을 생성한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
public class CardItem {
public int imageView;
public String title;
public String content;
public CardItem(int imageView, String title, String content) {
this.imageView = imageView;
this.title = title;
this.content = content;
}
}
|
cs |
이제 껍데기인 리사이클러뷰를 어댑터를 통해서
화면에 보여지게 할 것이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
private ArrayList<CardItem> cardItems = new ArrayList<>(); // 카드 아이템을 담아주는 ArrayList
public RecyclerViewAdapter() {
//카드 아이템 추가
cardItems.add(new CardItem(R.drawable.maple, "메이플스토리", "미니게임"));
cardItems.add(new CardItem(R.drawable.maple, "하빌리즘", "카드뷰 기능 구현"));
cardItems.add(new CardItem(R.drawable.maple, "인스타", "#좋아요반사"));
cardItems.add(new CardItem(R.drawable.maple, "메이플스토리", "미니게임"));
cardItems.add(new CardItem(R.drawable.maple, "하빌리즘", "카드뷰 기능 구현"));
cardItems.add(new CardItem(R.drawable.maple, "인스타", "#좋아요반사"));
}
@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
// 생성되면서 자동으로 호출됨 -> card_item.xml을 인플레이션
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.card_item, parent, false);
return new VierHolder(view); // 뷰홀더 객체를 생성하면서 뷰 객체를 전달하고 그 뷰홀더 객체를 반환
}
@Override // 뷰홀더가 재사용될 때 호출됨, 뷰 객체는 기존 것을 그대로 사용하고 데이터만 바꿔줌
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
((VierHolder)holder).cardImg.setImageResource(cardItems.get(position).cardImg);
((VierHolder)holder).cardTitle.setText(cardItems.get(position).cardTitle);
((VierHolder)holder).cardContent.setText(cardItems.get(position).cardContent);
}
@Override
public int getItemCount() {
return cardItems.size(); // 카드 아이템 리스트의 크기
}
private class VierHolder extends RecyclerView.ViewHolder {
public ImageView cardImg;
public TextView cardTitle;
public TextView cardContent;
public VierHolder(View view) { // 뷰홀더 생성자로 전달되는 뷰 객체를 참조함(아이템들은 뷰로 만들어지고, 뷰는 뷰홀더에 담아둠)
super(view); // 이 뷰 객체를 부모 클래스의 변수에 담아둠
cardImg= (ImageView)view.findViewById(R.id.cardImg);
cardTitle= (TextView)view.findViewById(R.id.cardTitle);
cardContent= (TextView)view.findViewById(R.id.cardContent);
}
}
}
|
cs |
실질적인 리사이클러뷰 구현은 이 정도가 끝이고
이것을 MainActivity.java 안에 있는 껍데기 리사이클러뷰와 연결만 해주면 된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
public class MainActivity extends AppCompatActivity {
private ArrayList<CardItem> cardItems = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RecyclerView recyclerView = (RecyclerView)findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
recyclerView.setAdapter(new RecyclerViewAdapter());
}
|
cs |
카드뷰로 무궁무진한 응용을 해보자.
피드백은 언제나 환영입니다.
반응형