Harun Özer


Proje veya dijital katalog yaptırmak için
iletişim formu doldurabilirsiniz..

<< Xamarin Nedir ve Xamarin Sayfa Yapıları | Xamarin Form Kontrolleri>>

Xamarin Tasarım Yapıları

Yazar harunozer 05 August 2017

Xamarin Tasarım Yapıları Önceki makalemizde xamarin nedir ve xamarin sayfa yapılarını incelemiştik. Bu makalede xamarin tasarım kalıplarını inceleyeceğiz. Bu yapılar html de ki div yapıları olarak düşünebiliriz. İçine eklenen kontrollerin nasıl görüneceğinin düzenlendiği yapılardır.

Stack Layout:Yatay veya dikey olarak tek boyutlu yapıdır. Html de ki div yapısına benzer. İçerisine eklenen kontrolleri yatay veya dikey olarak hizalanmasını sağlar. Oriantation özelliği yatay mı dikey mi hizalama yapılacağını belirtir. VerticalOption özelliği dikeyde konumunu, HorizontalOption yatayda konumunu belirtir. Center değeri verilmesi ortalanmasını sağlar.
Örneğin bir giriş ekranı tasarlayalım. Giriş formumuzun başında ortalanmış bir şekilde “Giriş Yap” yazsın. Altında Giriş Kodu ve Şifre entry leri alt alta olsun ve altında “Giriş Yap” ve “Şifremi Unuttum” butonları yan yana olsun.

Projemize StackLayout_Giris.cs adında “Forms Xaml Page” ekleyelim. Dosyamızı aşağıdaki gibi hazırlayalım.

<?xmlversion="1.0"encoding="utf-8"?>

<ContentPagexmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="TasarimYapilari.StackLayout_Giris">

 

  <StackLayoutPadding="10"BackgroundColor="Yellow"VerticalOptions="CenterAndExpand"HorizontalOptions="Center"Orientation="Vertical">

 

    <LabelText="Giriş Yap"TextColor="Black"HorizontalOptions="Center"></Label>

 

    <EntryPlaceholder="Giriş Kodu"></Entry>

    <EntryPlaceholder="Şifre"></Entry>

 

    <StackLayoutPadding="10"BackgroundColor="Green"VerticalOptions="CenterAndExpand"HorizontalOptions="Center"Orientation="Horizontal"Spacing="5">

      <ButtonText="Giriş Yap"></Button>

      <ButtonText="Şifremi Unuttum"></Button>

    </StackLayout>

   

  </StackLayout>

 

</ContentPage>

App.cs de açılış layout olarak StackLayout_Giris sınıfını tanımlayıp uygulamamızı çalıştıralım. Form görüntüsü aşağıdaki gibi olacaktır.

xamarin stack layout

Grid Layout: Kontrollerin satır ve sütun halinde tablo yapısında gösterilmesini sağlar. Grid.RowDefination, Grid.ColumnDefination özellikleri ile satır ve sütun özellikleri tanımlanır. Width ve Height değerlerine göre boyutlar tanımlanır.

Auto: içeriğe göre boyutlandırır.
* : satır ve sütun boş alan kadar boyutlandırır.
Sayı: belirtilen sayı kadar boyutlandırır.

Grid yapısını görebilmek için 2 satır ve 3 sütundan oluşan bir grid tasarımı yapalım. Projemize GridOrnek.cs adında “Forms Xaml Page” ekleyelim ve app.cs de bu sayfadan başlayacak şekilde düzenleme yapalım. Satır ve sütunların belirgin olması için farklı renkler kullanalım. Dosyamızı aşağıdaki gibi hazırlayalım.

  <Grid>

 

    <Grid.RowDefinitions>

      <RowDefinitionHeight="*"></RowDefinition>

      <RowDefinitionHeight="*"></RowDefinition>

    </Grid.RowDefinitions>

 

    <Grid.ColumnDefinitions>

      <ColumnDefinitionWidth="*"></ColumnDefinition>

      <ColumnDefinitionWidth="*"></ColumnDefinition>

      <ColumnDefinitionWidth="200"></ColumnDefinition>

    </Grid.ColumnDefinitions>

   

    <LabelBackgroundColor="Red"Text="0,0"Grid.Row="0"Grid.Column="0"></Label>

    <LabelBackgroundColor="Blue"Text="0,1"Grid.Row="0"Grid.Column="1"></Label>

    <LabelBackgroundColor="Yellow"Text="0,2"Grid.Row="0"Grid.Column="2"></Label>

 

    <LabelBackgroundColor="Purple"Text="1,0"Grid.Row="1"Grid.Column="0"></Label>

    <LabelBackgroundColor="Silver"Text="1,1"Grid.Row="1"Grid.Column="1"></Label>

    <LabelBackgroundColor="Lime"Text="1,2"Grid.Row="1"Grid.Column="2"></Label>

 

  </Grid>

Ekran görüntüsü aşağıdaki gibi görünecektir.

xamarin grid layout

Relative Layout:Ekran boyutlarından bağımsız, constraint, parent, parentView ilişkisi ile kontrollerin konumlandırılmasını sağlar. Örnek olarak ekranımıza 2 adet BoxView ekleyip konumlandıralım. Projemize RelativeOrnek.cs adında class ekleyelim. Eklediğimiz classı ContentPage sınıfından türetip constractor metodunu aşağıdaki gibi yapalım.

    publicclassRelativeOrnek:ContentPage

    {

        publicRelativeOrnek()

        {

            RelativeLayoutlayout = newRelativeLayout();

 

            BoxViewblue = newBoxView();

            blue.BackgroundColor = Color.Blue;

 

            BoxViewred = newBoxView();

            red.BackgroundColor = Color.Red;

 

            layout.Children.Add(blue, Constraint.Constant(10), Constraint.Constant(10));

 

            //Constraint.Constant ekrana göre konum

            //RelativeToParent: kontrolün Parentına göre bu örnekte  RelativeLayout

            //RelativeToView: başka bir view a göre

            red.Opacity = 0.6;

            layout.Children.Add(red, Constraint.RelativeToParent((parent) =>

            {

                //parent = üst katman yani layout içinde olduğu için layout

                returnparent.X + 20;

            }), Constraint.RelativeToView(blue, (parent, toView) => {

                returntoView.Y + 10;

            }));

 

            Content = layout;

        }

    }

Yukarıdaki örnekte RelativeLayout oluşturup içine blue BoxView ını ekliyoruz. X ve Y koordinatları olarak da Constraint.Constant ile ekran başlangıcına göre 10 değeri veriyoruz. Red BoxView ı layout a eklerken X konumunu Parent kontrolüne göre almasını parent kontrolünün X değerine +20, Y değerini ise blue BoxView dan almasını y değerine +10 vererek konumlandırılmasını sağlıyoruz. Burada aksi belirtilmediği için Parent olarak BoxView ın eklendiği Layout tanımlı olmuş olur. Uygulamamızın ekran görüntüsü aşağıdaki gibi olacaktır.

xamarin relative layout

 

Absolute Layout: Kontrolleri birbirinden bağımsız olarak x ve y koordinatlarında konumlardırmayı sağlar. Örnek olarak ekrana 2 kutu ekleyelim ve x,y koordinatına göre hizalayalım.

Uygulamamıza AbsoluteOrnek.cs adında class ekleyelim ve ContentPage nesnesinden türetelim. App.cs de uygulamamız bu sınıftan başlayacak şekilde düzenleme yapalım. AbsoluteOrnek.cs sınıfı içeriği aşağıdaki gibi olmalıdır.

    publicclassAbsoluteOrnek: ContentPage

    {

        publicAbsoluteOrnek()

        {

            AbsoluteLayoutlayout = newAbsoluteLayout();

 

            BoxViewBlueBax = newBoxView();

            BlueBax.BackgroundColor = Color.Blue;

 

            BoxViewRedBox = newBoxView();

            RedBox.BackgroundColor = Color.Red;

            RedBox.Opacity = 0.5;

            //X = 50, Y = 50 koordinatlarında 150*150 boyutlarında ekler

            layout.Children.Add(BlueBax, newRectangle(50, 50, 150, 150));

 

            //X = 175, Y = 175 koordinatlarına ekler

            layout.Children.Add(RedBox, newPoint(175, 175));

 

            Content = layout;

        }

    }

Ekran görüntüsü aşağıdaki gibi görünüyor olmalı.

xamarin absolute layout

Örnekleri aşağıdaki adresten indirebilirsiniz.

https://github.com/harunozer/XamarinSamples/tree/master/TasarimYapilari

 

Kaynak: https://www.youtube.com/watch?v=EbLqaf-5ey0

Tam Sayfa
Tags Xamarin,
Kategoriler Xamarin
İşlemler
Bu Makale 0  Kez Beğenildi.
İsim :    
e-Mail :    
Web Site :  
İmage :  
Güvenlik Kodu :  

Güvenlik Resmi
Resmi Yenile
    
Yorum :  
Tasarım Desenleri ve Mimarileri