사용자 환경 : macOS Sierra 10.12.6, Android Studio 3.0.1 {
Build #AI-171.4443003, built on November 10, 2017
JRE: 1.8.0_152-release-915-b08 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
}
이번에는 커스텀 리스트뷰에 대해 알아보고자 한다.
먼저 이 앱의 최종 화면은 다음과 같다.
각 아이템을 클릭 시 맨 우측에 좋아요 숫자가 올라가는 기능도 구현할 예정이다.
1. 프로젝트를 생성한다.
2. 해당 파일을 받고 앞축을 푼 후 android 폴더에 있는 다음 폴더들을 전부 복사한다.
ic_thumb_up_black_18dp.zip
2-1. 다시 안드로이드 스튜디오로 돌아와 프로젝트 뷰로 변경 후 다음 경로를 찾아 복사한다.
2-2. res 폴더를 클릭후 복사(Ctrl + v)한다.
이로써 개발에 앞서 모든 준비가 완료되었다. 본격적으로 코딩을 시작해보자.
3. 리스트뷰에 사용될 아이템을 지닌 클래스를 생성한다. ListviewItem.java
public class ListviewItem {
private String strName;
private int nId, nLike;
public String getStdName() {
return stdName;
}
public void setStrName(String strName) {
this.strName = strName;
}
public int getId() {
return nId;
}
public void setId(int nId) {
this.nId = nId;
}
public int getLike() {
return nLike;
}
public void setLike(int nLike) {
this.nLike = nLike;
}
}
line 3. strName은 최종 실행화면의 C, Java 등을 나타내는 제목이다.
line 4. nId, nLike는 역시 최종 실행화면의 맨 좌측과 우측의 숫자를 나타낸다.
4. 리스트뷰 레이아웃 설정한다. layout_listview.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="horizontal"
android:weightSum="1">
<TextView
android:id="@+id/txt_id"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.1"
android:gravity="center"/>
<TextView
android:id="@+id/txt_name"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.7"
android:textStyle="bold"
android:gravity="center"/>
<ImageView
android:id="@+id/img_up"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.1"
android:gravity="center"
android:src="@drawable/ic_thumb_up_black_18dp"/>
<TextView
android:id="@+id/txt_like"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.1"
android:gravity="center"/>
</LinearLayout>
5. 리스트뷰를 사용할 어댑터 클래스를 생성한다. ListviewAdapter.java
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;
import java.util.ArrayList;
public class ListviewAdapter extends BaseAdapter {
private ArrayList<listviewitem> arrayList;
private int nId;
public ListviewAdapter() {
arrayList = new ArrayList<listviewitem>();
nId = 0;
}
@Override
public View getView(int i, View view, ViewGroup viewGroup) {
final Context context = viewGroup.getContext();
ListviewItem listItem = arrayList.get(i);
if (view == null) {
LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = inflater.inflate(R.layout.layout_listview, viewGroup, false);
}
TextView id = (TextView)view.findViewById(R.id.txt_id);
TextView name = (TextView)view.findViewById(R.id.txt_name);
TextView like = (TextView)view.findViewById(R.id.txt_like);
id.setText(String.valueOf(listItem.getId()));
name.setText(listItem.getStdName());
like.setText(String.valueOf(listItem.getLike()));
return view;
}
public void addItem(String name) {
ListviewItem item = new ListviewItem();
item.setId(++nId);
item.setStdName(name);
item.setLike(0);
arrayList.add(item);
}
@Override
public int getCount() {
return arrayList.size();
}
@Override
public Object getItem(int i) {
return arrayList.get(i);
}
@Override
public long getItemId(int i) {
return i;
}
}
6. 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="com.example.ahn.customlistview.MainActivity">
<ListView
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
</LinearLayout>
7. 마지막으로 메인 액티비티에서 기능을 구현해보자.
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
public class MainActivity extends AppCompatActivity {
private String[] lang = {
"C",
"Java",
"PHP",
"Swift"
};
private ListView listView;
private ListviewAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
adapter = new ListviewAdapter();
listView = (ListView)findViewById(R.id.listview);
listView.setAdapter(adapter);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView parent, View v, final int position, long id) {
// get item
ListviewItem item = (ListviewItem)parent.getItemAtPosition(position);
int getLike = item.getLike();
item.setLike(++getLike);
adapter.notifyDataSetChanged();
}
});
initList();
}
public void initList() {
for(int i=0; i<lang.length; i++) {
adapter.addItem(lang[i]);
adapter.notifyDataSetChanged();
}
}
}line 9~14. 리스트뷰에 사용될 아이템 제목들이다.
line 27. 전에 생성했던 어댑터를 리스트뷰에 세팅한다.
line 32. 리스트를 클릭 시 해당 아이템의 번호를 인덱스로 하여 참조를 얻는다.
line 34~36. 좋아요를 +1 시키는 작업을 하고나서 데이터가 변경되었음을 알린다.
line 43. C, Java 등을 리스트에 추가한다.
이로써 커스텀 리스트뷰를 사용할 수 있게 되었다.