SlideShare ist ein Scribd-Unternehmen logo
1 von 17
Downloaden Sie, um offline zu lesen
行動APP開發管理實務
Unit3 - Layout
尹君耀 Xavier Yin
Outline
 View & ViewGroup
 LinearLayout
 FrameLayout
 RelativeLayout
 TableLayout
 GridLayout
UI Components
 View class
– This class represents the basic
building block for user interface
components.
 ViewGroup class
– The ViewGroup subclass is the base
class for layouts, which are invisible
containers that hold other Views (or
other ViewGroups) and define their
layout properties.
UI Components
 View class
– This class represents the basic
building block for user interface
components.
 ViewGroup class
– The ViewGroup subclass is the base
class for layouts, which are invisible
containers that hold other Views (or
other ViewGroups) and define their
layout properties.
UI Components
 View class
– This class represents the basic
building block for user interface
components.
 ViewGroup class
– The ViewGroup subclass is the base
class for layouts, which are invisible
containers that hold other Views (or
other ViewGroups) and define their
layout properties.
XML Attributes
 android:background - setBackgroundResource(int)
– A drawable to use as the background.
 android:id - setId(int)
– Supply an identifier name for this view, to later retrieve it with
View.findViewById() or Activity.findViewById().
 android:padding - setPaddingRelative(int,int,int,int)
– Sets the padding, in pixels, of all four edges.
 android:visibility - setVisibility(int)
– Controls the initial visibility of the view.
LinearLayout
 android:orientation -
setOrientation(int)
– Should the layout be a column
or a row? Use "horizontal" for a
row, "vertical" for a column.
 android:gravity -
setGravity(int)
– Specifies how an object should
position its content, on both
the X and Y axes, within its own
bounds.
LinearLayout
 Practice
Horizontal Vertical & Horizontal
FrameLayout
 Practice
RelativeLayout
 android:layout_above, android:layout_below
– Positions the bottom edge of this view above or below the given anchor view ID.
 android:layout_alignParentBottom, android:layout_alignParentLeft,
android:layout_alignParentRight, android:layout_alignParentTop
– If true, makes the edge of this view match the edge you assign of the parent.
 android:layout_toLeftOf, android:layout_toRightOf
– Positions the right edge of this view to the left or right of the given anchor view
ID.
 android:layout_centerInParent
– If true, centers this child horizontally and vertically within its parent.
RelativeLayout
 Practice
TableLayout
 TableLayout: android:stretchColumns -
setStretchAllColumns(boolean)
– The zero-based index of the columns to stretch.
 TableRow: android:layout_span
– Defines how many columns this child should span.
 TableRow: android:layout_column
– The index of the column in which this child should be.
TableLayout
 Practice
GridLayout
 android:columnCount - setColumnCount(int)
– The maxmimum number of columns to create when automatically
positioning children.
 android:rowCount - setRowCount(int)
– The maxmimum number of rows to create when automatically
positioning children.
 android:layout_columnSpan
– The column span: the difference between the right and left boundaries
delimiting the group of cells occupied by this view.
 android:layout_rowSpan
– The row span: the difference between the top and bottom boundaries
delimiting the group of cells occupied by this view.
GridLayout
 Practice
Sample Code and Slides
 Slides
– http://www.slideshare.net/XavierYin/appunit3
 Sample Code
– https://github.com/xavier0507/TKUSampleCodeUnit3.git
References
 Android developers:
– http://developer.android.com/design/index.html

Weitere ähnliche Inhalte

Ähnlich wie 行動App開發管理實務unit3

04 user interfaces
04 user interfaces04 user interfaces
04 user interfacesC.o. Nieto
 
Mobile Application Development -Lecture 07 & 08.pdf
Mobile Application Development -Lecture 07 & 08.pdfMobile Application Development -Lecture 07 & 08.pdf
Mobile Application Development -Lecture 07 & 08.pdfAbdullahMunir32
 
mobile application development -unit-3-
mobile application development  -unit-3-mobile application development  -unit-3-
mobile application development -unit-3-TejamFandat
 
Tku-行動app開發管理實務-Android應用程式開發基礎
Tku-行動app開發管理實務-Android應用程式開發基礎Tku-行動app開發管理實務-Android應用程式開發基礎
Tku-行動app開發管理實務-Android應用程式開發基礎Xavier Yin
 
Android Training (Android UI)
Android Training (Android UI)Android Training (Android UI)
Android Training (Android UI)Khaled Anaqwa
 
android layouts
android layoutsandroid layouts
android layoutsDeepa Rani
 
Unit 2 LayoutTutorial.pptx
Unit 2 LayoutTutorial.pptxUnit 2 LayoutTutorial.pptx
Unit 2 LayoutTutorial.pptxABHIKKUMARDE
 
Building a simple user interface lesson2
Building a simple user interface lesson2Building a simple user interface lesson2
Building a simple user interface lesson2Kalluri Vinay Reddy
 
Android ui layout
Android ui layoutAndroid ui layout
Android ui layoutKrazy Koder
 
Android apps development
Android apps developmentAndroid apps development
Android apps developmentMonir Zzaman
 
W1_Lec01_Lec02_Layouts.pptx
W1_Lec01_Lec02_Layouts.pptxW1_Lec01_Lec02_Layouts.pptx
W1_Lec01_Lec02_Layouts.pptxssuserc1e786
 
Beginning Native Android Apps
Beginning Native Android AppsBeginning Native Android Apps
Beginning Native Android AppsGil Irizarry
 

Ähnlich wie 行動App開發管理實務unit3 (20)

Hello Android
Hello AndroidHello Android
Hello Android
 
Android practice of layout in application-chapter6
Android practice of layout in application-chapter6Android practice of layout in application-chapter6
Android practice of layout in application-chapter6
 
Android Layout.pptx
Android Layout.pptxAndroid Layout.pptx
Android Layout.pptx
 
Android development session 3 - layout
Android development   session 3 - layoutAndroid development   session 3 - layout
Android development session 3 - layout
 
Android views and layouts-chapter4
Android views and layouts-chapter4Android views and layouts-chapter4
Android views and layouts-chapter4
 
04 user interfaces
04 user interfaces04 user interfaces
04 user interfaces
 
Android UI Fundamentals part 1
Android UI Fundamentals part 1Android UI Fundamentals part 1
Android UI Fundamentals part 1
 
Mobile Application Development -Lecture 07 & 08.pdf
Mobile Application Development -Lecture 07 & 08.pdfMobile Application Development -Lecture 07 & 08.pdf
Mobile Application Development -Lecture 07 & 08.pdf
 
mobile application development -unit-3-
mobile application development  -unit-3-mobile application development  -unit-3-
mobile application development -unit-3-
 
Tku-行動app開發管理實務-Android應用程式開發基礎
Tku-行動app開發管理實務-Android應用程式開發基礎Tku-行動app開發管理實務-Android應用程式開發基礎
Tku-行動app開發管理實務-Android應用程式開發基礎
 
Android layouts
Android layoutsAndroid layouts
Android layouts
 
Android Training (Android UI)
Android Training (Android UI)Android Training (Android UI)
Android Training (Android UI)
 
android layouts
android layoutsandroid layouts
android layouts
 
Unit 2 LayoutTutorial.pptx
Unit 2 LayoutTutorial.pptxUnit 2 LayoutTutorial.pptx
Unit 2 LayoutTutorial.pptx
 
01 08 - graphical user interface - layouts
01  08 - graphical user interface - layouts01  08 - graphical user interface - layouts
01 08 - graphical user interface - layouts
 
Building a simple user interface lesson2
Building a simple user interface lesson2Building a simple user interface lesson2
Building a simple user interface lesson2
 
Android ui layout
Android ui layoutAndroid ui layout
Android ui layout
 
Android apps development
Android apps developmentAndroid apps development
Android apps development
 
W1_Lec01_Lec02_Layouts.pptx
W1_Lec01_Lec02_Layouts.pptxW1_Lec01_Lec02_Layouts.pptx
W1_Lec01_Lec02_Layouts.pptx
 
Beginning Native Android Apps
Beginning Native Android AppsBeginning Native Android Apps
Beginning Native Android Apps
 

Kürzlich hochgeladen

Department of Health Compounder Question ‍Solution 2022.pdf
Department of Health Compounder Question ‍Solution 2022.pdfDepartment of Health Compounder Question ‍Solution 2022.pdf
Department of Health Compounder Question ‍Solution 2022.pdfMohonDas
 
How to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using CodeHow to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using CodeCeline George
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfMohonDas
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...raviapr7
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17Celine George
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptxmary850239
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...CaraSkikne1
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxraviapr7
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxiammrhaywood
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfYu Kanazawa / Osaka University
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxheathfieldcps1
 
10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdf10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdfJayanti Pande
 
How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17Celine George
 
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptx
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptxSOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptx
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptxSyedNadeemGillANi
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?TechSoup
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICESayali Powar
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...Nguyen Thanh Tu Collection
 
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINTARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINTDR. SNEHA NAIR
 

Kürzlich hochgeladen (20)

Department of Health Compounder Question ‍Solution 2022.pdf
Department of Health Compounder Question ‍Solution 2022.pdfDepartment of Health Compounder Question ‍Solution 2022.pdf
Department of Health Compounder Question ‍Solution 2022.pdf
 
How to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using CodeHow to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using Code
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdf
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...
 
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdfPersonal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptx
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptx
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
 
March 2024 Directors Meeting, Division of Student Affairs and Academic Support
March 2024 Directors Meeting, Division of Student Affairs and Academic SupportMarch 2024 Directors Meeting, Division of Student Affairs and Academic Support
March 2024 Directors Meeting, Division of Student Affairs and Academic Support
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptx
 
10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdf10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdf
 
How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17
 
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptx
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptxSOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptx
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptx
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICE
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
 
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINTARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
 

行動App開發管理實務unit3

  • 2. Outline  View & ViewGroup  LinearLayout  FrameLayout  RelativeLayout  TableLayout  GridLayout
  • 3. UI Components  View class – This class represents the basic building block for user interface components.  ViewGroup class – The ViewGroup subclass is the base class for layouts, which are invisible containers that hold other Views (or other ViewGroups) and define their layout properties.
  • 4. UI Components  View class – This class represents the basic building block for user interface components.  ViewGroup class – The ViewGroup subclass is the base class for layouts, which are invisible containers that hold other Views (or other ViewGroups) and define their layout properties.
  • 5. UI Components  View class – This class represents the basic building block for user interface components.  ViewGroup class – The ViewGroup subclass is the base class for layouts, which are invisible containers that hold other Views (or other ViewGroups) and define their layout properties.
  • 6. XML Attributes  android:background - setBackgroundResource(int) – A drawable to use as the background.  android:id - setId(int) – Supply an identifier name for this view, to later retrieve it with View.findViewById() or Activity.findViewById().  android:padding - setPaddingRelative(int,int,int,int) – Sets the padding, in pixels, of all four edges.  android:visibility - setVisibility(int) – Controls the initial visibility of the view.
  • 7. LinearLayout  android:orientation - setOrientation(int) – Should the layout be a column or a row? Use "horizontal" for a row, "vertical" for a column.  android:gravity - setGravity(int) – Specifies how an object should position its content, on both the X and Y axes, within its own bounds.
  • 10. RelativeLayout  android:layout_above, android:layout_below – Positions the bottom edge of this view above or below the given anchor view ID.  android:layout_alignParentBottom, android:layout_alignParentLeft, android:layout_alignParentRight, android:layout_alignParentTop – If true, makes the edge of this view match the edge you assign of the parent.  android:layout_toLeftOf, android:layout_toRightOf – Positions the right edge of this view to the left or right of the given anchor view ID.  android:layout_centerInParent – If true, centers this child horizontally and vertically within its parent.
  • 12. TableLayout  TableLayout: android:stretchColumns - setStretchAllColumns(boolean) – The zero-based index of the columns to stretch.  TableRow: android:layout_span – Defines how many columns this child should span.  TableRow: android:layout_column – The index of the column in which this child should be.
  • 14. GridLayout  android:columnCount - setColumnCount(int) – The maxmimum number of columns to create when automatically positioning children.  android:rowCount - setRowCount(int) – The maxmimum number of rows to create when automatically positioning children.  android:layout_columnSpan – The column span: the difference between the right and left boundaries delimiting the group of cells occupied by this view.  android:layout_rowSpan – The row span: the difference between the top and bottom boundaries delimiting the group of cells occupied by this view.
  • 16. Sample Code and Slides  Slides – http://www.slideshare.net/XavierYin/appunit3  Sample Code – https://github.com/xavier0507/TKUSampleCodeUnit3.git
  • 17. References  Android developers: – http://developer.android.com/design/index.html