Android Expandable (Genişletilebilir TextView) Kullanımı

Merhaba Arkadaşlar,
Mobilhanem.com sitemiz üzerinden anlattığımız/yayınladığımız Android Eğitimleri yazı serimizde bu dersimizde Android Expandable TextView (Genişletilebilir TextView) Kullanımı ile devam ediyoruz.

Expandable TextView neden kullanmalıyız?

View kısmında (XML Layout) kullanıcıya bir yazı göstermek istediğimiz zaman daha detaylı bilgi için bir ayrıntı sayfası daha oluştururuz ve kullanıcıyı bu kısma yönlendirmeye mecbur kularız peki şöyle birşey olsa nasıl olur? CardView ya da bir liste şeklinde ki verileriniz için daha fazla oku gibisinden bir seçeneğiniz olsa ve ayrıntı sayfasına göndermek yerine yazı aşağı doğru açılsa hem kullanıcı daha rahat etmiş olur hem geliştirici. Bu modülü web sayfalarında oldukça görürüz daha fazla oku(read more) gibi yazılar bulunur. Böylelikle kullanıcıya daha efektif br görüntü sunmuş oluruz.

Android Sürümü 4.1 ve üzeri sürümler için destekleyici olması ile birlikte Android 8.0(Oreo) desteği mevcuttur.

Gelelim nasıl implemente edeceğimize build.gradle dosyası içinde bulunan repositories kısmına aşadığaki gibi ekliyoruz.

repositories {
   mavenCentral()
}

sonrasında dependencies kısmına aşağıdaki bağımlılığı ekliyoruz.

dependencies {
    compile 'at.blogc:expandabletextview:1.0.5'
}

Gelelim view kısmına activity_main.xml dosyasına aşadığaki gibi basit bir şekilde TextView ve Button ekliyoruz.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <at.blogc.android.views.ExpandableTextView
        android:id="@+id/expandableTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text"
        android:maxLines="5"
        android:layout_margin="5dp"
        app:animation_duration="750"/>

    <Button
        android:id="@+id/button_toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/expand"/>

</LinearLayout>

TextView da birkaç özelliği açıklamakta fayda var.

android:maxLines="5"

yukarıda ki özellik TextView kısa haldeyken en fazla kaç satır gözükmesi gerektiğini belirtmektedir.

app:animation_duration="750"

yukarıda ki özellik ise daha fazlasını okumak istediğimizde açılacak olan bölümün kaç ms de animasyonlu bir şekilde açılacağını belirtmektedir.

Bunlara ek olarak string.xml dosyasına uzun bir text olduğunu varsayalım bunu xml tarafında TextView’e bağlamış buşunmaktayız.

Ve ek olarak basit bir buton ekliyoruz daha fazlasını göster olayını tetiklemek için.

View kısmında işimiz bitmiş buşunmakta gelelim kotlin tarafına. Bu arada kotlin kısmında eksik olduğunuzu düşünüyorsanız Kotlin Derslerimize bakabilirsiniz.

Kotlin kısmında işimiz daha da basit bir TextView ve Buton tanımlayarak olayı tettikleyeceğiz.

val expandableTextView = this.findViewById<View>(R.id.expandableTextView) as ExpandableTextView
val buttonToggle = this.findViewById<View>(R.id.button_toggle) as Button

expandableTextView.setAnimationDuration(750L)

expandableTextView.setInterpolator(OvershootInterpolator())

expandableTextView.expandInterpolator = OvershootInterpolator()
expandableTextView.collapseInterpolator = OvershootInterpolator()

buttonToggle.setOnClickListener {
     buttonToggle.setText(if (expandableTextView.isExpanded) R.string.expand else R.string.collapse)
     expandableTextView.toggle()
}

buttonToggle.setOnClickListener {
     if (expandableTextView.isExpanded) {
         expandableTextView.collapse()
         buttonToggle.setText(R.string.expand)
      } else {
         expandableTextView.expand()
         buttonToggle.setText(R.string.collapse)
      }
}

Kotlin seviyesi yetersiz olan arkadaşlar aşağıdaki Java kodu üzerinden gidebilirler.

final ExpandableTextView expandableTextView = (ExpandableTextView) this.findViewById(R.id.expandableTextView);
final Button buttonToggle = (Button) this.findViewById(R.id.button_toggle);
        
expandableTextView.setAnimationDuration(750L);
        
expandableTextView.setInterpolator(new OvershootInterpolator());
        
expandableTextView.setExpandInterpolator(new OvershootInterpolator());
expandableTextView.setCollapseInterpolator(new OvershootInterpolator());
        
    buttonToggle.setOnClickListener(new View.OnClickListener(){
       @Override
       public void onClick(final View v){
        buttonToggle.setText(expandableTextView.isExpanded() ? R.string.expand : R.string.collapse);
        expandableTextView.toggle();
       }
    });
        
    buttonToggle.setOnClickListener(new View.OnClickListener(){
        @Override
        public void onClick(final View v){
           if (expandableTextView.isExpanded()){
                expandableTextView.collapse();
                buttonToggle.setText(R.string.expand);
           }else{
                expandableTextView.expand();
                buttonToggle.setText(R.string.collapse);
            }
       }
    });

Sonuç olarak aşağıdaki gibi bir görüntü elde edeceğiz.

Gördüğünüz üzere basit bir şekilde daha fazla(read more) olayını gerçekleştirmiş olduk, ayrıca tasarımlarınızı bu şekilde yaparak kullanıcıya daha kolay daha efektif bir ortam sunmuş olursunuz.

Bu dersimizde Expandable TextView kullanımını anlatmaya çalıştık. Daha ayrıntılı bilgi için buradan yardım alabilirsiniz.

Proje Linki : Gitlab

Yolcuğumuzun sonuna gelmiş bulunmaktayız umarım faydalı olmuştur aklınıza takılan ya da sormak istediğiniz bir durum olursa yorum yazmaktan çekinmeyin.
Hoşçakalın.