Bài 22 - Custom TextView trong android

Chào mừng các bạn đã quay trở lại với blog lập trình android.
Hôm nay mình sẽ hướng dẫn các bạn custom textview .

Trước hết mình sẽ demo vài hình ảnh custom textview.
Hình 1 : Đây là textview khi bạn sử dụng với textview của sdk android

Hình 2 : Sử dụng textview custom bạn sẽ được những đoạn text hiển thị đẹp với hiệu ứng bóng mờ , hiệu ứng bóng đổ ...

Dưới đây là ví dụ cách bạn khai báo một ứng dụng android đơn giản để tạo ra một thành phần mới việc thiết kế lại attributes(Thuộc tính)

---------------------Các bước thực hiện -------------------------------------------------Mô tả----------------------------------------------------

Bước 1        :  Mở Eclipse và tạo một project mới.

Bước 2        : Tạo mới một file XML tại : res/values/attrs.xml 

Bước 3        : Tạo mới class DateView.java  

Bước 4        : Thêm đối tượng textview custom vào XML res/layout/activity_main.xml    

Bước 5        : chạy ứng dụng và cảm nhận sự khác biệt.

OK! Giờ chúng ta sẽ đi vào chi tiết :

Dưới đây là mô tả về MainActivity,java

package com.example.textattribule;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the 
        // action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    
}

Truy cập vào file res/values/attrs.xml vừa tạo và thay đổi như sau :

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <declare-styleable name="DateView">
   <attr name="delimiter" format="string"/>
   <attr name="fancyText" format="boolean"/>
   </declare-styleable>

</resources>                                 

Tại class : src/com.example.dateviewdemo/DateView.java tạo code như sau :

package com.example.textattribule;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.util.AttributeSet;
import android.widget.TextView;

public class DateView extends TextView {
	public String delimiter;
	public boolean fancyText;

	public DateView(Context context) {
		super(context);
	}

	public DateView(Context context, AttributeSet attrs) {
		super(context, attrs);
		TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.DateView);
		final int n = a.getIndexCount();
		for (int i = 0; i < n; ++i) {
			int attr = a.getIndex(i);

			switch (attr) {
			case R.styleable.DateView_delimiter:
				delimiter = a.getString(attr);
				break;
			case R.styleable.DateView_fancyText:
				fancyText = a.getBoolean(attr, false);
				fancyText();
				break;
			}
		}
		a.recycle();
	}

	public DateView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
	}

	private void fancyText() {
		if (this.fancyText) {
			setShadowLayer(10, 5, 5, Color.parseColor("#eeff00"));

		}
	}
}

Tại res/layout/activity_main.xml thay vì hiển thị textview thông thường ta sử dụng textview custom để hiển thi.
(Chú ý tới đường dẫn packet tại :

1 -  xmlns:custom="http://schemas.android.com/apk/res/com.example.textattribule"2- com.example.textattribule.DateView

)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:custom="http://schemas.android.com/apk/res/com.example.textattribule"    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
    
    <com.example.textattribule.DateView    android:layout_width="match_parent"
    android:layout_height="wrap_content" 
    android:textColor="#fff"
    android:textSize="40sp"
    custom:delimiter="-"
    custom:fancyText="true"
    />

</RelativeLayout>

Chạy ứng dụng .

Nhớ like and share ủng hộ mình nha.