Hierarchy Viewer : How to gain insight!

Android Uygulama Performasını anlatmaya başladığımda linkteki yazımda kullanılabilecek toolları ve nasıl kullanabileceğimizi anlatmıştım. Biraz daha derine inip, elde ettiğimiz veriyi nasıl kullanacağımızı anlatmanın zamanı geldi.

Github’da sample bir proje hazırladım. İndirip hatalı ve doğru olan kodları inceleyebilirsiniz.

Mesela aşağıdaki gibi bir ekran yaratmak istediğimizi düşünelim.

Bu kadar basit bir arayüzde önemli olan recylerview’in row’larında kullandığımız layoutların nasıl tasarlandığıdır.

16 ms’lık frame time’ın dışına çıkmamak için mümkün olduğunca simple ve flat olmamız gerekir. Linkini de verdiğim yazının sonundaki tips&tricks kısmında da belirttiğim gibi de eğer kullanabiliyorsak, LinearLayout yerine RelativeLayout kullanarak tek bir katmanda viewlerimizi yerleştirebilmiş olursak, daha performanslı bir kod yazmış olur.

Hatalı kullanım örnekleri birden fazla olabilir. Ben örnek olarak aşağıdaki xml paylaşımı yarattım.

<?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="wrap_content"
    android:orientation="horizontal"
    android:padding="16dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center">

        <ImageView
            android:id="@+id/photo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        android:paddingLeft="16dp">

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/place"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <RelativeLayout
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:paddingLeft="16dp">

        <ImageView
            android:id="@+id/colorImage"
            android:layout_width="80dp"
            android:layout_height="30dp"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:background="@android:color/holo_green_dark" />

        <TextView
            android:id="@+id/year"
            android:layout_width="80dp"
            android:layout_height="30dp"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:gravity="center"/>

        <TextView
            android:id="@+id/day"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/year"
            android:layout_centerHorizontal="true" />
    </RelativeLayout>
</LinearLayout>

Görüldüğü gibi gereksiz parent, layout kullanımları var. Bunu en basit şekliyle ise aşağıdaki gibi yerleştirerek yapabilirdik.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="16dp">

    <ImageView
        android:id="@+id/photo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_gravity="center" />

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/photo"
        android:paddingLeft="16dp" />

    <TextView
        android:id="@+id/place"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/photo"
        android:layout_below="@id/name"
        android:paddingLeft="16dp" />

    <TextView
        android:id="@+id/year"
        android:layout_width="80dp"
        android:layout_height="30dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="16dp"
        android:background="@android:color/holo_green_dark"
        android:gravity="center" />

    <TextView
        android:id="@+id/day"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/year"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/year"

        android:layout_marginLeft="16dp" />
</RelativeLayout>

Tek bir parent’la da aslında aynı yerleşimi sağlayabiliyorduk.

Peki hierarchy viewer bununla ilgili bize nasıl bir öngörü verebilirdi? Aşağıdaki hatalı kullanımın outputu. Görüldüğü gibi dallanma biraz fazla.

Aşağıdaki ise optimizasyon yapıldıktan sonraki hali. Yapıdaki flatleşme gözle görülür düzeyde.

Bu düzeyde bir uygulamada, belki değişiklik yapmasanız da çok büyük bir kaybınız olmayabilirdi. Ama önemli olan nasıl yapılması gerektiğini ve HierarchyViewer’ı kullanarak nasıl çıkarım yapabileceğimizi görmek, daha kompleks yapılarda bunu düşünüp, yapımızı mümkün olduğunca flat şekilde kurmak.

Umarım HierarchyViewer’ın kullanımı açısından bir parça daha aydınlanmanızı sağlayabilmişimdir. İyi hafta sonları 🙂