Wednesday, October 4, 2017

Tô màu chữ, thêm ảnh trang trí cho Listview.

Bạn muốn tô màu cho chữ trong ListView, điều này không thể làm trực tiếp với các dòng code trong file xml của ListView.
Ta tạo một file xml có tên li, trong đó có các dòng code như sau.
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/text"
    android:layout_width="match_parent"
    android:layout_height="42sp"
    android:textColor="#000080"
    android:textSize="17sp"
    android:paddingLeft="10dp"/>

Sau đó trong phần set adapter cho ListView, thay vì sử dụng mẫu simple có sẵn trong file R.layout, ta dùng custome adpter như sau.
adapter=new ArrayAdapter<String>(this,R.layout.li,R.id.text, qua);

Chỉ có vậy thôi nhưng bây giờ ListView đã có màu chữ như ta muốn.

Bây giờ, ta lại muốn ListView có thêm ảnh icon ở hai đầu nhìn cho đỡ đơn điệu. Ta sẽ copy 2 icon có tên cuoi và ten vào trong thư mục drawable

Tiếp theo, thay đoạn mã sau vào trong file li.xml
<?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="42sp"   
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/im"
        android:layout_width="40sp"
        android:layout_height="45sp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="5sp"
        android:contentDescription="@null"
        android:src="@drawable/cuoi" />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="5sp"
        android:layout_toEndOf="@+id/im"
        android:layout_toRightOf="@+id/im"
        android:textColor="#0000aa"
        android:textSize="18sp" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"
        android:contentDescription="@null"
        android:src="@drawable/ten" />

</RelativeLayout>

Vậy là xong, bây giờ ListView nhìn đã sinh động hơn hẳn.

No comments:

Post a Comment