Android - LinearLayout

광고 한번만 클릭 부탁드립니다^^

포스팅을 보시는 분들을 위해 노력 하는 블로거를 위하여! 부탁드립니다. 재미 삼아 포스팅을 정리하지만, 광고를 달아보았습니다. 얼마나 열심히 할 수 있을지...의문이지만요^^

Subject : LinearLayout

최종 수정일 : 2011.02.18

결과를 미리 봅시다.

최종 실험 결과 상태 입니다.

현재 그림에서의 최종 Layout 상태를 설명드리겠습니다.

1. LinearLayout01
   - 현재 화면의 전체를 감싸고 있는 Layout를 만든다.
2. LinearLayout02
   - (Red, Green, Blug, Gray) 의 TextView 가 들어가는 Layout 를 만든다.
3. LinearLayout03
   - TextView05, TextView06 이 들어가는 Layout 를 만든다.
4. LinearLayout04
   - 빈공간의 여백으로 놓아두는 Layout를 만든다.


따라 해볼까요? ( 더보기 클릭!!)

uixml.zip

1. 프로젝트를 생성한다.
2. UIxml(Proejct명)/res/layout/main.xml 을 더블클릭하여 연다.

(글자가 깨져있으니, 클릭해서 크게 확대해서 보시길 바랍니다.)

그리고, Visual basic 또는 C#  을 programming 을 해보신 분이라면 UI 가 편하지만(?)
소스를 수정해서 결과물을 만들어 보도록 하겠습니다.

[Graphical Layout] , [main.xml] 이 있습니다. 그중에 소스를 수정하시려면 [main.xml]탭을 선택하여 주시기 바랍니다.

전체 Code 입니다. 먼저 미리보시고 하나하나 다시 설명을 하도록 하겠습니다.

[#M_더보기|접기|

---

LinearLayout (all)

---

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"           
    >
    

---

LinearLayout (01)

---

 <LinearLayout
     android:layout_height="fill_parent"
     android:layout_width="fill_parent"
     android:id="@+id/linearLayout1"
     android:layout_weight="1"
     >
    
     <TextView
      android:id="@+id/TextView01"
      android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:layout_weight="1"
      android:text="Red"
      android:gravity="center_horizontal"
      android:background="#FF0000"
      android:textColor="#FFFFFF"
      android:textStyle="bold"     
      >
     </TextView>
    
     <TextView
      android:id="@+id/TextView02"
      android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:layout_weight="1"
      android:text="Green"
      android:gravity="center_horizontal"
      android:background="#00FF00"
      android:textColor="#FFFFFF"
      android:textStyle="bold"     
      >
     </TextView>
    
      <TextView
      android:id="@+id/TextView03"
      android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:layout_weight="1"
      android:text="Blue"
      android:gravity="center_horizontal"
      android:background="#0000FF"
      android:textColor="#FFFFFF"
      android:textStyle="bold"     
      >
     </TextView>
    
      <TextView
      android:id="@+id/TextView04"
      android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:layout_weight="1"
      android:text="Gray"
      android:gravity="center_horizontal"
      android:background="#E0E0E0"
      android:textColor="#000000"
      android:textStyle="bold"     
      >
     </TextView>
    
 </LinearLayout>
 

---

LinearLayout (02)

---

 <LinearLayout
  android:layout_height="fill_parent"
     android:layout_width="fill_parent"
     android:id="@+id/linearLayout2"
     android:layout_weight="1"
     android:orientation="vertical"
     >
    
     <TextView
      android:id="@+id/TextView05"      
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:typeface="normal"
      android:text="TextView 05 in LinearLayout 02"
      android:gravity="center_horizontal"
      android:background="#FFFFFF"
      android:textColor="#0000FF"
      android:textStyle="bold"
      android:textSize="12pt"
      >
     </TextView>
    
     <TextView
      android:id="@+id/TextView06"      
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:typeface="normal"
      android:text="TextView 06 in LinearLayout 02"
      android:gravity="center_horizontal"
      android:background="#FFFFFF"
      android:textColor="#000000"
      android:textStyle="bold"
      android:textSize="7pt"
      >
     </TextView>
    
  </LinearLayout>
  

---

LinearLayout (03)

---

  <LinearLayout
  android:layout_height="fill_parent"
     android:layout_width="fill_parent"
     android:id="@+id/linearLayout3"
     android:layout_weight="1"
     android:orientation="vertical"
     >
    
    
   </LinearLayout>
</LinearLayout>

전체 코드를 보고 오셨죠??
설명은 LinearLayout 의 순서대로 설명을 하겠습니다.

1. LinearLayout01

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"           
    >

</LinearLayout>
소스는 위와 같습니다.
그리고 굵은 글씨로 되어 있는 <LinearLayout> </LinearLayout> 사이에 옵션을 설정하도록 합니다.
그럼 옵션을 보도록 할까요?

layout_width,layout_height 는 LinearLayout 의 (width, Height)의 길이를 설정 할수 있습니다.
선택할수 있는 옵션 : fill_parent, wrap_content
- fill_parent : 최대의 width, height 로 칸을 맞추게 됩니다. 
- wrap_content : 현재 Layout 에 들어 있는 Contents(텍스트,글자,그림)들에 크기를 맞춥니다. 

 
orientation : 정렬 방식
선택 옵션 : horizontal, vertical

가장 큰 Layout 은 위의 내용과 같이 간단합니다.
이제,  Layout 을 하나씩 생성해서 결과물에 맞춰 만들어 보도록 할까요!?

이때 중요한점은,,, 위의
 <LinearLayout> </LinearLayout>  사이에서 Coding을 계속 해주셔야 합니다.

2. LinearLayout02

첫번째 LinearLayout 의 결과물은 위의 그림과 같습니다.
(Red, Green, Blue, Gray) 각각 전부 너비가 같네요!?
그리고 각각의 TextView 의 Background 의 색상이 틀리구요.

소스를 보면서 설명을 하겠습니다.
(주석을 같이 복사를 하시면 되지 않으니 참고바랍니다.)

<LinearLayout
     android:layout_height="fill_parent"    
     android:layout_width="fill_parent"
     android:id="@+id/linearLayout1" //  #1 linearLayout1번을 등록하는 것(아래 다시 설명)
     android:layout_weight="1"           //  #2 weight = 1, 레이아웃이 차지하는 크기 비율 지정
     android:orientation="vertical">
    
     <TextView
      android:id="@+id/TextView01"
      android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:layout_weight="1"
      android:text="Red"                                         // # 텍스트 글자 지정
      android:gravity="center_horizontal"                  // # 텍스트 정렬 지정
      android:background="#FF0000"                       // # 텍스트 배경 색상 지정("#RRGGBB")
      android:textColor="#FFFFFF"                          // # 텍스트 글자 색상 지정("#RRGGBB")
      android:textStyle="bold"                                 // # 텍스트 글꼴 지정
      >
     </TextView>
    
     <TextView
      android:id="@+id/TextView02"
      android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:layout_weight="1"
      android:text="Green"
      android:gravity="center_horizontal"
      android:background="#00FF00"
      android:textColor="#FFFFFF"
      android:textStyle="bold"     
      >
     </TextView>
    
      <TextView
      android:id="@+id/TextView03"
      android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:layout_weight="1"
      android:text="Blue"
      android:gravity="center_horizontal"
      android:background="#0000FF"
      android:textColor="#FFFFFF"
      android:textStyle="bold"     
      >
     </TextView>
    
      <TextView
      android:id="@+id/TextView04"
      android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:layout_weight="1"
      android:text="Gray"
      android:gravity="center_horizontal"
      android:background="#E0E0E0"
      android:textColor="#000000"
      android:textStyle="bold"     
      >
     </TextView>
    
 </LinearLayout>

여기서 중요한 것 2개만 알아볼까요!?

#1 @[+]id/ID

'@'  기호는 id를 리소스(구체적으로 R.java)에 정의하거나 참조한다는 뜻, 무조건 붙여야 하는 기호!
'+'   기호는 ID 를 새로 정의한다는 뜻,(정의 할때만 붙이고 참조할 때는 붙이지 않는다)
'id'  기호는 예약어이므로 그대로 사용함!
'ID'        에 원하는 이름을 작성함(공유한 명칭이므루 중보되어서는 안된다)

example>
   android:id="@+id/ButtonCalc"

#2 weight = 1, 레이아웃이 차지하는 크기 비율 지정
(책 안드로이드 프로그래밍 정복[1]에는 : 차일드 영역 분할 이라는 제목이네요 ^^)
 

예제는 따라 했는데 =ㅅ=/ 포스팅을 하기위해서 찾아보니 안보이네요 ㅜ_ㅜ...
그래서 포스팅을 잠시 미루도록 할께요^_^;;;;

혹시나 싶어 간단히 설명을 하고 가도록 할께요...^^
  by 퓨림노 

설정을 할 때
android:layout_weight = "1"  이런씩으로 수치를 주게 됩니다.

이때, 하나의 layout 안에 있는 위젯(TextView, EditText 등) 이 각각 얼마만큼의 영역을 차지하는지에 대한 비율이라고 생각 하시면 됩니다.  그림으로 설명하고 싶은데...^^;;
그래서! 각각의 위젯에 수치를 다르게 조절해서 입력해 보시기 바랍니다. 두둥~!?
한번 설정하시면, 아시리라 믿습니다. ^^( 저의 블로그를 들어오시는 분들은 다들 천재시더라구요!?)

다시 나중에 설명을 덪 붙인다고 약속! 드리고, 살포시 넘어가도록 하겠습니다.
뒤쪽에 잊어먹기전에 해야 할 NDK 정리가 남아있어서요^^;;

3. LinearLayout03
4. LinearLayout04
  이번에는 layout3,4 번을 동시에 설명을 하고 이번 강좌를 마치도록 하겠습니다.^^

결과 화면은 위와 ...같이 Layout 2개가 보이죠?( Neo 만 보이란 법은 없죠...(죄송...))
무튼..첫번째 layout 은 안에 세로로 정렬이 되고, TextView 가 2개가 들어가 있네요...
그리고 마지막 Layout 은 아무것도 없는 검은색 배경입니다.

첫 소스를 이제 볼까요? ( 더보기 클릭!!)

---

LinearLayout (02)

---

 <LinearLayout
  android:layout_height="fill_parent"
     android:layout_width="fill_parent"
     android:id="@+id/linearLayout2"
     android:layout_weight="1"
     android:orientation="vertical"  // 세로로 정렬 입니다.
     >
    
     <TextView                             // 첫번째 TextView
      android:id="@+id/TextView05"      
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:typeface="normal"
      android:text="TextView 05 in LinearLayout 02"
      android:gravity="center_horizontal"
      android:background="#FFFFFF"
      android:textColor="#0000FF"
      android:textStyle="bold"
      android:textSize="12pt"
      >
     </TextView>
    
     <TextView                            // 첫번째 TextView
      android:id="@+id/TextView06"      
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:typeface="normal"
      android:text="TextView 06 in LinearLayout 02"
      android:gravity="center_horizontal"
      android:background="#FFFFFF"
      android:textColor="#000000"
      android:textStyle="bold"
      android:textSize="7pt"
      >
     </TextView>
    
  </LinearLayout>
  

---

LinearLayout (03)

---

// 마지막 빈칸 레이어 입니다. 

  <LinearLayout
  android:layout_height="fill_parent"
     android:layout_width="fill_parent"
     android:id="@+id/linearLayout3"
     android:layout_weight="1"    // layout_weight 의 속성이 있어야,,빈칸이 보이겠죠?
     android:orientation="vertical"
     >
   </LinearLayout>
</LinearLayout>

아무래도 위의 소스에서 설명이 더 필요한게 있을까 모르겠네요 ㅎ
먼가 질문이 있으시다면, 댓글로...! 제가 오히려 질문할지도 모르니, 메일 주소 남겨주시구요!

안녕하세요~^^ 안드로이드 특강을 들으면서...하루전날 한빛책 읽구 이것저것 하다보니,,
수업중에...프로그램 설치하구 이러다보니, 아이팟으로 뭔가 만지작 거리는것도 시간이 아깝고,,,
그래서 그냥 포스팅을 해볼까 했는데 ... 금방 안되고 길어져 버리네요....

무튼,,,안드로이드 다른 강좌도 많은데..구지 하나하나 다 정리하려고는 하지 않습니다.
제가 시도하는 것들!? 그리고 필요한것들 메모랄까? 메모를 보기 편하게 블로깅을 해두자..라고?
책 읽는건 좋아하는데...읽기 싫다면,,, 싫어하는건가...?

아무튼요!

하나하나 포스팅 하는 것 지켜봐주시기 바랍니다 ~!

_M#]