사용자 인터페이스 구현하기
안드로이드 프로그래밍으로 사용자 인터페이스(User Interface) 구현하는 방법을 소개합니다.
1. 구현은 크게 3가지 방법으로 표현할 수 있습니다.
1. XML - 사용자 인터페이스 <Button android:text="첫번째 버튼" android:id="@+id/button1" android:layout_width="fill_parent" android:layout_height="wrap_content" />
<Button android:text="두번째 버튼" android:id="@+id/button2" android:layout_width="fill_parent" android:layout_height="wrap_content" />
| 
|
2. 코드 - 사용자 인터페이스 Button b1 = new Button(this); b1.setText("첫번째 버튼"); container.addView( b1 );
|
3. XML, 코드 혼합 구현
.......
Button b1 = (Button)findViewByID(R.id.button1);
.......
1. 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"
android:orientation="vertical"
tools:context="com.example.lab.program.MainActivity">
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="첫번째"
/>
<Button
android:id="@+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="두번째 버튼"/>
</LinearLayout>
|
activity_main.xml
|
package com.example.lab.program;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.LinearLayout;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Button b1 = (Button)findViewById(R.id.button1);
// b1.setText("야호");
}
}
|
MainActivity.java
|
2. 코드 - 사용자 인터페이스
<?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"
android:orientation="vertical"
tools:context="com.example.lab.program.MainActivity">
</android.support.constraint.ConstraintLayout>
|
activity_main.xml
|
package com.example.lab.program;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.LinearLayout;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setContentView(R.layout.activity_main);
LinearLayout container = new LinearLayout(this);
container.setOrientation(LinearLayout.VERTICAL);
Button b1 = new Button(this);
b1.setText("첫번쨰 버튼");
Button b2 = new Button(this);
b2.setText("두번째 버튼");
container.addView(b1);
}
}
|
MainActivity.java
|
3. 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"
android:orientation="vertical"
tools:context="com.example.lab.program.MainActivity">
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="첫번째"
/>
<Button
android:id="@+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="두번째 버튼"/>
</LinearLayout>
|
activity_main.xml
|
package com.example.lab.program;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.LinearLayout;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button b1 = (Button)findViewById(R.id.button1);
b1.setText("코드에서 변경");
}
}
|
MainActivity.java
|
4. 뷰의 위치와 크기
상수
| 설명
|
match_parent
| 부모의 크기를 꽉 채운다. (fill_parent도 사용은 가능. 동일함. / fill_parent는 기억하지 않아도 됨.)
|
wrap_content
| 뷰가 나타내는 내용물의 크기를 맞춤.
|
숫자
| 크기를 지정.
|
단위
| 설명
|
px(Pixels)
| 화면의 실제 픽셀을 나타냄.
|
dp(density-independent pixels)
| dp는 화면의 밀도가 예를 들면 160dpi 화면에서 하나의 물리적인 픽셀을 말함.
|
sp(scale-independent pixels)
| 폰트 크기에 영향을 받음.
|
pf(points)
| 1/72 인치 표시
|
mm(millimeters)
| 밀리미터
|
in(inches)
| 인치
|
5. 참고하면 도움되는 자료
https://developer.android.com/training/basics/firstapp/building-ui.html