#4 안드로이드 스튜디오로 안드로이드 앱 만들기 - UI 작성 방법 : 자바코드 VS 레이아웃 XML

#1 안드로이드 스튜디오로 안드로이드 앱 만들기 - 개발 환경 구축

#2 안드로이드 스튜디오로 안드로이드 앱 만들기 - 개발 디렉토리와 파일 구조

#3 안드로이드 스튜디오로 안드로이드 앱 만들기 - 액티비티(Activity) 뷰(View) 구조

안드로이드에서 UI를 작성하는 방법은 두가지가 있다. 액티비티의 자바코드로 작성하는 방법과 자바코드를 이용하지 않고 레이아웃 XML에서 작성하는 방법이다.

그럼 두 가지의 방법으로 다음처럼 간단하게 버튼 두개를 만들어 볼 것이다.

자바 코드로 화면 구성

화면을 자바코드로 구성하는 것은 레이아웃XML 파일을 만들지 않고 자바코드로 모든 뷰를 직접 생성하는 것이다. 이렇게 준비한 뷰를 setContentView() 함수의 매개변수로 넘겨서 화면을 출력한다.

새 이름으로 모듈을 하나 만든다. 안드로이드 스튜디오에서는 모듈이 앱의 단위이며, 새로운 모듈을 만든다는 것은 새로운 앱을 만드는 것과 같은 의미이다. 새 모듈을 추가하려면 [File - New - New Module]를 선택한다

[New Module] 창이 열리면 'Phone & Tablet Module'을 선택하고 Next 한다.

다음 화면에서 Applecation/Library name 부분에 "Ui_test"라고 입력하고 Next 한다.

다음 화면에서 액티비티 타입을 'Empty Activity'로 선택하고 Next 한다.

다음 화면은 액티비티와 액티비티를 위한 레이아웃XML 파일명을 입력하는 곳이다. 이 화면에서 중요한 부분이 Source Language 부분이다. java로 된 것을 꼭 확인하자. 코틀린으로 해도 되는데 코틀린이 뭔지 모른다면 일단 java로 하자.

그럼 이제 이렇게 만들어진 Ui_test 모듈에 자동으로 만들어진 MainActivity.java 파일을 작성한다.

소스를 작성하기에 앞서 안드로이드 스튜디오 자동 임포트(Auto Import) 설정을 해두면 정말 편하다.

public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 
        LinearLayout linear = new LinearLayout(this);
 
        Button bt = new Button(this);
 
        bt.setText("Button 1");
        linear.addView(bt);
 
        Button bt2 = new Button(this);
        bt2.setText("Button 2");
        linear.addView(bt2);
 
        setContentView(linear);
 
    }
}

위 코드는 LinearLayout에 버튼 2개를 생성해서 추가한 다음, 화면에 출력하는 코드이다.  버튼 2개가 LinearLayout에 포함되었으므로 setContentView() 함수에 linear만 전달해도 버튼 2개가 함께 출력 된다.

LinearLayout에 대해서는 곧 포스팅 예정이다. 여기서는 간단하게 버튼 2개를 포함하는 클래스 정도로 이해하고 넘어가자.

그럼 이제 <Run>을 눌러 실행 해보자.

이렇게 실행 될 것이다. 이처럼 앱의 화면 구성을 자바코드로 작성하면 레이아웃 XML 파일은 작성하지 않아도 된다.

레이아웃 XML로 화면 구성

자바코드에서 UI를 구성하지 않고 레이아웃 XML 파일을 이용해 UI를 구성하는 방법이다.

다음처럼 액티비티를 추가한다 [New - Activity - Empty Activity] 메뉴를 선택한다.

만들때 'Launcher Activity' 체크 박스를 선택하자. Launcher Activity를 선택하면 다른 액티비티와 상관없이 독립적으로 실행이 가능하여 테스트가 쉽다.

이제 액티비티를 만들때 함께 만들어진 res/activity_main2.xml 파일을 작성해보자. 위에서 자바코드로 작성했던 화면과 동일한 화면을 레이아웃 XML로 작성 해보자.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"/>
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"/>
 
 
</LinearLayout>
 

레이아웃 XML 파일에서 작성할 때는 뷰 클래스명을 XML의 태그명으로 작성하고, 필요한 속성을 XML attribute로 지정하여 작성하면 된다.

즉, 화면에 출력하려는 버튼의 클래스명이 Button이면 레이아웃 XML에서는 <Button/> 태그로 명시하면 된다.

현재 Ui_test 모듈에 액티비티가 하나 이상 있지만, 앞에서 신규 액티비티를 추가할 때 'Launcher Activity' 체크박스를 체크해 두었으므로 Main2Activity.java 파일에서 바로 실행하면 된다.

그럼 여기서 이런 질문이 생길 수 있다.

Q. UI를 구성할 때 자바코드로 구성하는 것과 레이아웃 XML을 이용해서 작성하는 것 중 어느 방법이 더 좋은가 ?

A. 이 부분은 개발자의 취향이다. 다만 UI를 자바코드로 작성하면, 코드가 너무 길어지는 문제가 생긴다 안그래도 코드에는 UI뿐만 아니라 각종 이벤트 및 로직이 들어가 있는데 UI때문에 코드가 더욱 길어지는걸 반기는 개발자는 없으리라 여긴다. 결국, UI를 레이아웃 XML로 작성하여 자바코드 부분을 그만큼 줄여주는게 효율성면에서 효과적이라고 생각한다.