[안드로이드] CustomView

이미지와 텍스트로 구성된 커스텀뷰 만들기

 

 

 

드라마 제목과 방영 연도, 평점이 적힌 리스트뷰 만들기

 

 

 

1. xml

•  이미지 뷰와 텍스트 뷰로 구성된 리스트 아이템 xml 파일을 만들고 메인 레이아웃의 리스트뷰와 연결한다.

 

1. listitem.xml

 

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:background="#eeeeee"
    android:layout_margin="2dp">

    <ImageView
        android:id="@+id/movie_image"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:srcCompat="@mipmap/ic_launcher" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/movie_title"
            android:textSize="17dp"
            android:textStyle="bold"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <TextView
            android:id="@+id/movie_rating"
            android:textSize="15dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
        <TextView
            android:id="@+id/movie_genre"
            android:textSize="13dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
        <TextView
            android:id="@+id/movie_year"
            android:textSize="12dp"
            android:gravity="right"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </LinearLayout>>
</LinearLayout>

 

listitem.xml 

   

2. activity_main.xml

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


    <ListView
        android:id="@+id/list_movie"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:listitem="@layout/listitem"/>

</LinearLayout>

• listitem.xml을 메인 레이아웃에 listview로 연결시켜준다.

 

 

 

listitem과 연결된 화면

 

---

2. java

1. MainActivity.java

 

package com.example.customlistview;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    ListView list_movie;
    String[] titles = {
            "The Wizard of Oz (1939)",
            "Citizen Kane (1941)",
            "All About Eve (1950)",
            "The Third Man (1949)",
            "A Hard Day's Night (1964)",
            "Modern Times (1936)",
            "Metropolis (1927)",
            "Metropolis (1927)",
            "Metropolis (1927)",
            "Metropolis (1927)"
    };

    Integer[] images = {
            R.drawable.movie1,
            R.drawable.movie2,
            R.drawable.movie3,
            R.drawable.movie4,
            R.drawable.movie5,
            R.drawable.movie6,
            R.drawable.movie7,
            R.drawable.movie7,
            R.drawable.movie7,
            R.drawable.movie7
    };


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

        CustomList adapter = new CustomList(MainActivity.this);
        list_movie=findViewById(R.id.list_movie);
        list_movie.setAdapter(adapter);

        list_movie.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

            }
        });

    }

• listview 를 java에 연결하고 드라마의 제목과 이미지를 넣어준다.

• onCreate() 안에는 CustomList라는 어댑터를 만들고 listview 클릭 이벤트를 넣어준다.

   

 

2. CustomList.java

 

 public class CustomList extends ArrayAdapter<String>{
        private final Activity context;
        public CustomList(@NonNull Activity context) {
            super(context, R.layout.listitem, titles);
            this.context = context;
        }

        @NonNull
        @Override
        public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
            LayoutInflater inflater = context.getLayoutInflater();
            View movieView = inflater.inflate(R.layout.listitem, null, true);

            TextView title = movieView.findViewById(R.id.movie_title);
            ImageView imageView = movieView.findViewById(R.id.movie_image);
            TextView rating = movieView.findViewById(R.id.movie_rating);
            TextView genre = movieView.findViewById(R.id.movie_genre);
            TextView year = movieView.findViewById(R.id.movie_year);

            title.setText(titles[position]);
            imageView.setImageResource(images[position]);
            rating.setText("9.0"+position);
            genre.setText("DRAMA");
            year.setText(1930+position+"");
            return movieView;
        }
    }

• CustomList 클래스는 main class 안에서 만들어도 되고 메인 클래스 밖에서 만들어줘도 상관없다.

• CustomList 클래스는 ArrayAdater 를 상속받는다.

• 클래스 안에 getView 메소드를 오버 라이딩해주고, LayoutInflater 를 선언해준다.

• LayoutInflater 은 xml 에 정의된 리소스를 view 객체로 반환해주는 역할을 한다. Inflater를 사용해 view에 연결하고, 여기에서 xml 리소스들을 검색하고 정의해주면 된다.