Görünümlerdeki düzenler
Düzen, uygulamanızdaki kullanıcı arayüzünün yapısını tanımlar. Örneğin:
activity. Tüm öğeler
düzen, hiyerarşik
View
ve
ViewGroup
nesneler'i tıklayın. View
, genellikle kullanıcının görebileceği ve
yardımcı olur. ViewGroup
, kullanıcının kimliğini
View
ve diğer ViewGroup
için düzen yapısı
nesneler'i tıklayın.
![](https://developer.android.google.cn/static/images/viewgroup_2x.png?authuser=0000&hl=tr)
View
nesneleri genellikle widget'lar olarak adlandırılır ve
birçok alt sınıf bulunur, örneğin
Button
veya
TextView
. İlgili içeriği oluşturmak için kullanılan
ViewGroup
nesneleri genellikle düzen olarak adlandırılır ve bir veya daha fazla olabilir
farklı bir düzen yapısı sağlayan çeşitli türlerde
LinearLayout
veya
ConstraintLayout
.
Bir düzeni iki şekilde belirtebilirsiniz:
- XML olarak kullanıcı arayüzü öğeleri bildirin. Android basit bir XML dosyası sunar.
View
sınıflarına ve alt sınıflara karşılık gelen terimlerde örneğin widget'ları ve düzenleri kullanabilirsiniz. Android Studio'nun XML'nizi oluşturmak için Düzen Düzenleyici bir sayfa düzenine sahip olmalıdır. - Çalışma zamanında düzen öğelerini örneklendirin. Uygulamanız şunları oluşturabilir:
View
veViewGroup
nesneleri alıp bunları özelliklerini programatik olarak sağlar.
Kullanıcı arayüzünüzü XML olarak tanımlayarak uygulamanızın sunumunu diğerlerinden ayırabilirsiniz. ve bunun davranışını kontrol eden kod. XML dosyalarını kullanmak Farklı ekran boyutları ve yönleri için farklı düzenler sağlar. Bu bu bölümde Farklı ekranları destekle boyutları altında bulabilirsiniz.
Android çerçevesi, size aşağıdakilerden birini veya her ikisini birden kullanma esnekliği sağlar: bu yöntemleri kullanabilirsiniz. Örneğin, uygulamanızın ve çalışma zamanında düzeni değiştirin.
XML dosyasını yazma
Android'in XML sözlüğünü kullanarak kullanıcı arayüzü düzenlerini ve HTML'de web sayfaları oluşturduğunuz gibi, içerdikleri ekran öğelerini de içeren bir şema kullanabilirsiniz.
Her düzen dosyası tam olarak bir kök öğe içermelidir ve bu kök öğe
View
veya ViewGroup
nesne. Kökü tanımladıktan sonra
öğesini bir öğe haline getirmek için
düzeninizi tanımlayan bir View
hiyerarşisini kademeli olarak oluşturun. Örneğin,
örnek olarak aşağıdaki gibi dikey LinearLayout
kullanan bir XML düzeni
TextView
ve Button
tutun:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a TextView" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a Button" /> </LinearLayout>
Düzeninizi XML'de bildirdikten sonra
Android projenizin res/layout/
dosyasında .xml
uzantı
dizine eklemeniz gerekir.
Düzen XML dosyasının söz dizimi hakkında daha fazla bilgi için bkz. Düzen kaynağı.
XML kaynağını yükleme
Uygulamanızı derlediğinizde, her XML düzen dosyası
View
kaynak. Uygulamanızın
Activity.onCreate()
.
geri çağırma uygulamasıdır. Bunu şu numarayı arayarak yapın:
setContentView()
,
şu şekilde düzen kaynağınıza referansı iletmelisiniz:
R.layout.layout_file_name
. Örneğin, XML dosyanız
düzen main_layout.xml
olarak kaydedildi, bunu cihazınız için yükleyin
Activity
:
Kotlin
fun onCreate(savedInstanceState: Bundle) { super.onCreate(savedInstanceState) setContentView(R.layout.main_layout) }
Java
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main_layout); }
Android çerçevesi, onCreate()
geri çağırma yöntemini
Activity
başlatıldığında Activity
. Daha fazla
daha fazla bilgi edinmek için
Giriş
etkinlikler ile ilgili daha fazla bilgi edinin.
Özellikler
Her View
ve ViewGroup
nesnesi kendi alanını destekler
özellikleri vardır. Bazı özellikler bir View
özelliğine özgüdür
nesnesini tanımlayın. Örneğin, TextView
, textSize
özelliğini gönderin. Ancak bu özellikler, herhangi bir View
tarafından da devralınır.
nesnelerden ibarettir. Bazıları tüm View
için ortak
kök View
sınıfından devralındıklarından (ör.
id
özelliği. Diğer özellikler düzen
parametreleri olarak değiştirin. Bunlar, belirli düzen yönlerini tanımlayan özelliklerdir
View
nesnesinin üst öğesi tarafından tanımlandığı şekilde
ViewGroup
nesne.
Kimlik
Herhangi bir View
nesnesi,
View
öğesini benzersiz şekilde tanımlar. Uygulama:
derlendiğinde, bu kimliğe tam sayı olarak başvurulur, ancak kimlik genellikle
id
özelliğinde bir dize olarak ayarlanır. Bu bir
XML özelliği tüm View
nesneleri için ortaktır ve
View
sınıf. Çok sık kullanıyorsunuz. Bir
XML etiketi aşağıdaki gibidir:
android:id="@+id/my_button"
Dizenin başındaki at simgesi (@)
XML ayrıştırıcısı, kimlik dizesinin geri kalanını ayrıştırıp genişletir ve bunu
bir kimlik kaynağıdır. Artı simgesi (+), bunun yeni bir kaynak adı olduğu anlamına gelir.
oluşturulması ve R.java
konumunda kaynaklarınıza eklenmesi gerekir
dosyası olarak kaydedebilirsiniz.
Android çerçevesi daha birçok kimlik kaynağı sunar. Bir
Android kaynak kimliği için artı simgesine ihtiyacınız yoktur ancak
android
paket ad alanını aşağıdaki gibidir:
android:id="@android:id/empty"
android
paketinin ad alanı,
yerel değil, android.R
kaynak sınıfından bir kimlik
kaynakları sınıfını kullanır.
Görünümler oluşturmak ve uygulamanızdan bunlara referans vermek için şu şekilde ekleyin:
- Düzen dosyasında bir görünüm tanımlayın ve bu görünüme aşağıdaki gibi benzersiz bir kimlik atayın:
şu örneği inceleyin:
<Button android:id="@+id/my_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/my_button_text"/>
- Görünüm nesnesinin bir örneğini oluşturun ve bunu düzenden yakalayın,
genellikle
onCreate()
. yöntemini çağırın:Kotlin
val myButton: Button = findViewById(R.id.my_button)
Java
Button myButton = (Button) findViewById(R.id.my_button);
Görünüm nesneleri için kimliklerin tanımlanması,
RelativeLayout
Göreli bir düzende, eşdüzey görünümler kendi düzenlerini başka bir öğeye göre tanımlayabilir
eşdüzey görünüm (eşdüzey görünüm)
Kimliğin tüm ağaç genelinde benzersiz olması gerekmez ancak benzersiz olanları gösterir. Çoğu zaman bütün bu nedenle mümkün olduğunda onu benzersiz kılmak en iyisidir.
Düzen parametreleri
layout_something
adlı XML düzen özellikleri
View
için uygun düzen parametrelerini
bulunduğu ViewGroup
.
Her ViewGroup
sınıfı,
ViewGroup.LayoutParams
.
Bu alt sınıf, her bir öğenin boyutunu ve konumunu tanımlayan mülk türlerini içerir.
alt öğe görünümünde olmalıdır. Şekil 2'de gösterildiği gibi, üst öğe
görünüm grubu, alt görünüm de dahil olmak üzere her alt görünüm için düzen parametrelerini tanımlar
görünüm grubu.
![](https://developer.android.google.cn/static/images/layoutparams.png?authuser=0000&hl=tr)
Her LayoutParams
alt sınıfın kendi ayar söz dizimi vardır
değerler. Her alt öğe bir LayoutParams
tanımlamalıdır.
üst öğesi için uygun olsa da, farklı bir model
LayoutParams
kendi çocukları için.
Tüm görünüm grupları, layout_width
kullanılarak bir genişlik ve yükseklik içerir
ve layout_height
ve her bir görünümün bunları tanımlamak için olması gerekir. Birçok
LayoutParams
isteğe bağlı kenar boşlukları ve kenarlıklar içerir.
Kesin ölçümlerle genişliği ve yüksekliği belirtebilirsiniz, ancak bunu belirtemezsiniz bunu sık sık yapmak istiyorsunuz. Çoğunlukla bu sabit değerlerden birini, genişlik veya yükseklik:
wrap_content
: görünümünüze kendi boyutunu boyutlarına yer verir.match_parent
: Görünümünüzün üst öğesi kadar büyük olmasını sağlar izin verir.
Genel olarak, aşağıdakileri içeren bir düzen genişliği ve yüksekliği belirtmenizi önermeyiz:
mutlak birimler (ör. pikseller) Daha iyi bir yaklaşım, göreceli ölçümleri kullanmak,
yoğunluktan bağımsız piksel birimleri (dp), wrap_content
veya
Çünkü match_parent
, uygulamanızın farklı cihazlarda
çeşitli ekran boyutlarına sahip. Kabul edilen ölçüm türleri aşağıda açıklanmıştır:
Düzen kaynağı.
Düzen konumu
Görünümler dikdörtgen geometriye sahiptir. Bir çift left ve top koordinatları ile iki boyutlu, ve yüksekliği belirtmelisiniz. Konum ve boyut birimi pikseldir.
Bir görünümün konumunu, yukarıdaki yöntemleri çağırarak öğrenebilirsiniz.
getLeft()
.
ve
getTop()
.
İlki, temsil edilen dikdörtgenin sol (x) koordinatını döndürür
görünüm. İkincisi, dikdörtgenin üst (y) koordinatını döndürür
temsil eder. Bu yöntemler görünümün konumunu
üst öğesi olabilir. Örneğin, getLeft()
değeri 20 değerini döndürdüğünde, bu değer
görünüm doğrudan kenarının sol kenarının 20 piksel sağında bulunur
üst öğesidir.
Ayrıca, gereksiz hesaplamaları önlemek için kolaylık yöntemleri de vardır:
yani
getRight()
.
ve
getBottom()
.
Bu yöntemler, her bir kenarın sağ ve alt kenarlarının koordinatlarını
Dikdörtgen şeklinde görünür. Örneğin, getRight()
işlevinin çağrılması
şu hesaplamaya benzer: getLeft() + getWidth()
.
Boyut, dolgu ve kenar boşlukları
Görünümün boyutu, genişlik ve yükseklikle ifade edilir. Bir görünümde iki çift bulunur farklı genişlik ve yükseklik değerlerine yer verir.
İlk çift, ölçülen genişlik ve
ölçülen yükseklik. Bu boyutlar, bir görünümün ne kadar büyük
üst öğesi dahilindedir. Ölçülen boyutları,
getMeasuredWidth()
.
ve
getMeasuredHeight()
.
İkinci çift, width ve height olarak bilinir veya bazen
çizim genişliği ve çizim yüksekliği. Bu boyutlar,
ekranda, çizim zamanında ve düzenden sonraki gerçek boyutu. Bu
değerleri, ölçülen genişlik ve yükseklikten farklı olabilir ancak olmak zorunda değildir. Siz
fonksiyonunu çağırarak genişliği ve yüksekliği alabilir
getWidth()
.
ve
getHeight()
.
Görünümler, boyutlarını ölçmek için dolgularını dikkate alır. Dolgu
değeri, görünümün sol, üst, sağ ve alt bölümleri için piksel cinsinden ifade edilir.
Görünümün içeriğini belirli sayıda
piksel. Örneğin, ikilik sol dolgu, görünümün içeriğini iki piksel iter
tıklayın. Dolguyu şurayı kullanarak ayarlayabilirsiniz:
setPadding(int, int, int, int)
.
yöntemini çağırın ve bunu
getPaddingLeft()
,
getPaddingTop()
,
getPaddingRight()
,
ve
getPaddingBottom()
.
Görünümler dolgu tanımlayabilir, ancak kenar boşluklarını desteklemez. Ancak,
görünüm grupları kenar boşluklarını destekler. Görüntüleyin
ViewGroup
ve
ViewGroup.MarginLayoutParams
konulu videomuzu izleyin.
Boyutlar hakkında daha fazla bilgi için Boyut.
Kenar boşluklarını ve dolguyu programatik olarak ayarlamanın yanı sıra, bunları XML düzenlerinizde aşağıdaki örnekte gösterildiği gibi:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:padding="8dp" android:text="Hello, I am a TextView" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:paddingBottom="4dp" android:paddingEnd="8dp" android:paddingStart="8dp" android:paddingTop="4dp" android:text="Hello, I am a Button" /> </LinearLayout>
Yukarıdaki örnekte, uygulanan kenar boşluğu ve dolgu gösterilmektedir. İlgili içeriği oluşturmak için kullanılan
TextView
, her yere tek tip kenar boşlukları ve dolgu uygulanmış ve
Button
, bunları farklı cihazlara bağımsız olarak nasıl uygulayabileceğinizi
tıklayın.
Genel düzenler
ViewGroup
sınıfının her alt sınıfı,
iç içe yerleştirdiğiniz görünümleri görüntüler. En esnek düzen türü ve
sağlamak için en iyi araçları sağlayan
bir feed'dir.
ConstraintLayout
Aşağıda, Android'de yerleşik olarak bulunan bazı yaygın düzen türlerini görebilirsiniz: platformu.
![](https://developer.android.google.cn/static/images/ui/linearlayout-small.png?authuser=0000&hl=tr)
Alt öğelerini tek bir yatay veya dikey satır halinde düzenler ve pencerenin uzunluğu ekranın uzunluğunu aşıyorsa kaydırma çubuğu görüntülenir.
Dinamik listeler oluşturma
Düzeninizin içeriği dinamik olduğunda veya önceden belirlenmediğinde,
kullan
RecyclerView
veya
alt sınıfı
AdapterView
.
RecyclerView
, bellek kullandığı için genellikle daha iyi seçenektir
AdapterView
ile karşılaştırıldığında çok daha verimli.
RecyclerView
ve
AdapterView
şunları içerir:
RecyclerView
daha fazla imkan sunar
bu seçeneği
özel bir
düzen yöneticisini kullanabilirsiniz.
Bağdaştırıcı görünümünü verilerle doldur
Bir
AdapterView
.
ListView
gibi
veya
GridView
AdapterView
örneğini bir
Adapter
,
Bu, harici bir kaynaktan veri getirir ve bir View
oluşturur
temsil eder.
Android, Adapter
için yararlı olabilecek çeşitli alt sınıflar sunar
almak ve bir uygulama için bina görünümleri oluşturmak üzere
AdapterView
. En yaygın iki bağdaştırıcı şunlardır:
ArrayAdapter
- Veri kaynağınız diziyse bu bağdaştırıcıyı kullanın. Varsayılan olarak
ArrayAdapter
, şunu çağırarak her dizi öğesi için bir görünüm oluşturur:toString()
ve içerikleriTextView
içine yerleştiriyoruz.Örneğin,
ListView
, şunu kullanarak yeni birArrayAdapter
başlatın: kurucusu kullanabilirsiniz:Kotlin
val adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, myStringArray)
Java
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, myStringArray);
Bu kurucunun bağımsız değişkenleri şunlardır:
- Uygulamanız
Context
. - Şuradaki her dize için bir
TextView
içeren düzen dizi - Dize dizisi
Ardından şu numarayı arayın:
setAdapter()
.ListView
cihazınızda:Kotlin
val listView: ListView = findViewById(R.id.listview) listView.adapter = adapter
Java
ListView listView = (ListView) findViewById(R.id.listview); listView.setAdapter(adapter);
Her bir öğenin görünümünü özelleştirmek için Dizinizdeki nesneler için
toString()
yöntemi. Veya oluşturmak için her öğe için bir görünümden farklıTextView
(örneğin, birImageView
her dizi öğesi için:ArrayAdapter
sınıfını ve geçersiz kılmagetView()
tuşuna basarak her öğe için istediğiniz görünüm türünü döndürün. - Uygulamanız
SimpleCursorAdapter
- Verileriniz bir
Cursor
.SimpleCursorAdapter
kullanılırken kullanılacak düzeni belirtin her bir satıra ve bu sütundaCursor
İstediğiniz düzenin görünümlerine eklenmesini istediğinizCursor
. Örneğin, kişilerin adlarını ve telefon numaralarını içeren bir liste oluşturmakCursor
değeri döndüren bir sorgu gerçekleştirebilirsiniz Her kişi için bir satır, adlar ve sayılar için de sütunlar içeren bir satır öğesi ekleyin. Siz ardından Her sonuç ve bir tam sayı için düzende olmasını istediğinizCursor
her sütunun olması gereken karşılık gelen görünümleri belirten dizi bu yerin tarihi:Kotlin
val fromColumns = arrayOf(ContactsContract.Data.DISPLAY_NAME, ContactsContract.CommonDataKinds.Phone.NUMBER) val toViews = intArrayOf(R.id.display_name, R.id.phone_number)
Java
String[] fromColumns = {ContactsContract.Data.DISPLAY_NAME, ContactsContract.CommonDataKinds.Phone.NUMBER}; int[] toViews = {R.id.display_name, R.id.phone_number};
SimpleCursorAdapter
öğesini örneklendirdiğinizde her sonuç için kullanılacak düzen;Cursor
sonuçları ve şu iki dizi:Kotlin
val adapter = SimpleCursorAdapter(this, R.layout.person_name_and_number, cursor, fromColumns, toViews, 0) val listView = getListView() listView.adapter = adapter
Java
SimpleCursorAdapter adapter = new SimpleCursorAdapter(this, R.layout.person_name_and_number, cursor, fromColumns, toViews, 0); ListView listView = getListView(); listView.setAdapter(adapter);
Daha sonra
SimpleCursorAdapter
, düzeni kullanarak her birCursor
öğesini İlgilitoViews
öğesinefromColumns
öğe ekleyin görünüm.
Uygulamanızın kullanım ömrü içinde, uygulamanızın temelini oluşturan verileri
bağdaştırıcınız tarafından okunur,
notifyDataSetChanged()
Bu işlem, ekli görünüme verilerin değiştirildiğini ve yenilendiğini bildirir
kendisi.
Tıklama etkinliklerini yönetme
AdapterView
içinde her öğedeki tıklama etkinliklerine yanıt verebilirsiniz
şunu uygulayarak
AdapterView.OnItemClickListener
kullanır. Örnek:
Kotlin
listView.onItemClickListener = AdapterView.OnItemClickListener { parent, view, position, id -> // Do something in response to the click. }
Java
// Create a message handling object as an anonymous class. private OnItemClickListener messageClickedHandler = new OnItemClickListener() { public void onItemClick(AdapterView parent, View v, int position, long id) { // Do something in response to the click. } }; listView.setOnItemClickListener(messageClickedHandler);
Ek kaynaklar
Düzenlerin nasıl kullanıldığını görmek için: Yayçiçeği demo uygulamasını ziyaret edin.