使用ListView实现如下效果
1.运行效果图
2.训练目标
1）掌握ListView控件的使用
2）掌握如何自定义Adapter的使用
3.主要步骤
1）创建程序
ListView程序对应的布局文件activity_main.xml中的代码如下：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="bzu.edu.cn.listviewdemo.MainActivity"> <ListView android:id="@+id/lv" android:layout_width="match_parent" android:layout_height="wrap_content"> </ListView> </LinearLayout>
2）创建Item的布局
创建ListView的条目，在res目录下创建一个list_item.xml文件，指定Item的布局，图形化界面，代码如下：
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_margin="5dp"/> <TextView android:id="@+id/tv_list" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:paddingLeft="15dp" android:layout_marginLeft="20dp" android:textSize="18sp" android:hint="我是ListView的Item布局"/> </RelativeLayout>
3）编写界面交互代码
在MainActivity里面编写适配ListView的代码，用于实现将一个字符数组捆绑到ListView上显示，由于要适配图片，因此要在drawable目录下添加相应的图片资源。MyBaseAdapter类是用来适配数据到ListView的，它继承自BaseAdapter并实现了getCount（），getItem（），getItemId（），getView（）这4个方法。其中，getView（）方法中调用了View.inflate()方法，这个方法的作用是将list_item布局找出来。只有在找出了布局之后，才能调用findViewById（）的方法去找到控件。具体代码如下：
package bzu.edu.cn.listviewdemo; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.ListView; import android.widget.TextView; public class MainActivity extends AppCompatActivity { private ListView listView; //需要适配的数据 private String[] names={"Apple","Banana","Cherry","Grape","Mango","Orange","Pear","Pineapple","Strawberry","Watermelon"}; //图片集合 private int[] pictures={R.drawable.apple_pic,R.drawable.banana_pic,R.drawable.cherry_pic,R.drawable.grape_pic,R.drawable.mango_pic,R.drawable.orange_pic,R.drawable.pear_pic,R.drawable.pineapple_pic,R.drawable.strawberry_pic,R.drawable.watermelon_pic}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //初始化ListView控件 listView=(ListView)findViewById(R.id.lv); //创建一个adapter的实例 MyBaseAdapter adapter=new MyBaseAdapter(); //设置adapter listView.setAdapter(adapter); } //创建一个类继承BaseAdapter class MyBaseAdapter extends BaseAdapter{ //得到Item的总数 public int getCount(){ //返回ListView Item条目的总数 return names.length; } //得到Item代表的对象 public Object getItem(int position){ //返回ListView Item条目代表的对象 return names[position]; } //得到Item的id public long getItemId(int position){ //返回ListView Item的id return position; } //得到Item的View视图 @Override public View getView(int position, View convertView, ViewGroup parent) { //将list_item.xml文件找出来并转换成View对象 View view=View.inflate(MainActivity.this,R.layout.list_item,null); //找到list_item.xml中创建的TextView TextView textView=(TextView)view.findViewById(R.id.tv_list); textView.setText(names[position]); ImageView imageView=(ImageView)view.findViewById(R.id.image); imageView.setBackgroundResource(pictures[position]); return view; } } }
