Xamarin.FormsでTwitterのフォローリストを模写する
既存のアプリのUIを模写するのはとても良い勉強になります.
今回はListViewの練習としてAndroidのTwitterアプリのフォローリストを模写してみたいと思います.
目標
Twitterアプリのフォロー中のリストを表示するとこういったリストが表示されると思います. これをListViewとDataTemplateを使って表現することが目標です.
指針
ListViewに必要な情報を持ったList型のプロパティをバインディングすればリスト表示してくれます.
このリストの項目(アイテム)一つのデザインを決めてやるだけで良いということです.
アイテムのデザインを詳しく見てみる
どんなデザインも,よく見ればシンプルな仕組みの中で作られているものです. むしろ,仕組みがわからないような複雑なUIはお手上げなのでXamarin.Forms以外を使うことをおすすめします.
さて,以下を例としてデザインを見てみます.
UIの多くはGridとStackLayoutが大活躍します.
基本はGridを使って,Gridで区切った各セルにコントロールを配置していくという流れです.
以下はゆくゆくはDataTemplate内のViewCellの中に配置されるアイテムのデザインです.
Gridで分割
<Grid RowSpacing="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="80" /> <ColumnDefinition Width="AUTO" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="AUTO" /> <RowDefinition Height="100" /> </Grid.RowDefinitions> </Grid>
もういっちょGridで分割
<Grid RowSpacing="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="80" /> <ColumnDefinition Width="AUTO" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="AUTO" /> <RowDefinition Height="100" /> </Grid.RowDefinitions> <Grid Grid.Row="1" Grid.Column="1"> <Grid.RowDefinitions> <RowDefinition Height="AUTO" /> <RowDefinition Height="AUTO" /> </Grid.RowDefinitions> </Grid> </Grid> </Grid>
更にGridで分割
<Grid RowSpacing="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="80" /> <ColumnDefinition Width="AUTO" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="AUTO" /> <RowDefinition Height="100" /> </Grid.RowDefinitions> <Grid Grid.Row="1" Grid.Column="1"> <Grid.RowDefinitions> <RowDefinition Height="AUTO" /> <RowDefinition Height="AUTO" /> </Grid.RowDefinitions> <Grid Grid.Row="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="200" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> </Grid> </Grid> </Grid>
これで枠組みはできあがりました.
あとはGrideで区切られた各セルにテキスト,画像,ボタンなどを配置するだけです.
<Grid RowSpacing="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="80" /> <ColumnDefinition Width="AUTO" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="auto" /> <RowDefinition Height="100" /> </Grid.RowDefinitions> <Image Grid.Row="0" Grid.Column="0" HeightRequest="10" HorizontalOptions="End" Source="People.png" /> <Label Grid.Row="0" Grid.Column="1" Margin="5" FontSize="Small" Text="Follows you" VerticalOptions="Center" /> <!--<custom:CircleImage Grid.Row="1" Grid.Column="0" Margin="10,0" HeightRequest="70" HorizontalOptions="Center" Source="{Binding AvatarUrl}" VerticalOptions="StartAndExpand" />--> <Frame Grid.Row="1" Grid.Column="0" Margin="10,0" Padding="0" CornerRadius="35" HeightRequest="60" HorizontalOptions="Center" IsClippedToBounds="True" VerticalOptions="Start" WidthRequest="60"> <Image Aspect="AspectFill" Source="{Binding AvatarUrl}" /> </Frame> <Grid Grid.Row="1" Grid.Column="1"> <Grid.RowDefinitions> <RowDefinition Height="AUTO" /> <RowDefinition Height="AUTO" /> </Grid.RowDefinitions> <Grid Grid.Row="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="200" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <StackLayout Grid.Column="0" Spacing="0"> <Label FontAttributes="Bold" FontSize="Medium" Text="{Binding AccountName}" TextColor="Black" /> <Label Text="{Binding AccountId}" /> </StackLayout> <Frame Grid.Column="1" Margin="0,0,10,0" Padding="0" BackgroundColor="White" BorderColor="#55acee" CornerRadius="25" HasShadow="False" HeightRequest="28" VerticalOptions="Start" WidthRequest="120"> <Frame.GestureRecognizers> <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" /> </Frame.GestureRecognizers> <Label FontAttributes="Bold" HorizontalOptions="Center" Text="Follow" TextColor="#55acee" VerticalOptions="Center" /> </Frame> </Grid> <Label Grid.Row="1" Padding="0,5,5,10" Text="{Binding Description}" TextColor="Black" /> </Grid> </Grid>
ボタンを丸くしたり,アバター画像を丸くしたりする方法は以下の記事を参考にすると良いかなと思います.
まとめ
UIは作り始めるまではなんだか大変そうに感じますが,こうやってちょっとよく見てみると実はシンプルな構造をしている場合が少なくありません.
そして,シンプルな構造でイケてるそれっぽいUIが作られていたりもします.
Xamarin.Formsは意外と表現力が高く,色々なUIを作ることができます.
ぜひすてきなUIのXamarin.Forms製アプリを作ってみましょう.
