안드로이드 : 화면 출력

안드로이드에서 화면 출력을 위한 단위 Activity

Activity 위에 View를 배치해서 출력

Activity Class 의 onCreate 메소드에서 setContentView(int resId 또는 View view)를 호출하면 됩니다.

resId 는 리소스 아이디의 줄임말인데 res 디렉토리에 자원을 생성하면 안드로이드가 R.java라는 파일을 만들고 그 파일에 id를 생성해서 연결한 것입니다.

 

R. 으로 시작하는 ID는 프로젝트에 삽입한 자원이고 android.R. 으로 시작하는 ID는 안드로이드가 제공하는 자원입니다. 

 

- View 를 대입하고자 하는 경우는 코드로 생성해서 대입해야합니다.

 

6.0 이상 동적 권한: 앱에서 권한 부여가 안되서 쓰지 못할 수 있으니 6.0 이상으로 잡아야한다.

 

View 의 종류

ViewGroup (여러개의 View 를 모아서 출력: Layout(원하는 모양을 마음대로 조합), Adapter View(동일한 모양의데이터를 출력하기 위한 뷰)

Fragment (작은 Activity - 모아서 하나의 Activity를 구성)

 

View (Widjet - 단독으로 출력)

 

=> 전체에 Layout이나 AdapterView를 배치하고 그 위에 Widjet이나 View Group을 배치해서 화면 출력을 합니다.

 

XML 로 디자인 하는 이유

구조 파악이 쉽기 때문이다.

 

기본 View

TextView : 문자열 출력을 위한 뷰

EditView : 문자열 입력을 위한 뷰 (키보드 사용 가능)

ImageView : 이미지 출력을 위한 뷰

Button : 클릭해서 어떤 동작을 취하기 위한 뷰

 

뷰들은 속성을 이용해서 모양이나 이벤트 처리를 합니다.

필수 속성 : layout_width(너비) 와 layout_height(높이)

 match_parent(부모 전체 영역)

 wrap_content(콘텐츠의 크기 만큼)

 숫자 단위

 

id 속성 : 다른 뷰와 관계 설정을 위해서 또는 Kotlin 코드에서 사용하기 위해서 입니다. 

@+id/아이디 로 설정합니다.

<TextView
	android:id="@+id/txt/"/>

 

xml 파일에 디자인한 뷰를 Activity에서 사용하기

1. id를 직접 찾아서 뷰로 변환

 

val txt:TextView = findViewBuId(R.id.txt)
val txt =  findViewBuId(R.id.txt) as TextView

2.id를 Activity 의 property 자동 추가하기

 

build.gradle 파일의 plug in에 kotlin-android-extensions를 추가하고 설치를 해야합니다.

activity 파일에 import kotlinx.android.synthtic.main.레이아웃.*

 

키보드 관리

InputMethodManager 클래스의 인스턴스를 이용합니다.

InputMethodManager 클래스의 인스턴스는

getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager 로 생성

getSystemService 를 이용해서 생성하는 인스턴스는 시스템이 관리하고 Singleton 으로 만들어주기 위해서 직접 생성을 못하게 합니다.

 

키보드 출력

InputMethodManager.showSoftInput(키보드 입력을 받을 View, 0)

 

키보드 숨기기

InputMethodManager.hideSoftInputFromWindow(키보드 제어권을 뺏어올 뷰의 Token - View.getWindowToken(),0)

 

키보드 출력 때문에 다른 뷰가 가려지거나 화면이 보이지를 않는 경우에 키보드 문제를 해결

 - 빈 화면을 터치하면 키보드를 숨기기

 - return 키를 터치하면 키보드를 숨기기

 - 키보드가 올라오는 Notification이 발생하면 이 때 하단의 뷰를 상단으로 이동하고 키보드가 숨겨지는 Notification이 발생하면 다시 하단으로 이동

 

 

Layout

서로 다른 뷰들을 모아서 출력하기 위한 뷰

배경색 지정할 수 있지만 자체 출력은 안됩니다.

다른 뷰나 뷰 그룹을 포함하는 역할을 수행

1. 종류 

1) AbsoluteLayout: 좌표와 크기를 마음대로 설정할 수 있는 레이아웃

deprecated 되었는데 이유는 멀티해상도에 적용하기가 어렵다

 

2) LinearLayout : 수평 또는 수직 방향으로 뷰들을 배치하는 레이아웃

Layout_weight 라는 속성을 이용해서 뷰의 비율을 설정할 수 있습니다.

일정한 비율을 갖는 뷰들을 출력할 때 유용

 

3)FrameLayout: 왼쪽 상단을 기준으로 배치하는 레이아웃

여러개의 뷰를 배치하면 뷰가 겹쳐져서 출력 됩니다

visivility 속성을 이용해서 숨기거나 출력하는 형태로 사용

 

4) TableLayout: 표 형태의 Layout, 가로나 세로방향의 크기가 동일한 형태

=> 약간의 변화를 가해서 셀 병합을 할 수 있는 GridLayout이 추가 됨

 

5) RelativeLayout : 부모 뷰나 다른 뷰와의 관계를 이용해서 배치하는 레이아웃

제약조건 등을 추가할 수 있는 ConstraintLayout이 추가 됨

 

LauncherActivity 추가하여 연습가능

 

2. LinearLayout

수평이나 수직 방향으로 일정한 비율을 가지고 뷰를 배치하는 레이아웃

orientation을 이용해서 배치 방향을 설정 - vertcal, horiaontal 

gravity 속성을 이용해서 맞춤을 설정

gravity : 자식 뷰의 맞춤을 설정

layout_gravity : 부모 뷰로 부터 자신의 맞춤을 설정 

 

weight 속성을 이용해서 비율을 설정

orientation과 반대 방향으로 설정

0을 설정하면 자신의 크기대로 출력

그 이외의 양수는 전체 합에서의 비율

 

필요한 이미지 파일을 drawable 디렉토리로 복사

 

Relative Layout

다른 뷰 또는 부모와의 관계를 이용해서 뷰를 배치하는 기법

부모는 상관이 없지만 다른 뷰와의 관계로 표시하려면 기준이 되는 뷰에는 id 가 설정 되어 있어야 합니다.

 

layout_alignParent? : 부모와의 관계로 배치

layout_above : 다른 뷰와의 관계로 배치합니다.

 

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

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
       android:id="@+id/edit"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/keyboardshow"
        android:text="키보드 보이기"
        />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/keyboardhide"
        android:text="키보드 숨기기"
        />


</LinearLayout>

package kr.co.tjoeun.ui

import android.content.Context
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.inputmethod.InputMethodManager
import android.widget.EditText
import kotlinx.android.synthetic.main.activity_main.*
//activity_main.xml 파일에 디자인한 뷰들을 Activity 의 프로퍼티로 추가

class MainActivity : AppCompatActivity() {

    //edit을 대입 받기 위한 변수
    //var edit: EditText? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //layout 파일을 전개해서 Layout 파일에 디자인 한 내용을 메모리에 적재하는 동작
        setContentView(R.layout.activity_main)
        //edit라는 id 로 만들어진 EditText를 가져오기
        //edit = findViewById(R.id.edit)
        //속성 설정이나 가져오기
        //코틀린은 property의 개념을 갖습니다.
        //get 메소드와 set메소드를 이용해도 되고 프로퍼티 이름을 직접 사용하는 것도 가능
       // edit.setText("테스트 설정")
        //keyboardshow 를 눌렀을 때 수행할 내용
        keyboardshow.setOnClickListener {
            val imm:InputMethodManager =
                getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
            //키보드 출력 - 키보드를 누르면 문자가 edit 에 출력
            imm.showSoftInput(edit, 0)
        }

        keyboardhide.setOnClickListener {
            val imm:InputMethodManager =
                getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
            //키보드 숨기기 - edit에 설정된 키보드를 숨기기기
            imm.hideSoftInputFromWindow(edit.windowToken, 0)
        }
    }
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".LayoutActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="기준"
        android:textSize="36sp"
        android:id="@+id/base"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="오른쪽 배치"
        android:textSize="36sp"
        android:layout_toRightOf="@+id/base"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="아래 오른쪽 배치"
        android:textSize="36sp"
        android:layout_below="@+id/base"
        android:layout_alignParentRight="true"/>
</RelativeLayout>

<?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"
    android:orientation="vertical"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:layout_gravity="right|center_vertical">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="랜덤으로 번호 생성"
                android:textSize="24sp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="랜덤으로 번호를 생성합니다"
            />
        </LinearLayout>
        <ImageView
            android:layout_width="140dp"
            android:layout_height="140dp"
            app:srcCompat="@drawable/random"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:layout_gravity="right|center_vertical">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="별자리로 번호 생성"
                android:textSize="24sp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="뱔자리로 로또 번호를 생성합니다"
                />
        </LinearLayout>
        <ImageView
            android:layout_width="140dp"
            android:layout_height="140dp"
            app:srcCompat="@drawable/constellation"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:layout_gravity="right|center_vertical">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="이름으로 번호 생성"
                android:textSize="24sp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="이름으로 로또 번호를 생성합니다"
                />
        </LinearLayout>
        <ImageView
            android:layout_width="140dp"
            android:layout_height="140dp"
            app:srcCompat="@drawable/name"/>
    </LinearLayout>
</LinearLayout>