11-1. 리스트뷰 & 그리드뷰

* AdapterView (ViewGroup.AdapterView)

어댑터뷰는 어댑터뷰 자체를 사용하기보다는 어댑터뷰의 하위 클래스를 사용한다.

실제로 어떤 어뎁터뷰를 사용할 때는 ArrayAdatper<T> 클래스를 함께 사용한다.

 

* ListView

데어티를 리스트 모양으로 보여주는 리스트

ex) 안드로이드 [설정]

 

<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"
    tools:context=".MainActivity">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/listView"/>

</LinearLayout>

<MainActivity.java>

package com.example.project11_1;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        final String[] mid = {"히어로즈", "24시", "로스트", "로스트룸", "스몰빌", "탐정몽크", "빅뱅이론", "프렌즈"
        , "덱스터", "글리", "가쉽걸", "테이큰", "슈퍼내추럴", "브이"};

        ListView list = (ListView)findViewById(R.id.listView);

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, mid);
        list.setAdapter(adapter);

        list.setOnItemClickListener(new AdapterView.OnItemClickListener(){
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(getApplicationContext(), mid[position], Toast.LENGTH_SHORT).show();
            }
        });
    }
}

리스트뷰에 나열할 내용을 배열로 만들어 놓고 ArrayAdapter<T>형의 변수를 선언한다.

이때 T 는 리스트뷰에 나열할 배열의 자료형이다.

- new ArrayAdapter<T>(context, 리스트뷰의 형식, array)

- ListView.setAdapter(ArrayAdapter) : 어레이어댑터를 ListView 변수에 적용

 

ListView - Simple_list_item1

리스트뷰는 라디오버튼이나 체크박스 등 다양한 모양으로 설정할 수 있다.

- simple_list_item_multiple_choice & CHOICE_MODE_MULTIPLE : 체크박스

- simple_list_item_single_choice & CHOICE_MODE_SINGLE : 라디오버튼

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
	android.R.layout.simple_list_item_multiple_choice, mid);
list.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
list.setAdapter(adapter);

ListView - simple_list_item_multiple_choice

리스트뷰의 항목은 동적으로 추가/삭제가 가능하다.

package com.example.project11_1;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.Toast;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

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

        final ArrayList<String> list = new ArrayList<String>();
        ListView listView = (ListView)findViewById(R.id.listView);
        
        final ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, 
                android.R.layout.simple_list_item_1, list);
        listView.setAdapter(adapter);
        
        final EditText editText = (EditText)findViewById(R.id.etitText);
        Button btn = (Button)findViewById(R.id.btn);
        
        btn.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                list.add(editText.getText().toString());
                adapter.notifyDataSetChanged();
            }
        });
        
        listView.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {
            @Override
            public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) {
                list.remove(position);
                adapter.notifyDataSetChanged();
                return false;
            }
        });
    }
}

배열(크기 고정) 대신 ArrayList<T> 형(크기 동적)으로 비어 있는 변수를 선언한다.

- ArrayList<T>.add() : 리스트에 추가

- ArrayList<T>.remove(position) : 리스트에서 삭제

- ArrayAdapter<T>.notifyDataSetChanged() : ArrayAdapter에서 바뀐 항목 반영

 

* GridView

주로 사진이나 그림을 격자 모양으로 배치한다. 

numColums를 꼭 지정해야한다.

 

프로젝트1: 영화 포스터 보기

GridView - Image (columns:4)

Dialog - Image, 닫기 버튼

 

<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:padding="5dp"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <GridView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:id="@+id/gridView"
        android:numColumns="4">

    </GridView>

</LinearLayout>

GridView에서 numColumns 는 꼭 지정해줘야한다.

 

<dialog.xml>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imagePost"/>

</LinearLayout>

<MainActivity.java>

package com.example.project11_1;

import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.Toast;
import android.widget.ViewFlipper;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setTitle("그리드뷰 영화 포스터");

        final GridView gridView = (GridView)findViewById(R.id.gridView);
        MyGridAdapter gridAdapter = new MyGridAdapter(this);
        gridView.setAdapter(gridAdapter);


    }

    public class MyGridAdapter extends BaseAdapter{
        Context context;
        Integer[] posterId = {R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4,
                R.drawable.image5, R.drawable.image6, R.drawable.image7, R.drawable.image8, R.drawable.image9,
                R.drawable.image10, R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4,
                R.drawable.image5, R.drawable.image6, R.drawable.image7, R.drawable.image8, R.drawable.image9,
                R.drawable.image10, R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4,
                R.drawable.image5, R.drawable.image6, R.drawable.image7, R.drawable.image8, R.drawable.image9,
                R.drawable.image10, R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4,
                R.drawable.image5, R.drawable.image6, R.drawable.image7, R.drawable.image8, R.drawable.image9,
                R.drawable.image10};
        String[] mvName = {"뷰티인사이드", "라라랜드", "호두까기 인형과 4개의 왕국", "토이스토리4", "말레피센트", "소울", "겨울왕국2",
         "히말라야", "스윙키즈", "베이비 드라이버", "뷰티인사이드", "라라랜드", "호두까기 인형과 4개의 왕국", "토이스토리4", "말레피센트", "소울", "겨울왕국2",
                "히말라야", "스윙키즈", "베이비 드라이버", "뷰티인사이드", "라라랜드", "호두까기 인형과 4개의 왕국", "토이스토리4", "말레피센트", "소울", "겨울왕국2",
                "히말라야", "스윙키즈", "베이비 드라이버", "뷰티인사이드", "라라랜드", "호두까기 인형과 4개의 왕국", "토이스토리4", "말레피센트", "소울", "겨울왕국2",
                "히말라야", "스윙키즈", "베이비 드라이버"};

        public MyGridAdapter(Context context){
            this.context = context;
        }

        public int getCount(){
            return posterId.length;
        }

        public Object getItem(int arg0){
            return null;
        }

        public long getItemId(int arg0){
            return 0;
        }

        public View getView(int position, View convertView, ViewGroup parent){
            ImageView imageView = new ImageView(context);
            imageView.setLayoutParams(new ViewGroup.LayoutParams(200, 300));
            imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
            imageView.setPadding(5,5,5,5);
            imageView.setImageResource(posterId[position]);

            final int pos = position;
            imageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    View dialogView = (View)View.inflate(MainActivity.this,
                            R.layout.dialog, null);
                    AlertDialog.Builder dlg = new AlertDialog.Builder(MainActivity.this);
                    ImageView ivPoster = (ImageView)dialogView.findViewById(R.id.imagePost);
                    ivPoster.setImageResource(posterId[pos]);
                    dlg.setTitle(mvName[pos]);
                    dlg.setIcon(R.drawable.ic_launcher_foreground);
                    dlg.setView(dialogView);
                    dlg.setNegativeButton("닫기", null);
                    dlg.show();
                }
            });

            return imageView;
        }
    }
}

BaseAdapter를 상속받는 MyGridAdapter 클래스를 만들어서 GridView의 어댑터로 사용했다.

MyGridAdapter 클래스안에서 ctrl + i 를 누르면 BaseAdapter 의 추상 메소드가 자동 완성된다.

getView() 는 GridView 내에서 이미지를 하나씩 보여주는 역할을 한다. 즉, 포스터 수만큼 반복 호출되서 GridView가 완성 되는 것이다. GridView에 ImageView를 넣을 것이기 때문에 Imageview를 생성해줬다.

그리고 이미지가 롱클릭되면 dialog가 나올 수 있게 longclicklistener를 오버라이딩한다.

dialog가 보일 View를 inflate해주고 Builder를 통해 만든 다이얼로그에 해당 View를 설정해준다.

 

프로젝트 1

프로젝트2: 명화 선호도 투표

GridView - Columns:3

 

<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:orientation="vertical"
    android:padding="5dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <GridView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/gridView"
        android:padding="5dp"
        android:numColumns="3"/>

    <Button
        android:text="투표 종료"
        android:id="@+id/mainBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

<MainActivity.java>

package com.example.project10;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.content.Intent;
import android.media.Image;
import android.media.Rating;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.RadioGroup;
import android.widget.RatingBar;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    int voteCount[] = new int[9];
    final String imageName[] = {"독서하는 소녀", "꽃장식 모자 소녀", "부채를 든 소녀", "이레느깡 단 베르양",
            "잠자는 소녀", "테라스의 두 자매", "피아노 레슨", "피아노 앞의 소녀들", "해변에서"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setTitle("영화 선호도 투표");

        GridView gridView = (GridView)findViewById(R.id.gridView);
        MyGridView adapter = new MyGridView(this);
        gridView.setAdapter(adapter);

        Button btn = (Button)findViewById(R.id.mainBtn);

        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(getApplicationContext(), SecondActivity.class);
                intent.putExtra("VoteCount", voteCount);
                intent.putExtra("ImageName", imageName);
                startActivity(intent);
            }
        });

    }

    public class MyGridView extends BaseAdapter{
        Context context;
        Integer[] imageResourceId = {R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4,
        R.drawable.image5, R.drawable.image6, R.drawable.image7, R.drawable.image8, R.drawable.image9};

        public MyGridView(Context context){
            this.context = context;
        }

        @Override
        public int getCount() {
            return imageResourceId.length;
        }

        @Override
        public Object getItem(int position) {
            return null;
        }

        @Override
        public long getItemId(int position) {
            return 0;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView imageView = new ImageView(context);
            imageView.setLayoutParams(new ViewGroup.LayoutParams(300, 450));
            imageView.setPadding(5,5,5,10);
            imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
            imageView.setImageResource(imageResourceId[position]);

            imageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    voteCount[position]++;
                    Toast.makeText(getApplicationContext(), imageName[position] + ": " +
                            voteCount[position] + " 표", Toast.LENGTH_SHORT).show();
                }
            });

            return imageView;
        }
    }
}

프로젝트 2