4-3. 레이아웃 관리 천안천일고등학교 류빈 . 학습목표 학습내용 2 1. 리니어...

4-3. 레이아웃 관리천안천일고등학교 류빈

www.skyone.hs.kr

Contents

학습목표

학습내용

2

1. 리니어 이외의 기타 레이아웃을 배치하는 방법을 익힌다 .

2. 레이아웃을 관리하는 고급 기법에 대해 이해한다 .

1. 렐러티브 레이아웃2. Absolute 레이아웃3. Frame 레이아웃4. Table 레이아웃5. 레이아웃 관리

4.3.1. 레이아웃 중첩

3

• 레이아웃은 뷰의 컨테이너이므로 View 로부터 파생된 모든 객체를 레이아웃 안에 놓을 수 있으며 , 레이아웃 자체도 View 의 파생 클래스이므로 레이아웃끼리 중첩시킬 수 있다 .

레이아웃 중첩

TextView

TextView TextView TextView



수직 리니어

테이블

테이블 로우

수평 리니어

• 레이아웃 중첩 예제 – NestLayout① 제일 바깥에 LinearLayout, 전체는 수직으로 뷰가 배열된다 .② 수직 LinearLayout 안에 TextView, Table, 수평 LinearLayout 이 일차 차일드로

배치된다 .③ Table 은 다시 2 행 3 열의 셀로 분할되고 , 각 셀에는 텍스트 뷰가 들어있다 .④ 수평 LinearLayout 안에는 세 개의 TextView 가 배치되어 있다 .

4

C04_nestlayout.xml

<?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">

<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" android:background="#808080"> <TableRow> <TextView android:text=" 국어 "

android:padding="10dip" /> <TextView android:text=" 영어 "

android:padding="10dip" /> <TextView android:text=" 수학 "

android:padding="10dip" /> </TableRow> <TableRow> <TextView android:text="88" android:padding="10dip"

/> <TextView android:text="92" android:padding="10dip"

/> <TextView android:text="76" android:padding="10dip"

/> </TableRow></TableLayout>

C04_nestlayout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content">

<TextView android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1" android:text=" 사자 "/><TextView android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1" android:text=" 호랑이 "/><TextView android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1" android:text=" 코끼리 "/>

</LinearLayout></LinearLayout>

4.3.1. 레이아웃 중첩 – 예제 1

5

C04_multipage.xml

<?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"android:background="#ffffff">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal"android:layout_width="fill_parent"android:layout_height="wrap_content">

<Buttonandroid:id="@+id/btnpage1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Page 1"/>


C04_multipage.xml


</LinearLayout><FrameLayout

android:layout_width="fill_parent"android:layout_height="fill_parent">

<LinearLayoutandroid:id="@+id/page1"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="#ffff00"><TextView

android:layout_width="fill_parent" android:layout_height="wrap_content"android:textColor="#000000" android:text=" 첫 번째 페이지 "/>

<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/pride"/>

</LinearLayout>

4.3.1. 레이아웃 중첩 –예제 2

6

C04_multipage.xml

<RelativeLayoutandroid:id="@+id/page2"android:layout_width="fill_parent"android:layout_height="wrap_content"android:visibility="invisible"android:background="#00ff00">

<EditTextandroid:layout_width="wrap_content" android:layout_height="wrap_content"android:layout_alignParentRight="true" android:text=" 두번째 페이지 "/>

<Buttonandroid:layout_width="wrap_content" android:layout_height="wrap_content"android:layout_alignParentBottom="true" android:text="Button"/>

</RelativeLayout>

C04_multipage.xml

<TableLayoutandroid:id="@+id/page3"android:layout_width="fill_parent"android:layout_height="fill_parent"android:visibility="invisible"android:background="#0000ff"><TableRow>

<TextView android:text=" 국어 " android:textSize="30sp" android:padding="10dip" />

<TextView android:text=" 영어 " android:textSize="30sp" android:padding="10dip" />

<TextView android:text=" 수학 " android:textSize="30sp" android:padding="10dip" />

</TableRow><TableRow>

<TextView android:text="88" android:textSize="30sp" android:padding="10dip" />



</TableRow></TableLayout></FrameLayout></LinearLayout>


7

C04_multipage.java

public class C04_MultiPage extends Activity {View mPage1, mPage2, mPage3;

public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.c04_multipage);

mPage1 = findViewById(R.id.page1);mPage2 = findViewById(R.id.page2);mPage3 = findViewById(R.id.page3);

findViewById(R.id.btnpage1).setOnClickListener(mClickListener);



}

C04_multipage.java

Button.OnClickListener mClickListener = new But-ton.OnClickListener() {

public void onClick(View v) {mPage1.setVisibility(View.INVISIBLE);mPage2.setVisibility(View.INVISIBLE);mPage3.setVisibility(View.INVISIBLE);

switch (v.getId()) {case R.id.btnpage1:

mPage1.setVisibility(View.VISIBLE);break;

case R.id.btnpage2:mPage2.setVisibility(View.VISIBLE);break;

case R.id.btnpage3:mPage3.setVisibility(View.VISIBLE);break;

} } };}


8

4.3.2. 레이아웃 대체

• 레이아웃끼리는 중첩도 가능한 관계이지만 상호 대체 가능한 관계도 성립한다 .• 앞에 만드 테이블 레이아웃 예제를 리니어로 구현해보자

C04_lineartable.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.an-droid.com/apk/res/android"

android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">

<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content">

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" 국어 " android:textSize="30sp" an-droid:padding="10dip" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" 영어 " android:textSize="30sp" an-droid:padding="10dip" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" 수학 " android:textSize="30sp" an-droid:padding="10dip" />

</LinearLayout>

C04_lineartable.xml

<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content">

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="88" android:textSize="30sp" an-droid:padding="10dip" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="92" android:textSize="30sp" an-droid:padding="10dip" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="76" android:textSize="30sp" an-droid:padding="10dip" />

</LinearLayout></LinearLayout>

각 텍스트 뷰마다 폭과 높이를 일일이 지정해야 한다는 면에서 번거롭다 .

9

4.3.2. 레이아웃 대체

• 왼쪽에 이미지 뷰를 놓고 오른쪽의 아래 위로 텍스트 뷰 두개를 배치했다 . 수평 리니어와

수직 리니어를 중첩 배치할 수도 있고 렐러티브 하나로 배치할 수도 있다 .

• 이 경우는 미세한 면에서 약간씩 차이가 있지만 렐러티브는 중첩없이 하나의

레이아웃만으로 배치해 내므로 속도에 유리하다 .

• 실행 중 차일드가 숨겨질 때 남은 차일드의 정렬이 조정되지 않는점이 리니어보다 불리 .

• 리니어는 겹침을 지원하지 않아 한 차일드가 커지면 아래쪽 차일드가 밀려난다 .

Upper TextViewLower TextView-descrip-tion

10

4.3.3. 실행 중에 속성 변경

• 대부분의 속성은 실행 중 변경 가능하도록 메서드를 제공한다 .• 속성값을 변경하는 메서드의 이름은 속성 이름 앞에 set 이 붙고 속성의 첫 글자는

대문자로 시작하며 , 인수로 전달할 값은 수평일 때 0, 수직일 때 1 이다 .• LinearLayout 클래스

public void LinearLayout.setOrientation(int orientation)

실행 중 속성 변경

gravity 변경 메서드

public void TextView.setGravity(int gravity)

TextView 속성 관련 메서드

void setText(CharSequence text)

void setTextColor(int color)

void setTextSize(float size)

11

C04_codelayout.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/mylinear" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" ><Button android:id="@+id/mybutton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" 버튼 " /><TextView android:id="@+id/mytext" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" 문자열 " /><EditText android:id="@+id/myedit" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" 에디트 " /></LinearLayout>


C04_codelayout.java

public class MainActivity extends Activity {

public void onCreate(Bundle savedInstanceS-tate) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}}

12

C04_codelayout.xml

public class C04_CodeLayout2 extends Activity {

public void onCreate(Bundle savedIn-stanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.c04_codelayout);

LinearLayout MyLinear=(LinearLayout)findViewById(R.id.mylinear);

MyLinear.setOrientation(LinearLayout.HORIZONTAL);

Button MyBtn = (Button)findViewById(R.id.mybutton);

MyBtn.setTextSize(40);

EditText MyEdit = (EditText)findViewById(R.id.myedit);

MyEdit.setBackgroundColor(0xff00ff00);}

}


13

4.3.3. 실행 중에 속성 변경

메서드를 호출하기 전에 속성 변경의 대상이 되는 뷰를 찾는다

이 메서드는 액티비티와 뷰에 정의되어 거의 모든 위치에서 호출이 가능하다 .

호출 객체에 따라 달리 사용되며 , 액티비티에서 호출 시 전체 레이아웃에서 검색 ,

특정 뷰에서 검색 시 뷰의 차일드 중 하나를 검색한다 .

View Activity.findViewById (int id)

View View.findViewById (int id)

ID 로부터 (ById) 대응되는 뷰 객체 (View) 를 찾는다 (find).

id 인수로 검색 대상 뷰에 지정해 놓은 ID 를 전달한다 .

실행 중 속성 변경

14

4.3.4. 레이아웃 전개

• XML 문서에 있는 레이아웃은 aapt 툴에 의해 이진 형태로 컴파일되어 실행 파일에

내장된다

레이아웃 전개

• XML 문서에 정의된 레이아웃과 속성을 읽어 실제 뷰 객체를 생성하는 동작

• setContentView : XML 문서의 리소스 ID 를 전달받아 객체를 생성하여 액티비티를

채움

• 사용자가 직접 전개할 수 있으며 , 안드로이드는 전개를 위해 시스템 수준에서

전개자를 따로 제공한다 .

View inflate (int resource, ViewGroup root)

• LayoutInflater 클래스의 정적 메서드로 전개자를 구할 수 있다 . 컨텍스트를 인수로

전달하여 전개자를 구하고 , 이 전개자의 inflate 메서드를 호출한다 .

static LayoutInflater LayouotInflater.from (Context context)

• View 의 정적 메서드를 이용하여 전개할 수 있다 .

static View inflate (Context context, int resource, ViewGroup root)

전개 (Inflation)

15

C04_inflation.xml

<?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" android:background="#cccccc" ><TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:textColor="#ff0000" android:textSize="20px" android:text="TextView" /></LinearLayout>

C04_inflation.java

public class C04_Inflation extends Activity {public void onCreate(Bundle savedIn-

stanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.c04_inflation);

}}

C04_inflation2.java

public class C04_Inflation2 extends Activity {public void onCreate(Bundle savedIn-

stanceState) {super.onCreate(savedInstanceState);

LinearLayout linear = new LinearLayout(this);

linear.setOrientation(LinearLayout.VERTICAL);linear.setBackgroundColor(Color.LTGRAY);

TextView text = new TextView(this);text.setText("TextView");text.setGravity(Gravity.CENTER);text.setTextColor(Color.RED);text.setTextSize(20);

linear.addView(text);setContentView(linear);/* 파라미터 전달LinearLayout.LayoutParams paramlinear

= new LinearLayout.LayoutParams(

LinearLayout.LayoutParams.FILL_PARENT,

LinearLayout.LayoutParams.FILL_PARENT);setContentView(linear,paramlinear);//*/

}}


16


void addView(View child)void addView(view child, int index)void addView(View child, ViewGroup.LayoutParams params)

public void setContentView (int layoutResID)public void setContentView (View view [, ViewGroup.LayoutParams params])

void setContentView (int layoutResID){View v = layoutResID 전개 ;setContentView(v);

}

View inflate (int resource, ViewGroup root)

static LayoutInflater LayoutInflater.from (Context context)static View inflate (Context context, int resource, ViewGroup root)

LinearLayout linear = (LinearLayout)View.inflate(this, R.layout.c04_inflateion, null)setContentView(linear);

setContentView(View.inflate(this, R.layout.c04_inflation, null));

전개 (Inflation)

17

C04_inflation3.xml

public class C04_Inflation3 extends Activity {

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

/* XML 전개를 직접 하기LayoutInflater inflater = (Lay-

outInflater)getSystemService(

Context.LAYOUT_INFLATER_SERVICE);

LinearLayout linear = (Linear-Layout)inflater.inflate(R.layout.c04_inflation, null);

setContentView(linear);//*/


C04_inflation3.xml

/* 컨텍스트로부터 전개자 구하기LayoutInflater inflater = Lay-

outInflater.from(this);LinearLayout linear = (Linear-

Layout)inflater.inflate(R.layout.c04_inflation, null);


/* View 의 정적 메소드 사용하여 전개하기

LinearLayout linear = (Linear-Layout)View.inflate(this, R.lay-out.c04_inflation, null);


//* 가장 짧은 전개 코드setContentView(View.inflate(this,

R.layout.c04_inflation, null));//*/

}}

18

C04_mytext.xml

<?xml version="1.0" encoding="utf-8"?><TextView xmlns:android="http://schemas.android.com/apk/res/an-droid" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:textColor="#ff0000" android:textSize="20px" android:text="TextView" />


C04_inflation3.xml

public class C04_Inflation4 extends Activity {

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

LinearLayout linear = new Lin-

earLayout(this);

linear.setOrientation(LinearLayout.VERTICAL);

linear.setBackgroundColor(Color.LTGRAY);

TextView text = (TextView)View.inflate(this, R.lay-out.c04_mytext, null);

linear.addView(text); setContentView(linear);}

}

19

4.3.6. 레이아웃 파라미터 변경

• ViewGroup.LayoutParams getLayoutParams ()• void setLayoutParams (ViewGroup.LayoutParams params)

뷰의 속성 변경

C04_setparameter.xml

<?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">

<Buttonandroid:id="@+id/btnleft" android:layout_width="0px" android:layout_weight="1" android:layout_height="wrap_content" android:text="Left"/>

<Buttonandroid:id="@+id/btnright" android:layout_width="0px" android:layout_weight="1" android:layout_height="wrap_content" android:text="Right"/>

</LinearLayout>

20

4.3.6. 레이아웃 파라미터 변경

C04_setparameter.java

public class C04_SetParameter extends Activity {

Button mLeft;Button mRight;public void onCreate(Bundle savedInstanceS-

tate) {super.onCreate(savedInstanceState);

setContentView(R.layout.c04_setparameter);

mLeft = (Button)findViewById(R.id.btnleft); mRight =

(Button)findViewById(R.id.btnright);

mLeft.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {setParam(3, 1);

}});

mRight.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {setParam(1, 3);

}});

}

C04_setparameter.java

void setParam(int left, int right) {LinearLayout.LayoutParams lparam =

(LinearLayout.LayoutParams)mLeft.getLayoutParams();

lparam.weight = left;mLeft.setLayoutParams(lparam);

LinearLayout.LayoutParams rparam =

(LinearLayout.LayoutParams)mRight.getLayoutParams();

rparam.weight = right;mRight.setLayoutParams(rparam);

}}

4-3. 레이아웃 관리 천안천일고등학교 류빈 . 학습목표 학습내용 2 1. 리니어...

Documents

Transcript of 4-3. 레이아웃 관리 천안천일고등학교 류빈 . 학습목표 학습내용 2 1. 리니어...