Layout

Size: px

Start display at page:

Download "Layout"

달환 독고
6 years ago
Views:

1 Layout Bok, Jong Soon

2 Layout ViewGroup Is a special view Can contain other views (called children.) Is the base class for layouts and views containers. Also defines the ViewGroup.LayoutParams class Serves as the base class for layouts parameters.

3 Layout (Cont.)

4 Layout (Cont.) ViewGroup.LayoutParams android:layout_width android:layout_height Constant Value Description fill_parent -1 The view should be as big as its parent (minus padding). This constant is deprecated starting from API Level 8 and is replaced by match_parent. match_parent -1 wrap_content -2 The view should be as big as its parent (minus padding). Introduced in API Level 8. The view should be only big enough to enclose its content (plus padding).

5 Layout (Cont.) View 의계층구조 ViewGroup ViewGroup View View View View View

6 Layout (Cont.) Layout 종류 클래스 LinearLayout 개요 수평방향또는수직방향에자식뷰를배치. 자식뷰가화면에포함될수없는경우에는스크롤바가표시 AbsoluteLayout 픽셀단위로자식뷰의위치를절대좌표로지정 RelativeLayout 자식뷰간의상대관계나부모뷰간의관계로뷰를배치 FrameLayout TableLayout 왼쪽상단을기준으로뷰를배치하는가장기본적인레이아웃 테이블형식으로뷰를배치함. 보통내부에테이블행레이아웃을지정

7 Layout (Cont.) ViewGroup 의공통속성 Attribute android:layout_height Description Specifies the basic height of the view. android:layout_margin Specifies extra space on the left, top, right and bottom sides of this view. android:layout_marginbottom Specifies extra space on the bottom side of this view. android:layout_marginleft android:layout_marginright android:layout_margintop android:layout_width Specifies extra space on the left side of this view. Specifies extra space on the right side of this view. Specifies extra space on the top side of this view. Specifies the basic width of the view.

8 Layout (Cont.) Padding Is defined as space between the edges of the view and the view's content. A views size will include it's padding. If a background is provided, the padding will initially be set to that (0 if the drawable does not have padding). Explicitly setting a padding value will override the corresponding padding found in the background.

9 Layout (Cont.) Padding Attribute Value Description android:padding 0x010100d5 Sets the padding, in pixels, of all four edges. android:paddingbottom 0x010100d9 Sets the padding, in pixels, of the bottom edge. android:paddingleft 0x010100d6 Sets the padding, in pixels, of the left edge. android:paddingright 0x010100d8 Sets the padding, in pixels, of the right edge. android:paddingtop 0x010100d7 Sets the padding, in pixels, of the top edge.

10 LinearLayout Arranges its children in a single column or a single row. The direction of the row can be set by calling setorientation().

11 LinearLayout (Cont.) You can also specify gravity. Specifies the alignment of all the child elements by calling setgravity() Specify that specific children grow to fill up any remaining space in the layout by setting the weight member of LinearLayout.LayoutParams. The default orientation is horizontal.

12 LinearLayout (Cont.) android:orientation Should the layout be a column or a row? Use "horizontal" for a row, "vertical" for a column. The default is horizontal. Constant Value Description horizontal 0 Defines an horizontal widget. vertical 1 Defines a vertical widget.

13 LinearLayout (Cont.) android:weight Indicates how much of the extra space in the LinearLayout will be allocated to the view associated with these LinearLayout.LayoutParams. Specify 0 if the view should not be stretched. Otherwise the extra pixels will be pro-rated among all views whose weight is greater than 0.

14 LinearLayout (Cont.) android:gravity Standard gravity constant that a child can supply to its parent. Defines how to place the view, both its x- and y- axis, within its parent view group. Constant Value Description top 0x30 Push object to the top of its container, not changing its size. bottom 0x50 Push object to the bottom of its container, not changing its size. left 0x03 Push object to the left of its container, not changing its size. right 0x05 Push object to the right of its container, not changing its size.

15 LinearLayout (Cont.) android:gravity Constant Value Description center_vertical 0x10 Place object in the vertical center of its container, not changing its size. fill_vertical 0x70 Grow the vertical size of the object if needed so it completely fills its container. center_horizontal 0x01 Place object in the horizontal center of its container, not changing its size. fill_horizontal 0x07 Grow the horizontal size of the object if needed so it completely fills its container.

16 LinearLayout (Cont.) android:gravity Constant Value Description center 0x11 Place the object in the center of its container in both the vertical and horizontal axis, not changing its size. fill 0x77 Grow the horizontal and vertical size of the object if needed so it completely fills its container. start 0x Push object to the beginning of its container, not changing its size. end 0x Push object to the end of its container, not changing its size.

17 Lab1:LinearLayout

18 Lab2:LinearLayout

19 Lab3:LinearLayout

20 Lab4:LinearLayout 장용식 김관옥 성낙현공저, Step by Step 안드로이드앱개발 ( 서울 :INFINITY BOOKS, 2011), pp

21 Lab5:LinearLayout 장용식 김관옥 성낙현공저, Step by Step 안드로이드앱개발 ( 서울 :INFINITY BOOKS, 2011), pp

22 Lab6:LinearLayout 유동근 박정민공저, 200 개예제로배우는 Android API 핵심원리안드로이드 API 바이블 ( 서울 : 정보문화사, 2010), p.606.

23 FrameLayout Is designed to block out an area on the screen to display a single item. Should be used to hold a single child view. Child View 들을겹쳐서그리고자할때사용 탭형태로화면여러개를겹쳐놓고실행중에화면스위치가가능하다.

24 FrameLayout (Cont.) Can add multiple children. Can control their position by assigning gravity to each child, using the android:layout_gravity attribute. Child views are drawn in a stack, with the most recently added child on top. The size is the size of its largest child (plus padding), visible or not (if the FrameLayout's parent permits).

25 FrameLayout (Cont.) android:foreground Defines the drawable to draw over the content. This can be used as an overlay. Resource ID로설정 Child View 보다위에이미자가그려짐 속성값은 drawable-hdpi 폴더에있는이미지의 ID 값

26 FrameLayout (Cont.) android:foregroundgravity Defines the gravity to apply to the foreground drawable. The gravity defaults to fill. Must be one or more (separated by ' ') of the following constant values. Constant Value Description top 0x30 Push object to the top of its container, not changing its size. bottom 0x50 Push object to the bottom of its container, not changing its size. left 0x03 Push object to the left of its container, not changing its size. right 0x05 Push object to the right of its container, not changing its size.

FrameLayout (Cont.) android:foregroundgravity Constant Value Description center_vertical 0x10 Place object in the vertical center of its container, not changing its size.

27 FrameLayout (Cont.) android:foregroundgravity Constant Value Description center_vertical 0x10 Place object in the vertical center of its container, not changing its size. center_horizontal 0x01 Place object in the horizontal center of its container, not changing its size. fill_vertical 0x70 Grow the vertical size of the object if needed so it completely fills its container. fill_horizontal 0x07 Grow the horizontal size of the object if needed so it completely fills its container. center 0x11 Place the object in the center of its container in both the vertical and horizontal axis, not changing its size. fill 0x77 Grow the horizontal and vertical size of the object if needed so it completely fills its container.

28 Lab7:FrameLayout 손수국 조승호공저, 안드로이드프로그래밍의이해와실제 ( 경기 : 생능출판사, 2010), pp

29 AbsoluteLayout Lets you specify exact locations (x/y coordinates) of its children. Is less flexible and harder to maintain than other types of layouts without absolute positioning.

30 Lab8:AbsoluteLayout 손수국 조승호공저, 안드로이드프로그래밍의이해와실제 ( 경기 : 생능출판사, 2010), p.165.

31 RelativeLayout Displays child View elements in relative positions. The position of a View can be specified as relative to sibling elements or in positions relative to the RelativeLayout area.

32 RelativeLayout (Cont.) A RelativeLayout is a very powerful utility for designing a user interface. If you find yourself using several nested LinearLayout groups, you may be able to replace them with a single RelativeLayout.

33 RelativeLayout (Cont.) Property Description layout_above Positions the bottom edge of this view above the given anchor view ID. layout_alignbaseline Positions the baseline of this view on the baseline of the given anchor view ID. layout_alignbottom Makes the bottom edge of this view match the bottom edge of the given anchor view ID. layout_alignleft Makes the left edge of this view match the left edge of the given anchor view ID. layout_alignparentbottom If true, makes the bottom edge of this view match the bottom edge of the parent. layout_alignparentleft If true, makes the left edge of this view match the left edge of the parent.

34 RelativeLayout (Cont.) Property layout_alignparentright layout_alignparenttop layout_alignright layout_aligntop layout_alignwithparentifm issing layout_below Description If true, makes the right edge of this view match the right edge of the parent. If true, makes the top edge of this view match the top edge of the parent. Makes the right edge of this view match the right edge of the given anchor view ID. Makes the top edge of this view match the top edge of the given anchor view ID. If set to true, the parent will be used as the anchor when the anchor cannot be be found for layout_toleftof, layout_torightof, etc. Positions the top edge of this view below the given anchor view ID.

35 RelativeLayout (Cont.) Property layout_centerhorizonta l layout_centerinparent layout_centervertical layout_toleftof layout_torightof Description If true, centers this child horizontally within its parent. If true, centers this child horizontally and vertically within its parent. If true, centers this child vertically within its parent. Positions the right edge of this view to the left of the given anchor view ID. Positions the left edge of this view to the right of the given anchor view ID.

36 Lab9:RelativeLayout 진성주 최종열 백정현 신중훈공저, 제대로된안드로이드앱개발을위한안드로이드프로그래밍 ( 경기 : 북스홀릭, 2011), p.107.

37 Lab10:RelativeLayout

38 TableLayout Arranges its children into rows and columns. Consists of a number of TableRow objects, each defining a row. TableRow 클래스는수평방향의선형레이아웃에해당되며, 이러한 TableRow 들이수직방향으로나열된것이 TableLayout 이다. Containers do not display border lines for their rows, columns, or cells.

39 TableLayout 기본적으로 TableRow 객체를만들어서사용 열이개수는안드로이드가자동으로결정 Each row has zero or more cells. Each cell can hold one View object. 가장많은셀이있는행을기준으로열의개수를결정 A table can leave cells empty. Cells can span columns, as they can in HTML.

40 TableLayout (Cont.) The width of a column is defined by the row with the widest cell in that column. The children of this cannot specify the layout_width attribute. Width is always MATCH_PARENT. The layout_height attribute can be defined by a child. The layout_height s default value is WRAP_CONTENT. If the child is a TableRow, then the height is always WRAP_CONTENT.

41 TableLayout (Cont.) Cells must be added to a row in increasing column order, both in code and XML. Column numbers are zero-based. If you don't specify a column number for a child cell, it will autoincrement to the next available column. If you skip a column number, it will be considered an empty cell in that row.

42 TableLayout (Cont.) 속성값의미 collapsecolumns 0 부터시작하는열의번호를쉼표로구분 shrinkcolumns stretchcolumns 0 부터시작하는열의번호를쉼표로구분 0 부터시작하는열의번호를쉼표로구분 열들을숨김 텍스트가길때는접어서표시 열의폭을넓힘 layout_column 0 부터시작뷰가표시될열번호 layout_span 양수 뷰가차지할열들의 개수

43 Lab11 진성주 최종열 백정현 신중훈공저, 제대로된안드로이드앱개발을위한안드로이드프로그래밍 ( 경기 : 북스홀릭, 2011), p.109.

44 Lab12

45 Lab13 한동호, 단계별예제로배우는안드로이드프로그래밍 ( 경기 : 제이펍, 2011), p.98.

46 Lab14

47 Lab15 유동근 박정민공저, 200 개예제로배우는 Android API 핵심원리안드로이드 API 바이블 ( 서울 : 정보문화사, 2010), p.648.

48 Lab16 유동근 박정민공저, 200 개예제로배우는 Android API 핵심원리안드로이드 API 바이블 ( 서울 : 정보문화사, 2010), p.636.

49 Lab17 유동근 박정민공저, 200 개예제로배우는 Android API 핵심원리안드로이드 API 바이블 ( 서울 : 정보문화사, 2010), p.638.

50 Lab18 유동근 박정민공저, 200 개예제로배우는 Android API 핵심원리안드로이드 API 바이블 ( 서울 : 정보문화사, 2010), p.640.

51 TabLayout (TabHost) Container for a tabbed window view. Holds two children A set of tab labels that the user clicks to select a specific tab. A FrameLayout object that displays the contents of that page.

52 TabLayout (Cont.) To create a tabbed UI, you need to use a TabHost and a TabWidget. The TabHost must be the root node for the layout Contains both the TabWidget for displaying the tabs A FrameLayout for displaying the tab content.

53 Lab19

54 Lab20 진성주 최종열 백정현 신중훈공저, 제대로된안드로이드앱개발을위한안드로이드프로그래밍 ( 경기 : 북스홀릭, 2011), p.114.

55 Lab21

2_안드로이드UI

2_안드로이드UI 03 Layouts 레이아웃 (Layout) u ViewGroup의파생클래스로서, 포함된 View를정렬하는기능 u 종류 LinearLayout 컨테이너에포함된뷰들을수평또는수직으로일렬배치하는레이아웃 RelativeLayout 뷰를서로간의위치관계나컨테이너와의위치관계를지정하여배치하는레이아웃 TableLayout 표형식으로차일드를배치하는레이아웃 FrameLayout