Tạo Custom Horizontal ListView

Thông thường chúng ta sẽ tạo list theo chiều dọc, tuy nhiên một số trường hợp cần tạo list các Item theo chiều ngang. Trong bài viết này mình sẽ sử dụng một lib là TwoWayView để tạo một Horizontal ListView một cách đơn giản, có thể tùy chỉnh được Adapter như ListView hay RecyclerView thông thường.

Link github: https://github.com/lucasr/twoway-view

Đầu tiên là add lib vào Project và sync lại project:

- dependencies {
    compile 'org.lucasr.twowayview:twowayview:0.1.4'
}

Sau khi thành công, để sử dụng đầu tiên là add TwoWayView vào file XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_awidth="match_parent"
    android:layout_height="match_parent">

    <org.lucasr.twowayview.TwoWayView
        android:id="@+id/list_item"
        android:layout_gravity="center_vertical"
        style="@style/TwoWayView"
        android:layout_awidth="wrap_content"
        android:layout_height="50dp" />

</LinearLayout>

Tạo 1 style để khai báo kiểu Horizontal

<style name="TwoWayView">
        <item name="android:orientation">horizontal</item>
</style>

Tiếp theo là viết class MainActivity:

public class MainActivity extends Activity {

    private TwoWayView listItem;
    private ArrayList<String> listData;

    private String datas[] = {"Ha Noi", "Hai Phong", "Hai Duong", "Phu Tho", "Da Nang", "Nha Trang", "Thanh pho Ho Chi Minh",
                                "Thái Nguyên", "Hà Tĩnh", "Thanh Hóa", "Nghệ An", "Sóc Trăng", "Trà Vinh, Bạc Liêu", "Bến Tre",
                                "Hà Tây", "Hà Nam", };

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

        listItem = (TwoWayView)findViewById(R.id.list_item);
        listData = new ArrayList<>();

        createFakeDataForList();

        final ListViewAdapter mAdapter = new ListViewAdapter(this, listData);
        listItem.setAdapter(mAdapter);
    }

    private void createFakeDataForList() {
        for(int i = 0; i < datas.length; i++){
            listData.add(datas[i]);
        }
    }
}

Tiếp theo là tạo adapter, vì cái TwoWayView nó nhận Adapter là ListAdapter

nên khi tạo class Adapter sẽ implement ListAdapter

public class ListViewAdapter implements ListAdapter {
    private ArrayList<String> listData;
    LayoutInflater inflater;

    public ListViewAdapter(Context context, ArrayList<String> listData){
        this.listData = listData;
        inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public boolean areAllItemsEnabled() {
        return false;
    }

    @Override
    public boolean isEnabled(int position) {
        return false;
    }

    @Override
    public void registerDataSetObserver(DataSetObserver observer) {

    }

    @Override
    public void unregisterDataSetObserver(DataSetObserver observer) {

    }

    @Override
    public int getCount() {
        if(listData != null && !listData.isEmpty()){
            return listData.size();
        }
        return 0;
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public boolean hasStableIds() {
        return false;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View rowView = convertView;

        if(rowView == null){
            rowView = inflater.inflate(R.layout.row_layout, parent, false);
            ViewHolder viewHolder = new ViewHolder();
            viewHolder.layout = (LinearLayout) rowView.findViewById(R.id.layout);
            viewHolder.textItem = (TextView) rowView.findViewById(R.id.text_item);
            rowView.setTag(viewHolder);
        }

        ViewHolder holder = (ViewHolder) rowView.getTag();
        holder.textItem.setText(listData.get(position));
        if(position % 2 == 0){
            holder.layout.setBackgroundColor(Color.CYAN);
        }
        else {
            holder.layout.setBackgroundColor(Color.GREEN);
        }

        return rowView;
    }

    @Override
    public int getItemViewType(int position) {
        return 0;
    }

    @Override
    public int getViewTypeCount() {
        return listData.size();
    }

    @Override
    public boolean isEmpty() {
        return false;
    }

    private class ViewHolder {
        public LinearLayout layout;
        public TextView textItem;
    }
}

Tạo layout cho adapter (row_layout.xml):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_awidth="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/layout"
    android:gravity="center">

    <TextView
        android:id="@+id/text_item"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:layout_awidth="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Kết quả:

Như vậy đã tạo được 1 Horizontal List một cách đơn giản với adapter để có thể tùy chỉnh

Tham khảo

https://github.com/lucasr/twoway-view

https://guides.codepath.com/android/implementing-a-horizontal-listview-guide#populating-data-into-twowayview