Note: This implementation method is not the best way to implement ListView, just hope to understand the implementation principle of ListView through practice
Thought line:
1. Create a drawable folder and import the images to be used in it
2. Write a class to store image ID data and content text.
3. Write a custom layout to make a template for the format of each row of the ListView.
4. Create a class and inherit the ArrayAdapter adapter, and override the getView method that comes with the adapter.
5. Create a ListView activity.
6. In the activity of ListView, create a list collection to import data, add the list of imported data to the ArrayAdapter adapter, and put the adapted content into the ListView control.
1. Create a drawable folder and import the images to be used:
After the folder is created, copy the images to the new folder.
2. Write a class to store image ID data and content text:
package com.example.prize.mylistviewdemoapp;
/**
* Created by prize on 2018/4/11.
*/
public class ImageListArray {
private String name;
private int imageId;
public ImageListArray(String name, int imageId){
this.name = name;
this.imageId = imageId;
}
public String getName() {
return name;
}
public int getImageId() {
return imageId;
}
}
3. Write a custom layout to template the format of each row of ListView:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp">
<ImageView
android:id="@+id/IamgeView_List"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#FFFFFF"/>
<TextView
android:id="@+id/TextView_List"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="内容"
android:textSize="30sp"
android:layout_marginLeft="15dp"
android:layout_marginTop="30dp"/>
</LinearLayout>
4. Create a class and inherit the ArrayAdapter adapter, and override the getView method that comes with the adapter:
package com.example.prize.mylistviewdemoapp;
import android.content.Context;
import android.support.annotation.LayoutRes;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.List;
/**
* Created by prize on 2018/4/11.
*/
public class ImageListAdapter extends ArrayAdapter<ImageListArray> {
private int recourceId;
/*
ImageListAdapter( Context context, int resource, List<ImageListArray> objects)解析
Context context: the current class or the context context of the current class
int resource : a row layout of the ListView, which will be imported into the adapter to automatically adapt to the data
List<ImageListArray> objects : List collection of data
*/
public ImageListAdapter( Context context, int resource, List<ImageListArray> objects) {
super(context, resource, objects);
recourceId = resource;
}
@NonNull
@Override
/*
Why override getView? Because the adapter actually comes with a method that returns the layout,
This method can be customized to fit the layout display of a row, because we need more complex layout content,
So we rewrite it directly, without importing a simple TextView or ImageView layout and letting the adapter write the layout data.
Therefore, the custom layout id of the receiptId is directly imported into the getView, and the getView method does not obtain the layout in the convertView.
Finally, just return a view layout.
*/
public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
ImageListArray imageListArray = getItem(position); //Get a set of data at the specified position in the collection and instantiate it
View view = LayoutInflater.from(getContext()).inflate(resourceId,parent,false); //Use the layout clipper (also called the layout inflator) to clip the imported layout and put it into the current layout
ImageView imageView = (ImageView)view.findViewById(R.id.IamgeView_List);//Get the ImageView layout ID from the cropped layout
TextView textView = (TextView)view.findViewById(R.id.TextView_List); //Get the TextView layout Id from the cropped layout
imageView.setImageResource(imageListArray.getImageId());//Import the image iamgeId in the current set of imageListArray classes into the ImageView layout
textView.setText(imageListArray.getName());//Import the TextView content in the current set of imageListArray classes into the TextView layout
return view;
}
}
5. Create a ListView activity, add data classes, adapters, import ListView to finally implement the list view
Layout of ListView activity:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.prize.mylistviewdemoapp.ImageListActivity">
<ListView
android:id="@+id/ImageListView"
android:layout_width="match_parent"
android:layout_height="match_parent"></ListView>
</LinearLayout>
In the ListView activity, create a list collection to import data, add the list of imported data to the ArrayAdapter adapter, and put the adapted content into the ListView control.
package com.example.prize.mylistviewdemoapp;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;
import java.util.ArrayList;
import java.util.List;
public class ImageListActivity extends AppCompatActivity {
private List<ImageListArray> onePieceList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate (savedInstanceState);
setContentView(R.layout.activity_image_list);
addingData(); //Initialize data
//Create an adapter and import data in the adapter 1. Current class 2. Layout of one row of list_view 3. Data collection
ImageListAdapter imageListAdapter = new ImageListAdapter(ImageListActivity.this,R.layout.image_list_view,onePieceList);
ListView listView = (ListView)findViewById(R.id.ImageListView); //Import the adapter into Listview
listView.setAdapter(imageListAdapter);
}
/*
Import Data
*/
public void addingData(){
ImageListArray ace =new ImageListArray("ace",R.drawable.ace);
onePieceList.add(ace);
ImageListArray arlong =new ImageListArray("arlong",R.drawable.arlong);
onePieceList.add(arlong);
ImageListArray white_beard =new ImageListArray("white_beard",R.drawable.white_beard);
onePieceList.add(barbe_blanche);
ImageListArray baroque_works =new ImageListArray("baroque_works",R.drawable.baroque_works);
onePieceList.add(baroque_works);
ImageListArray brook =new ImageListArray("brook",R.drawable.brook);
onePieceList.add(brook);
ImageListArray buggy =new ImageListArray("buggy",R.drawable.buggy);
onePieceList.add(buggy);
ImageListArray chopper =new ImageListArray("chopper",R.drawable.chopper);
onePieceList.add(chopper);
ImageListArray franck =new ImageListArray("franck",R.drawable.franck);
onePieceList.add(franck);
ImageListArray fish_men =new ImageListArray("fish_men",R.drawable.fish_men);
onePieceList.add(fish_men);
ImageListArray luffys_flag =new ImageListArray("luffys_flag",R.drawable.luffys_flag);
onePieceList.add(luffys_flag);
ImageListArray luffys_flag_2 =new ImageListArray("luffys_flag_2",R.drawable.luffys_flag_2);
onePieceList.add(luffys_flag_2);
ImageListArray nami =new ImageListArray("nami",R.drawable.nami);
onePieceList.add(nami);
ImageListArray nico =new ImageListArray("nico",R.drawable.nico);
onePieceList.add(nico);
ImageListArray sanji =new ImageListArray("sanji",R.drawable.sanji);
onePieceList.add(sanji);
ImageListArray shanks =new ImageListArray("shanks",R.drawable.shanks);
onePieceList.add(shanks);
ImageListArray ussop =new ImageListArray("ussop",R.drawable.ussop);
onePieceList.add(ussop);
ImageListArray sale_slaves =new ImageListArray("sale_slaves",R.drawable.sale_slaves);
onePieceList.add(sale_slaves);
Live ImageListArray = new ImageListArray ("live", R.drawable.vivi);
onePieceList.add(vivi);
ImageListArray zoro =new ImageListArray("zoro",R.drawable.zoro);
onePieceList.add(zoro);
}
}
final effect:
