ListView란 무엇인가?
ListView 예제를 살펴보기 전에 ListView에 대해 먼저 간단히 알아보겠습니다. ListView는 ArrayList, List 또는 데이터베이스 등에서 가져온 항목들의 집합입니다. 주로 항목들을 세로 방향으로 나열하는 데 사용되며, 사용자는 위아래로 스크롤하면서 원하는 항목을 클릭할 수 있습니다.
커스텀 ListView란?
커스텀 ListView는 CustomAdapter(커스텀 어댑터)를 기반으로 동작합니다. 이 커스텀 어댑터를 통해 개발자가 직접 정의한 객체를 ListView에 전달할 수 있습니다. 아래 예제에서는 과목(Subject) 데이터를 ListView에 연결하는 과정을 단계별로 살펴보겠습니다.
1단계 – 새 프로젝트 생성
Android Studio에서 File → New Project로 이동하여 새 프로젝트를 만들고, 프로젝트 생성에 필요한 모든 세부 정보를 입력합니다.
2단계 – 레이아웃 파일 작성
res/layout/activity_main.xml 파일에 다음 코드를 추가합니다.
<?xml version = "1.0" encoding = "utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android = "https://schemas.android.com/apk/res/android" xmlns:tools = "https://schemas.android.com/tools" android:layout_width = "match_parent"
android:layout_height = "match_parent">
<LinearLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical">
<ListView
android:id = "@+id/list"
android:layout_width = "wrap_content"
android:layout_height = "match_parent"
android:divider = "#000"
android:dividerHeight = "1dp"
android:footerDividersEnabled = "false"
android:headerDividersEnabled = "false"/>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
위의 activity_main.xml에서는 ListView를 선언하고, 항목 사이에 표시될 구분선(divider)을 다음과 같이 설정했습니다.
<ListView
android:id = "@+id/list"
android:layout_width = "wrap_content"
android:layout_height = "match_parent"
android:divider = "#000"
android:dividerHeight = "1dp"
android:footerDividersEnabled = "false"
android:headerDividersEnabled = "false"
/>
3단계 – MainActivity 작성
src/MainActivity.java 파일에 다음 코드를 추가합니다.
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ListView;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ListView list = findViewById(R.id.list);
ArrayList<SubjectData> arrayList = new ArrayList<SubjectData>();
arrayList.add(new SubjectData("JAVA", "https://www.tutorialspoint.com/java/", "https://www.tutorialspoint.com/java/images/java-mini-logo.jpg"));
arrayList.add(new SubjectData("Python", "https://www.tutorialspoint.com/python/", "https://www.tutorialspoint.com/python/images/python-mini.jpg"));
arrayList.add(new SubjectData("Javascript", "https://www.tutorialspoint.com/javascript/", "https://www.tutorialspoint.com/javascript/images/javascript-mini-logo.jpg"));
arrayList.add(new SubjectData("Cprogramming", "https://www.tutorialspoint.com/cprogramming/", "https://www.tutorialspoint.com/cprogramming/images/c-mini-logo.jpg"));
arrayList.add(new SubjectData("Cplusplus", "https://www.tutorialspoint.com/cplusplus/", "https://www.tutorialspoint.com/cplusplus/images/cpp-mini-logo.jpg"));
arrayList.add(new SubjectData("Android", "https://www.tutorialspoint.com/android/", "https://www.tutorialspoint.com/android/images/android-mini-logo.jpg"));
CustomAdapter customAdapter = new CustomAdapter(this, arrayList);
list.setAdapter(customAdapter);
}
}
MainActivity에서는 CustomAdapter를 선언하고 SubjectData 객체 목록을 전달합니다. 핵심 코드는 다음과 같습니다.
CustomAdapter customAdapter = new CustomAdapter(this, arrayList);
list.setAdapter(customAdapter);
4단계 – CustomAdapter 클래스 생성
src/CustomAdapter.java 파일을 새로 만들고 다음 코드를 추가합니다. 이 어댑터는 각 항목의 뷰를 생성하고, 제목 텍스트와 이미지를 바인딩하는 역할을 담당합니다.
import android.content.Context;
import android.database.DataSetObserver;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.ListAdapter;
import android.widget.TextView;
import com.squareup.picasso.Picasso;
import java.util.ArrayList;
class CustomAdapter implements ListAdapter {
ArrayList<SubjectData> arrayList;
Context context;
public CustomAdapter(Context context, ArrayList<SubjectData> arrayList) {
this.arrayList=arrayList;
this.context=context;
}
@Override
public boolean areAllItemsEnabled() {
return false;
}
@Override
public boolean isEnabled(int position) {
return true;
}
@Override
public void registerDataSetObserver(DataSetObserver observer) {
}
@Override
public void unregisterDataSetObserver(DataSetObserver observer) {
}
@Override
public int getCount() {
return arrayList.size();
}
@Override
public Object getItem(int position) {
return position;
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public boolean hasStableIds() {
return false;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
SubjectData subjectData=arrayList.get(position);
if(convertView==null) {
LayoutInflater layoutInflater = LayoutInflater.from(context);
convertView=layoutInflater.inflate(R.layout.list_row, null);
convertView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
}
});
TextView tittle=convertView.findViewById(R.id.title);
ImageView imag=convertView.findViewById(R.id.list_image);
tittle.setText(subjectData.SubjectName);
Picasso.with(context)
.load(subjectData.Image)
.into(imag);
}
return convertView;
}
@Override
public int getItemViewType(int position) {
return position;
}
@Override
public int getViewTypeCount() {
return arrayList.size();
}
@Override
public boolean isEmpty() {
return false;
}
}
5단계 – SubjectData 클래스 생성
src/SubjectData.java 파일을 생성하고 다음 코드를 추가합니다. 이 클래스는 과목 이름, 링크, 이미지 URL을 담는 데이터 모델 역할을 합니다.
class SubjectData {
String SubjectName;
String Link;
String Image;
public SubjectData(String subjectName, String link, String image) {
this.SubjectName = subjectName;
this.Link = link;
this.Image = image;
}
}6단계 – 인터넷 이미지 표시하기
CustomAdapter 클래스에서는 인터넷상의 이미지를 불러와 화면에 표시합니다. 원격 이미지를 손쉽게 로드하기 위해 Picasso 라이브러리를 활용했으며, 관련 코드는 다음과 같습니다.
Picasso.with(context)
.load(subjectData.Image)
.into(imag);
7단계 – Gradle에 Picasso 라이브러리 추가
Picasso 라이브러리를 사용하려면 앱 수준 build.gradle 파일의 dependencies에 해당 라이브러리를 추가해야 합니다. 전체 gradle 설정은 아래와 같습니다.
apply plugin: 'com.android.application'
android {
compileSdkVersion 28
defaultConfig {
applicationId "com.example.andy.myapplication"
minSdkVersion 15
targetSdkVersion 28
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
testImplementation 'junit:junit:4.12'
implementation 'com.squareup.picasso:picasso:2.5.1'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}
8단계 – 매니페스트에 인터넷 권한 추가
인터넷에서 데이터와 이미지를 불러오려면 AndroidManifest.xml 파일에 인터넷 권한을 반드시 선언해야 합니다. 아래와 같이 uses-permission 태그를 추가합니다.
<?xml version = "1.0" encoding = "utf-8"?>
<manifest xmlns:android = "https://schemas.android.com/apk/res/android"
package = "com.example.andy.myapplication">
<uses-permission android:name = "android.permission.INTERNET"/>
<application
android:allowBackup = "true"
android:icon = "@mipmap/ic_launcher"
android:label = "@string/app_name"
android:roundIcon = "@mipmap/ic_launcher_round"
android:supportsRtl = "true"
android:theme = "@style/AppTheme">
<activity android:name = ".MainActivity">
<intent-filter>
<action android:name = "android.intent.action.MAIN" />
<category android:name = "android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
애플리케이션 실행하기
이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 스마트폰을 컴퓨터에 연결했다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 열고, 툴바에서 실행(Run) 
아이콘을 클릭합니다. 옵션 목록에서 자신의 모바일 기기를 선택하면, 연결된 기기 화면에 앱의 기본 화면이 표시됩니다.
