各位看官们,大家好,上一回中咱们说的是Android中UI控件之ListView
基础的例子,这一回咱们说的UI控件之ListView
扩展。闲话休提,言归正转。让我们一起Talk Android吧!
看官们,掌握了ListView的基本用法后,我们要对它进行扩展,因为在实际的项目中几乎都对它进行了扩展,扩展的地方有三个:数据,适配器和布局。接下来我们分别介绍它们。
1.数据:
可以是数组或者List。数据的类型可以是内置类型也可以是自己定义的类型,常用的是自己定义的类型,因为这样做扩展性高。
2.适配器:
可以继承适配器的类,进而扩展适配器。继承后通常是重写适配器构造方法和getView方法。
3.布局:
这里的布局指ListView中每一项内容的布局。基本用法中使用的是系统提供的布局,我们可以自己定义一个布局文件。在例子中我们定义了一个布局, 布局中有两个内容:前面是一个图标,后面是一行文字。(类似微信界面)
接下来我们通过代码结合文本的方式来演示如何扩展这种组件,扩展用法是在基本用法的基础上进行的, 因此扩展用法中与基本用法相同的代码,不在列出来。
- 1.在布局中添加ListView。通常是在Activity或者Fragment的布局文件中添加。
- 2.在代码中获取布局文件中的ListView。通常位于Activity或者Fragment的onCreate方法中。
3.在代码中为ListView添加需要显示的数据。该步骤是主要进行扩展的地方。
扩展数据:
public class DataType { //创建数据类型
private int mImageId;
private String mTitle;
public DataType(int imageId,String title){
this.mImageId = imageId;
this.mTitle = title;
}
public int getImageId() {
return mImageId;
}
public void setImageId(int imageId) {
mImageId = imageId;
}
public String getTitle() {
return mTitle;
}
public void setTitle(String title) {
mTitle = title;
}
}
private List<DataType> mDataTypeList = new ArrayList<>();
for(int i=0;i <9; i++){ //初始化List
DataType data1 = new DataType(R.drawable.icon1," This is Chome");
mDataTypeList.add(data1);
DataType data2 = new DataType(R.drawable.icon2," This is Google");
mDataTypeList.add(data2);
}
在该步骤中主要是自定义了数据类型DataType
,并且创建和初始化了DataType
类型的List
。数据类型中的数据成员可以依据项目的需要来定义,这里只定义了一个图片id和文本,它们分别用来显示图片和相应和文字内容。另外,在初始化List的时候,我们只写了两种不同内容的数据,其它的数据是这两种数据的重复。数据中使用了两个图片资源,需要提前把它们放到drawable
目录下面,在代码中我们放的是名为icon1和icon2的两张图片。
扩展布局:
这里的布局是指在ListView中每一项内容如何显示的布局,我们在ListView的基本用法中使用了系统提供的布局,哪个布局只能用来显示一行文本内容,这显然不能满足项目需求。下面是我们扩展的布局文件,该布局文件可以使ListView中每一项内容显示一个图片和一行文字。
在layout目录下自己创建一个名叫list_item.xml的布局文件,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/list_item_image"
android:layout_width="40dp"
android:layout_height="40dp" />
<TextView
android:id="@+id/list_item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
该布局文件中包含一个ImageView
和一个TextView
,显示出来的效果就是一个图片和一行文字。大家可以依据自己的需要来定义布局文件中的内容,不过这些内容要和数据类型匹配。比如该布局文件中的ImageView和TextView就和自定义数据类型的中两个数据成员相匹配。
扩展适配器:
public class DIYAdapter extends ArrayAdapter<DataType>{
private int itemId;
public DIYAdapter(Context context, int textViewId, List<DataType> dataTypeList){
super(context,textViewId,dataTypeList);
itemId = textViewId; //这是布局文件的id,R.layout.id_xxx
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
DataType itemData = getItem(position); //获取位置处的数据
//获取扩展的布局文件,以及布局文件中的控件
View view = LayoutInflater.from(getContext()).inflate(itemId,parent,false);
ImageView imageView = (ImageView)view.findViewById(R.id.list_item_image);
TextView textView = (TextView)view.findViewById(R.id.list_item_text);
imageView.setImageResource(itemData.getImageId());
textView.setText(itemData.getTitle());
return view;
}
}
在该步骤中自定义了适配器类,该类继承自ArrayAdapter
,我们重写了类的构造方法和getView方法。构造方法中主要是传入了布局文件的id,和存放数据的List。其中布局文件的id就是上一个步骤中扩展布局的id。存放数据的List需要定义,不过它的类型也是我们扩展数据中创建的类型,具体的代码如下:
private List<DataType> mDataTypeList = new ArrayList<>();
DIYAdapter diyAdapter = new DIYAdapter(Activity2.this,R.layout.list_item,mDataTypeList);
我们重点介绍一下getView
方法,它是一个回调方法,当ListView
中某一项内容被显示到屏幕中时就会调用它。它的第一个参数传递来的就是ListView
中刚刚显示到屏幕中某项内容的具体位置,通过该位置我们可以获取到该位置中的数据。接下来就是获取扩展的布局文件,并且通过它来获取布局文件中的控件。这样我们可以把数据传递给布局文件中的控件,让这些控件来把数据显示到屏幕上。
4.给ListView添加事件监听器,当ListView中的某个内容被点击时就会触发该监听器。
监听器中的代码扩展起来没有具体的原则,大家可以依据项目需求自行扩展,下面的代码中获取了被点击列表项的内容,并且通过Toast显示出来。
mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
DataType item = mDataTypeList.get(i);
String str = "Item: "+i+" content: "+item.getTitle();
Toast.makeText(Activity2.this,str,Toast.LENGTH_LONG).show();
}
});
下面是程序的运行结果,请大家参考:
各位看官,关于Android中UI控件之ListView扩展的例子咱们就介绍到这里,欲知后面还有什么例子,且听下回分解!