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.