TextView text 보여줌
EditText 기입과 편집을 할 수 있슴
Button and other clickable elements (such as RadioButton, CheckBox, and Spinner) to provide interactive behavior.
ScrollView and RecyclerView to display scrollable items.
ImageView for displaying images.
ConstraintLayout and LinearLayout for containing other View elements and positioning them.
UI를 표시하고 구동하는 java코드는 Activity를 확장하는 클래스에 포함되어있다. 일반적으로 활동 XML(eXtended Markup Language)파일로 정의된 UI View 레이아웃과 연결이 된다.
ex) Hello World 앱의 MainActivity코드는 activity_main.xml 레이아웃 파일에 정의된 레이아웃을 표시.
What you'll learn
📍nteractive behavior로 앱을 만드는 방법
📍layout editor를 사용해서 layout을 디자인하는 방법
📍XML에서 layout을 편집하는 방법
📍새로운 용어, 어휘 단어와 개념 용어집을 통해 정의를 확인
What you'll do
📍앱을 만들고, 두개의 Button elements와 TextView를 layout에 추가.
📍ConstraintLayout의 각 element를 조작하여 margins 및 other elements로 제한
📍UI element attributes(특성) 변경
📍XML로 앱의 layout 편집
📍문자열 리소스로 하드코딩된 문자열을 추출
📍사용자가 Button을 누를 때 화면에 메시지를 표시하는 click-handler methods을 구현
앱설명
-HelloToast 앱은 2개의 버튼 요소와 1개의 TextView로 구성됩니다. 사용자가 첫 번째 버튼을 누르면 화면에 짧은 메시지(토스트)가 표시됩니다. 두 번째 버튼을 누르면 0에서 시작하는 텍스트 보기에 표시되는 "클릭" 카운터가 증가합니다.
Task1 : create and explpore a new project
Run > Run app을 선택하거나 도구-run아이콘을 클릭해서 애뮬레이터에서 앱을 빌드하고 실행
Task2: Add view element in the layout editor
Task2.1.2: layout에 버튼 추가
버튼을 레이아웃으로 끌어서 추가
요소 위에 마우스를 올리면 제약조건을 설정하는 특정 핸들을 클릭하는 Clear Constraint(제한조건 지우기)가 있어서 제약 조건을 제거할 수 있다.
전체 레이아웃의 모든 제약 조건을 지우려면 도구 모음엣서 Clear All Constraints(모든 제약조건 지우기) 도구를 클릭한다.
Task3:Change UI element attributes
Attributes 창은 UI 요소에 할당할 수 있는 모든 XML 속성에 대한 액세스를 제공한다.
3.1 Change the Button size
레이아웃 편집기는 네 모서리 모두 크기 조정핸들을 제공해서 빠르게 조정 가능하다.
각 모서리에 있는 핸들을 끌어 크기를 조정할 수 있지만, 이렇게 하면 너비 및 높이 치수가 하드 코딩이 된다.
하드 코딩이 되면 치수는 서로 다른 콘텐츠 및 화면 크기에 적응할 수 없으므로 대부분의 view요소에 대한 하드코딩을 피해야한다.
대신 레이아웃 편집기 오른쪽에 Attributes 창을 이용하여 치수를 사용하지 않는 크기 조정 모드를 선택한다.
맨 위에 view inspector는 정사각형 사이즈로 할 수 있다.
1. Height control
이 컨트롤은 layout_height 특성을 지정하고 사각형의 상단과 하단 측면에 있는 두 세그먼트에 나타납니다. 각도는 이 컨트롤이 wrap_content로 설정되어 있음을 나타냅니다. 즉, View는 컨텐츠에 맞게 수직으로 확장됩니다. "8"은 8dp로 설정된 표준 여백을 나타냅니다.
2. Width control.
이 컨트롤은 layout_width를 지정하고 사각형의 왼쪽과 오른쪽에 있는 두 세그먼트에 나타납니다. 각도는 이 컨트롤이 wrap_content로 설정되어 있음을 나타냅니다. 즉, 뷰가 컨텐츠에 맞게 수평으로 확장되어 최대 8dp의 여백이 됩니다.
3. 특성 창 닫기 단추입니다. 창을 닫으려면 클릭합니다.
실습
1.Attribute 창에서 width control 두번 클릭.
처음 클릭하면 직선으로 고정으로 변경, 두번 클릭하면 스프링코일과 제약 조건 일치로 변경.
=> 너비 컨트롤 변경의 결과, Attributes 창의 layout_width 속성은 match_constraint 값을 나타내고 Button 요소는 수평으로 확장되어 레이아웃의 왼쪽과 오른쪽 사이의 공간을 채웁니다.
match_constraint 설정은 설정된 경우 보기 요소를 너비 또는 높이로 확장하여 부모 요소를 최대 여백까지 채웁니다. 이 경우 상위 항목은 제약 조건 레이아웃입니다. 다음 작업에서 제약 조건 레이아웃에 대해 자세히 알아봅니다.
wrap_content 설정은 View 요소의 치수를 축소하므로 해당 콘텐츠를 둘러싸기에 충분합니다. 내용이 없으면 보기 요소가 보이지 않게 됩니다.
장치의 화면 크기에 맞게 조정되는 고정 크기를 지정하려면 고정 수의 밀도 독립적인 픽셀(dp 단위)을 사용합니다. 예를 들어, 16dp는 16 밀도에 독립적인 픽셀을 의미합니다.
3.2 버튼 속성 변경
2.각 view를 고유하게 식별하려면 각 view 또는 view 하위 클래스(예: Button)에 고유한 ID가 필요합니다. Button 구성요소는 텍스트가 필요합니다. view 요소에는 색상 또는 이미지가 될 수 있는 배경도 있을 수 있습니다.
속성 창은 보기 요소에 할당할 수 있는 모든 속성에 대한 액세스 권한을 제공합니다. Android:id, background, textColor 및 text 속성과 같은 각 속성에 대한 값을 입력할 수 있습니다.
1.Button을 선택한 후 Attributes 창 상단의 ID 필드를 button_toast로 android:id 편집하여 레이아웃의 요소를 식별하는 데 사용됩니다
2.background 특성을 @color/colorPrimary로 설정합니다. (@c를 입력하면 선택이 쉽게 나타납니다.)
3.textColor 속성을 @android:color/white로 설정합니다.
4.text 특성을 Toast로 편집합니다.
Task 4: Add a TextEdit and set its attributes
1.Set the ID to show_count.
2.Set the text to 0.
3.Set the textSize to 160sp.
4.Set the textStyle to B (bold) and the textAlignment to ALIGNCENTER (center the paragraph).
Change the horizontal and vertical view size controls (layout_width and layout_height) to match_constraint.
5.Set the textColor to @color/colorPrimary.
6.Scroll down the pane and click View all attributes, 7.scroll down the second page of attributes to background, and then enter #FFFF00 for a shade of yellow.
8.Scroll down to gravity, expand gravity, and select center_ver (for center-vertical).
Task 5: Edit the layout in XML
5.1 Open the XML code for the layout
5.2 Extract string resources
하드 코딩 문자열 대신 문자열을 나타내는 문자열 리소스를 사용하는 것이 좋습니다. 별도의 파일에 문자열을 사용하면 특히 이러한 문자열을 두 번 이상 사용하는 경우 해당 문자열을 더 쉽게 관리할 수 있습니다. 또한 각 언어에 대한 문자열 리소스 파일을 생성해야 하므로 앱을 변환하고 로컬리제이션하는 데 문자열 리소스는 필수입니다.
1."토스트"(첫 번째로 강조 표시된 경고)를 한 번 클릭합니다.
2.Alt-Enter in Windows 또는 Option-Enter in macOS를 누르고 팝업 메뉴에서 Extract string resource를 선택합니다.
3.리소스 이름에 button_label_toast를 입력합니다.
4.확인을 클릭합니다. 문자열 리소스는 값/res/string.xml 파일에 생성되고 코드의 문자열은 리소스에 대한 참조로 바뀝니다. :@string/button_label_theads
5.나머지 문자열 "카운트"의 경우 button_label_count, "0"의 경우 count_initial_value를 추출한다.
6. Project > Android 창에서 res 내의 값을 확장한 다음 strings.xml을 두 번 클릭하여 strings.xml 파일의 문자열 리소스를 확인합니다.
<resources>
<string name="app_name">Hello Toast</string>
<string name="button_label_toast">Toast</string>
<string name="button_label_count">Count</string>
<string name="count_initial_value">0</string>
</resources>7.메시지를 표시하는 후속 작업에서 사용할 다른 문자열이 필요합니다. trings.xml 파일에 "Hello Torte!" 문구에 대한 torst_message라는 문자열 리소스를 추가합니다.
<resources>
<string name="app_name">Hello Toast</string>
<string name="button_label_toast">Toast</string>
<string name="button_label_count">Count</string>
<string name="count_initial_value">0</string>
<string name="toast_message">Hello Toast!</string>
</resources>Task 6: Add onClick handlers for the buttons
6.1 Add the onClick attribute and handler to each Button
클릭 핸들러는 사용자가 클릭 가능한 UI 요소를 클릭하거나 누를 때 호출되는 방법입니다. Android Studio에서 Design 탭의 Attributes 창에 있는 onClick(클릭) 필드에 메서드의 이름을 지정할 수 있습니다.
또한 버튼에 Android:onClick 속성을 추가하여 XML 편집기에서 처리기 메서드의 이름을 지정할 수 있습니다. 아직 처리기 메서드를 만들지 않았으며 XML 편집기에서 이러한 메서드를 자동으로 만들 수 있으므로 후자 메서드를 사용합니다.
1.With the XML editor open (the Text tab), find the Button with the android:id set to button_toast:
<Button
android:id="@+id/button_toast"
android:layout_width="0dp"
...
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />- Android:onClick 속성을 button_toast 요소의 끝과 /> 끝 표시기 앞에 추가합니다.
android:onClick="showToast" />
3.속성 옆에 나타나는 빨간색 전구 아이콘을 클릭합니다. Create click handler를 선택하고 Main Activity를 선택한 다음 OK를 클릭합니다.
빨간색 전구 아이콘이 나타나지 않으면 메서드 이름("showToast")을 클릭합니다. Alt-Enter(Mac의 옵션-Enter)를 누르고, Create 'showToast(view)'in Main Activity를 선택한 다음 OK(확인)를 클릭합니다.
이 작업은 다음 단계 끝에 표시된 것처럼 MainActivity의 showTast() 메서드에 대한 자리 표시자 메서드 스텁을 만듭니다.
button_count Button을 사용하여 마지막 두 단계를 반복합니다. android:onClick 속성을 끝에 추가하고 click handler를 추가합니다.
android:onClick="countUp" />이제 ConstraintLayout 내의 UI 요소에 대한 XML 코드는 다음과 같습니다.
<Button
android:id="@+id/button_toast"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="@color/colorPrimary"
android:text="@string/button_label_toast"
android:textColor="@android:color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:onClick="showToast"/>
<Button
android:id="@+id/button_count"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:background="@color/colorPrimary"
android:text="@string/button_label_count"
android:textColor="@android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:onClick="countUp" />
<TextView
android:id="@+id/show_count"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#FFFF00"
android:gravity="center_vertical"
android:text="@string/count_initial_value"
android:textAlignment="center"
android:textColor="@color/colorPrimary"
android:textSize="160sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@+id/button_count"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button_toast" />5.MainActivity.java가 아직 열려 있지 않은 경우 Project > Android 보기에서 java를 확장하고 com.example.android를 확장합니다.주 활동을 두 번 클릭합니다. 코드 편집기가 Main Activity:에 코드와 함께 나타납니다.
package com.example.android.hellotoast;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void showToast(View view) {
}
public void countUp(View view) {
}
}6.2 Edit the Toast Button handler
이제 메시지를 표시하도록 showToast() method—(MainActivity의 토스트 단추 클릭 핸들러)을 편집합니다. 토스트를 사용하면 간단한 메시지를 작은 팝업 창에 표시할 수 있습니다. 메시지에 필요한 공간만 채웁니다. 현재 활동이 가시적이고 상호작용적인 상태로 유지됩니다. 건배는 앱에서 상호 작용을 테스트하는 데 유용할 수 있습니다. 건배 메시지를 추가하여 단추를 누르거나 작업을 수행한 결과를 표시합니다.
다음 단계에 따라 Toast Button click handler를 편집하십시오.
1.새로 만든 showToast() 메서드를 찾습니다.
public void showToast(View view) {
}2.토스트의 인스턴스를 만들려면 토스트 클래스의 makeText() factory 메서드를 호출합니다.
public void showToast(View view) {
Toast toast = Toast.makeText(
}3.앱 Activity의 context를 제공합니다. 활동 UI 위에 토스트가 표시되므로 시스템에서 현재 활동에 대한 정보가 필요합니다. 필요한 컨텍스트를 가진 활동 컨텍스트 내에 이미 있는 경우 이 기능을 this 바로 가기로 사용하십시오.
Toast toast = Toast.makeText(this, - 문자열 리소스(이전 단계에서 만든 tors_message)와 같이 표시할 메시지를 제공합니다. R.string으로 문자열 리소스 torst_message를 식별합니다.
- 디스플레이의 지속 시간을 제공합니다. 예를 들어, Toast.LENGTH_SHORT를 표시합니다.
Toast toast = Toast.makeText(this, R.string.toast_message,
Toast.LENGTH_SHORT);토스트 디스플레이의 지속 시간은 Toast.LENGTH_LONG or Toast.LENGTH_SHORT. 실제 길이는 긴 토스트의 경우 약 3.5초, 짧은 토스트의 경우 약 2초입니다.
6.show()를 불러 토스트를 표시합니다. 다음은 전체 showToast() 방법입니다.
public void showToast(View view) {
Toast toast = Toast.makeText(this, R.string.toast_message,
Toast.LENGTH_SHORT);
toast.show();
}6.3 Edit the Count Button handler
이제 CountUp() 메서드(기본 활동의 Count Button 클릭 핸들러)를 편집하여 Count를 누른 후 현재 카운트를 표시합니다. 누를 때마다 카운트가 1씩 증가합니다.
처리기 코드는 다음과 같아야 합니다.
-변경되는 카운트를 추적합니다.
-업데이트된 카운트를 TextView로 전송하여 표시합니다.
Count Button 클릭 핸들러를 편집하려면 다음 단계를 따르십시오.
1.새로 생성된 countUp() 메서드를 찾습니다.
2.카운트를 추적하려면 개인 구성원 변수가 필요합니다. 카운트 버튼을 누를 때마다 이 변수의 값이 증가합니다. 다음을 입력하면 빨간색으로 강조 표시되고 빨간색 전구 아이콘이 표시됩니다.
public void countUp(View view) {
mCount++;
}3.빨간색 전구 아이콘이 나타나지 않으면 mCount++ 식을 선택합니다. 결국 빨간색 전구가 나타납니다.
빨간색 전구 아이콘을 클릭하고 팝업 메뉴에서 Create field 'mCount'를 선택합니다. 이렇게 하면 Main Activity의 상단에 개인 멤버 변수가 생성되며 Android Studio에서는 다음과 같이 정수(int)가 될 것으로 가정합니다.
4.개인 멤버 변수 문을 변경하여 변수를 0으로 초기화합니다.
public class MainActivity extends AppCompatActivity {
private int mCount = 0;5.위의 변수와 함께 show_count TextView를 참조하기 위한 개인 멤버 변수도 필요합니다. 이 변수는 클릭 처리기에 추가됩니다. 이 변수를 mShowCount라고 합니다.
public class MainActivity extends AppCompatActivity {
private int mCount = 0;
private TextView mShowCount;6.이제 mShowCount가 생겼으므로 레이아웃 파일에서 설정한 ID를 사용하여 TextView에 대한 참조를 얻을 수 있습니다. 이 참조를 한 번만 가져오려면 onCreate() 메서드에서 이 참조를 지정합니다. 다른 단원에서 학습한 것처럼 onCreate() 메서드는 레이아웃을 부풀리는 데 사용되며, 이는 화면의 내용 보기를 XML 레이아웃으로 설정하는 것을 의미합니다. 또한 텍스트 보기와 같은 레이아웃의 다른 UI 요소에 대한 참조를 가져올 수도 있습니다. MainActivity에서 onCreate() 메서드를 찾습니다.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}7.메서드 끝에 findViewById 문을 추가합니다.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mShowCount = (TextView) findViewById(R.id.show_count);
}보기는 문자열과 마찬가지로 ID를 가질 수 있는 리소스입니다. FindViewById 호출은 보기의 ID를 매개 변수로 사용하고 보기를 반환합니다. 메소드는 보기를 반환하므로 이 경우(텍스트 보기) 결과를 예상하는 보기 유형에 캐스팅해야 합니다.
8.이제 mShowCount the TextView에 할당되었으므로 변수를 사용하여 TextView의 텍스트를 mCount 변수의 값으로 설정할 수 있습니다. countUp() 메서드에 다음을 추가합니다.
if (mShowCount != null)
mShowCount.setText(Integer.toString(mCount));
The entire countUp() method now looks like this:
public void countUp(View view) {
++mCount;
if (mShowCount != null)
mShowCount.setText(Integer.toString(mCount));
}9.Run the app to verify that the count increases when you tap the Count button.
