Custom ListView

1. activity_main.xml

//title과 list부분의 전체적인 style을 설정한다

<?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">

<TextView
android:id="@+id/tv01"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text = "jusung"
android:textSize="30dp"
android:textStyle="bold"/>
<ListView
android:id="@+id/listView01"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="9">
</ListView>
</LinearLayout>

 

2. item_style.xml

//list부분에서 item내부의 style을 설정한다

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

<ImageView
android:id="@+id/icon"
android:layout_width="80dp"
android:layout_height="80dp"/>
<TextView
android:id="@+id/title"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:textStyle="bold"
android:padding="10dp"
android:paddingTop="30dp"/>
<TextView
android:id="@+id/comment"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:paddingTop="30dp"/>
<Button
android:id="@+id/btn_select"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text = "select"/>
</LinearLayout>

 

3. Data.java

//data를 객체를 활용하기위한 class

package com.example.myapplication;

public class Data {
private int icon;
private String title;
private String comment;

public Data(int icon, String title, String comment){
this.icon = icon;
this.title = title;
this.comment = comment;
} //객체를 생성하기위한 생성자

public int getIcon(){
return icon;
}
public String getTitle(){
return title;
}
public String getComment(){
return comment;
}
}

 

4. MainActivity.java

//data를 가져오기위한 ArrayList생성하고 data를 추가한다

//Data class에 생성자를이용해 객체를 생성하고 add method를이용해 배열에 추가시킨다

package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

private ArrayList<Data> data = null;
private CustomAdapter cAdapter = null;
private ListView listView = null;

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

data = new ArrayList<Data>();

data.add(new Data(R.drawable.semo, title: "hehehe", comment: "hohohoho"));
data.add(new Data(R.drawable.semo, title: "hehehe", comment: "hohohoho"));
data.add(new Data(R.drawable.semo, title: "hehehe", comment: "hohohoho"));
data.add(new Data(R.drawable.semo, title: "hehehe", comment: "hohohoho"));
data.add(new Data(R.drawable.semo, title: "hehehe", comment: "hohohoho"));
data.add(new Data(R.drawable.semo, title: "hehehe", comment: "hohohoho"));

cAdapter = new CustomAdapter( context: this, R.layout.item_style, data);

//item_style의 layout을 설정하고 위에만들어논 data로 cAdapter를 생성한다

listView = findViewById(R.id.listView01);

//listView를 id를통해 가져온다
listView.setAdapter(cAdapter);

//listView에 Adapter로 setting한다
}
}

5.itemView.java

//item_style에 입력된 data를 memory로 loading하기위해서

//객체화하는과정이필요한데 이를 inflation이라고한다

//item_style에 정의된 style에 data를 가져와 세팅시킨다

package com.example.myapplication;

import android.content.Context;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class itemView extends LinearLayout{
private ImageView mIcon;
private TextView mTitle;
private TextView mComment;

//생성자 생성
public itemView(Context context, Data data){
super(context);

//인플레이션: 메모리에 올려 객체화하는것
LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.item_style, root: this, attachToRoot: true);
//inflate method를 이용해 item_style를 parameter로 불러오고
//root element를 linearlayout으로 설정하고 root를 포함한다에 true값을 설정

//set Icon
mIcon = findViewById(R.id.icon);
mIcon.setImageResource(data.getIcon());

//set Title
mTitle = findViewById(R.id.title);
mTitle.setText(data.getTitle());

//set Comment
mComment = findViewById(R.id.comment);
mComment.setText(data.getComment());
}//Data class에 getIcon method를 이용해 return값을 받아오고
}//Set함수를 이용해 세팅시킨다

 

6. CustomAdapter.jave

//추상class BaseAdapter을 상속받아서

//getView, getCount method를 이용해 CustomAdapter를 만든다

//getCount는 item의 개수를 return해주는 역할을한다

//item은 item index를 통해 구분을 해주는데

//indexr값을 구하려면 getCount를 통해 전체 item의 개수를 알아야한다

//getView는 item에 보이는 View와 관련이있다

package com.example.myapplication;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;

public class CustomAdapter extends BaseAdapter {
private Context mContext = null;
private int layout = 0;
private ArrayList<Data> mData = null;
private LayoutInflater inflater = null;

//data를 입력하기위한 ArrayList를 만든다

public CustomAdapter(Context context, int layout, ArrayList<Data> mData){
this.mContext = context;
this.layout = layout;
this.mData = mData;
this.inflater = (LayoutInflater)context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
} //생성자 생성


public int getCount(){
return mData.size();
} //index를 얻어오기위해 item의 개수를 return
public Object getItem(int position){
return mData.get(position).getTitle();
} //position은 item의 index위치를 가져오기위한 parameter이다
public long getItemId(int position){
return position;
} //position을 매개변수로 index값을 가져온다
public View getView(int position, View convertView, ViewGroup parent){
if(convertView == null){
convertView = inflater.inflate(this.layout, parent, attachToRoot: false);
}//만들어진 item view를 convertView를 통해 불러온다.

//하나만 있으면되기때문에 null인경우를 확인후 생성한다
ImageView ico = convertView.findViewById(R.id.icon);
TextView title = convertView.findViewById(R.id.title);
TextView comment = convertView.findViewById(R.id.comment);
Button btn_select = convertView.findViewById(R.id.btn_select);

//만들어논 item_style(image, text, text, button) 을 convertView를통해 불러온다

ico.setImageResource(mData.get(position).getIcon());
title.setText(mData.get(position).getTitle());
comment.setText(mData.get(position).getComment());

//불러온 객체를 position을 활용하여 setting 해줘야한다

if((position%2) == 1){
convertView.setBackgroundColor(0x800000ff);
}else{
convertView.setBackgroundColor(0x200000ff);
} //item들에 색깔을지정하여 구분하기쉽게한다
return convertView;
}
}

 

Result

inflation을 itemView에 설정할경우

MainActivity.java, itemView.java, CustomAdapter.java 파일을

아래와같이 변경한다

4. MainActivity.java

package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

private ArrayList<Data> data = null;
private CustomAdapter cAdapter = null;
private ListView listView = null;

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

cAdapter = new CustomAdapter(context: this);
cAdapter.addItem(new Data(R.drawable.semo, title: "hehehe", comment: "hohohoho"));
cAdapter.addItem(new Data(R.drawable.semo, title: "hehehe", comment: "hohohoho"));
cAdapter.addItem(new Data(R.drawable.semo, title: "hehehe", comment: "hohohoho"));
cAdapter.addItem(new Data(R.drawable.semo, title: "hehehe", comment: "hohohoho"));
cAdapter.addItem(new Data(R.drawable.semo, title: "hehehe", comment: "hohohoho"));
cAdapter.addItem(new Data(R.drawable.semo, title: "hehehe", comment: "hohohoho"));

listView = findViewById(R.id.listView01);
listView.setAdapter(cAdapter);
}
}

 

5.itemView.java

package com.example.myapplication;

import android.content.Context;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class itemView extends LinearLayout{
private ImageView mIcon;
private TextView mTitle;
private TextView mComment;

//생성자 생성
public itemView(Context context, Data data){
super(context);

//인플레이션: 메모리에 올려 객체화하는것
LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.item_style, this, true);
//inflate method를 이용해 item_style를 parameter로 불러오고
// root element를 linearlayout으로 설정하고 root를 포함한다에 true값을 설정

//set Icon
mIcon = findViewById(R.id.icon);

//set Title
mTitle = findViewById(R.id.title);

//set Comment
mComment = findViewById(R.id.comment);
//Data class에 getIcon method를 이용해 return값을 받아오고
//Set함수를 이용해 세팅시킨다
}
public void setIcon(int icon){mIcon.setImageResource(icon);};
public void setTitle(String data){mTitle.setText(data);};
public void setComment(String data){mComment.setText(data);};
//Data class에 get mothod를 setting하는 작업
}

6. CustomAdapter.jave

package com.example.myapplication;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;

public class CustomAdapter extends BaseAdapter {
private Context mContext = null;
private ArrayList<Data> mData = new ArrayList<Data>();

public CustomAdapter(Context context){
this.mContext = context;
}

//item 추가위한 method
public void addItem(Data data){
mData.add(data);
} //MainActivity에서 data를 추가시키기위한 method

//item의 개수를 return
public int getCount(){
return mData.size();
}
public Object getItem(int position){
return mData.get(position).getTitle();
}
public long getItemId(int position){
return position;
}
public View getView(int position, View convertView, ViewGroup parent){
itemView itemView;
if(convertView == null){
itemView = new itemView(mContext, mData.get(position));
//position을 이용해 data를가져오고 itemView를 생성한다
}else{
itemView = (itemView)convertView;
} //이미 있을경우 itemView를 (itemView)형변환을해준후
// 기존의 convertView로 대채해준다

itemView.setIcon(mData.get(position).getIcon());
itemView.setTitle(mData.get(position).getTitle());
itemView.setComment(mData.get(position).getComment());
//position을 활용하여 itemView에 set method와
// Data class에 get mothod를이용해 세팅한다

if((position%2) == 1){
itemView.setBackgroundColor(0x800000ff);
}else{
itemView.setBackgroundColor(0x200000ff);
}
return itemView;
}
}