Custom ListView+CardView ทำได้ยังไง?

สวัสดีนะครับ วันนี้เราจะมาแนะนำวิธีในการทำรายการแสดงข้อมูลแบบ ListView ในรูปแบบการเขียนโค้ดก็มีหลายรูปแบบ ในบทความก็จะมาอธิบายในแนวทางการเขียนและเทคนิคง่ายๆครับ เรามาเริ่มกันเลยครับ
สร้างไฟล์ layout/custom_list_view_adapter.xml

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

<TextView
                    android:id="@+id/title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="title"
                    android:textSize="30sp"
                    />

<TextView
                    android:id="@+id/detail"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="detail"
                    android:textSize="30sp"
                    />

</LinearLayout>
 

ในไฟล์ layout สร้าง TextView ไว้เป็นตัวอย่างเบื่องต้นเราสร้างใช้ View อื่นๆ ได้แบบงานที่เราต้องการเลยนะครับ
สร้างไฟล์ java/ListViewModel.java

public class ListViewModel {
    private String title;
    private String detail;

    public ListViewModel(String title,String detail){
   this.title = title;
        this.detail = detail;
}
public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getDetail() {
        return detail;
    }

    public void setDetail(String detail) {
        this.detail = detail;
    }

}

สร้างไฟล์ java/CustomListViewAdapter.java

public class CustomListViewAdapter extends ArrayAdapter<ListViewModel> {
    ArrayList<ListViewModel> arrayList;
    Context context;
    int resource;
    
    public CustomListViewAdapter(Context context, int resource, ArrayList<ListViewModel> arrayList) {
        super(context, resource, arrayList);
        this.context = context;
    }

    @NonNull
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View row = convertView;
        ModuleHolder holder = null;

        if(row==null){
            LayoutInflater layoutInflater = (LayoutInflater)getContext().getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
            row = layoutInflater.inflate(R.layout.custom_list_view_adapter,null,true);

            holder = new ModuleHolder();
            holder.textTitle = (TextView)row.findViewById(R.id.title);
            holder.textDetail = (TextView)row.findViewById(R.id.detail);
            
            row.setTag(holder);

        }else {
            holder = (ModuleHolder)row.getTag();
        }

        ListViewModel listModel = getItem(position);

        holder.textTitle.setText(listModel .getTitle());

        holder.textDetail.setText(listModel .getDetail());
                
        return row;
    }
}

 class ModuleHolder{
    TextView textTitle;
    TextView textDetail;
}  

ทำการสร้าง ListView ใน layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"       
    tools:context="com.geekcreator.MainActivity">

<ListView
            android:id="@+id/list_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            ></ListView>

</RelativeLayout>

ส่วนไฟล์การทำงาน java/MainActivity.java

public class MainActivity extends AppCompatActivity{

    private ArrayList<ListViewModel> arrayListModel = new ArrayList<>();
    private CustomListViewAdapter customListViewAdapter;
    private ListView listView;

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

listView = (ListView)findViewById(R.id.list_view);

arrayListModel.add(new ListViewModel(“title1”,”detail1”));
arrayListModel.add(new ListViewModel(“title2”,”detail2”));


 customListViewAdapter = new CustomListViewAdapter(this,R.layout.custom_list_view_adapter,arrayListModel);
        listView.setAdapter(customListViewAdapter);
}

}

ในส่วนการใช้งาน CardView ให้เพิ่ม compile 'com.android.support:cardview-v7:23.4.0' ใน Gradle Script/build.gradle(Module:app)

  dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile 'com.android.support:design:23.4.0'
    compile 'com.android.support:support-v4:23.4.0'
    compile 'com.android.support:cardview-v7:23.4.0'
    testCompile 'junit:junit:4.12'
}

เพิ่ม Cardview ใน layout/custom_list_view_adapter.xml

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

<android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:background="#ffffff"
        card_view:cardCornerRadius="10dp">

<TextView
                    android:id="@+id/title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="title"
                    android:textSize="30sp"
                    />

<TextView
                    android:id="@+id/detail"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="detail"
                    android:textSize="30sp"
                    />
</android.support.v7.widget.CardView>

</LinearLayout>

สำหรับขั้นตอนในการทำ Custom ListView ก็มีเพียงเท่านี้ ในบทความต่อๆไป ก็จะมีเทคนิคหลายใหม่ๆในการพัฒนาแอปพลิเคชันแอนดรอย์ สำหรับวันนี้ก็ขอจบไว้เพียงเท่านี้ หากมีข้อสงสัยสามารถคอมเมนต์ไว้ที่ใต้โพสต์นี้ได้เลยครับ สวัสดีครับ