[Android] 코난과 함께하는 사용자 뷰(Custom View) 구현하기! 예제 1

커스텀 뷰 작성방법

 1. 기존 뷰 상속 후 확장 및 수정.

   

 

 2. 단순한 기능 제공하는 기존 뷰들을 결합하여 복잡한 동작을 수행하는 뷰 그룹 정의

   

 

 3. 기존의 존재하지 않는 완전히 새로운 뷰 생성. View 상속

예제 : 코난 등장인물의 전화번호부를 만들어 보자 ! 

등장인물의 사진은 

[Android] 코난과 함께하는 Spinner view(스피너뷰) 구현하기!
 http://jungtak.tistory.com/76 

이곳 첨부파일에 있다.

소스코드(layout)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="가장 좋아하는 캐릭터는?"
        android:textColor="@color/colorAccent"
        android:layout_margin="5dp"
        android:textSize="24dp"/>
    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/lv"></ListView>
 
</LinearLayout>
 

소스코드(Activity)

package com.example.sh415.project4_1;
 
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;
 
import java.util.ArrayList;
 
public class ListViewAct extends AppCompatActivity implements AdapterView.OnItemClickListener {
    ListView lv; ArrayList<RowItem> data; MyAdapter myAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_listview);
        data = new ArrayList<RowItem>();
        RowItem conan = new RowItem(R.drawable.conan,"코난","010-1111-1111");
        RowItem rose = new RowItem(R.drawable.rose,"장미","010-2222-2222");
        RowItem ran = new RowItem(R.drawable.ran,"미란","010-3333-3333");
        RowItem kid = new RowItem(R.drawable.kid,"키드","010-4444-4444");
        RowItem han = new RowItem(R.drawable.mori,"명환","010-5555-5555");
        RowItem aeri = new RowItem(R.drawable.aeri,"애리","010-6666-6666");
        data.add(conan);
        data.add(rose);
        data.add(ran);
        data.add(kid);
        data.add(han);
        data.add(aeri);
        myAdapter = new MyAdapter(this,data);
        lv = (ListView)findViewById(R.id.lv);
        lv.setAdapter(myAdapter);
        lv.setOnItemClickListener(this);
    }
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        Toast.makeText(this,data.get(position).getName(),Toast.LENGTH_SHORT).show();
    }
}
 

소스코드(listItem)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
 
    <ImageView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:id="@+id/ivPhoto"
        android:src="@mipmap/ic_launcher"
        android:scaleType="centerCrop"
        android:layout_marginLeft="20dp"
        android:layout_weight="1"
        />
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_weight="2"
        android:padding="10dp"
        android:orientation="vertical"
        android:gravity="center">
        <TextView
            android:id="@+id/tvName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="5dp"
        />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:id="@+id/tvPhonNo"/>
</LinearLayout>
</LinearLayout>
 

소스코드(RowItem)

package com.example.sh415.project4_1;
 
/**
 * Created by sh415 on 2017-07-31.
 */
 
public class RowItem {
    private  int imgId;
    private String name;
    private String phoneNo;
    public  RowItem(int imgId,String name, String phoneNo){
        this.imgId = imgId;
        this.name = name;
        this.phoneNo = phoneNo;
    }
    public  int getImgId() {return imgId;}
    public String getName() {return name;}
    public String getPhoneNo() {return phoneNo;}
}
 

소스코드(MyAdpater)

package com.example.sh415.project4_1;
 
import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
 
import java.util.ArrayList;
 
/**
 * Created by sh415 on 2017-07-31.
 */
 
public class MyAdapter extends BaseAdapter {
    private Context context;
    private ArrayList<RowItem> data;
 
    public MyAdapter(Context context , ArrayList<RowItem> data){
        this.context = context ;
        this.data = data;
    }
@Override
    public int getCount(){
        return data.size();
    }
@Override
    public  String getItem(int position){
    return  data.get(position).getName();
}
@Override
public long getItemId(int position) {return position;}
 
    public View getView(int position, View convertView , ViewGroup parent){
        LayoutInflater inflater = ((Activity)context).getLayoutInflater();
        if(convertView==null)
            convertView=inflater.inflate(R.layout.list_item, null);
        RowItem rowItem = data.get(position);
        ImageView ivPhoto = (ImageView)convertView.findViewById(R.id.ivPhoto);
        TextView tvName = (TextView)convertView.findViewById(R.id.tvName);
        TextView tvPhoneNo = (TextView)convertView.findViewById(R.id.tvPhonNo);
        tvName.setText(rowItem.getName());
        tvPhoneNo.setText(rowItem.getPhoneNo());
        ivPhoto.setImageResource(rowItem.getImgId());
        return  convertView;
 
    }
}
 
 
 

출력화면

등장인물의 사진과 함께 이름, 전화번호가 알맞게 뜨고 있다. 

코난 클릭시 간단한 토스트 메시지가 출력된다.