과목명 : 모바일 프로그래밍(Mobile programming with Android Studio)
수업일자 : 2023년 03월 24일 (금)
1. View, ViewGroup 클래스
1-1. View 클래스(위젯)
(1) 안드로이드 화면에서 실제로 사용되는 요소들은 모두 View 클래스를 상속받습니다.
(2) 다른 용어로 위젯이라고도 표현합니다.
- 화면에서의 특정 버튼을 버튼 위젯, / 실제 코드에서의 버튼은 버튼 클래스라고 부를 수 있습니다.
(3) 다른 위젯을 담을 수 있는 위젯은 레이아웃이라고 합니다.
(4) 레이아웃은 ViewGroup 클래스 아래에 존재합니다.
(5) 레이아웃도 전체적인 측면에선 위젯에 포함되는 개념입니다.
1-2. View 클래스의 상속을 받은 클래스(위젯) 계층도
1-3. Button의 XML 속성
(1) View나 TextView 클래스의 상속을 받은 Button 클래스입니다.
(2) Button의 XML 속성 확인하기
* XML(Extensible Markup Language)
- W3C에서 개발된 다른 특수 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어로써 다른 많은 종류의 데이터를 기술하는데 사용될 수 있습니다.
(3) Button 클래스의 상속 계층도 확인하기 (Ctrl + H)
(4) 이외에도 다양한 클래스의 상속 관계는 아래의 Android Studio 공식 Reference 문서에서도 확인 가능합니다.
- URL : https://developer.android.com/reference/packages
Package Index | Android Developers
developer.android.com
2. View 클래스의 XML 속성
2-1. Button의 XML 속성 - id 속성
(1) id 속성은 모든 위젯의 아이디 값을 나타냅니다.
(2) Java 코드에서 동작을 주고자 할 때 해당 id 속성값으로 접근합니다.
(3) id 속성 부여 시, android:id="@+id/속성명" 형식으로 지정합니다.
(4) 아래 코드에서는 btn3이 버튼 위젯의 id 속성입니다.
<Button
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF0000"
android:text="버튼입니다."/>
(5) 자바 코드에서 속성값을 탐색하여 변수에 할당하는 경우
- 위젯 변수 = (위젯 타입) findViewById(R.id.id 이름);
Button btn1;
btn1 = (Button) findViewById(R.id.btn1);
(6) id 속성의 지정 유무
- Button, RadioButton, CheckBox 등의 위젯은 일반적으로 클릭 및 터치 시 특정한 동작이 발생하도록 하기 위함으로, id 속성을 일반적으로 지정합니다.
- 클릭이나 터치 시 이후에 동작이 발생하지 않아도 무관할 수 있는 TextView, ImageView 등의 위젯은 id 속성을 부여하지 않아도 됩니다.
2-2. Button의 XML 속성 - android:layout_width, layout_height 속성
(1) match_parent
- 자신의 부모(또는 레이아웃)에 폭(너비)이나 높이를 맞춥니다.
(2) wrap_content
- 자신의 폭이나 높이를 자신 안에 폰트가 들어갈 정도의 크기 또는 포함된 내용을 보여줄 수 있는 크기로만 맞춥니다.
(3) wrap_content, match_parent 이외에 dp, sp 값으로 상세한 픽셀값을 설정할 수 있습니다.
* DP(Density-Independent Pixels)
- UI 레이아웃을 정의할 때 레아이웃 치수나 위치를 지정하기 위해 사용하는 단위로써 픽셀 독립 단위이기 때문에 화면의 크기가 달라도 동일한 비율로 보여주기 위해 안드로이드에서 정의한 단위이며 큰 화면, 작은 화면에 관계없이 같은 크기로 보여지게 됩니다.
* SP(Scale-Independent Pixels)
- DP와 마찬가지로, UI 레이아웃을 정의할 때 레이아웃의 치수나 위치를 지정하기 위해 사용하는 단위이나 DP와 달리 시스템의 레이아웃 규모에 따라 지정된 값이 변화하는 특성이 있습니다.
- 둘의 차이점은 sp는 TextView의 textSize를 지정할 때 사용하며 dp는 화면에 따라 사이즈가 달라지지 않고 항상 고정된 값을 갖게 됩니다. 하지만 sp는 시스템의 사이즈에 따라 TextView가 작아지거나 커지므로 요즘은 sp를 사용하긴 하나 TextView의 사이즈를 고정값으로 지정해 줘야 하는 경우 dp를 사용합니다.
<LinearLayout
~~ 중간 code 생략 ~~
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="버튼입니다." />
<LinearLayout>
<실행 결과>
<LinearLayout
~~ 중간 code 생략 ~~
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="버튼입니다." />
<LinearLayout>
<실행 결과>
<LinearLayout
~~ 중간 code 생략 ~~
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="버튼입니다." />
<LinearLayout>
<실행 결과>
<LinearLayout
~~ 중간 code 생략 ~~
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="버튼입니다." />
<LinearLayout>
<실행 결과>
2-3. background 속성
(1) background 속성은 위젯의 색상을 부여할 수 있는 속성으로 #RRGGBB 형태의 색상 Hex code로 부여할 수 있습니다.
(2) 각 위치의 값은 빨간색, 초록색, 파란색을 의미합니다.
(3) RR, GG, BB의 위치는 16진수(00~FF)로 표현 가능합니다.
2-4. android:padding, layout_margin 속성
(1) padding
- padding 속성의 경우 위젯의 경계선으로부터 위젯 내부의 요소가 떨어지게 위치할 수 있도록 설정할 수 있는 속성입니다.
- 기본적인 padding 속성은 위젯의 경계선으로부터 상하좌우 모든 방향에 여백을 주게 됩니다.
- paddingLeft, paddingRight 등의 속성을 주어 특정한 방향으로만 여백을 지정할 수도 있습니다.
(2) layout_margin
- 특정 위젯을 기준으로 위젯의 경계선으로부터 위젯 외부의 요소가 떨어지게 위치할 수 있도록 설정할 수 있는 속성입니다.
- 위젯과 위젯 사이에 여유 공간을 두고 싶다면 layout_margin 속성을 사용합니다.
- 마찬가지로 특정 방향으로만 margin 속성을 줄 수도 있습니다.
ex) android:layout_marginLeft, android:layout_marginRight
2-5. android:visibility 속성
(1) 위젯을 보이게 할지, 아니면 감출지 설정할 수 있는 옵션입니다.
- default 값인 visible은 위젯이 노출되는 상태를 의미합니다.
(2) invisible
- 위젯을 노출시키지 않을 뿐이며 기존 위젯이 존재하던 자리에 대한 공백은 여전히 유지됩니다.
(3) gone
- 위젯을 노출시키지 않으며 기존 자리에 대한 공백까지 지워버리게 됩니다.
2-6. android:enabled, clickable 속성
(1) enabled
- 위젯의 동작 여부를 설정할 수 있는 속성입니다.
(2) clickable
- 위젯의 클릭이나 터치가 가능하도록 설정할 수 있는 속성입니다.
(3) enabled, clickable 모두 true, false값으로 속성을 설정할 수 있습니다.(default 값 : true)
(4) XML 설정 파일보다는 주로 자바 코드에서 사용합니다.
2-7. android:rotation 속성
(1) 위젯을 원하는 각도만큼 회전시켜서 출력할 수 있는 속성입니다.
(2) 정수값으로 각도를 지정할 수 있습니다.
3. TextView 클래스
3-1. TextView
- TextView는 안드로이드 UI를 구성함에 있어 화면에 텍스트를 표시하는 기능을 담당하며 안드로이드에서 제공하는 위젯 중 가장 많이 사용되는 위젯이기도 합니다.
3-2. TextView의 속성
(1) android:text
- UI에 표시할 텍스트 문자열을 표현할 수 있는 속성입니다.
(2) android:textColor
- 텍스트 문자열의 색상을 지정할 수 있으며 #RRGGBB나, #AARRGGBB 형식으로 표현할 수 있습니다.
(3) android:textSize
- 텍스트 문자열의 크기를 dp, px, in, mm, sp 단위로 지정할 수 있습니다.
(4) android:typeface
- 텍스트 문자열의 폰트를 설정하며 default 값은 normal이고 다른 폰트로 sans, serif, monospace 값을 설정할 수 있습니다.
(5) android:textStyle
- 텍스트 문자열의 스타일을 설정하며 default 값은 normal이고 다른 스타일로 bold, italic, bolditalic 값을 설정할 수 있습니다.
(6) android:singleLine
- 텍스트가 다음 라인으로 넘어갈 경우 강제로 한 줄만 출력하고 문자열의 맨 뒤에 '...'를 표시합니다. default 값은 true이고, false 값으로 설정할 수 있습니다.
3-3. TextView 관련 XML 코드
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30dp"
android:text="textSize 속성"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30dp"
android:textColor="#00FF00"
android:text="textColor 속성"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30dp"
android:textStyle="bold|italic"
android:text="textStyle 속성"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30dp"
android:typeface="serif"
android:text="typeface 속성"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30dp"
android:singleLine="true"
android:text=" singleLine 속성 singleLine 속성 singleLine 속성 "/>
<실행 결과>
3-4. id, text 속성만 부여한 TextView XML 코드
<TextView
android:text="TextView 연습 1"
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:text="TextView 연습 2"
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:text="TextView 연습 3"
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<실행 결과>
3-5. XML 속성을 Java 코드로 설정하기
package com.example.textviewimageviewtest;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Bundle;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TextView textView1, textView2, textView3;
textView1 = (TextView) findViewById(R.id.textView1);
textView2 = (TextView) findViewById(R.id.textView2);
textView3 = (TextView) findViewById(R.id.textView3);
textView1.setText("안녕하세요");
textView1.setTextColor(Color.RED);
textView2.setTextSize(30);
textView2.setTypeface(Typeface.SANS_SERIF, Typeface.BOLD_ITALIC);
textView3.setText("Hello Android Studio! Hello Android Studio! Hello Android Studio! Hello Android Studio!");
textView3.setSingleLine();
}
}
<실행 결과>
3-6. 자주 사용되는 View 클래스 또는 TextView 클래스의 XML 속성과 메소드
| XML 속성 | 연관 메소드 | 비고 |
| background | setBackgroundColor() | View 클래스 |
| clickable | setClickable() | View 클래스 |
| focusable | setFocusable() | View 클래스 |
| id | setId() | View 클래스 |
| longClickable | setLongClickable() | View 클래스 |
| padding | setPadding() | View 클래스 |
| rotation | setRotation() | View 클래스 |
| scaleX, scaleY | setScaleX(), setScaleY() | View 클래스 |
| visibility | setVisibility() | View 클래스 |
| gravity | setGravity() | TextView 클래스 |
| inputType | setRawInputType() | TextView 클래스 |
| password | setTransformationMethod() | TextView 클래스 |
| text | setText() | TextView 클래스 |
| textColor | setTextColor() | TextView 클래스 |
| textSize | setTextSize() | TextView 클래스 |
4. Button, EditText
4-1. Button, EditText
- Button, EditText 위젯 모두 View, TextView 클래스를 상속받는 것을 확인할 수 있습니다.
(1) Button의 경우 버튼을 클릭했을 때 특정 동작이나 이벤트를 수행할 수 있도록 하는 위젯입니다.
(2) EditText의 경우 사용자의 키보드로부터 특정한 값을 입력받을 수 있도록 하는 위젯입니다.
4-2. Button을 클릭했을 때 동작하는 MainActivity.java 코드 (3단계)
(1) 특정 버튼에 대한 Button 타입 변수 선언
Button myButton;
(2) 해당 변수에 특정 버튼에 대한 Id 속성을 대입
myButton = (Button) findViewById(R.id.button1);
(3) 버튼을 클릭할 때 동작을 담당하는 객체(클래스)를 할당, 메소드 정의
myButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// 동작하는 로직
}
});
4-3. 사용자로부터 입력받은 EditText의 값을 가져오는 MainActivity.java 코드 (3단계)
- EditText의 경우 값을 입력받은 후 해당 값을 Java 코드로 가져와서 이후 작업에 사용됩니다.
(1) EditText 타입의 변수 선언
EditText myEdit;
(2) 해당 변수에 값을 입력받은 EditText 위젯에 대한 Id 속성을 대입
myEdit = (EditText) findViewById(R.id.edittext1);
(3) EditText 위젯에 입력된 값 가져오기
- 주로 Button ClickEventListener 내부에 삽입됩니다.
String myStr = myEdit.getText().toString();
5. CompoundButton
- 해당 CompoundButton 클래스의 경우 Button 클래스의 하위 클래스로 CheckBox, RadioButton, Switch, ToggleButton의 상위 클래스입니다.
5-1. CheckBox
(1) 체크박스를 담당하는 위젯으로 체크할 때마다 상태가 Check, Uncheck로 변경됩니다.
(2) 여러 개의 체크박스가 존재해도 서로 독립적으로 동작할 수 있기 때문에 여러 개의 체크박스를 동시에 check, uncheck할 수 있습니다.
(3) 이벤트 동작 메소드로 OnCheckedChangeListener()를 사용합니다.
<CheckBox
android:id="@+id/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="안드로이드폰"
android:checked="true"/>
<CheckBox
android:id="@+id/iphone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="아이폰" />
<실행 결과>
5-2. 체크박스에서 Check ↔ uncheck 일 때, MainActivity.java의 코드 (3단계)
(1) CheckBox 타입의 변수 선언
CheckBox mycheck;
(2) 해당 변수에 체크박스 위젯의 속성값 대입
mycheck = (CheckBox) findViewById(R.id.android);
(3) 체크박스가 변경될 때 동작하는 객체(클래스)를 할당, 메소드 정의
mycheck.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
// 동작 로직
}
});
5-3. Switch, ToggleButton
(1) Switch, ToggleButton 모두 동일한 기능을 수행하는 버튼입니다.
(2) Switch의 주 용도는 특정 기능에 대한 On/Off 상태 표시입니다.
(3) 대부분 애플리케이션에서는 사용자에게 설정 기능을 주로 제공하고자 할 때 사용됩니다.
(4) 이벤트 동작 메소드로 OnCheckedChangeListener()를 사용합니다.
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true" />
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="false" />
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true" />
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="false" />
<실행 결과>
5-4. RadioButton, RadioGroup
(1) RadioButton의 경우 여러 옵션 중 한 가지 옵션을 선택할 수 있도록 만들어 주는 위젯입니다.
(2) RadioGroup은 RadioButton만 나열하게 되면 중복 선택이 가능하게 되므로 이를 피하기 위해 해당 RadioGroup으로 RadioButton들을 묶어주어야 합니다.
(3) 이벤트 동작 메소드로 OnCheckedChangeListener()를 사용합니다.
<RadioGroup
android:id="@+id/rGroup1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="남성"/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="여성"/>
</RadioGroup>
<실행 결과>
6. ImageView, ImageButton
6-1. ImageView
(1) 이미지를 출력할 때 사용하는 위젯으로 이미지가 필요하거나 레이아웃을 생동적으로 표현하고자 할 때 사용됩니다.
(2) ImageView에서 보여줄 그림은 프로젝트의 [res] → [drawable] 디렉토리에 저장되어 있어야 합니다.
(3) 저장 경로 지정 시 android:src="@drawable/그림 아이디" 형식으로 접근합니다.
6-2. ImageView 및 ImageButton의 XML 속성
(1) android:src
- 사용할 이미지의 경로를 나타냅니다.
(2) android:maxHeight, android:maxWidth
- 사용할 이미지의 최대 높이, 너비를 지정할 수 있습니다. (이미지의 크기 지정)
(3) android:scaleType
- 쉽게 풀이해 보면, 이미지를 다룰 때 ImageView 내부에 이미지를 어떻게 그려낼지 미리 정의해 둔 옵션입니다.
- 이미지의 확대 / 축소 방식을 지정할 수 있습니다.
(4) 위에서 언급된 것처럼 ImageView에서 사용될 이미지는 프로젝트 내부 경로인 [res] → [drawable] 디렉토리에 저장되어 있어야 합니다.
6-3. ImageView, ImageButton의 XML 코드
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher_background"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher_background"/>
<ImageView
android:layout_width="300dp"
android:layout_height="100dp"
android:scaleType="fitXY"
android:src="@drawable/ic_launcher_background"/>
<ImageView
android:layout_width="300dp"
android:layout_height="100dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_launcher_background"/>
<실행 결과>
7. Etc
7-1. 안드로이드의 특징
(1) 안드로이드의 핵심 커널(Kernel) : Linux로 구성되어 있다.
(2) 안드로이드 애플리케이션 개발 언어로는 Java, Kotlin이 존재한다.
(3) 안드로이드 SDK에서 많은 라이브러리를 포함하고 있어 개발에 용이하다.
(4) 소스는 오픈 소스 기반이다.
(5) 지속적이고 빠른 업데이트를 제공하고 있다.
7-2. 안드로이드 구조
(1) 응용 프로그램(Application)
- 안드로이드 스마트폰 기기에서 사용할 수 있는 일반적인 응용 프로그램입니다.
(2) 응용 프로그램 프레임워크(Application Framework)
- 안드로이드 API가 존재하는 곳을 의미하기도 합니다.
(3) 안드로이드 런타임(Android Runtime)
- Java 코어 라이브러리와 DVM(Dalvik Virtual Machine) 또는 아트 런타임(Art Runtime)으로 구성됩니다.
(4) 라이브러리(Library)
- 안드로이드에서 사용되는 여러 시스템 라이브러리는 시스템 접근 때문에 C를 기반으로 작성되었으며 이를 통해 세밀한 조작이 가능합니다.
(5) 리눅스 커널(Linux kernel)
- 하드웨어 운영과 관련된 저수준(Low-level) 관리 기능이 들어 있습니다.
7-3. 안드로이드 관련 용어 및 약어 (1)
(1) DVM(Dalvik Virtual Machine)
- 안드로이드 애플리케이션을 실행할 수 있는 가상 머신
(2) XML(Extensible Markup Language)
- W3C에서 개발된 다른 특수 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어로써 다른 많은 종류의 데이터를 기술하는데 사용될 수 있습니다.
(3) APK(Android Application Package)
- 안드로이드 응용 프로그램 패키지의 확장자입니다.
(4) MVP(Model View Presenter), MVC(Model View Controller)
- MVP 패턴은 안드로이드 아키텍처 패턴 중 하나로써, 기존 MVC 패턴을 기반으로 하는 아키텍처의 관심사 분리를 높이고 단위 테스트를 용이하게 하는 아키텍처를 의미합니다.
- MVC 패턴은 안드로이드 아키텍처 패턴 중 하나로써 MVP, MVMM의 기초가 되는 디자인 패턴입니다.
* 디자인 패턴(Design pattern) - 소프트웨어 디자인에서 특정 문맥에서 공통적으로 자주 발생하는 문제에 대해 재사용이 가능한 해결책입니다.
(5) Widget
- 사용자와의 상호작용을 위한 인터페이스로 제공되는 View 오브젝트
(6) Gradle
- Java 빌드 도구
7-4. 안드로이드 관련 용어 및 약어 (2)
(1) SDK(Software Development Kit) - 소프트웨어 개발 도구
(2) NDK(Native Development Kit) - 네이티브 개발 도구
(3) PDK(Platform Development Kit)
(4) ART(Android Runtime)
(5) API(Application Programming Interface)
7-5.
(1) 안드로이드에서 사용자 인터페이스는 XML 파일로 저장된다.
(2) 안드로이드에서 빌드 도구로 사용되는 것은 Gradle이다.
(3) 안드로이드 애플리케이션에서 main() 메소드의 역할을 하는 메소드는 onCreate() 메소드이다.
7-6.
(1) 안드로이드 애플리케이션에서 Resource들이 모여 있는 디렉토리는 Res이다.
(2) 안드로이드 애플리케이션에서 Resource들은 XML 언어를 사용하여 기술된다.
(3) 안드로이드 애플리케이션에서 화면 구성을 위한 Resource는 layout 디렉토리에 저장되어 있다.
7-7.
안드로이드에서
(1) Activity의 화면을 설정하는 메소드는 setContentView() 메소드이다.
- 안드로이드에서 위젯 등의 레이아웃을 담당하는 activity_main.xml 파일이 존재하고 MainActivity.java 파일을 통해 동적인 부분을 제어하게 됩니다. 이때 activity_main.xml에서 레이아웃을 생성하고 해당 레이아웃을 사용자에게 보여주기 위해 MainActivity.java에서 setContentView() 메소드를 사용하게 됩니다.
(2) Activity에서 아이디 속성으로 View를 찾는 메소드는 findViewById() 메소드이다.
(3) TextView에서 텍스트를 변경할 때 사용되는 메소드는 setText() 메소드이다.
7-8.
안드로이드에서 자식 요소의 View를 선형으로 배치시키는 레이아웃은 LinearLayout이며, 선형 레이아웃의 방향을 결정하는 속성은 android:orientation이다. 자식 요소의 View가 부모 요소의 View 공간을 모두 차지하려면 View의 크기를 match_parent으로 지정한다.
8. Reference
(1) Reference
- Android Studio를 활용한 안드로이드 프로그래밍 / 한빛아카데미(Hanbit Academy, Inc.)
(2) URL
https://www.hanbit.co.kr/store/books/look.php?p_code=B1212492850
IT CookBook, Android Studio를 활용한 안드로이드 프로그래밍(7판)
안드로이드 프로그래밍을 하면서 부딪힐 수 있는 다양한 오류나 실수까지 친절하게 안내하여 시행착오 없이 안드로이드를 빠르게 정복할 수 있습니다.
www.hanbit.co.kr
- 학부에서 수강했던 전공 수업 내용을 정리하는 포스팅입니다.
- 내용 중에서 오타 또는 잘못된 내용이 있을 시 지적해 주시기 바랍니다.
댓글