ListView의 사용자 지정하는 방법
ListView를 사용자 지정하는 방법은?
Android에서는 ListView는 View가 있습니다.
이 ListView 같은 구성 레이아웃을 나열하고 간다,라고하는 View입니다.
가장 간단한 방법은 단순히 TextView만을 배치한 목록까요.
하지만 그렇게 단순한 방법은, 실용적인 것입니까?
예를 들어 제품 이름이나 사용자 이름을 나열하는 것만으로는 아무것도 할 수 없습니다.
상품 이름과 해당 정보를 표시 화면으로 전환하기위한 버튼이다 든가, 사용자 이름 및 사용자에게 음성 발신하기위한 버튼이나 단순히 텍스트뿐만 아니라, 버튼을 함께 세트로하고, 라든지, 기타 사용자 지정을하고 싶다고 생각하고있는 분은 많은 것이 아닐까 생각합니다.
ListView의 사용 방법은 조금 까다롭습 니다만, 나 자신이 잘 사용하는 방법을 소개합니다.
일단이 방법은, 상당히 범용적으로 사용할 수있는 것은 아닐까 생각합니다.
우선, ListView 행의 레이아웃을 만듭니다.
레이아웃 만드는 방법은 화면의 레이아웃을 만들 때와 동일합니다.
XML을 추가하여 View를 추가 간다,라는 단계를 수행합니다.
이 방법은 이전에 소개하고 있으므로, 아래를 참고하십시오.
Android XML을 추가하는 방법
레이아웃 XML의 Eclipse의 설정 방법
여기에서는 예제로 다음 레이아웃으로 봅시다.
TextView와 Button을 배치하여 Button 가장 오른쪽에 표시되도록한다.
방법은 여러가지가 있겠지만, 예를 들면 다음과 같은 느낌입니다.
<? xml version = "1.0"encoding = "utf-8"?>
<RelativeLayout
xmlns : android = "http://schemas.android.com/apk/res/android"
android : layout_height = "wrap_content"android : layout_width = "fill_parent">
<TextView android : layout_width = "wrap_content"
android : layout_height = "wrap_content"
android : id = "@ + id / nameText">
</ TextView>
<Button android : layout_width = "wrap_content"
android : layout_height = "wrap_content"
android : layout_alignParentRight = "true"
android : id = "@ + id / detailButton"
android : text = "@ string / detail">
</ Button>
</ RelativeLayout>
이번은 "Button 가장 오른쪽에 표시되도록한다"는 요구 사항을 충족시키기 위해 부모 레이아웃 RelativeLayout을 사용하고 있습니다.
RelativeLayout의 layout_width 특성을 true로하는 것으로, ListView 라인 자체의 폭을 부모 화면 너비에 맞게합니다.
그리고 Button의 layout_alignParentRight을 true로하는 것으로, RelativeLayout 맨 오른쪽에 배치되도록한다는 것입니다.
이번 테마는 ListView를 사용자 정의하는 것이므로, 상기는 어디 까지나 예입니다.
당신의 취향에 맞춰 레이아웃을 만들어주세요.
다음은 메인이되는 ListView를 표시하는 화면을 만드는 것입니다.
우선 화면 레이아웃을 만듭시다.
이번에는 간단하게 상단에 헤더를 표시 TextView와 그 아래에 ListView를 표시한다고하는만큼합시다.
헤더에는 제목이나, List의 건수 라든지를 표시하는 데 사용하지만, 이번은 단순히 고정 문자를 표시하는만큼 둡니다.
ListView를 사용 화면을 표시하는 Activity는 일반 Activity가 아닌 ListActivity를 상속합니다. 반드시 필요한 것은 아니지만, ListActivity를 상속 시키면-win 것이 있습니다.
그것은 설명 하겠지만 우선 다음 XML과 같은 레이아웃을 만듭니다.
<? 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"
>
<TextView
android : layout_width = "fill_parent"
android : layout_height = "wrap_content"
android : text = "@ string / hello"
/>
<ListView android : layout_width = "wrap_content"
android : layout_height = "wrap_content"
android : id = "@ + id / android : list">
</ ListView>
<TextView android : layout_width = "wrap_content"
android : layout_height = "wrap_content"
android : id = "@ + id / android : empty"
android : text = "@ string / nodata">
</ TextView>
</ LinearLayout>
LinearLayout 안에, TextView, ListView, TextView를 배치하고 있습니다.
첫 번째의 TextView는 단순히 응용 프로그램 이름을 표시할만한 TextView입니다.
두 번째 ListView와 세번째의 TextView하지만 1 점 주목해 주었으면하는 부분이 android : id 속성의 값입니다.
@ + id / android : list @ + id / android : empty하고 있습니다.
원래 마지막 TextView는 무엇인가 말하면, 이것은 List가 한 건도 데이터가없는 경우에 표시되는 문구입니다.
text 속성에 @ string / nodata하고 있습니다만, 이것은 string.xml, 스스로 정의하는 문자열입니다.
예를 들어 "1 건도 없습니다."와 같은 문구를 설정해야합니다.
이렇게하는 것으로, ListActivity를 상속시켰다 Activity가 다음 작업을 자동으로 수행 해줍니다.
@ + id / android : list로 지정되어있는 ListView가 아무것도 표시하지 않는 경우 대신 @ + id / android : empty로 지정된 View를 표시한다.
위가 일반 Activity가 아니라, ListActivity를 상속시키는 것이 좋을지되는 점 중 하나입니다.
화면 레이아웃의 정의는 여기까지입니다.
다음은 ListView에서 설정하는 문자열과 같은 정보를 입력할 상자되는 클래스를 제공합니다.
JavaBean이라는 것을 아시나요.
Servlet과 JSP를 공부 한 적이있는 분이라면 아시다시피합니다.
강력한 JavaBean에는 여러 가지 규칙이 있는데, ...
조금 이야기가 다른 방향으로 가고 걸었습니다. 죄송합니다.
단순히 하나의 private 변수에 대해 public적인 세터와 겟타 방법이 있다고 단순히 클래스라고 생각하시면됩니다.
여기서 그걸로 충분합니다.
예를 들어 이번에 ListView는 제품 이름과 해당 상품에 대한 URL에 날리는 버튼이 배치된다는 사양이라고합니다.
필요한 정보는 제품 이름과 URL입니다.
모두 String 형식으로 제품명과 URL이 저장되는 변수와 각 세터, 겟타 메서드를 제공하면 클래스를 만들어 둡니다.
예를 들어 다음과 같은 느낌입니다.
public class ItemBean {
private String name = "";
private String url = "";
public void setName (String name) {
this.name = name;
}
public String getName () {
return name;
}
public void setUrl (String url) {
this.url = url;
}
public String getUrl () {
return url;
}
}
이 클래스의 인스턴스를 ListView에 표시되는 데이터의 하나하나에 대해서 생성하고갑니다.
나중에 예제 코드를 제공하기 때문에, 그 때 아는가?라고 생각합니다.
다음은 Activity의 구현입니다.
먼저 ListActivity를 상속합니다.
ListActivity는 Activity의 서브 클래스이므로, onCreate 등은 일반 Activity과 함께합니다.
이 Activity는 ListView에 표시되는 데이터의 생성 및 표시입니다.
ListView에는 setListAdapter () 메서드에서 인수 Adapter의 인스턴스를 설정하여 데이터가 표시됩니다.
이것도 ListActivity를 상속시키는 일로받는 장점이다.
Adapter는 List에 표시하는 하나 하나의 데이터의 인스턴스입니다.
여러 Adapter를 처리하기 위해 ArrayAdater라는 클래스가 있지만, 이번에 사용자 지정 ListView를 표시하기 위해이 ArrayAdapter 클래스를 상속하고, Adapter 클래스를 자작합니다.
다음 클래스를 Acitvity에 구현하십시오. (물론 개별 java 파일로도 괜찮습니다.)
class ListAdapter extends ArrayAdapter <ItemBean> {
private LayoutInflater mInflater;
private TextView mTitle;
private Button mButton;
public ListAdapter (Context context, List <ItemBean> objects) {
super (context, 0, objects);
mInflater = (LayoutInflater) context.getSystemService (Context.LAYOUT_INFLATER_SERVICE);
}
public View getView (final int position, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = mInflater.inflate (R.layout.row, null);
}
final ItemBean item = this.getItem (position);
if (item! = null) {
mTitle = (TextView) convertView.findViewById (R.id.nameText);
mTitle.setText (item.getName ());
mButton = (Button) convertView.findViewById (R.id.detailButton);
mButton.setOnClickListener (new OnClickListener () {
public void onClick (View v) {
Uri uri = Uri.parse (item.getUrl ());
Intent i = new Intent (Intent.ACTION_VIEW, uri);
startActivity (i);
}
});
}
return convertView;
}
}
상속하고있는 클래스는 ArrayAdapter <ItemBean>하고 있습니다.
(ArrayAdapter 아니고, BaseAdapter라도 괜찮을 니다만, BaseAdapter이라고 확인할 수없는? 버그 발생했기 때문에 그 이후 나는 ArrayAdapter를 사용합니다.)
이 클래스를 이용하는 측면, 즉 Activity는 앞서 자작한 ItemBean 요소에 가지는 ArrayList를 생성한 후,이 클래스의 생성자에 전달하여 Adapter를 생성하여 사용합니다.
getView 메서드는 VM에서 호출하는 메서드에서 표시할 데이터 행 단위에 대해 호출됩니다.
다음 부분
final ItemBean item = this.getItem (position);
이제이 메소드가 호출되는 행과 관련된 가진 ItemBean 인스턴스를 취할 수 있으므로 그런 다음 원하는대로 작업을 써주세요.
이번 예제에서는 이름을 TextView로 설정하여 버튼을 누를 때 관련 가진 URL로 브라우저를 사용하여 연결하는 일을하도록하고 있습니다.
어이 지금 단계에서는 아직 잘 모를지도 모르겠 네요.
다음은 실제이 Adapter를 생성하고 설정한다는 처리를 살펴보겠습니다.
이번에는 이름을 검색 엔진의 이름을, 그리고 버튼을 누르면 검색 엔진의 페이지 전환한다는 애플 리케이션합시다.
onCreate ()를 다음과 같이하면됩니다.
public void onCreate (Bundle savedInstanceState) {
super.onCreate (savedInstanceState);
setContentView (R.layout.main);
ItemBean yahoo = new ItemBean ();
yahoo.setName ( "Yahoo");
yahoo.setUrl ( "http://www.yahoo.co.jp");
ItemBean google = new ItemBean ();
google.setName ( "Google");
google.setUrl ( "http://www.google.co.jp");
List <ItemBean> list = new ArrayList <ItemBean> ();
list.add (yahoo);
list.add (google);
ListAdapter adapter = new ListAdapter (getApplicationContext (), list);
setListAdapter (adapter);
}
이번은 베타 쓰고 있지만, yahoo와 Google의 ItemBean 인스턴스를 만들고 그것을 List <ItemBean> 인스턴스에 추가하여 그 녀석을 이용하면 직접 Adapter이다 ListAdapter를 생성하고이를 setListAdapter ()에서 전달 준다.
완료되었습니다.
다음과 같은 화면이 표시됩니다.
이번 샘플 코드는 다음에서 다운로드할 수 있습니다.
ListView의 사용자 지정하는 방법 예제 코드
이번에 소개한 방법을 이해할 수 있으면, 나머지는 원하는대로 레이아웃을 만들고 거기에 맞춘 Adapter를 자작하여 getView ()를 정의하는 것만으로 어떤 레이아웃 ListView도 대개는 만들 수있을 것입니다.
Web Services API를 사용하는 경우 등, 되돌아 오는 정보에 아울러, JavaBean 클래스를 만들어 놓고 응답을 분석하는 곳에 데이터 1 건에 대해 인스턴스를 생성, 그리고 ArrayList에 추가, 같은 느낌 에 해 주면, 나머지는 이번에 소개한 방법을 적용할 수 있습니다.
상당히 범용적으로 사용할 수있을 것라고 생각하실 수 있으면 다행입니다 · · ·.
