달력

3

« 2024/3 »

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
728x90
반응형

커스텀 리스트뷰를 만들기 위해서...

- xml 레이아웃 하나
- 레이아웃에서의 listview 하나
- 틀로 사용할 class 하나
- 중간 연결다리 역할의 ArrayList 하나
- ArrayAdapter를 상속받은 클래스 하나


결과로 만들어질 커스텀 리스트 뷰

하나의 틀에는
TextView 2개, 이미지 버튼 2개가 사용되었다.

이미지 버튼은 클릭이벤트가 있다.








1. 틀로 사용할 class 만들기
실제 리스트에는 4개의 view가 있지만, 사실상 데이터를 입력받는 뷰는 textview 2개뿐이다.
text 2개를 가지고 있을 수 있는 클래스를 만든다.

class Contact {
private String Name;
private String PhoneNumber;
public Contact(String _Name, String _PhoneNumber)
{
this.Name = _Name;
this.PhoneNumber = _PhoneNumber;
}

public String getName() {
return Name;
}

public String getNumber() {
return PhoneNumber;
}
}

주소록에 있는 데이터를 받아 올 클래스라서 이름을 contact라고 했다.(주소록은 contacts를 사용한다. 차이점을 두고자 s를 뺐다.)






2. ArrayList 만들기
실제 데이터를 저장해서 가지고 있을 array list를 만든다.
화면에 출력되는건 후에 나올 코드의 결과로 나오는 커스텀 리스트 뷰이지만, 사실상 데이터는 array list가 가지고 있다.

// arraylist 선언
ArrayList<Contact> origin_list = new ArrayList<Contact>();

array list는 위에서 만든 클래스의 형식으로 선언해준다. 클래스를 array로 가지고 있겠다는 의미이다.
C에서 볼 수 있는 구조체 배열같은 기능을 해준다.

// arraylist에 데이터 추가

Contact temp; // 데이터를 추가하는데 사용 할 객체 선언

temp = new Contact("name1", "number1"); // 클래스 객체에 데이터 삽입
origin_list.add(temp); // array list에 데이터(객체) 추가
temp = new Contact("name2", "number2");
origin_list.add(temp);

이렇게 하면 2개의 데이터가 들어가 있는 array list가 만들어진다.
add() 메소드를 통해 추가적으로 데이터를 계속 늘려갈 수 있다.







3. xml layout
사실 레이아웃은 틀을 잡는 것이라 사용할 뷰들이 있기만 하면 된다.
내가 사용한 레이아웃은 LinearLayout을 사용했는데, 편의에 따라 Realative 등으로 사용하면 된다.

<?xml version="1.0" encoding="utf-8"?>
< LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:paddingTop="5px"
android:paddingBottom="5px" android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout android:layout_width="320px"
android:layout_height="wrap_content" android:padding="6dip"
android:orientation="vertical">
<TextView android:id="@+id/toptext" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:gravity="center_vertical"
android:textSize="30px" android:textColor="@color/all_white"
android:ellipsize="end"></TextView>
<TextView android:id="@+id/bottomtext" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:textSize="25px" android:textColor="@color/all_white"
android:singleLine="true" android:ellipsize="marquee"></TextView>
</LinearLayout>
<ImageButton android:id="@+id/button_call"
android:layout_width="80px" android:layout_height="60px"
android:layout_gravity="center_vertical"
android:src="@drawable/send_call" ></ImageButton>
<ImageButton android:id="@+id/button_message"
android:layout_width="80px" android:layout_height="60px"
android:layout_gravity="center_vertical" android:paddingLeft="10px"
android:src="@drawable/send_message" ></ImageButton>
</LinearLayout>

android:textColor ="@color/all_white" 에서의 값은 미리 strings.xml에 resource로 추가해둔 color 이다. 저렇게 쓰면 에러난다.


<resources>
...
...
<color name="all_white">#FFFFFF</color>
<color name="all_black">#000000</color>
< /resources>









4. 액티비티에 연결되는 layout에서의 listview 하나 만들기
실제로 setContentView 에 사용되는 R.layout 파일에 추가해두면 된다.

<ListView android:id="@+id/main_listview"
android:layout_width="fill_parent" android:layout_height="fill_parent"></ListView>










5. ArrayAdapter를 상속받은 클래스 만들기



// Custom adapter Class
private class ContactsAdapter extends ArrayAdapter<Contact> {
private ArrayList<Contact> items;
public ContactsAdapter(Context context, int textViewResourceId, ArrayList<Contact> items) {
super(context, textViewResourceId, items);
this.items = items;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {

View v = convertView;

if ( v == null ) {

// vi(layoutInflater)는 Layout Inflater를 사용해 만든다.
LayoutInflater vi = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = vi.inflate(R.layout.row, null);
}
// 현재의 position을 가지고 item을 가져온다. item은 이름과 전화번호가 들어있다.
Contact p = items.get(position);

if ( p != null )
{
// 2개의 텍스트뷰를 셋팅해준다.
TextView tt = (TextView)v.findViewById(R.id.toptext);
TextView bt = (TextView)v.findViewById(R.id.bottomtext);

// 셋팅한 텍스트뷰의 텍스트에 이름과 전화번호를 넣어준다.
tt.setText(p.getName());
bt.setText(" " + p.getNumber());
}
// imagebutton 셋팅
ImageButton ib_call = (ImageButton)v.findViewById(R.id.button_call);
ImageButton ib_message = (ImageButton)v.findViewById(R.id.button_message);
// 현재의 태그 입력, 이미지 버튼 클릭시 사용하기 위해 저장
ib_call.setTag(position);
ib_message.setTag(position);

// image button, send_call on click listner
ib_call.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// 태그 불러오기
int position = Integer.parseInt( (v.getTag().toString()) );
Contact p = items.get(position);
if ( p != null ){
// 전화걸기 액티비티 실행
startActivity(new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + p.getNumber())));
}
}
});

// image button, send_message on click listner
ib_message.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// 태그 불러오기
int position = Integer.parseInt( (v.getTag().toString()) );
Contact p = items.get(position);
// 문자보내기 액티비티 실행
if ( p != null ){
startActivity(new Intent(Intent.ACTION_SENDTO, Uri.parse("sms:" + p.getNumber())));
}
}
});
return v;
}
}




위의 아답타처럼 전화를 걸고 문자를 보내는 기능을 수행하려면 uses-permission이 필요하다.
이는 AndroidManifest.xml 에 추가해 주어야 한다. </manifest> 윗부분에 추가해주면 된다.

<uses-permission android:name = "android.permission.CALL_PHONE" ></uses-permission>
<uses-permission android:name = "android.permission.SEND_SMS"></uses-permission>










실제 더 이쁘게 꾸밀 수 있겠지만, 우선은 이정도에서 마무리.
커스텀 리스트뷰와 주소록접근 등을 합쳐서 전화번호검색주소록을 만들었다.
(사실 너무 간단한 어플이라 기능이랄것도 없는 어플이다. 필요에 의해 만들었다는 표현이 더 맞겠다.)
728x90
반응형
:
Posted by mapagilove