화면 디자인

AndroidManifest.xml

1) xml

• 마크업 언어(HTML)이 아닌 마크업 언어를 정의하기 위한 언어

<?xml version="1.0" encoding="utf-8"?>
<!-- 
xmlns: android: 안드로이드 네임스페이스 정의
package: 앱의 패키지 이름을 지정, 패키지 이름은은 앱을 식별하는 고유한 이름
application 앱의 전체적인 정보를 포함
android:allowBackup: 앱의 백업 여부를 설정
android:icon : 앱 아이콘 이미지를 지정
android:label: 앱 이름을 지정
adroid:roundIcon: 라운드 앱 아이콘 이미지를 지정
android:supporttsRtl: 앱이 오른쪽에서 왼쪽방향을 지원하는지 여부를 설정
android:theme: 앱의 기본 테마를 지정
activity: 앱의 액티비티 정보를 포함
android:name : 액티비티의 이름을 지정
intent-filter: 액티비티를 시작하는데 사용되는 인텐트 필터 정보를 정의
action: 인텐트 필터에 사용될 액션 정보를 지정
category: 인텐트 필터에 사용될 카테고리 정보를 지정, 이 코드에서는 LAUNCHER 카테고리를 지정하여
앱이 실행될 때 런처화면이 나타납니다.
@: Android에서 리소스를 참조할 때 사용되는 기호
 -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.uidesign">

	<application
		android:allowBackup="true"
		android:icon="@mipmap/ic_launcher"
		android:label="@string/app_name"
		android:roundIcon="@mipmap/ic_launcher_round"
		android:supportsRtl="true"
		android:theme="@style/AppTheme">
		<activity android:name=".MainActivity">
			<intent-filter>
				<action android:name="android.intent.action.MAIN" />
				<category android:name="android.intent.category.LAUNCHER" />
			</intent-filter>
		</activity>
	</application>
</manifest>

MainActivity.kt

package com.example.uidesign // 앱의 패키지 이름을 지정, 앱의 모든 클래스는 이 패키지 안에 있어야
// 한다.

import androidx.appcompat.app.AppCompatActivity // 기본적인 액티비티 동작을 구현하고
// ActionBar를 지원
import android.os.Bundle // Android 의 key-value 쌍으로 데이터를 저장할 수 있는 객체

class MainActivity : AppCompatActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState) // 액티비티가 초기활 될 때 필요한 작업을 수행
		setContentView(R.layout.activity_main) // 메서드를 호출하여 이 파일에 정의된 뷰들을 화면에
 // 표시
	}

res/layout/main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
	<androidx.constraintlayout.widget.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=".MainActivity">

	<TextView
		android:id="@+id/txtNormal <!-- id : txtNormal -->
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="Hello World!"
		app:layout_constraintBottom_toBottomOf="parent"
		app:layout_constraintLeft_toLeftOf="parent"
		app:layout_constraintRight_toRightOf="parent"
		app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

• ConstraintLayout
  • 각 컴포넌트간의 제약조건에 따른 위치 배정
  • 디폴트 레이아웃
• LinearLayout
  • 한 쪽 방향으로만 배치하는 레이아웃
• RelativeLayout
  • 기준 컴포넌트에 대한 상대 위치로 배치
• FrameLayout
  • 겹침이 가능한 레이아웃
• TalbeLayout
• GridLayout

뷰 컴포넌트

• 화면에 나타나는 개별 요소 객체
• View 클래스
  • 모든 뷰 텀포넌트의 최상위 부모
• 주요속성
  • android:id
    • 뷰 컴포넌트의 ID
    • 프로그램에서 ID를 이용해 뷰 접근
  • android:layout_width
  • android:layout_height
    • 뷰의 폭과 넓이
    • wrap_content: 내용물의 크기에 맞춤
    • match_parent: 부모 컴포넌트 크기에 맞춤
    • 0dp: 허용된 제약조건에 맞춤
    • 절대값
  • android:text
    • 출력할 문자열
• 수정은 GUI에서 또는 code에서 직접 수정

Button(color)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout>

	<Button
		android:id="@+id/btnClick"
		android:layout_width="0dp"
		android:layout_height="wrap_content"
		android:text="Click"
		android:textColor="#FF0000"
		android:background="#333333"
		android:layout_marginStart="8dp"
		android:layout_marginLeft="8dp"
		android:layout_marginTop="8dp"
		android:layout_marginEnd="8dp"
		android:layout_marginRight="8dp"
		android:layout_marginBottom="8dp"
		app:layout_constraintBottom_toBottomOf="parent"
		app:layout_constraintEnd_toEndOf="parent"
		app:layout_constraintStart_toStartOf="parent"
		app:layout_constraintTop_toTopOf="parent" />
	</androidx.constraintlayout.widget.ConstraintLayout>

EditText

• 글자 입력을 위한 뷰 컴포넌트
• 주요 속성
  • input: 어떤 종류의 글자를 입력할지 결정
    • email,number,textPassword 등
  • hint
    • 사용자가 입력전에 출력할 문자열
    • 사용자가 입력시장하면 사라짐
    • html의 plaeholder와 동일
  • ems
    • layout_width가 wrap_content일 경우 글자 입력전이라 글자 크기 결정 못함
    • 지정한 글자 수의 크기만큼 폭을 가짐
  • maxLength: 입력 가능 최대 수
  • lines
    • 화면에 보여줄 라인 수

ImageView

1) 이미지 선택 후 설정되는 속성

• tools:srcCompat=”@tools:sapmle/avatars”
• 추후 변경 가능

2) scaleType 속성

• imageView와 실제그림의 크기 차이가 발생할 때 어떻게 보여줄지 결정
  - 그림의 확대/축소/자르기 결정
  

LinearLayout

• 컴포턴트를 한쪽 방향으로만 배치
  • orientation 속성으로 결정
    • horizontal: 가로 방향
    • vertical: 세로 방향

<?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="horizontal"
	tools:context=".MainActivity">
</LinearLayout>

• LinearLayout의 자식 뷰 속성

  • android:layout_weight
  • layout_width 또는 layout_height가 0dp여야 함.
  • 비율에 맞춰 크기를 결정

• 실습
  

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

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

	<TextView
		android:layout_width="0dp"
		android:layout_height="wrap_content"
		android:layout_weight="1"
		android:textSize="22sp"
		android:text="이름" />
		
	<EditText
		android:layout_width="0dp"
		android:layout_height="wrap_content"
		android:layout_weight="2"
		android:ems="10"
		android:inputType="textPersonName"
		android:textSize="22sp"/>

	<Button
		android:id="@+id/button5"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:layout_marginTop="50dp"
		android:textSize="22sp"
		android:text="로그인" />

</LinearLayout>

Gradle정보

• builde.gradle파일은 Gradle Build Script 문법을 따릅니다.
• Groovy 언어와 Kotlin DSL 두 가지 형태를 지원
• Groovy: JVM 언어, 자바와 유사한 구문과 문법을 사용
• Kotlin DSL(Domain-Specific Language): 안드로이드 앱 개발에 최적화된 문법과 구문

1) Build.gradle(project:UIDesign)

buildscript { //코틀린 버전과 빌드 도구인 Gradle의 버전을 설정, 필요한 의존성들을 추가
	ext.kotlin_version = "1.3.72"
	repositories {
		google()
		jcenter()
	}
	dependencies {
		classpath "com.android.tools.build:gradle:4.0.0"
		classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
	}
}

allprojects {  // 모든 프로젝트에서 공통으로 사용되는 설정을 정의
	repositories {
		google()
		jcenter()
	}
}

task clean(type: Delete) { // build 디렉토리를 삭제하는 작업을 수행
	delete rootProject.buildDir
}

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'

android { // 프로젝트의 기본 설정
	compileSdkVersion 29
	buildToolsVersion "29.0.3"

	defaultConfig { // 앱의 기본 구성 정의
		applicationId "com.example.uidesign"
		minSdkVersion 16
		targetSdkVersion 29
		versionCode 1
		versionName "1.0"
		testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
	}

	buildTypes { // 앱 빌드 유형을 정의
		release {
		…
		}
	}
}

dependencies { // 프로젝트에서 사용하는 라이브러리와 의존성을 정의
	implementation fileTree(dir: "libs", include: ["*.jar"])
	implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
	implementation 'androidx.core:core-ktx:1.1.0'
	implementation 'androidx.appcompat:appcompat:1.1.0'
	implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
	testImplementation 'junit:junit:4.12'
	androidTestImplementation 'androidx.test.ext:junit:1.1.1'
	androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
}