In this tutorial we’ll use aCustomAdapterthat populates the custom rows of theAndroid ListViewwith anArrayList. Also to enhance the user experience, we’ll animate the ListView while scrolling.
在本教程中，我们将使用CustomAdapter使用ArrayList填充Android ListView的自定义行。 为了增强用户体验，我们将在滚动时为ListView设置动画。
Android ListView自定义适配器概述 (Android ListView Custom Adapter Overview)
The simplest Adapter to populate a view from an ArrayList is theArrayAdapter. That’s what we’ll implement in this tutorial. There are other adapters as well, such as theCursorAdapterwhich binds directly to a result set from a Local SQLite Database and it uses a Cursor as it’s data source.
从ArrayList填充视图的最简单的Adapter是ArrayAdapter。 这就是我们将在本教程中实现的。 还有其他适配器，例如CursorAdapter，它直接绑定到本地SQLite数据库的结果集，并且使用Cursor作为数据源。
回收行 (Recycling Rows)
As a ListView is instantiated and the rows are populated such that the full height of the list is filled. After that no new row items are created in the memory. As the user scrolls through the list, items that leave the screen are kept in memory for later use and then every new row that enters the screen reuses an older row kept in the memory.
实例化ListView并填充行时，将填充列表的整个高度。 之后，不会在内存中创建新的行项目。 当用户滚动浏览列表时，离开屏幕的项目将保留在内存中以备后用，然后进入屏幕的每个新行都会重复使用保留在内存中的较旧行。
创建一个视图模板 (Creating a View template)
Let’s create a xml layout that presents the items in a row in a customised way.
row_item.xml
让我们创建一个xml布局，以自定义方式连续显示各项。
row_item.xml
<RelativeLayout xmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:padding="10dp"><TextViewandroid:id="@+id/name"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentTop="true"android:text="Marshmallow"android:textAppearance="?android:attr/textAppearanceSmall"android:textColor="@android:color/black" /><TextViewandroid:id="@+id/type"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@+id/name"android:layout_marginTop="5dp"android:text="Android 6.0"android:textColor="@android:color/black" /><ImageViewandroid:id="@+id/item_info"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentEnd="true"android:layout_alignParentRight="true"android:layout_centerVertical="true"android:src="@android:drawable/ic_dialog_info" /><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"><TextViewandroid:id="@+id/version_heading"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="API: "android:textColor="@android:color/black"android:textStyle="bold" /><TextViewandroid:id="@+id/version_number"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="23"android:textAppearance="?android:attr/textAppearanceButton"android:textColor="@android:color/black"android:textStyle="bold" /></LinearLayout></RelativeLayout>
In this tutorial we’ll build an application that consists of list of rows displaying text descriptions and an info icon. Clicking the row would display the SnackBar with the text elements of that row. Clicking the info will display a SnackBar with information specific to that row.
在本教程中，我们将构建一个应用程序，该应用程序由显示文本描述和信息图标的行列表组成。 单击该行将显示带有该行文本元素的SnackBar。 单击信息将显示一个SnackBar，其中包含该行的特定信息。
项目结构 (Project Structure)
码 (Code)
We are creating a custom ListView of by subclassing ArrayAdapter with theDataModelas the object.
getView()is the method that returns the actual view used as a row within the ListView at a particular position.
我们通过将ArrayAdapter子类化为DataModel作为对象来创建自定义ListView。
getView（）是一种返回实际视图的方法，该实际视图用作ListView中特定位置的行。
Thecontent_main.xmlcontains the ListView as shown below.
content_main.xml
content_main.xml包含ListView，如下所示。
content_main.xml
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="/apk/res/android"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"xmlns:app="/apk/res-auto"tools:context="com.journaldev.customlistview.MainActivity"app:layout_behavior="@string/appbar_scrolling_view_behavior"tools:showIn="@layout/activity_main"><ListViewandroid:id="@+id/list"android:layout_width="wrap_content"android:layout_height="wrap_content"/></RelativeLayout>
The data model that is contained in the ArrayList is shown below.
DataModel.java
ArrayList中包含的数据模型如下所示。
DataModel.java
public class DataModel {String name;String type;String version_number;String feature;public DataModel(String name, String type, String version_number, String feature ) {this.name=name;this.type=type;this.version_number=version_number;this.feature=feature;}public String getName() {return name;}public String getType() {return type;}public String getVersion_number() {return version_number;}public String getFeature() {return feature;}}
The CustomAdapter that populates the DataModel into the ListView is shown below.
CustomAdapter.java
下面显示了将DataModel填充到ListView中的CustomAdapter。
CustomAdapter.java
public class CustomAdapter extends ArrayAdapter<DataModel> implements View.OnClickListener{private ArrayList<DataModel> dataSet;Context mContext;// View lookup cacheprivate static class ViewHolder {TextView txtName;TextView txtType;TextView txtVersion;ImageView info;}public CustomAdapter(ArrayList<DataModel> data, Context context) {super(context, R.layout.row_item, data);this.dataSet = data;this.mContext=context;}@Overridepublic void onClick(View v) {int position=(Integer) v.getTag();Object object= getItem(position);DataModel dataModel=(DataModel)object;switch (v.getId()){case R.id.item_info:Snackbar.make(v, "Release date " +dataModel.getFeature(), Snackbar.LENGTH_LONG).setAction("No action", null).show();break;}}private int lastPosition = -1;@Overridepublic View getView(int position, View convertView, ViewGroup parent) {// Get the data item for this positionDataModel dataModel = getItem(position);// Check if an existing view is being reused, otherwise inflate the viewViewHolder viewHolder; // view lookup cache stored in tagfinal View result;if (convertView == null) {viewHolder = new ViewHolder();LayoutInflater inflater = LayoutInflater.from(getContext());convertView = inflater.inflate(R.layout.row_item, parent, false);viewHolder.txtName = (TextView) convertView.findViewById(R.id.name);viewHolder.txtType = (TextView) convertView.findViewById(R.id.type);viewHolder.txtVersion = (TextView) convertView.findViewById(R.id.version_number);viewHolder.info = (ImageView) convertView.findViewById(R.id.item_info);result=convertView;convertView.setTag(viewHolder);} else {viewHolder = (ViewHolder) convertView.getTag();result=convertView;}Animation animation = AnimationUtils.loadAnimation(mContext, (position > lastPosition) ? R.anim.up_from_bottom : R.anim.down_from_top);result.startAnimation(animation);lastPosition = position;viewHolder.txtName.setText(dataModel.getName());viewHolder.txtType.setText(dataModel.getType());viewHolder.txtVersion.setText(dataModel.getVersion_number());viewHolder.info.setOnClickListener(this);viewHolder.info.setTag(position);// Return the completed view to render on screenreturn convertView;}}
In the above code we’ve added aonClickListenerto theImageViewthat displays a SnackBar when clicked with a description for the respective row.
在上面的代码中，我们向ImageView添加了onClickListener，当单击时带有相应行的描述时显示SnackBar。
Also the list rows are animated when scrolled. The two animation xml resource files are given below.
down_from_top.xml
滚动时，列表行也具有动画效果。 下面给出了两个动画xml资源文件。
down_from_top.xml
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="/apk/res/android"android:shareInterpolator="@android:anim/decelerate_interpolator"><translateandroid:fromXDelta="0%" android:toXDelta="0%"android:fromYDelta="-100%" android:toYDelta="0%"android:duration="400" /></set>
up_from_bottom.xml
up_from_bottom.xml
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="/apk/res/android"android:shareInterpolator="@android:anim/decelerate_interpolator"><translateandroid:fromXDelta="0%" android:toXDelta="0%"android:fromYDelta="100%" android:toYDelta="0%"android:duration="400" /></set>
TheMainActivity.javawhere the CustomAdapter is set to the ListView is defined below. Along with that a random ArrayList of DataModel objects is populated.
CustomAdapter设置为ListView的MainActivity.java定义如下。 随之而来的是随机填充的DataModel对象的ArrayList。
MainActivity.java
MainActivity.java
public class MainActivity extends AppCompatActivity {ArrayList<DataModel> dataModels;ListView listView;private static CustomAdapter adapter;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(toolbar);listView=(ListView)findViewById(R.id.list);dataModels= new ArrayList<>();dataModels.add(new DataModel("Apple Pie", "Android 1.0", "1","September 23, "));dataModels.add(new DataModel("Banana Bread", "Android 1.1", "2","February 9, "));dataModels.add(new DataModel("Cupcake", "Android 1.5", "3","April 27, "));dataModels.add(new DataModel("Donut","Android 1.6","4","September 15, "));dataModels.add(new DataModel("Eclair", "Android 2.0", "5","October 26, "));dataModels.add(new DataModel("Froyo", "Android 2.2", "8","May 20, "));dataModels.add(new DataModel("Gingerbread", "Android 2.3", "9","December 6, "));dataModels.add(new DataModel("Honeycomb","Android 3.0","11","February 22, "));dataModels.add(new DataModel("Ice Cream Sandwich", "Android 4.0", "14","October 18, "));dataModels.add(new DataModel("Jelly Bean", "Android 4.2", "16","July 9, "));dataModels.add(new DataModel("Kitkat", "Android 4.4", "19","October 31, "));dataModels.add(new DataModel("Lollipop","Android 5.0","21","November 12, "));dataModels.add(new DataModel("Marshmallow", "Android 6.0", "23","October 5, "));adapter= new CustomAdapter(dataModels,getApplicationContext());listView.setAdapter(adapter);listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {DataModel dataModel= dataModels.get(position);Snackbar.make(view, dataModel.getName()+"\n"+dataModel.getType()+" API: "+dataModel.getVersion_number(), Snackbar.LENGTH_LONG).setAction("No action", null).show();}});}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.menu_main, menu);return true;}@Overridepublic boolean onOptionsItemSelected(MenuItem item) {// Handle action bar item clicks here. The action bar will// automatically handle clicks on the Home/Up button, so long// as you specify a parent activity in AndroidManifest.xml.int id = item.getItemId();//noinspection SimplifiableIfStatementif (id == R.id.action_settings) {return true;}return super.onOptionsItemSelected(item);}}
The output of the application in action is shown below.
实际应用程序的输出如下所示。
This brings an end to this tutorial. You can download the finalAndroid ListView Custom Adapter Projectfrom the link below.
本教程到此结束。 您可以从下面的链接下载最终的Android ListView自定义适配器项目。
Download Android ListView Custom Adapter Project下载Android ListView自定义适配器项目
Reference: API Guide List View
参考： API指南列表视图
翻译自: /10416/android-listview-with-custom-adapter-example-tutorial
