Post on 13-Dec-2015
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
TextView TextView 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"/>
<Buttonandroid:id="@+id/btnpage2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Page 2"/>
C04_multipage.xml
<Buttonandroid:id="@+id/btnpage3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Page 3"/>
</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" />
<TextView android:text="92" android:textSize="30sp" android:padding="10dip" />
<TextView android:text="76" android:textSize="30sp" android:padding="10dip" />
</TableRow></TableLayout></FrameLayout></LinearLayout>
4.3.1. 레이아웃 중첩 –예제 2
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);
findViewById(R.id.btnpage2).setOnClickListener(mClickListener);
findViewById(R.id.btnpage3).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;
} } };}
4.3.1. 레이아웃 중첩 –예제 2
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>
4.3.1. 레이아웃 중첩 –예제 2
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);}
}
4.3.1. 레이아웃 중첩 –예제 2
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);//*/
}}
4.3.4. 레이아웃 전개
16
4.3.4. 레이아웃 전개
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);//*/
4.3.4. 레이아웃 전개
C04_inflation3.xml
/* 컨텍스트로부터 전개자 구하기LayoutInflater inflater = Lay-
outInflater.from(this);LinearLayout linear = (Linear-
Layout)inflater.inflate(R.layout.c04_inflation, null);
setContentView(linear);//*/
/* View 의 정적 메소드 사용하여 전개하기
LinearLayout linear = (Linear-Layout)View.inflate(this, R.lay-out.c04_inflation, null);
setContentView(linear);//*/
//* 가장 짧은 전개 코드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" />
4.3.4. 레이아웃 전개
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);
}}