Android Custom Component

Merhabalar bu yazımda farklı android uygulamalarımızda veya bir proje içerisinde birden fazla ekranda kullandığımız benzer tasarıma sahip xml elementimizi, bir custom component haline getirip dilediğimiz ekranda veya yeni başlayacağımız bir projede dilediğimiz şekilde nasıl kullanacağımızı anlatacağım.

Component’imizi Tasarlayalım

Bu yazıda farklı ekranlarda aynı tasarıma sahip fakat içerisinde bulunan text değerlerinin değiştiği bir component’i tasarlayacağız bunun için res klasörü altında yer alan layout klasörüne yeni bir layout resource file oluşturacağımızı aktarıp component’imizin view’ını içerecek olan bu dosyaya bir isim veriyoruz.

Tasarladığımız bu component’te yer alan isim,cinsiyet,şehir,ilçe ve telefon numarası gibi alanlar farklı ekranlarda değişken değerlere sahip olacağı için component’imizin bu alanlarına özel res/values/attrs.xml dosyasına bir declare-styleable nesnesi oluşturuyoruz.

Component’imizin tasarımı

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/clMain"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/spacing_xl"
    android:layout_marginRight="@dimen/spacing_xl"
    android:layout_marginBottom="@dimen/spacing_m"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="17dp"
        android:layout_weight="11"
        android:orientation="vertical"
        app:layout_constraintEnd_toStartOf="@+id/imageView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/txtPersonName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/spacing_m"
            android:layout_marginTop="@dimen/spacing_m"
            android:visibility="gone"
            tools:text="Mehmet SALTAN"
            tools:visibility="visible">

        </TextView>

        <LinearLayout
            android:id="@+id/llGender"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/spacing_m"
            tools:visibility="visible"
            android:visibility="gone"
            android:layout_marginTop="@dimen/spacing_m"
            android:layout_marginBottom="@dimen/spacing_xs"
            android:orientation="horizontal">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="start"
                android:layout_weight="1"
                android:text="Cinsiyet" />

            <TextView
                android:id="@+id/txtGender"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="end"
                android:layout_weight="1"
                android:gravity="end"
                tools:text="Erkek" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/llCity"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/spacing_m"
            android:layout_marginBottom="@dimen/spacing_m"
            android:orientation="horizontal">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="start"
                android:layout_weight="1"
                android:text="Şehir" />

            <TextView
                android:id="@+id/txtCity"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="end"
                android:layout_weight="1"
                android:gravity="end"
                tools:text="İstanbul" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/llDistrict"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/spacing_m"
            android:layout_marginTop="-8dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="start"
                android:layout_weight="1"
                android:text="İlçe" />

            <TextView
                android:layout_width="0dp"
                android:id="@+id/txtDistrict"
                android:layout_height="wrap_content"
                android:layout_gravity="end"
                android:layout_weight="1"
                android:gravity="end"
                tools:text="Sarıyer" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/llPhoneNumber"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/spacing_m"
            android:layout_marginTop="@dimen/spacing_xs"
            android:layout_marginBottom="@dimen/spacing_m"
            android:orientation="horizontal">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="start"
                android:layout_weight="1"
                android:text="Telefon Numarası" />

            <TextView
                android:id="@+id/txtPhoneNumber"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="end"
                android:layout_weight="1"
                android:gravity="end"
                tools:text="130,50 TL" />
        </LinearLayout>
    </LinearLayout>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginEnd="@dimen/_19"
        android:layout_weight="1"
        android:src="@drawable/right_arrow"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </ImageView>

</androidx.constraintlayout.widget.ConstraintLayout>

Component’imizde yer alan ve farklı ekranlarda değişkenlik gösterecek alanlar için xml’den değer aktarmamızı sağlayacak declare-styleable nesnemiz

Tasarımımızı Bir CustomComponent Sınıf Oluşturarak Bağlayalım

class CustomComponent @JvmOverloads constructor(
    context: Context,
    attributes: AttributeSet? = null,
    defAttr: Int = 0
) : FrameLayout(context, attributes, defAttr) {

    private val binding: CustomComponent

    init {
        val inflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
        binding = CustomComponentBinding.inflate(inflater)
        addView(binding.root)

        val attrs = context.obtainStyledAttributes(attributes, R.styleable.CustomComponent)

        binding.apply {
            txtPersonName = attrs.getString(R.styleable.CustomComponent_personName)
            txtGender = attrs.getString(R.styleable.CustomComponent_gender)
            txtCity = attrs.getString(R.styleable.CustomComponent_city)
            txtDistrict = attrs.getString(R.styleable.CustomComponent_district)
            txtPhoneNumber = attrs.getString(R.styleable.CustomComponent_phoneNumber)
            executePendingBindings()
        }
        attrs.recycle()
    }
}

Kod parçasında da görüldüğü gibi aslında view element’imizin üzerinde bulunan element’lere attributeSet değerlerini aktararak değiştirilmesini sağlıyoruz.

Component’imizi Kullanmaya Başlayalım

Son aşamaya geldik… Artık oluşturduğumuz component’i dilediğimiz sayfanın xml layout’unda kullanabiliriz.

Get Mehmet Saltan’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

İşte size bir örnek;

<com.msaltan.customcomponent.ui.extentions.CustomComponent
    android:layout_width="wrap_content"
    app:personName="Mehmet SALTAN"
    app:gender="Erkek"
    app:city="İstanbul"
    app:district="Sarıyer"
    app:phoneNumber="0555 555 55 55"
    android:layout_height="wrap_content">

</com.msaltan.customcomponent.ui.extentions.CustomComponent>

Not: Burada yer alan app:personName vb gibi alanlar declare-styleable nesnemizdeki alanları temsil etmekte.

Not-2: Oluşturduğumuz dosyaları farklı projelerimize ekleyerek aynı component’i farklı projelerde de kullanabileceğimizi unutmayalım.

Okuduğunuz için teşekkür eder, iyi çalışmalar dilerim :)