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.

Screen Shot 2016-02-14 at 15.06.00

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.

Screen Shot 2016-02-14 at 14.58.20

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

Screen Shot 2016-02-14 at 14.56.51

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ı 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Blog at WordPress.com.

Up ↑