Day 16 - Autofix TextView

Published on
Android
2014/07/day-16-try-autofit-textview
Discord

สวัสดีครับ บทความนี้เป็นบทความที่ 16 แล้วนะครับ ที่ผมจะมาเขียน ในซีรีย์ Learn 30 Android Libraries in 30 days

สำหรับบทความทั้งหมด อ่านได้จากด้านล่างครับ

สำหรับวันนี้ขอนำเสนอเรื่อง AutofitTextView Library ตัวนี้ไม่มีอะไรมาก เป็นเหมือน Custom TextView ที่เอาไว้จัด TextView และปรับขนาดของ TextView ให้เราอัตโนมัติตามความยาวของข้อความครับ ขอได้รับการขอบคุณจาก CVD International เอ้ย ไม่ใช่!! ต้องขอขอบคุณ คุณเอก ที่แนะนำมาครับ

AutofitTextView

Installation

ขั้นตอนการติดตั้ง ง่ายๆครับ เพิ่ม dependencies ลงไปที่ไฟล์ build.gradle

dependencies {
    compile 'me.grantland:autofittextview:0.1.+'
}

กด Sync Project with Gradle File เป็นอันเรียบร้อย

Getting Started

การใช้งาน AutofitTextView ก็เหมือนกับการใช้ TextView ทั่วๆไปเลยครับ เพียงแค่เพิ่มแท็กลงไปในไฟล์เลเอาท์ xml ของเรา อย่างเช่น เวลาเราจะใช้ TextView ก็จะใช้แบบนี้

<TextView
    android:id="@+id/text"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:singleLine="false"/>

หากเป็น AutofitTextView ก็จะประกาศแบบนี้

<me.grantland.widget.AutofitTextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:singleLine="true" />

มาเริ่มสร้างโปรเจ็คง่ายๆกันเลยครับ เริ่มที่เลเอาท์ ตั้งชื่อว่า activity_autofit.xml

<?xml version="1.0" encoding="utf-8"?>

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

    <EditText
        android:id="@+id/edit_text"
        android:hint="@string/edit_text_hint"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="32dp"/>

    <me.grantland.widget.AutofitTextView
        android:id="@+id/text_view"
        android:textSize="32sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxLines="3" />

</LinearLayout>

จากเลเอาท์ด้านบน ผมใช้ AutofitTextView โดยกำหนด จำนวนแถวทั้งหมด 3 แถว ถ้าใครอยากใช้แค่แถวเดียวก้ใส่ android:singleLine="true" ไปครับ ส่วน EditText เอาไว้พิมพ์ข้อความ ข้อความก็จะมาแสดงใน AutofitTextView ครับ ส่วนไฟล์ strings.xml เพิ่ม นี้ลงไป

<string name="edit_text_hint">Input some text</string>

ต่อมาทำการสร้างคลาส AutofitActivity.java ขึ้นมา ทำการ setContentView() และ findViewById() ให้เรียบร้อย

package com.devahoy.learn30androidlibraries.day16;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.text.Editable;
import android.widget.EditText;

import com.devahoy.learn30androidlibraries.R;

import me.grantland.widget.AutofitTextView;

public class AutoFitTextViewActivity extends ActionBarActivity {

    AutofitTextView mTextView;
    EditText mEditText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.day16_activity_autofit);
        mTextView = (AutofitTextView) findViewById(R.id.text_view);
        mEditText = (EditText) findViewById(R.id.edit_text);
    }
}

ต่อไปก็ใช้ TextWatcher มาช่วย เพื่อให้เวลาที่เราใส่ข้อความลงบน EditText ก็จะไปทำการอัพเดทข้อความลงใน AutofitTextView

mEditText.addTextChangedListener(new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {

    }

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
        mTextView.setText(s);
    }

    @Override
    public void afterTextChanged(Editable s) {

    }
});

สุดท้าย ทดสอบรันโปรแกรม แล้วลองพิมพ์ข้อความดูครับ

Result Result2 Result3

อะ ทดสอบภาษาไทยซักหน่อยว่าได้มั้ย?

Thai Thai2

สรุป

ตัว AutofitTextView() มันก็เป็น Library แบบง่ายๆครับ หากดู source code จะเห็นว่ามีแค่คลาส AutofitTextView เท่านั้นครับ โดยคลาสที่ extends TextView อีกที เพื่อทำการ custom ครับ หากใครมีแอพที่ต้องใช้แสดงผล TextView เยอะๆ หรืออยากจัดหน้า จัดเรียงข้อความให้มันสวยๆ ก็ลองดู Library ตัวนี้นะครับ ใช้งานง่าย มีประสิทธิภาพครับ แถมภาษาไทยก็ไม่มีปัญหา แต่อาจจะมีตัดคำ ตัดตัวอักษรผิดไปบ้าง

Happy Coding :D

Source Code

References

Buy Me A Coffee
Authors
Discord