20110906_리스트뷰를 내맘대로!!(이미지+텍스트)

이번엔 리스트 뷰에 대해서 공부를 해봤다 흐흐

먼저 결과 화면이다 (신상을 위해 모자이크 처리..ㅜㅜ)

리스트 뷰 형태로 출력만 되고 링크 처리 되어있는 부분 외에는

클릭한다고 별도의 이벤트가 발생하진 않는다.

1. 액티비티와 매칭되는 layout xml(기본적으로는 main.xml이라고 되어있다.)에 <ListView /> 를 만든다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#000000"
>
<ListView
android:id="@+id/main_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
</ListView>
</LinearLayout>

2.액티비티에서 ListView = (ListView)findViewById() 를 사용해 xml의 ListView와 Java의 ListView를 연결해준다.

package me.blog.gudwlsdlstod;

import java.util.*;

import android.app.*;
import android.os.*;
import android.widget.*;

public class MyListViewActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);


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

personList.add(new Person("우모모", "26", "http://c*******e.me", R.drawable.woo));
personList.add(new Person("함모모", "25", "http://gu*****d.blog.me", R.drawable.ham));
personList.add(new Person("임모모", "24", "http://**im.tistory.com", R.drawable.ho));
personList.add(new Person("조모모", "24", "http://co******p.tistory.com", R.drawable.jo));
personList.add(new Person("김모모", "22", "http://i***d.tistory.com", R.drawable.dajung));
personList.add(new Person("양모모", "21", "http://h******1.tistory.com", R.drawable.sook));
personList.add(new Person("백모모", "20", "http://eu***i.tistory.com", R.drawable.eunbin));

PersonAdapter personAdapter = new PersonAdapter(this, R.layout.person_detail, personList);

ListView lv = (ListView)findViewById(R.id.main_list); //여기서 연결이 되는 것이다.

lv.setAdapter(personAdapter);

}
}

3. 데이터 클래스(여기서는 Person)를 만든다.

package me.blog.gudwlsdlstod;

public class Person
{

private String name;
private String age;
private String blog;
private int image;
public Person(String name, String age, String blog, int image) {
super();
this.name = name;
this.age = age;
this.blog = blog;
this.image = image;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getAge() {
return age;
}
public void setAge(String age) {
this.age = age;
}
public String getBlog() {
return blog;
}
public void setBlog(String blog) {
this.blog = blog;
}
public int getImage() {
return image;
}
public void setImage(int image) {
this.image = image;
}

}

4. ListView에 보여질 하나의 View에 대한 layout xml을 만든다.

- ImageView / TextView / TextView ...

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

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

<ImageView
android:id="@+id/person_detail_image"
android:layout_width="100px"
android:layout_height="100px"
/>

<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/person_detail_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
/>
<TextView
android:id="@+id/person_detail_age"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
/>
<TextView
android:id="@+id/person_detail_blog"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:autoLink="web"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>

5. ArrayAdapter<?> (여기서는 ArrayAdapter<Person>)를 상속받은 Adapter를 만든다.

5.1. LayoutInflater를 만든다.

: LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

5.2. getView()를 작성한다.

if(convertView == null)

{

convertView = inflater.inflate(4에서만든레이아웃, null);

}

5.3. ArrayList<Person>에서 데이터를 꺼내온다. Person person = personList.get(position);

5.4. convertView를 통해 xml과 Widget들을 연결해 준다.

TextView tvName = (TextView)convertView.findViewById(R.id.xxx)

5.5. 위의 5.4.에서 만든 Widget들(TextView 또는 ImageView)에 person으로 꺼내온 데이터를 세팅해준다.

package me.blog.gudwlsdlstod;

import java.util.*;

import android.content.*;
import android.view.*;
import android.widget.*;

public class PersonAdapter extends ArrayAdapter<Person>
{
private int layout;
private ArrayList<Person> personList;
private LayoutInflater layoutInflater;

public PersonAdapter(Context context, int textViewResourceId, ArrayList<Person> objects)
{
super(context, textViewResourceId, objects);
this.layout = textViewResourceId;
this.personList = objects;

this.layoutInflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}

@Override
public View getView(int position, View convertView, ViewGroup parent)
{
if(convertView == null)
{
convertView = layoutInflater.inflate(layout, null);
}

Person person = personList.get(position);

if(person != null)
{

ImageView detailImage = (ImageView)convertView.findViewById(R.id.person_detail_image);
TextView detailName = (TextView)convertView.findViewById(R.id.person_detail_name);
TextView detailAge = (TextView)convertView.findViewById(R.id.person_detail_age);
TextView detailBlog = (TextView)convertView.findViewById(R.id.person_detail_blog);


detailImage.setImageResource(person.getImage());
detailName.setText(person.getName());
detailAge.setText(person.getAge());
detailBlog.setText(person.getBlog());
}

return convertView;
}

}