Önceki derslerde farklı Viewler, ViewGrouplar ve Layoutlar hakkında çalıştığımız için, şimdi harika kullanıcı arayüzleri tasarlamak için android projemizde hepsini bir arada nasıl kullanacağımızı görmenin zamanı geldi. Bu eğitimde, android uygulamanız için mükemmel GUI’yi tasarlamak için farklı düzenler(layout), görünümler(view) ve görünüm gruplarını(viewgroup) başka bir düzenin (hiyerarşik düzenleme) içine nasıl yerleştirebileceğimizi öğreneceğiz.
Birden çok düzeni, görünümü ve görünüm grubunu birlikte nasıl kullanabileceğimizi göstermek için aşağıda çok temel bir örneğimiz var.
Tasarım kodları layout XML dosyasında tanımlanması gerekiyor:
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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/renk1" tools:context="com.tasarimkodlama.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:id="@+id/l1" android:background="#8574f1"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TasarımKodlama" android:textAllCaps="true" android:textSize="30dp" android:textColor="#FFFFFFFF"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Android" android:textAllCaps="true" android:textSize="40dp" android:textColor="#FFFFFF"/> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_below="@id/l1" android:background="#1dc7ae" android:id="@+id/l2"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TASARIM" android:textAllCaps="true" android:textSize="30dp" android:textColor="#FFFFFF" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" KODLAMA" android:textAllCaps="true" android:textSize="30dp" android:textColor="#FFFFFF" /> </LinearLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/l2" android:background="#FFFFFF" > <Button android:id="@+id/b1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:backgroundTint="#1dc7ae" android:text="BTN 1" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="BTN 1" android:layout_toRightOf="@id/b1" android:id="@+id/b2" android:backgroundTint="#1dc7ae" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="BTN 1" android:layout_below="@id/b1" android:id="@+id/b3" android:backgroundTint="#1dc7ae" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="BTN 1" android:layout_below="@id/b2" android:layout_toRightOf="@id/b3" android:backgroundTint="#1dc7ae" /> </RelativeLayout> </RelativeLayout> |
Çıktı:
- Yukarıdaki UI tasarımında,
RelativeLayoutolan bir root öğemiz var. Bu, ister düzen ister görünüm olsun, tüm alt öğelerinin göreli bir şekilde düzenleneceği anlamına gelir. Bu nedenle root düzenimizi dikkatli bir şekilde seçmek çok önemlidir. - Ardından, yönü dikey olarak ayarlanmış bir
LinearLayoutvar. Bu, buLinearLayoutiçindeki tüm öğelerin dikey(vertical) bir biçimde düzenleneceği anlamına gelir. - Ardından, yönü yatay(horizantal) olarak ayarlanmış başka bir
LinearLayoutvar. Böylece, gördüğünüz gibi, bir root düzeninin içine yerleştirilmiş farklı düzenlere sahip olabiliriz. - Ardından, root
RelativeLayoutiçine yerleştirilmiş başka birRelativeLayoutvar. Bu RelativeLayout, içinde birbirine göreli bir şekilde düzenlenmiş 4 buton içerir. - Unutmayın, tüm bu düzenler
birRelativeLayoutiçine yerleştirilir. Böylece, tüm bu düzenler birbirine göredir.
Android, kullanıcı arabirimini tasarlamanın çok yapılandırılmış ve genişletilebilir bir yolunu sunar. Artık çeşitli düzenleri, görünümleri ve görünüm gruplarını nasıl kullanacağınızı anladığınıza göre, uygulamanız için harika UI ekranları tasarlamaya devam ediyoruz.
Daha fazla Android içeriği için Android Dersleri yazısını inceleyebilirsiniz.
1 Yorum