2. 뷰 아키텍처
액티비티 화면을 구성하기 위해 다양한 뷰 클래스들을 이용한다. 안드로이드 라이브러리에는 Button, TextView, EditText, ImageView, Spinner, ListView 등 많은 뷰 클래스가 준비되어 있고 안드로이드 버전이 변경되면서 계속 추가되고 있다.
이번 글에서는 안드로이드 뷰 클래스들이 어떤 구조로 설계되어 있는지에 대해 간단하게 다뤄보고 다음 글부터는 실습 위주의 간단한 설명으로 벨로그를 작성하려 한다.
뷰의 계층구조
뷰의 기본 구조는 뷰 객체 간의 계층으로 이루어져 있다.
위 그림은 안드로이드 뷰 클래스의 기본 골격을 클래스 다이어그램(Class Diagram)으로 나타낸 모습이다.
각 클래스에 대한 자세한 설명이다.
▪︎ View: 안드로이드 뷰 클래스의 최상위 클래스이다. 최상위 클래스 명이 View여서 안드로이드에서는 Button같은 UI 위젯 클래스를 뷰라고 부른다. 액티비티에 출력되는 클래스는 모두 이 View의 서브 클래스여야 한다.
▪︎ ViewGroup: 뷰의 서브 클래스여서 화면에 출력되지만, 뷰그룹 자체만의 UI는 가지지 않아서 화면에 아무것도 나오지 않는다. 그렇다고 필요가 없는 것은 아니다. 뷰 그룹의 역할은 UI출력이 아니라 다른 뷰 여러 개를 뷰그룹에 포함(Add)하여 한꺼번에 제어하기 위한 목적으로, 일반적으로 컨테이너(Container) 기능을 담당한다. 실제 뷰그룹도 이용되지만, 뷰그룹의 서브 클래스들인 레이아웃 클래스들이 사용된다.
▪︎TextView: 특정 UI를 출력할 목적으로 제공되는 클래스 중 대표적이다.
위 사진은 TextView 같은 객체를 뷰그룹 객체에 포함하여 출력하는 구조를 잘 이해하기 위해 윈도우 탐색 창의 파일과 디렉터리의 계층구조로 나타낸 것이다.
앞에서 설명한 뷰의 계층구조와 동일한 구조임을 알 수 있다.
위 윈쪽 그림을 보면 파일 여러 개를 디렉터리에 포함하여 한꺼번에 제어하듯이, 안드로이드에서도 뷰 클래스의 객체들을 계층구조로 묶어서 사용한다.
결국, 'ViewGroup 1'을 화면에 출력하면 전체가 함께 출력된다.
뷰 계층구조 구현
▪︎ 레이아웃 XML로 계층구조 구현
뷰의 계층구조를 레이아웃 XML로 구현하려면 태그의 상하 관계를 이용하면 된다. 서브 태그로 등록한 뷰 객체가 상위 태그 객체에 포함된다고 생각하면 된다.
<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을 위와 같이 작성하면 LinearLayout(뷰그룹)에 Button(뷰)이 두 개 포함된다.
▪︎ 자바 코드로 계층구조 구현
자바 코드에서 직접 뷰릐 계층구조를 구현하려면 addView() 함수를 이용한다.
public class MainActivity3 extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main3);
LinearLayout linearLayout = new LinearLayout(this);
Button bt1 = new Button(this);
linearLayout.addView(bt1);
Button bt2 = new Button(this);
linearLayout.addView(bt2);
}
}✏️ 다음 장에서는 기초 뷰를 활용한 실습을 위주로 작성할 것이다.
오늘 목표치 벨로그 4개! 화이팅이다.
