Görünümlerdeki düzenler

"Oluştur" yöntemini deneyin
Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Compose'da düzenlerle nasıl çalışacağınızı öğrenin.
Oluşturma düzeniyle ilgili temel bilgileri öğrenin → 'nı inceleyin.

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.

Şekil 1. Bir görünüm hiyerarşisini gösteren Kullanıcı arayüzü düzeni.

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 ve ViewGroup 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:

  1. 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"/>
  2. 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.

Şekil 2. Düzen içeren görünüm hiyerarşisi görselleştirme her görünümle ilişkilendirilen parametreleri içerir.

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.

Doğrusal düzen oluşturma

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.

WebView'da web uygulamaları oluşturma

Web sayfalarını görüntüler.

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:

Liste

Tek sütunlu bir kayan liste görüntüler.

Izgara

Sütunlar ve satırlardan oluşan kayan bir ızgara görüntüler.

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çerikleri TextView içine yerleştiriyoruz.

Örneğin, ListView, şunu kullanarak yeni bir ArrayAdapter 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, bir ImageView her dizi öğesi için: ArrayAdapter sınıfını ve geçersiz kılma getView() tuşuna basarak her öğe için istediğiniz görünüm türünü döndürün.

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ğiniz Cursor. Örneğin, kişilerin adlarını ve telefon numaralarını içeren bir liste oluşturmak Cursor 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ğiniz Cursor 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 bir Cursor öğesini İlgili toViews öğesine fromColumns öğ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.