Neo's Programming

코드상에서 실행해서 종종 레이아웃을 바꿔야 할 경우가 있다.

이럴 경우에는 java 파일 상에서 해결을 해 줘야 한다.

LinearLayout linear = (LinearLayout)findViewId(R.id.레이아웃아이디);
linear.setOrientation(LinearLayout.VERTICAL);

이런 식으로 바꿔주면 된다.

물론 레이아웃 뿐 아니라 다른 컴포넌트 역시 이런 식으로 바꿔주면 된다.

중첩 레이아웃은 레이아웃들의 조합을 말하고 있다.

레이아웃 자체가 View 클래스에서 파생 됨으로 이들은 얼마든 중첩되게 이용하여도 된다.

간단하게 살펴보면 아래 샘플 코드를 보면 된다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
     >
   
    <TextView
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="상위레이아웃"   
    />
    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
     >
  <TableRow>
     <TextView android:text ="1" />
     <TextView android:text ="2" />
     <TextView android:text ="3" />
 </TableRow>
 <TableRow>
     <TextView android:text ="3" />
     <TextView android:text ="2" />
     <TextView android:text ="1" />
 </TableRow>               
    </TableLayout>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
     >
 <TextView
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="하위레이아웃"
 />
 </LinearLayout>
</LinearLayout>

여기에서 살펴보면 먼저 라이너 레이아웃이 먼저 붙고 그 아래 테이블 레이아웃 그리고 마지막으로 다시 라이너 레이아웃이 붙는다. 실행해보면 특성에 맞게 볼 수가 있다.

그 다음으로 페이지 전환 형식으로 구성해보면 다음과 같다

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
     >
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
     >
     <Button
      android:id="@+id/btn1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="1번"   
     />
     <Button
      android:id="@+id/btn2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="2번"   
     />
     <Button
      android:id="@+id/btn3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="3번"   
     />
    </LinearLayout>   
     <FrameLayout  xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:orientation="vertical"
      >
       <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:orientation="vertical"
          android:id="@+id/page1"
      >
    <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="1번 페이지"  
    />          
      </LinearLayout>
      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:visibility="invisible"
          android:id="@+id/page2"
         >
          <EditText
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:id="@+id/t_edit"
              android:text="2번 페이지"             
          />
          <Button
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignRight="@id/t_edit"
              android:text="버튼"
          />
      </RelativeLayout>
      <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:visibility="invisible"
          android:id="@+id/page3"
         >
          <TableRow> android:text ="1" </TableRow>
          <TableRow> android:text ="2" </TableRow>
          <TableRow> android:text ="3" </TableRow>
      </TableLayout>
     </FrameLayout>
</LinearLayout>

main.xml 내용은 다음과 같이 하고 java 파일은 아래와 같이 입력하고 동작을 시켜보면 버튼을 누를 때 마다 다른 화면 처럼 지정한 레이아웃들이 보일 것이다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
     >
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
     >
     <Button
      android:id="@+id/btn1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="1번"   
     />
     <Button
      android:id="@+id/btn2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="2번"   
     />
     <Button
      android:id="@+id/btn3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="3번"   
     />
    </LinearLayout>   
     <FrameLayout  xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:orientation="vertical"
      >
       <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:orientation="vertical"
          android:id="@+id/page1"
      >
    <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="1번 페이지"  
    />          
      </LinearLayout>
      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:visibility="invisible"
          android:id="@+id/page2"
         >
          <EditText
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:id="@+id/t_edit"
              android:text="2번 페이지"             
          />
          <Button
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignRight="@id/t_edit"
              android:text="버튼"
          />
      </RelativeLayout>
      <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:visibility="invisible"
          android:id="@+id/page3"
         >
          <TableRow>
           <TextView android:text ="1" />
           <TextView android:text ="2" />
          </TableRow>
          <TableRow>
              <TextView android:text ="2" />
           <TextView android:text ="1" />
          </TableRow>
      </TableLayout>
     </FrameLayout>
</LinearLayout>

테이블 레이아웃은 일종의 표를 생각하면 된다.

열과 행으로 이루어지는 형식이며 이 높이는 wrap_content에 귀속된다.

다음 예제를 실행해보면 java의 JTable 형태 처럼 나타나는 것을 확인 할 수 있다.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
     >
   
 <TableRow>
     <TextView android:text ="1" />
     <TextView android:text ="2" />
     <TextView android:text ="3" />
 </TableRow>
 <TableRow>
     <TextView android:text ="3" />
     <TextView android:text ="2" />
     <TextView android:text ="1" />
 </TableRow>
</TableLayout>

또한 부모 폭에 맞추게 할려면 shrinkColumns 이용하여 축소 하거나 stretchColumns 이용하여 확장 시킬 수 있다.

앱솔루트레이아웃.. 그냥 말 그대로 원하는 좌펴에 찍어주는 것이다. 좌표는 layout_x, layout_y 를 이용하여 픽셀 계산한다.

다음은 한번 보고 갈 예제이다.

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
     >
   
 <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/btn1"
     android:text="first"
     android:layout_x="50px"
     android:layout_y="50px"
 />
 <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:id="@+id/btn2"
  android:text="second"
  android:layout_x="150px"
     android:layout_y="150px"
 />
 <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/btn3"
     android:text="third"
     android:layout_x="250px"
     android:layout_y="250px"
 />
</AbsoluteLayout>

관계형 레이아웃이다. 모두 접두어에 layout_ 이 붙어 있고 다음이 그 관련된 설명이다

속성	설명
layout_above	~의 위에
layout_below	~의 아래에
layout_toLeftOf	~의 왼쪽에
layout_toRightOf	~의 오른쪽에
layout_alignLeft	~의 왼쪽 변을 맞춘다
layout_alignTop	~의 위쪽 변을 맞춘다
layout_alignRight	~의 오른쪽 변을 맞춘다
layout_alignBottom	~의 아래쪽 변을 맞춘다
layout_alignParentLeft	true 면 부모와 왼쪽 변 맞춘다
layout_alignParentTop	true 면 부모와 위쪽 변 맞춘다
layout_alignParentRight	true 면 부모와 오른쪽 변 맞춘다
layout_alignParentBottom	true 면 부모와 아래쪽 변 맞춘다
layout_alignBaseline	~와 베이스라인 맞춘다
layout_alignWithParantIfMissing	속성에 앵커가 발생하지 않을 경우 부모를 앵커로 인지한다
layout_aligncenterHorizontal	true 면 부모의 수평 중앙에
layout_aligncenterVertical	true 면 부모의 수직 중앙에
layout_aligncenterInParent	true 면 부모의 수평 중앙에

샘플은 다음과 같이 해서 확인해보면 알 수 있을 것이다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
     >    
 <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/btn1"
     android:text="first"
     android:layout_marginRight="15px"
 />
 <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:id="@+id/btn2"
  android:text="second"
  android:layout_toRightOf="@id/btn1"
 />
 <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/btn3"
     android:text="third"
     android:layout_below="@id/btn2"
 />
</RelativeLayout>

Java에서 FlowLayout과 동일한 형태이다. 단 좀 다른게 있다면, 안드로이드는 가로 세로 형태를 지정 할 수가 있다.

수정 방법은 maili.xml 에서

android:orientation="horizontal/vertical/wrap_content"  속성 중 하나 골라서 그 내용을 확인하면 된다.

아래에 다음과 같은 코드를 넣고 속성 값만 바꿔보자.

<Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/btn1"
     android:text="first"
     />
 <Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/btn2"
     android:text="second"
     />
 <Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/btn3"
     android:text="third"
     />

horizontal의 경우 나란히 들어 갈 것이고

vertical 경우 세로로 나란히, wrap_caontent 경우에는 각기 가진 폭만큼 표시가 될 것이다.

또한 gravity를 이용하여 정렬도 가능하다. 기본적으로 left, right, top, bottom, fill, center 이 있고 여기에 fill_ 또는 center_ 를 붙여서 적용해보면 그 결과를 확인 할 수 있을 것이다.

또한 | 를 이용하여 두개의 속성을 같이 쓸 수가 있다.

android:gravity="center_vertical|right" 형식으로 쓰면 된다.

또한 layout_gravity 라는 것이 있는데 이것은 뷰 자체를 부모의 어디에 둘 것인가를 결정한다.

또한 baselineAligned 는 디폴트로 true의 값을 가진다. 이것을 각기 다르게 값을 넣어서 한다면 텍스테 대한 베이스 정렬에 대해 확인 할 수가 있다.

android:layout_weight 속성 값은 부모 레이아웃에 대해 자식 레이아웃끼리 비율을 정해서 차지 할 수 있다.

위 코드에서 android:layout_weight="1/2/3"을 각 부분에 넣고 확인하면 20:60:20 의 비율로 각기 공간을 차지 하고 있음을 확인 가능하다. orientation 속성은 vertical로 하고 확인해야 한다.

또한 마진과 패딩이라는 것이 있다. 마진의 경우 뷰와 부모사이, 패딩의 경우 뷰와 내용물 사이의 간격을 조절한다.

즉, 안쪽과 바깥쪽 여백이라는 것이다.

android:layout_margin = '10px" 또는 android:layout_padding="10px" 를 적용시켜서 테스트 해 보면 결과를 알 수가 있다.

버튼은 알다시피 이벤트를 발생 시킬 수가 있다.

단순한 텍스트를 올려서 버튼만 나타나는 것이 아니라 EditText와 함께 이용 하는 것을 살펴보면 다음과 같다.

main.xml에 다음을 추가하고

<EditText
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/edit"
     android:text="input"
     />
 <Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/btn"
     android:text="click"
     />

java 파일에서

Button btn =(Button)findViewById(R.id.btn);
        btn.setOnClickListener(new Button.OnClickListener(){
         
   @Override
   public void onClick(View arg0) {
    // TODO Auto-generated method stub
    EditText edit = (EditText)findViewById(R.id.edit);
          String str = edit.getText().toString();
          Toast.makeText(Class명.this, str, Toast.LENGTH_SHORT).show();          
   }         
   });

다음을 추가한다. 단 여기서 자세히 보면 Toast라는 놈이 보인다. 이놈은 안드로이드에서 제공하는 것 같은데..

잘은 모르겠지만 View 형태로 나타난다. 실행해보면 Toast 위에 EditText에 입력한 글들이 찍혀서 나온다.

여기서 makeText인자를 보면 처음에 Class명.this 라고 한 놈이 보인다.

서적에서나 이런 곳에선 막연하게 따라하게 유도하는데 저곳은 반드시 Class명을 집어 넣도록 하자!!

이미지 뷰는 말 그대로 이미지를 표시한다. 안드로이드는 png 확장자를 가진 파일을 추천하며 아래는 속성에 대한 내용이다.

src - 출력 속성이다. 이것에 데이터를 넣지 않으면 나타나지 않고 리소스에 이미지 넣은 뒤 ID 지정하여 사용
adjustViewBounds - 가로 세로를 맞추기 위한 것을 지정. true/false 이용
cropToPadding - 위젯 내의 여백 맞추기 위해 이미지 조절
tint - 이미지 위에 색상 적용
scaleType - 이미지 크기와 다르게 출력 시 적용.

리소스에 이미지를 등록하고 나면 R.java를 열어보면 자동으로 ID가 지정되어 있다.

또한 프로젝트 구조에 보면 3가지 형태로 나와있는데 l,m,h 로 시작하는 것은 말 그대로 저해상,중해상,고해상을 말하는 것이다.

다음은 필자가 해 본 예제 코드이다.

<ImageView
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"    
     android:src="@drawable/calendar"    
     android:maxWidth="120px"
     android:maxHeight="120px"
     android:adjustViewBounds="true"
     android:tint="#4000ff00"   />

새삼 별 반 다를 것은 없다. 하지만 오타 내버리면.. 에뮬레이터에서 에러를 띄운다.
(사실.. VI라고 쳐놓고 버그 생겨서 뭐지 하고 한참을 고민했다;; ㅠ_ㅠ)

이곳에는 문자열을 정의 하는 곳이다.

strings.xml 파일을 열어보면 <string name="idvalue"> 식으로 시작 되는 것이 있다.

idvalue 이것이 바로 id 값이다. 쉽게 생각하면 변수 명이라고 생각을 하면 된다.

안드로이드 어플리케이션 상에서 문자열들은 이곳에 정의하고 이용을 한다.

테스트를 해 보자면 strings.xml 부분에

<string name="first">First</string>
 <string name="second">Second</string>
 <string name="third">Third</string>

추가를 하고

main.xml 부분에
<TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/first" />