IT's a humanism: JAVA 코드 상에서 UI Layout 구현

보통 Android의 UI의 경우 XML파일을 이용해서 많이 사용한다.

하지만 종종 JAVA로 UI를 짜야할 경우가 있다.

예를 들어서, 추가시켜야 하는 Layout의 경우가 프로그램상에서 동적으로 변할 때는,

어떠한 로직에 의해서 UI가 동적으로 구성되어야 하고,

그러기 위해서는 XML이 아닌 JAVA로 UI를 구성해야 함이 맞다.

하지만 이것은 일반적인 경우가 아니니, JAVA로 UI를 짜려면 어떻게 해야 하는지 알아보도록 하자.

다른 경우들은 대부분 쉬우니,

가장 까다롭다고 할 수 있는 RelativeLayout을 살펴보도록 하자.

이번 예제에서는 LinearLayout안에 동적인 숫자의 RelativeLayout을 붙이는 예제를 보도록 한다.

RelativeLayout안에는 하나의 ImageView와 하나의 TextView를 넣도록 하겠다.

타이핑하는 수고를 덜기 위해서

실제로 내가 사용했던 코드의 일부분을 발췌하도록 하겠다.

특히 주목해야 하는 부분은 빨갛게 표시를 해두겠다.

extra = new Bundle();
intent = new Intent();

  ArrayList<UserItem> itemList = MonsterArcade.he.getUser().getInventory().getItemList();

  int i;

  LinearLayout itemLayout = (LinearLayout) this.findViewById(R.id.items);

// 기본 레이아웃은 xml파일을 사용하고, 동적으로 추가해야 하는 부분만 JAVA를 이용하여 구성하였다.

xml파일은 포스트 맨 마지막에 붙여두었다.

  itemLayout.setOrientation(LinearLayout.VERTICAL); //이건 딱 봐도 뭔지 알테니 패스

  for(i = 0; i < itemList.size(); i++){
   RelativeLayout item = new RelativeLayout(this); // 자, 이제 RelativeLayout을 붙여나가기 위해 하나 하나씩 만들기 시작한다.

   ImageView img = new ImageView(this);
   TextView des = new TextView(this);

   img.setId(itemList.get(i).getItem().getNumber());
   img.setImageResource(itemList.get(i).getItem().getPic());
   img.setOnClickListener(this);
   des.setText(itemList.get(i).getItem().getName() + "(" + itemList.get(i).getNumber() + ")\n" +
     itemList.get(i).getItem().getDescription());

   item.addView(img); //앞서 말했듯이, RelativeLayout에 ImageView와 TextView를 하나씩 붙였다.   item.addView(des);
RelativeLayout.LayoutParams item_img_param =

new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

// item_img_param은 아까 만들었던 ImageView에 적용시키기 위한 성질들을 포함하게 될 것이다.

// 이 부분이 굉장히 주목할 만 하다. LayoutParams의 등장이다. 처음에 RelativeLayout의 속성을 어떻게 붙여야 할 지 몰라

// 굉장히 당황스러웠는데 LayoutParams를 사용해서 붙인다는 사실을 삽질 끝에 알아냈다. 그리고 XML파일 상에서 사용하던

// android:layout_width = "wrap_content" 와 같은 것들도 모두 LayoutParams 안에 포함되어 있었다는 사실. item_img_param.addRule(RelativeLayout.ALIGN_PARENT_LEFT);

//이 사실 또한 흥미로웠다. addRule이라는 메소드를 이용해서 Layout만의 규칙들을 붙일 수 있는 것.

//XML파일상에서는 attribute로 추가시켰던 것들이 여기서는 addRule 속성을 통해서 추가가 가능하더라. item_img_param.setMargins(0, 0, 5, 0);

//XML파일상에서 android:rightMargin 으로 넣었던 마진을 어떻게 넣을지 몰라 당황하다가, 또 삽질 끝에 이렇게 쉬운 메소드가

//존재한다는 것을 알았다.
   RelativeLayout.LayoutParams item_des_param = new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
   item_des_param.addRule(RelativeLayout.RIGHT_OF, img.getId());

   img.setLayoutParams(item_img_param); //이런 식으로 아까 만들었던 param들을 View에 붙여주기만 하면 끝! 참 쉽죠?   des.setLayoutParams(item_des_param);

   itemLayout.addView(item); //완성된 View는 이렇게 전에 만들어 놓았던 기본 배경인 LinearLayout에 붙여주자. 끝!  }

[부록] item.xml 파일

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/item_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/items"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical">
</LinearLayout>
</ScrollView>

이런식으로 만든 Layout의 결과물은 어떤 모습을 하고 있을까?