Xamarin Form Layout

เราได้ทดสอบ Build และเทสบนแอปของเราไปแล้ว ทีนี้เราจะมาเรียนรู้เกี่ยวกับ Layout Control ต่างๆของ Xamarin กัน โดยที่ผมจะยกมาเฉพาะตัวที่สำคัญๆและใช้มากที่สุดในงานของผม ซึ่งถ้าใครสนใจความเป็น Original ก็ศึกษาได้เลยที่นี่ https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/

StackLayout

Layout แรกที่ขาดไม่ได้เลยก็คือ StackLayout ครับ เพราะผมใช้งานตัวนี้มากที่สุด แทบจะทุก View ทุกหน้า จะขาดตัวนี้ไม่ได้เลย โดยความสามารถมันคือการเรียง View ต่างๆในบันทัดเดียว(one-dimensional line stack) ไม่ว่าจะเป็นแนวตั้งหรือแนวนอน มาชมโค๊ดตัวอย่างกันเลยคับ

 <StackLayout>
  <Label Text="Label 1" />
  <Label Text="Label 2" />
 </StackLayout>

จะได้ผลลัพธ์ ดังนี้

ถ้าเราไม่ใส่ property อะไรให้มันเลยมันจะเรียงในรูปแบบแนวตั้งโดย default ที่ไม่ได้ใส่อะไรเลยจะเป็น Vertical

<StackLayout Orientation="Vertical">

แต่ถ้าเราอยากให้เรียงเป็นแนวนอนเราก็ใส่แบบนี้

<StackLayout Orientation="Horizontal">

ถ้าเราต้องการให้ children ต่างๆที่อยู่ภายใต้ StackLayout อยู่ไกล้ หรือห่างกันมากขึ้นเราก็ใช้ property Spacing ได้ โดย default ที่ไม่ใส่อะไรเลยจะอยู่ที่ 6

<StackLayout Spacing="20">

Grid

และที่ขาดไม่ได้ตัวต่อไปก็คือ Grid นั่นเองครับ ซึ่งตัวนี้ก็จะคล้ายๆ StackLayout หน่อยแต่ว่าเราจะต้องกำหนดต่ำแหน่ง index ให้ลูกๆของมันที่อยู่ใน Grid ด้วยซึ่งความเทพของมันก็คือสามารถจัดวาง layout แบบตารางได้ โดยง่าย ซึ่งก็คล้ายๆกับการเอา StackLayout มาเรียงกัน แต่ตัวนี้จะมี property พิเศษบางอย่างที่ผมใช้แล้วรู้สึกสะบายใจ

Grid จะมี property พิเศษกว่าชาวบ้านนิดหน่อย โดยมันจะให้เรากำหนด ขนาดของแต่ละ row และ column ก่อนที่จะเอาข้อมูลใส่ ไม่ว่าจะเป็น RowDefinition คือการตั้งค่าให้กับ row แต่ละ row หรือจะเป็น ColumnDefinition ที่จะใส่ขนาดของ column ได้ โดยค่าที่ใส่นี้จะทำได้ 3 แบบก็คือ

• Auto คือ จะทำให้ ขนาดของช่องนั้นๆ fit กับ ข้อมูล(content) ที่ครอบอยู่
• * หรือก็คือ star จะทำให้ช่อง column หรือ row นั้นๆ ขยายกินพื้นที่ที่เหลืออยู่บนหน้าจอปัจจุบันให้หมด และยังกำหนดค่าคงที่ให้ได้ด้วยเช่น 2*
• การใส่ขนาดที่ต้องการเข้าไป เป็นตัวเลขตรงๆได้เลย เช่น 60

<Grid>   
 <Grid.RowDefinitions>     
  <RowDefinition Height="2*" />     
  <RowDefinition Height="*" />     
  <RowDefinition Height="200" />   
 </Grid.RowDefinitions>   
 <Grid.ColumnDefinitions>     
  <ColumnDefinition Width="Auto" />     
  <ColumnDefinition Width="*" />   
 </Grid.ColumnDefinitions>
</Grid>

จากตัวอย่างโค๊ดด้านบนคือการกำหนด Row 3 ช่องให้มีขนาดเป็น 2* หรือก็คือ 2 เท่าของ Row ช่องที่ 2 ซึ่งมี * เพียงอันเดียว และ Row ล่างสุดจะมีขนาดคงที่ 200 หน่วย

และ Grid.ColumnDefinitions ก็คือกำหนด Column โดยในที่นี้จะกำหนดให้แต่ละ Row มีเพียง 2 Column โดย Column แรกจะมีความกว้างเป็น Auto หรือก็คือมีขนาดเท่ากับ content ด้านในของมัน และช่องที่ 2 คือจะกินพื้นที่ที่เหลือจาก Column แรก

ทีนี้เราจะมาลองใส่ข้อมูลให้มัน โดย ผมจะใส่ Label เข้าไปพร้อมกับทำสีพื้นหลังให้เห็นความแตกต่างดังนี้

<Grid Margin="0,20,0,0">
 <Grid.RowDefinitions>
  <RowDefinition Height="2*" />
  <RowDefinition Height="*" />
  <RowDefinition Height="200" />
 </Grid.RowDefinitions>
 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto" />
  <ColumnDefinition Width="*" />
 </Grid.ColumnDefinitions>
 <Label Grid.Row="0" Grid.Column="0" 
     Text="Row0 Col0"  BackgroundColor="Red"/>
 <Label Grid.Row="0" Grid.Column="1" 
     Text="Row0 Col1" BackgroundColor="Green"/>
 <Label Grid.Row="1" Grid.Column="0" 
     Text="Row1 Col0" BackgroundColor="Blue"/>
 <Label Grid.Row="1" Grid.Column="1" 
     Text="Row1 Col1" BackgroundColor="Yellow"/>
 <Label Grid.Row="2" Grid.Column="0" 
     Text="Row2 Col0" BackgroundColor="Brown"/>
 <Label Grid.Row="2" Grid.Column="1" 
     Text="Row2 Col1" BackgroundColor="Purple"/>
</Grid>

จากโค๊ดด้านบน Label ทุกตัวจำเป็นจะต้องกำหนด index ตำแหน่งที่อยู่ภายใน Grid ให้มัน เราจะได้ผลลัพธ์แบบนี้

ScrollView

scrollview ก็แทบจะขาดไม่ได้เลยเช่นกัน ตามชื่อทุกคนคงรู้อยู่แล้วว่ามันช่วยให้เราสามารถ สไลด์ดูข้อมูลที่ล้นออกนอกจอ หรือว่าข้อมูลที่เลยออกนอกกรอป View บางอันที่ทำใว้ วิธีใช้ก็ง่ายนิดเดียวเพียงแค่

<ScrollView>
 ...
</ScrollView>

และยังมี Layout อีกมากมายที่เราจะเอามาใช้ตามความเหมาะสมได้อีกที่นี่

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/