Özel görünüm bileşenleri oluşturma

"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.

Android, kullanıcı arayüzünüzü oluşturmak için bileşenlere ayrılmış gelişmiş ve güçlü bir model sunar. temel düzen sınıflarını View ve ViewGroup. Platformda çeşitli önceden oluşturulmuş View ve ViewGroup alt sınıflarından oluşur. Bunlara widget'lar ve oluşturmak için kullanabilirsiniz.

Kullanılabilir widget'ların kısmi bir listesinde Button bulunur, TextView, EditText, ListView, CheckBox, RadioButton, Gallery, Spinner ve daha özel bir amaca AutoCompleteTextView, ImageSwitcher ve TextSwitcher.

Mevcut düzenler arasında LinearLayout, FrameLayout, RelativeLayout, ve diğerleri. Daha fazla örnek için bkz. Ortak düzenler.

Önceden oluşturulmuş widget'lardan veya düzenlerden hiçbiri ihtiyaçlarınızı karşılamıyorsa kendi widget'ınızı oluşturabilirsiniz View alt sınıf. Mevcut bir widget'ta veya sadece belirli bir düzeni kullanıyorsanız widget'ı veya düzeni alt sınıflara ayırabilir ve yöntemlerini geçersiz kılabilirsiniz.

Kendi View alt sınıflarınızı oluşturmak, görünüm ve yapılandırma üzerinde hassas kontrole sahip olmanızı sağlar. işlevini kullanın. Özel görünümlerle elde edebileceğiniz kontrole dair fikir edinmek için aşağıda bu verilerle yapabileceklerinizden bazıları şunlardır:

  • Tamamen özel olarak oluşturulmuş bir View türü oluşturabilirsiniz. Örneğin "birim kontrolü" 2D grafikler kullanılarak oluşturulan, analog elektronik kontrole benzeyen düğme.
  • View bileşen grubunu yeni tek bir bileşende birleştirebilirsiniz. Örneğin, açılan kutu (pop-up listesi ve serbest girişli metin alanının bir birleşimi), çift bölmeli seçici kontrolü (her birinde yeniden atama yapabileceğiniz bir liste içeren sol ve sağ bölme) hangi öğenin hangi listede olduğunu belirtir) vb.
  • Bir EditText bileşeninin ekranda oluşturulma şeklini geçersiz kılabilirsiniz. İlgili içeriği oluşturmak için kullanılan NotePad örnek uygulaması, satırlı bir not defteri sayfası oluşturmak için bunu iyi bir efekt uygulamak için kullanır.
  • Tuşa basma gibi diğer etkinlikleri yakalayabilir ve bunları özel bir şekilde işleyebilirsiniz (örneğin, bir durum söz konusudur.

Aşağıdaki bölümlerde, özel görünümlerin nasıl oluşturulacağı ve bunları uygulamanızda nasıl kullanacağınız açıklanmaktadır. Örneğin, daha fazla bilgi edinmek için View sınıf.

Temel yaklaşım

Kendi View öğenizi oluşturmak için bilmeniz gerekenlere dair genel bilgileri aşağıda bulabilirsiniz bileşenler:

  1. Mevcut bir View sınıfını veya alt sınıfını kendi sınıfınızla genişletin.
  2. Üst sınıftaki yöntemlerden bazılarını geçersiz kılın. Geçersiz kılma üst sınıf yöntemleri on - örneğin, onDraw(), onMeasure(), ve onKeyDown(). Bu, şu konumlardaki on etkinliklerine benzer: Activity veya ListActivity yaşam döngüsü ve diğer işlev kancaları için geçersiz kılma yöntemi.
  3. Yeni uzantı sınıfınızı kullanın. Tamamladığınızda temel aldığı görünümü gösterir.
ziyaret edin.

Tamamen özelleştirilmiş bileşenler

İstediğiniz gibi görünen tamamen özelleştirilmiş grafik bileşenleri gerekir. Belki eski bir analog göstergeye ya da şarkının eşlik edebileceği metinlere benzeyen bir grafik VU ölçer istiyorsunuz Karaoke makinesiyle birlikte şarkı söylerken kelimelerin üzerinde zıplayan bir top hareket ediyor. Belki nasıl bir araya getirirseniz birleştirin yerleşik bileşenlerin yapamayacağı bir şeyi.

Neyse ki yalnızca sınırlı sayıda olmak üzere istediğiniz gibi görünen ve davranan bileşenler oluşturabilirsiniz. ekran boyutu ve mevcut işlem gücü gibi faktörlere göre değişir. uygulamanızın, masaüstünüzden önemli ölçüde daha düşük güce sahip bir cihazda çalışması gerekebilir. bir iş istasyonu olabilir.

Tamamen özelleştirilmiş bir bileşen oluşturmak için aşağıdakileri göz önünde bulundurun:

  • Genişletmek için en genel görünüm View görünümüdür, bu nedenle genellikle yeni süper bileşeninizi oluşturmak için.
  • XML'den özellik ve parametreler alabilen bir oluşturucu sağlayabilir ve VUmetrenin rengi ve aralığı gibi kendi özellik ve parametrelerinizi iğnenin genişliği ve sönümlemesi.
  • Muhtemelen kendi etkinlik işleyicilerinizi, mülk erişimcilerinizi ve değiştiricilerinizi oluşturmanın yanı sıra daha gelişmiş bir davranış şekli oluşturabilirsiniz.
  • Neredeyse kesinlikle onMeasure() politikasını geçersiz kılmak istiyorsunuz ve ayrıca şunları da yapmanız gerekiyor: bileşenin bir şey göstermesini istiyorsanız onDraw() politikasını geçersiz kılın. Her ikisinde de varsayılan davranıştır, varsayılan onDraw() hiçbir şey yapmaz ve varsayılan onMeasure() boyutu her zaman 100x100 olarak ayarlar ve bu boyutu muhtemelen istemezsiniz.
  • Ayrıca, diğer on yöntemlerini de gerektiği gibi geçersiz kılabilirsiniz.

onDraw() ve onMeasure() işlevini genişletin

onDraw() yöntemi, Kullanabileceğiniz Canvas istediğiniz her şeyi uygulayabilirsiniz: 2D grafikler, diğer standart veya özel bileşenler, stil içeren metin veya herhangi bir şeyi düşünmelisiniz.

onMeasure() biraz daha karmaşık. onMeasure() çok önemli bir parça arasındaki oluşturma sözleşmesinin önemli bir parçasıdır. onMeasure() olmalıdır içeren parçalarının ölçümlerini verimli ve doğru bir şekilde raporlamak için geçersiz kılınır. Bu üst sınırın zorunlulukları nedeniyle biraz daha karmaşık hale gelir. Bu gereksinimler, onMeasure() yöntemini kullanarak ve Ayarlandıktan sonra ölçülen genişlik ve yükseklikle setMeasuredDimension() yöntemi hesaplanır. Bu yöntemi geçersiz kılınmış bir onMeasure() yönteminden çağırmazsanız ölçüm zamanında bir istisna oluşturur.

Genel olarak onMeasure() uygulaması aşağıdaki gibi görünür:

  • Geçersiz kılınan onMeasure() yöntemi, genişlik ve yükseklikle çağrılır (genişlik ve yükseklik kısıtlamalarına ilişkin gereksinimler olarak kabul edilen) ölçümler için benzersiz bir araçtır. widthMeasureSpec heightMeasureSpec parametrelerinden ikisi de boyutları temsil eden tam sayı kodlarıdır. Aynı projenin türü için Bu spesifikasyonların gerektirebileceği kısıtlamalar, View.onMeasure(int, int). Bu referans belgeleri de ölçüm işleminin tamamını açıklar.
  • Bileşeninizin onMeasure() yöntemi, bir genişlik ve yükseklik ölçümü hesaplar, Bunlar bileşeni oluşturmak için gereklidir. Verilen spesifikasyonlara uymaya çalışmalıdır. ancak bu rakamı aşabilir. Bu durumda ebeveyn, aşağıdakiler de dahil olmak üzere ne yapılacağını seçebilir: kırpma, kaydırma, istisnaları feshetme veya onMeasure() tarafından tekrar denemesini isteme farklı ölçüm özelliklerine sahip olabilir.
  • Genişlik ve yükseklik hesaplandığında, setMeasuredDimension(int width, int height) yöntemi ölçümler. Bu işlemin sağlanmaması istisnai bir durumla sonuçlanır.

Çerçevenin görünümlerde gerektirdiği diğer standart yöntemlerin bir özetini burada bulabilirsiniz:

Kategori Yöntemler Açıklama
içerik üretimi Markalar Görünüm koddan oluşturulduğunda çağrılan bir oluşturucu biçimi vardır ve görünüm bir düzen dosyasından şişirildiğinde çağrılan bir form. İkinci form düzen dosyasında tanımlanan özellikleri ayrıştırır ve uygular.
onFinishInflate() Bir görünümden ve tüm alt öğeleri XML'den şişirildikten sonra çağrılır.
Düzen onMeasure(int, int) Bu görünüm ve tüm görünüm için boyut gereksinimlerini belirlemek üzere için bir fırsattır.
onLayout(boolean, int, int, int, int) Bu görünümün tüm alt öğelerine bir boyut ve konum ataması gerektiğinde çağrılır.
onSizeChanged(int, int, int, int) Bu görünümün boyutu değiştirildiğinde çağrılır.
Çizim onDraw(Canvas) Görünümün içeriğini oluşturması gerektiğinde çağrılır.
Etkinlik işleme onKeyDown(int, KeyEvent) Bir tuş etkinliği gerçekleştiğinde çağrılır.
onKeyUp(int, KeyEvent) Bir tuş etkinliği gerçekleştiğinde çağrılır.
onTrackballEvent(MotionEvent) Bir iztopu hareket etkinliği gerçekleştiğinde çağrılır.
onTouchEvent(MotionEvent) Dokunmatik ekran hareketiyle ilgili bir etkinlik gerçekleştiğinde çağrılır.
Odaklanma onFocusChanged(boolean, int, Rect) Görüntü odağı toplandığında veya kaybettiğinde çağrılır.
onWindowFocusChanged(boolean) Görünümü içeren pencere odaklandığında veya kaybolduğunda çağrılır.
Ekleniyor onAttachedToWindow() Görünüm bir pencereye eklendiğinde çağrılır.
onDetachedFromWindow() Görünüm penceresinden ayrıldığında çağrılır.
onWindowVisibilityChanged(int) Görünümü içeren pencerenin görünürlüğü değiştirildiğinde çağrılır.

Bileşik kontroller

Tamamen özelleştirilmiş bir bileşen oluşturmak yerine, bir grup mevcut kontrolden oluşan yeniden kullanılabilir bir bileşeni bir araya getirir ve ardından bir bileşik oluşturur. bileşen (veya birleşik kontrol) en iyi seçenek olabilir. Özetle, bu program birkaç proje daha atomik kontrollerin veya görünümlerin, tek bir şey olarak değerlendirilebilecek mantıksal bir öğe grubuna dönüştürmesi. Örneğin, birleşik kutu tek satırlık bir EditText alanının kombinasyonu olabilir ve yanında pop-up liste bulunan bir düğme var. Kullanıcı düğmeye dokunur ve içinden bir şey seçerse Listeyi tıkladığında EditText alanını doldurur ancak kullanıcılar bir şeyler de yazabilir doğrudan EditText bölümüne gönderebilirsiniz.

Android'de bunu yapmak için kullanılabilen iki görünüm daha vardır: Spinner ve AutoCompleteTextView. Ne olursa olsun, bu birleşik kutu kavramı iyi bir örnektir.

Bir bileşik bileşen oluşturmak için aşağıdakileri yapın:

  • Activity ile olduğu gibi, bildirim temelli (XML tabanlı) yaklaşımdan birini kullanın ya da bunları kodunuzdan programatik olarak iç içe yerleştirebilirsiniz. İlgili içeriği oluşturmak için kullanılan her zamanki başlangıç noktası bir tür Layout olduğu için, Layout Karma kutularda LinearLayout öğesini birlikte kullanabilirsiniz. yatay yönde. Başka düzenleri de içine yerleştirebilirsiniz. Böylece, birleşik bileşen karmaşık ve yapılandırılmış olabilir.
  • Yeni sınıfın oluşturucusunda, üst sınıfın beklediği parametreleri alın ve üst sınıf oluşturucuya iletmenize yardımcı olur. Ardından, yeni görünüm oluşturmak için yeni bileşeninizin içinde. Burada EditText alanını ve pop-up listesi. XML'e kendi özelliklerinizi ve parametrelerinizi oluşturup kullanabileceğini belirtir.
  • İsterseniz, içerilen görünümlerinizin oluşturabileceği etkinlikler için işleyiciler oluşturabilirsiniz. Örnek olarak işleyicisinin içeriğini güncellemek için liste öğesi tıklama işleyicisi Liste seçimi yapılırsa EditText.
  • Dilerseniz erişimciler ve değiştiricilerle kendi mülklerinizi oluşturabilirsiniz. Örneğin, EditText değeri başlangıçta bileşende ayarlanır ve gerekir.
  • İsteğe bağlı olarak, onDraw() ve onMeasure() değerlerini geçersiz kılın. Bu genellikle Düzenin muhtemelen düzgün çalışacak varsayılan davranışı olduğundan bir Layout genişletilir.
  • İsteğe bağlı olarak, diğer on yöntemlerini (ör. onKeyDown()) geçersiz kılın (örneğin, belirli bir belirli bir tuşa dokunulduğunda birleşik kutunun pop-up listesindeki varsayılan değerleri.

Özel bir kontrole temel olarak Layout kullanmanın avantajları vardır. aşağıdakiler dahil:

  • Düzeni, bildirim temelli XML dosyalarını kullanarak bir etkinlik ekranında olduğu gibi belirtebilirsiniz. veya görünümleri programatik olarak oluşturup kodunuzdaki düzene yerleştirebilirsiniz.
  • onDraw() ve onMeasure() yöntemlerinin yanı sıra diğer yöntemlerin çoğu on yöntem uygun davranışa sahip olduğundan bunları geçersiz kılmanız gerekmez.
  • Hızlıca rastgele karmaşık bileşik görünümler oluşturabilir ve bunları bir tek bileşenli.

Mevcut bir görünüm türünü değiştirme

İstediğinize benzer bir bileşen varsa bu bileşeni genişletip geçersiz kılabilirsiniz. karar vermelisiniz. Yapacağınız tüm işlemleri, YouTube'da yer alan tamamen bileşeni görebilirsiniz, ancak View hiyerarşisinde daha özel bir sınıfla başlayarak istediğiniz şeyi ücretsiz yapan bazı davranışlarda bulunun.

Örneğin, Not Defteri örnek uygulama, Android platformunu kullanmanın birçok yönünü gösteriyor. Bunlardan biri de Satırlı not defteri oluşturmak için EditText görünümünü kullanın. Bu mükemmel bir örnek değildir ve Bunu yapmak da değişebilir ama ilkelerin bir göstergesi.

Henüz yapmadıysanız NotePad örneğini Android Studio'ya aktarın veya şurada: sağlanan bağlantıyı kullanabilirsiniz. Özellikle, LinedEditText tanımına bakın NoteEditor.java dosyası olarak kaydedebilirsiniz.

Bu dosyada dikkat edilmesi gereken bazı noktalar şunlardır:

  1. Tanım

    Sınıf aşağıdaki satırla tanımlanır:
    public static class LinedEditText extends EditText

    LinedEditText, NoteEditor içinde bir iç sınıf olarak tanımlanır ancak herkese açık olduğu için NoteEditor.LinedEditText olarak erişilebilir NoteEditor sınıfının dışından.

    Ayrıca, LinedEditText static değeridir, yani "sentetik yöntemler" olarak adlandırılan üst sınıftaki verilere erişmesini sağlar. Bu demek oluyor ki NoteEditor ile yakından alakalı bir şeyden ziyade ayrı bir sınıf gibi davranır. Bu yöntem sayesinde, ana makine içinden durum erişimine ihtiyaç duymayan iç sınıflar dış sınıf. Oluşturulan sınıfı küçük tutar ve diğer sınıflardan kolayca kullanılabilmesini sağlar. sınıflar.

    LinedEditText, özelleştirilebilecek görünüm olan EditText öğesini genişletir bu bilgilerden yararlanabilirsiniz. Bitirdiğinizde yeni sınıf, normal EditText yerine geçebilir görünüm.

  2. Sınıf başlatma

    Her zaman olduğu gibi, ilk olarak süper çağrılır. Bu, varsayılan bir oluşturucu değildir ancak parametre haline getirilmiştir. Şu durumda EditText bu parametrelerle oluşturulur: büyütülebilir. Dolayısıyla, oluşturucu bunları alıp üst sınıf kurucusu da vardır.

  3. Geçersiz kılınan yöntemler

    Bu örnek yalnızca onDraw() yöntemini geçersiz kılar ancak bunu geçersiz kılmanız gerekebilir kendi özel bileşenlerinizi oluştururken diğerlerini kullanabilirsiniz.

    Bu örnekte, onDraw() yöntemini geçersiz kılmak, aşağıdaki örnekteki mavi çizgileri boyamanıza olanak tanır: EditText görünüm tuvali. Tuval, geçersiz kılınan onDraw() yöntemini çağırın. super.onDraw() yöntemi, yöntemi sona erer. Üst sınıf yöntemi çağrılmalıdır. Bu durumda, sonda çağırın istediğiniz çizgileri çiziyorsunuz.

  4. Özel bileşen

    Artık özel bileşeniniz var, ancak nasıl kullanabilirsiniz? NotePad örneğinde, özel bileşen doğrudan bildirim temelli düzenden kullanılır, bu nedenle note_editor.xml res/layout klasör:

    <view xmlns:android="http://schemas.android.com/apk/res/android"
        class="com.example.android.notepad.NoteEditor$LinedEditText"
        android:id="@+id/note"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/transparent"
        android:padding="5dp"
        android:scrollbars="vertical"
        android:fadingEdge="vertical"
        android:gravity="top"
        android:textSize="22sp"
        android:capitalize="sentences"
    />
    

    Özel bileşen XML'de genel bir görünüm olarak oluşturulur ve sınıf belirtilir tam paketi kullanın. Tanımladığınız iç sınıfa, NoteEditor$LinedEditText gösterimi, içsel tanımlamayı belirtmenin standart bir yoludur. derslerini paylaşacağım.

    Özel görünüm bileşeniniz iç sınıf olarak tanımlanmamışsa görünümü tanımlayabilirsiniz bileşenini XML öğe adıyla değiştirin ve class özelliğini hariç tutun. Örneğin, örnek:

    <com.example.android.notepad.LinedEditText
      id="@+id/note"
      ... />
    

    LinedEditText sınıfının artık ayrı bir sınıf dosyası olduğuna dikkat edin. sınıfı NoteEditor sınıfına iç içe yerleştirilmişse bu teknik çalışmaz.

    Tanımdaki diğer özellik ve parametreler, özel bileşen oluşturucusuna dahil edilir ve daha sonra, EditText oluşturucuya geçirilir. bunlar, EditText görünümü için kullandığınız parametrelerle aynıdır. Bu parametrelerinizi de kullanabilirsiniz.

Özel bileşenler oluşturmak, yalnızca ihtiyacınız kadar karmaşıktır.

Daha gelişmiş bir bileşen daha da fazla on yöntemini geçersiz kılabilir ve yardımcı yöntemler kullanarak özelliklerini ve davranışlarını önemli ölçüde özelleştirir. Tek sınır ve bileşenin ne yapması gerektiğini anlamanız gerekir.