Xamarin Android ile giriş yapısı, çoğu mobil uygulamanın ilk açılışında giriş yap ve üye ol gibi bir ekranla karşılaşmış olduğunuzu düşünüyorum özellikle çoklu oyunculu oyunlarda görmüş olabilirsiniz. Bizde buna benzer basit bir yapıyı Xamarin ile android’de yapmaya çalışacağız.
Xamarin Android ile giriş yapısı oluşturma
Xamarin Android ile giriş yapısı oluşturmak için öncelikle visual studio’da boş bir android projesi oluşturuyoruz ve ilk olarak yapmamız gereken bizi karşılayan main.axml ekranına giriş ve üye ol butonlarının yer aldığı ekranı tasarlayalım.
Main.axml(XML)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@android:color/background_light" android:weightSum="100" android:minWidth="25px" android:minHeight="25px" tools:actionBarNavMode="tabs"> <TextView android:text="Bir Hesap Oluştur" android:textAppearance="?android:attr/textAppearanceMedium" android:layout_width="match_parent" android:layout_weight="20" android:layout_height="0dp" android:textColor="#1565C0" android:id="@+id/txtHesapOlustur" android:gravity="center" android:textStyle="bold" android:textSize="30sp" /> <Button android:text="Giriş Yap" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="15" android:background="@drawable/ButtonGirisYapStili" android:id="@+id/btnGirisYap" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" android:textSize="15sp" android:drawableLeft="@drawable/business_user_next" /> <TextView android:text="Veya" android:textAppearance="?android:attr/textAppearanceMedium" android:layout_width="match_parent" android:layout_weight="15" android:layout_height="0dp" android:textColor="#1565C0" android:id="@+id/txtVeya" android:gravity="center" /> <Button android:text="Uye Ol" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="15" android:id="@+id/btnUyeOl" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" android:textSize="15sp" android:background="@drawable/buttonuyeolstili" android:drawableLeft="@drawable/users_next" /> <RelativeLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="35" android:minWidth="25px" android:minHeight="25px"> <ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/progressBar1" android:layout_centerInParent="true" android:indeterminate="true" android:indeterminateDrawable="@drawable/progressbarstili" android:visibility="invisible" /> </RelativeLayout> </LinearLayout> |
Üstteki axml
içerisinde bazı özellikleri açıklamakta fayda var standart özelliklere değinmeyeceğim. LinearLayout
‘da yer alan weightSum ile web uygulaması yazdıysanız grid sistem
yapısı şeklinde kullanabiliyorsunuz ben orientation
özelliğinde verdiğim vertical
değeri ve weightSum
özelliğinde verdiğim 100 ile uygulamanın dikeyde maksimum grid yapısının 100 olduğunu belirtiyorum o yüzden main.axml dosyasına bileşen eklediğinizde dikeyde alabileceği alanı layout_weight özelliğine girmelisiniz eğer girmez iseniz tüm eklenen bileşenlere ortak sayıda otomatik olarak gerekli atamayı yapacaktır.
Buttonlara ikonları sola eklemek için drawableLeft
özelliğini kullandık.
TextView
bileşeninde yazının yatay ve dikeyde ortalanması için gravity
adlı özelliği kullandık.
ProgressBar
bileşeni için ProgressBarStili.xml
adında bir stil tanımı yaptık bunu ProgressBar
‘da kullanmak için indeterminateDrawable
özelliğine gerekli atamayı yaptık.
Main.axml Ekran Görüntüsü
Farkettiyseniz giriş yap ve üye ol butonlarına stil uygulanmış ayrıca ikonlar eklenmiş ikonları eklemek basit yapmanız gereken butonlara eklemek istediğiniz ikonları Resources
klasörü altında yer alan drawable
adlı klasörü altına atmak ve butonların özelliklerinden artık butonu nereye eklemek isterseniz o özelliğe girmelisiniz ve yukarıdaki kodlardan göreceğiniz üzere drawableLeft
adlı özelliğe girmişim böylelikle ikonlarımın sol tarafta çıkmasını sağladım.
Görseldeki 2 buton için 2 farklı stil dosyası tanımladım bu stil dosyalarınıda ButtonGirisYapStili.xml ve ButtonUyeOlStili.xml adıyla kaydettim bu stil dosyalarını butonlara uygulamak için button’ların background adlı özelliklerine uygulanmasını istediğim stil xml’inin adını @drawable/
eki ile beraber girdim.
Şimdi 2 stil dosyasının içeriğine gözatalım. Etiteklerin özelliklerini ve ne işe yaradıklarını yorum satırı halinde kod içerisine dahil ettim.
ButtonUyeOlStili.xml(XML)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!--state_presses ile basıla durumu kontrol ediliyor ve burada basılmadı ise altında layer-list içerisindeki tasarımları uygulaması istenmiştir.--> <item android:state_pressed="false"> <layer-list> <item android:right="5dp" android:top="5dp"> <shape> <!--Kenar kıvrımları boyutu--> <corners android:radius="5dp" /> <solid android:color="#D6D6D6" /> </shape> </item> <item android:bottom="2dp" android:left="2dp"> <shape> <!--button arkaplanı için iki renk arasında geçiş ayarlıyoruz ve renk geçişlerinin başlayacağı açıyı angle özelliğinde belirtiyoruz.--> <gradient android:angle="270" android:endColor="#B71C1C" android:startColor="#E57373" /> <!--Kenarlık rengi ve boyutu ayarlanıyor--> <stroke android:width="1dp" android:color="#BABABA" /> <!--Kenar kıvrımları boyutu--> <corners android:radius="4dp" /> <!--Button alt,sol,sağ ve üst iç boşlukları ayarlanıyor.--> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape> </item> </layer-list> </item> <!--Üstteki açıklamanın tam tersi olarak burada ise butona basıldı ise buradaki tasarım uygulanacak.--> <item android:state_pressed="true"> <layer-list> <item android:right="5dp" android:top="5dp"> <shape> <!--Kenar kıvrımları boyutu--> <corners android:radius="5dp" /> <solid android:color="#D6D6D6" /> </shape> </item> <item android:bottom="2dp" android:left="2dp"> <shape> <!--button arkaplanı için iki renk arasında geçiş ayarlıyoruz ve renk geçişlerinin başlayacağı açıyı angle özelliğinde belirtiyoruz.--> <gradient android:angle="270" android:endColor="#E57373" android:startColor="#EF9A9A" /> <!--Kenarlık rengi ve boyutu ayarlanıyor--> <stroke android:width="1dp" android:color="#BABABA" /> <!--Kenar kıvrımları boyutu--> <corners android:radius="4dp" /> <!--Button alt,sol,sağ ve üst iç boşlukları ayarlanıyor.--> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape> </item> </layer-list> </item> </selector> |
ButtonGirisYap.xml(XML)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!--state_presses ile basıla durumu kontrol ediliyor ve burada basılmadı ise altında layer-list içerisindeki tasarımları uygulaması istenmiştir.--> <item android:state_pressed="false"> <layer-list> <item android:right="5dp" android:top="5dp"> <shape> <!--Kenar kıvrımları boyutu--> <corners android:radius="5dp" /> <solid android:color="#D6D6D6" /> </shape> </item> <item android:bottom="2dp" android:left="2dp"> <shape> <!--button arkaplanı için iki renk arasında geçiş ayarlıyoruz ve renk geçişlerinin başlayacağı açıyı angle özelliğinde belirtiyoruz.--> <gradient android:angle="270" android:endColor="#004D40" android:startColor="#26A69A" /> <!--Kenarlık rengi ve boyutu ayarlanıyor--> <stroke android:width="1dp" android:color="#BABABA" /> <!--Kenar kıvrımları boyutu--> <corners android:radius="4dp" /> <!--Button alt,sol,sağ ve üst iç boşlukları ayarlanıyor.--> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape> </item> </layer-list> </item> <!--Üstteki açıklamanın tam tersi olarak burada ise butona basıldı ise buradaki tasarım uygulanacak.--> <item android:state_pressed="true"> <layer-list> <item android:right="5dp" android:top="5dp"> <shape> <!--Kenar kıvrımları boyutu--> <corners android:radius="5dp" /> <solid android:color="#D6D6D6" /> </shape> </item> <item android:bottom="2dp" android:left="2dp"> <shape> <!--button arkaplanı için iki renk arasında geçiş ayarlıyoruz ve renk geçişlerinin başlayacağı açıyı angle özelliğinde belirtiyoruz.--> <gradient android:angle="270" android:endColor="#4DB6AC" android:startColor="#80CBC4" /> <!--Kenarlık rengi ve boyutu ayarlanıyor--> <stroke android:width="1dp" android:color="#BABABA" /> <!--Kenar kıvrımları boyutu--> <corners android:radius="4dp" /> <!--Button alt,sol,sağ ve üst iç boşlukları ayarlanıyor.--> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape> </item> </layer-list> </item> </selector> |
Üye ol adlı butonumuz altında bir bileşenimiz daha var oda progress bar bileşeni varsayılan olarak visibility adlı değerini invisible yani görünmez olarak bıraktık, üye ol dialog’undan kayıt işlemi yapıldıktan sonra progress bar gözüküyor ve sanki göstermelik olarak işlem yapıyormuş gibi thread ile 5 saniye sistemi uyutuyoruz ve beş saniye sonra progress barı tekrar görünmez hale getiriyoruz. Şimdi progress bar için uyguladığımız tasarıma gözatalım. Bu tasarımın uygulanması için progressBar’ın indeterminateDrawable adlı özelliğini kullandık.
ProgressBarStili.xml(XML)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <?xml version="1.0" encoding="utf-8" ?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0" android:toDegrees="360"> <shape android:shape="ring" android:innerRadiusRatio="3"> <size android:width="150dip" android:height="150dip" /> <gradient android:type="sweep" android:useLevel="false" android:startColor="#000000" android:endColor="#ffffff" android:angle="0" /> </shape> </rotate> |
Birazda kod kısmını inceleyelim ilk önce mainactivity.cs dosyasını inceleyelim ardından üye ol ekranı için tasarlamış olduğumuz xml ve kod kısmına gözatalım.
MainActivity.cs(C#)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | using Android.App; using Android.OS; using Android.Widget; using Java.Lang; namespace MHG.LoginSystem { [Activity(Label = "MHG.LoginSystem", MainLauncher = true, Icon = "@drawable/icon")] public class MainActivity : Activity { Button btnUyeOl; ProgressBar progressBar; protected override void OnCreate(Bundle bundle) { base.OnCreate(bundle); SetContentView(Resource.Layout.Main); btnUyeOl = FindViewById<Button>(Resource.Id.btnUyeOl); progressBar = FindViewById<ProgressBar>(Resource.Id.progressBar1); btnUyeOl.Click += (object sender, System.EventArgs e) => { FragmentTransaction transaction = FragmentManager.BeginTransaction(); var dialog = new dialog_uyeol(); dialog.Show(transaction, "dialog fragment"); dialog.UyeOlTamamlandi += Dialog_UyeOlTamamlandi; }; } /// <summary> /// Bu event dialog_uyeol adlı sınıf içerisindeki UyeOlTamamlandi /// event'inin tetiklenmesi ile çalışmaktadır. Event tetiklendikten sonra /// ProgressBar görünür hale getiriliyor ve Run adlı metodumuzu /// Thread olarak çalıştırıp sistemi 5 saniye uyutuyoruz ve /// sonrasında progressBar'ı tekrar gizliyoruz. /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void Dialog_UyeOlTamamlandi(object sender, dialog_uyeol.OnUyeOlEventArgs e) { progressBar.Visibility = Android.Views.ViewStates.Visible; Thread thread = new Thread(Run); thread.Start(); } public void Run() { Thread.Sleep(5000); RunOnUiThread(() => { progressBar.Visibility = Android.Views.ViewStates.Invisible; }); } } } |
Üye Ol Dialog Ekranı
Burada bir konuda dikkatinizi çekmek istiyorum dialog ekran olayını yaparken kısayoldan AlertDialog kullanabilirdik ama işin nasıl farklı bir yoldan yapılabileceğinide görmeniz ve kayıt tamamlanma işleminden sonra kendi oluşturduğumuz UyeOlTamamlandi adlı EventHandler’imiz ile MainActiviy.cs içerisindeki Dialog_UyeOlTamamlandi adlı event’i tetiklenme işlerminin nasıl gerçekleştiğinide görmeniz açısından farklı bir yol seçtim. Şimdi öncelikle üye ol diyalog ekranının tasarımı için dialog_uye_ol.axml adlı dosya içeriğine gözatalım.
dialog_uye_ol.axml(XML)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:weightSum="100" android:minWidth="100dp" android:padding="10dp"> <TextView android:text="Ad" android:textAppearance="?android:attr/textAppearanceSmall" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView1" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/txtAd" /> <TextView android:text="Soyad" android:textAppearance="?android:attr/textAppearanceSmall" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView1" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/txtSoyad" /> <TextView android:text="Mail Adresi" android:textAppearance="?android:attr/textAppearanceSmall" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView1" /> <EditText android:inputType="textEmailAddress" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/txtEposta" /> <TextView android:text="Telefon Numarası" android:textAppearance="?android:attr/textAppearanceSmall" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView1" /> <EditText android:inputType="phone" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/txtTelefon" /> <Button android:text="Kaydet" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/btnKaydet" android:background="@drawable/buttonuyeolstili" /> </LinearLayout> |
Üstteki diyalog ekranına ait layout dosyasında anlatılması gereken herhangi farklı bir özellik veya konu yok standart özellikler haricinde sadece background özelliğini button için kullandık fakat bu özelliğide daha önce üstteki açıklamalarda anlatmıştım.
dialog_uyeol.cs(C#)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | using Android.App; using Android.OS; using Android.Views; using Android.Widget; using System; namespace MHG.LoginSystem { class dialog_uyeol : DialogFragment { EditText txtAd; EditText txtSoyad; EditText txtTelefon; EditText txtEposta; Button btnKaydet; public event EventHandler<OnUyeOlEventArgs> UyeOlTamamlandi; public class OnUyeOlEventArgs : EventArgs { public string Ad { get; set; } public string Soyad { get; set; } public string Eposta{ get; set; } public string Telefon { get; set; } public OnUyeOlEventArgs(string ad, string soyad, string eposta, string telefon) { Ad = ad; Soyad = soyad; Telefon = telefon; Eposta = eposta; } } public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { base.OnCreateView(inflater, container, savedInstanceState); //Dialog olarak gösterilmesini istediğimiz dialog_uye_ol adlı layout dosyasını parametre olarak veriyoruz. var view = inflater.Inflate(Resource.Layout.dialog_uye_ol, container, false); btnKaydet = view.FindViewById<Button>(Resource.Id.btnKaydet); txtAd = view.FindViewById<EditText>(Resource.Id.txtAd); txtSoyad = view.FindViewById<EditText>(Resource.Id.txtSoyad); txtEposta = view.FindViewById<EditText>(Resource.Id.txtEposta); txtTelefon = view.FindViewById<EditText>(Resource.Id.txtTelefon); btnKaydet.Click += BtnKaydet_Click; return view; } private void BtnKaydet_Click(object sender, EventArgs e) { //UyeOlTamamlandi adlı eventhandler'imizi çalıştırıyoruz MainActivity.cs içerisindeki event'imiz böylelikle tetiklenmiş oluyor ve formda girdiğimiz verilere erişmiş oluyor. UyeOlTamamlandi.Invoke(this, new OnUyeOlEventArgs(txtAd.Text, txtSoyad.Text, txtEposta.Text, txtTelefon.Text)); this.Dismiss(); } public override void OnActivityCreated(Bundle savedInstanceState) { //Başlık çubuğunu gizliyoruz. Dialog.Window.RequestFeature(WindowFeatures.NoTitle); base.OnActivityCreated(savedInstanceState); //Oluşturmuş olduğumuz animasyonların tanımlarının yer aldığı xml style dosyasını atıyoruz. Dialog.Window.Attributes.WindowAnimations = Resource.Style.dialog_animation; } } } |
Üye ol diyalog ekranı ekran görüntüsü
Son olarak Solution Explorer araç çubuğunun Ekran görüntüsünü paylaşarak hangi dosyanın hangi klasör altında yer aldığı konusunda yardımcı olacağını düşünüyoru.
Xamarin Android ile giriş yapısı anlatımı buraya kadar inşallah başka bir Xamarin makalesinde görüşmek dileğiyle kodlardaki tüm özelliklere ve satırları tek tek anlatamadım fakat anlamadığınız veyahut takıldığınız bir kısım olur ise yorum yazınız hızlıca yardımcı olmaya çalışırım.
Bu makalede yaptığımız örneğe ait projeye ve xamarin ile yaptığımız tüm örneklere alttaki githun linkinden ulaşabilirsiniz.
Github: https://github.com/muratoner/xamarin/tree/master/Xamarin
Kaynak için teşekkürler. Murat Bey, xamarin hakkında ne düşünüyorsunuz yatırım yapmalımıyız?
Xamarin’de gördüğüm tek dezavantaj var oda java tabanlı platformlardan yazdığınız uygulama ile xamarinde yazılmış uygulama arasında son çıktı hali olan apk dosya boyutu arasında 100%’lere varan fark var örnek vermek gerekirse xamarin ve eclipse v.b java tabanlı platformlardan boş bir uygulama oluşturun aradaki dosya boyutu farkını göreceksiniz ama bu dosya boyutu düşündüğünüzde çok normal nedeni ise android işletim sisteminde c# ile yazdığınız kodları derlemek için mono kullanılıyor buda uygulamaya artı yük getiriyor haliyle ama dosya boyutu ile ilgili bir sorun oluşmayacağını düşünüyorsanız gönül rahatlığı ile yatırım yapabilirsiniz.
Merhaba, Xamarin eğitimi için tavsiye ettiğiniz bir yer varmı.
Merhaba,
İngilizce kaynak olması sorun değilse alttaki youtube listesini önerebilirim.
https://www.youtube.com/watch?v=6Jx7ZNZL9dk&list=PLCuRg51-gw5VqYchUekCqxUS9hEZkDf6l