안드로이드 스튜디오 기본 위젯(Widget)을 사용한 앱 만들기 (1)


이번 글에서는 기본 위젯(Widget)을 사용한 앱을 만들어 보겠습니다!


위젯 (Widget) 은 사용자와의 상호작용을 위한 인터페이스로 제공되는 뷰(View) 오브젝트를 말합니다.

다양한 기본 위젯(Widget)이 있지만 오늘은 TextView, EditText, Button, CheckBox를 사용해서 앱을 만들어보겠습니다.



먼저 프로젝트를 Empty Activity로 생성하고 res폴더 밑에 있는activity_main.xml파일에 가면 Hello World!로 써진 화면을 볼 수 있습니다.


왼쪽 밑에 있는 Text를 클릭하면 화면을 나타내고 있는 코드를 볼 수 있는데 

Layout을 나타내는 부분에 RelativeLayout 혹은 ConstraintLayout으로 적혀 있을텐데 이부분을 LinearLayout으로 변경합니다.

만약 ContrainLayout이였다면 TextView 안에 있는 app:layout_constraint~ 부분을 모두 지워줍니다.


그리고 android:orientation="vertical" 을 주면 위젯(Widget)이 위에서 아래로 추가되는 속성을 주는데 이것을 입력합니다.



Design 탭을 눌러서 다시 화면으로 돌아와서 왼쪽에 All, 혹은 Widgets를 클릭해서 나오는 Button을 클릭하고 아래와 같이 화면에 끌어옵니다!



총 5번을 반복하면 버튼 5개가 추가된 화면을 볼 수 있습니다.



Text탭을 눌러 다시 코드 화면으로 돌아오면 Button이 5개가 추가 된 코드를 볼 수 있습니다.


android:id="@+id/button"는 각 뷰(View)마다에서 구별할 수 있도록 id를 부여한다는 뜻입니다.

android:text=""""안에 글자를 입력하면 원하는 글자를 나타낼 수 있습니다.

android:layout_margin="" 를 통해 부모와 뷰(View) 4면의 간격을 동일하게 지정할 수 있으며

각 면에 개별적인 간격을 지정하고 싶으면 android:layout_marginTop="", android:layout_marginBottom="",

android:layout_marginLeft=""android:layout_marginRight="" 를 통해 지정할 수 있습니다.


저는 뷰가 딱 붙어있는게 마음에 들지 않아 android:layout_margin=""을 사용해서 약간의 간격을 주었습니다.


<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_margin="20dp"
android:layout_height="match_parent"
tools:context="examples.com.myapplication2.MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="나의 첫번째 App"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<Button
android:id="@+id/button"
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="나이계산기" />

<Button
android:id="@+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="온도변환" />

<Button
android:id="@+id/button4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="레스토랑 주문" />

<Button
android:id="@+id/button5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="계산기" />

</LinearLayout> 


5개의 Activity를 더 생성해서 MainActivity에서 버튼이 눌리면 해당하는 Activity로 이동하게 설정하였습니다.

여기서 Intent는 Activity간에 이동을 하기 위해서 사용하는 것입니다.

첫번째 인자로 현재 액티비티 정보를 주고 두번째 인자로 호출할 액티비티의 Class를 설정해줍니다.

그리고 startActivity(intent)를 해주면 두번째 인자로 넣은 액티비티가 호출됩니다.


package examples.com.myapplication2;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
Button b1, b2, b3, b4, b5;
Intent intent;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

init();

}

void init(){
b1 = (Button)findViewById(R.id.button);
b2 = (Button)findViewById(R.id.button2);
b3 = (Button)findViewById(R.id.button3);
b4 = (Button)findViewById(R.id.button4);
b5 = (Button)findViewById(R.id.button5);

b1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
intent = new Intent(MainActivity.this, Main2Activity.class);
startActivity(intent);
}
});

b2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
intent = new Intent(MainActivity.this, Main3Activity.class);
startActivity(intent);
}
});

b3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
intent = new Intent(MainActivity.this, Main4Activity.class);
startActivity(intent);
}
});

b4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
intent = new Intent(MainActivity.this, Main5Activity.class);
startActivity(intent);
}
});

b5.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
intent = new Intent(MainActivity.this, Main6Activity.class);
startActivity(intent);
}
});
}
}


실행화면입니다.

다음 글에서는 5개의 Activity를 작성해보겠습니다.




안드로이드 스튜디오 기본 위젯(Widget)을 사용한 앱 만들기 (2)


+ Recent posts