Android Examples App : 메뉴화면 구성

안드로이드 스튜디오에서 프로젝트를 생성하면 <그림 1>과 같은 모습인데 <그림 2>의 XML소스를 보면 기본 레이아웃이 ConstraintLayout이다. ConstraintLayout에 대해서는 나중에 레이아웃부분에서 다루기로 하고 여기서는 메뉴화면 구성을 위한 기본설명만 진행한다.

<그림 1>

<그림 2>

우선 메인화면에 "Hello World!" 텍스트를 가진 TextView를 제거하고 앞으로 사용하게될 메뉴화면을 ListView로 구성한다. ListView에 대해서는 나중에 Container 부분에서 살펴보도록 한다.

<그림 3>

<그림 4>

먼저 <그림 1>에서 TextView를 삭제하고 "Palette"에서 "Containers"를 선택한 후 "ListView"를 Drag & Drop으로 ConstraintLayout의 TextView가 있던 위체 집어 넣으면 <그림 3>과 같은 모습이 된다. "Component Tree" 뷰의 ListView 우측에 빨간색 경고아이콘이 표시되는데, 이 아이콘을 클릭하면 <그림 4>와 같이 오류메시지를 자세히 알려준다.

Missing Constraints in ConstraintLayout

This view is not constrained vertically: at runtime it will jump to the left unless you add a vertical constraint  The layout editor allows you to place widgets anywhere on the canvas, and it records the current position with designtime attributes (such as layout_editor_absoluteX.) These attributes are not applied at runtime, so if you push your layout on a device, the widgets may appear in a different location than shown in the editor. To fix this, make sure a widget has both horizontal and vertical constraints by dragging from the edge connections.

<그림 5>

<그림 6>

<그림 7>

이 오류는 <그림 5> "Attributes"뷰 레이아웃 상단의 + 아이콘을 클릭하면 해결된다. 그리고 "ID"에 "list_view_main_menu"를 입력하면 <그림 6>과 같이 리스트의 모습 표현된다. 에뮬레이터로 실행해보면 <그림 7>의 모습인데 에디터의 모습과 달리 리스트 아이템은 보이지 않고 빈 화면만 보인다. ListView에 보여줄 아이템목록을 설정하지 않았기 때문인데, 기본 Adapter인 "ArrayAdapter"로 메뉴로 사용할 아이템목록을 설정해 보자. 전체 소스코드는 다음과 같다.


<MainActivity.java>

package com.example.androidexamplesapp;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListAdapter;
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 ListView listView = findViewById(R.id.list_view_main_menu);

        String[] values = new String[]{
                "Widgets", "Text", "Layouts", "Containers", "Images", "Date", "Transitions", "Advanced", "Google", "Design", "AppCompat"
        };

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

        for (int i = 0; i < values.length; i++){
            adapter.add(values[i]);
        }

        listView.setAdapter(adapter);

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                ListView listView = (ListView) adapterView;
                String os = (String) adapterView.getItemAtPosition(i);
                Toast.makeText(MainActivity.this, os, Toast.LENGTH_LONG).show();
            }
        });
    }
}

<activity_main.xml>

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="com.example.androidexamplesapp.MainActivity">

    <ListView
        android:id="@+id/list_view_main_menu"
        android:layout_width="352dp"
        android:layout_height="479dp"
        android:layout_marginTop="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

<그림 8>

최종 실행화면은 <그림 8>과 같은 모습이다. 각 아이템을 클릭하면 아이템의 텍스트가 토스트로 표시된다.