universal windows apps adaptive view

7/26/2019 Universal Windows Apps Adaptive View

1/10

Adaptive View

Salah satu dari ftur Univeresal Windows Apps adalah kemampuannyauntuk menjalankan aplikasi di berbagai device yang menggunakanwindows 10 !arena tiap device berbeda ukuran"maka aplikasi yang kita

buat haruslah bisa menyesuaikan di berbagai ukuran layarUntuk membuat aplikasi kita responsive" UW# sudah menyediakan sebuahclass untuk menanganinya"yakni VisualState$anager %enganmenggunakan VisualState$anager kita dapat mengatur beragamtampilan aplikasi di setiap ukuran layarUntuk mengatur minimal lebar dan tinggi ukuran layar kita dapatmenggunakan VisualState.StateTriggers dan AdaptiveTriggerSedangkan untuk mengubah properti sesuai dengan ukuran layar yangdidefnisikan di VisualState.StateTriggerkita dapat menggunakanVisualState.Setters dan Setter.&ontoh '

()rid*ackground+,-.heme/esourceApplication#age*ackground.heme*rush, (VisualState$anagerVisualState)roups (VisualState)roup (VisualState (VisualStateState.riggers (Adaptive.rigger$inWindowWidth+,230, 4 (4VisualStateState.riggers (VisualStateSetters (Setter.arget+,panel15rientation,Value+,6ori7ontal, 4 (4VisualStateSetters

(4VisualState (4VisualState)roup (4VisualState$anagerVisualState)roups (Stack#anel8'9ame+,panel1,5rientation+,Vertical, (.e8t*lock$argin+,30,.e8t+,:orem ipsum dolor sit amet" consecteturadipisicing elit" sed do eiusmodtempor incididunt ut labore et dolore magna ali;ua Ut enim ad minim veniam";uis nostrud e8ercitation ullamco laboris nisi ut ali;uip e8 ea commodoconse;uat,.e8tWrapping+,Wrap,Width+,8cepteur sint occaecat cupidatat nonproident" sunt in culpa ;ui o?cia deserunt mollit anim id est laborum,

.e8tWrapping+,Wrap,Width+,8cepteur sint occaecat cupidatat nonproident" sunt in culpa ;ui o?cia deserunt mollit anim id est laborum,

.e8tWrapping+,Wrap,Width+,


2/10

Apabila dijalankan di ukuran layar dari 230 maka tampilannya akanseperti berikut

Sedangkan apabila ukuran aplikasi diperkecil (+230 maka tampilan akanberubah seperti berikut '


3/10

Analisis Kode :

(VisualState$anagerVisualState)roups (VisualState)roup (VisualState (VisualStateState.riggers

(Adaptive.rigger$inWindowWidth+,230, 4 (4VisualStateState.riggers (VisualStateSetters (Setter.arget+,panel15rientation,Value+,6ori7ontal, 4 (4VisualStateSetters (4VisualState (4VisualState)roup(4VisualState$anagerVisualState)roups

Untuk memulai menggunakan VisualStateManager pertama@tama kitadefnisikan terlebih dahulu (VisualState$anagerVisualState)roupsSetelah itudeklarasikan (VisualState)roup !ode yang berada di antara tag (VisualState dan(4VisualState adalah kode untuk mengatur responsive Untuk mendefnisikan kondisi layar

kita terdapat pada bagian VisualStateState.riggers (Adaptive.rigger$inWindowWidth+,230, 4 (4VisualStateState.riggers

Andapun dapat menambahkan kondisi lainnya"misalkan menambahkanminimal height (Adaptive.rigger$inWindows6eight+,


4/10

*erikut adalah contoh desain dari aplikasi #hoto App" aplikasi ini akan

mengubah posisi ketika layar semakin besar

Resize

!itapun dapat mengoptimalkan ukuran =rame dengan menyesuaikan margin

dan ukuran elemen UC 6al ini memungkin kita untuk menambah pengalaman

membaca pada layar yang lebih besar dengan cara memberbesar =rame


5/10

Refow

%engan cara mengubah aliran elemen UC berdasarkan pada perangkat dan

orientasi" aplikasi anda dapat menawarkan tampilan konten yang lebih

optimal $isalnya"ketika ukuran layar besar" memungkinkan untuk beralih

kepada container yang lebih besar" menambahkan kolom" dan membuat list

item dengan cara yang berbeda

&ontohnya adalah ketika aplikasi dijalankan di dalam phone atau phtablet"

aplikasi akan menampilkan satu kolom dengan skroll vertikal Sedangkan

untuk perangkat yang lebih besar kita dapat mengubahnya menjadi 3 kolom


6/10

dan sebagainya

Reveal

Dou can reveal UC based on screen real estate" or when the device supports

additional =unctionality" specifc situations" or pre=erred screen orientations

Cn this e8ample with tabs" the middle tab with the camera icon might bespecifc to the app on phone or phablet and not be applicable on larger

devices" which is why itEs revealed in the device on the right Another

common e8ample o= revealing or hiding UC applies to media player controls"

where the button set is reduced on smaller devices and e8panded on larger

devices .he media player on #&" =or instance" can handle =ar more on@screen

=unctionality than it can on a phone


7/10

#art o= the reveal@or@hide techni;ue includes choosing when to display more

metadata When real estate is at a premium" such as with a phone or

phablet" itEs best to show a minimal amount o= metadata With a laptop or

desktop #&" a signifcant amount o= metadata can be sur=aced Some

e8amples o= how to handle showing or hiding metadata include'

Cn an email app" you can display the userEs avatar

Cn a music app" you can display more in=o about an album or artist

Cn a video app" you can display more in=o about a flm or a show" such

as showing cast and crew details

Cn any app" you can break apart columns and reveal more details

Cn any app" you can take something thatEs vertically stacked and lay it

out hori7ontally When going =rom phone or phablet to larger devices"stacked list items can change to reveal rows o= list items and columns

o= metadata

Replace

.his techni;ue lets you switch the user inter=ace =or a specifc device si7e@

class or orientation Cn this e8ample" the nav pane and its compact" transient

UC works well =or a smaller device" but on a larger device tabs might be a

better choice


8/10

Rearc!itect

Dou can collapse or =ork the architecture o= your app to better target specifc

devices Cn this e8ample" going =rom the le=t device to the right device

demonstrates the joining o= pages


9/10

6ereEs an e8ample o= this techni;ue applied to the design =or a smart home

app


10/10

universal windows apps adaptive view

Documents