谷歌官方文档的介绍：https://developer.android.com/reference/android/widget/ListView.html
显示可垂直滚动的视图集合，其中每个视图都立即位于列表中的上一个视图的下方。 为了更现代化，更灵活和更有效地显示列表，请使用RecyclerView。。。
现在活动布局中加入ListView:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ListView android:id="@+id/list_view" android:layout_width="match_parent" android:layout_height="match_parent"/> </LinearLayout>
这里做一个定制的列表，就是自己定制列表中的布局。新建一个hero_item.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <ImageView android:id="@+id/hero_img" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:id="@+id/hero_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:textSize="20sp"/> </LinearLayout>
再然后是这次想要使用的数据，http://ow.blizzard.cn/heroes/，数据来自暴雪的守望先锋官网的英雄介绍页面
旁边的html代码中<img src="..." class="portrait">是英雄头像的url，</span><span class="portrait-title">末日铁拳</span></span>是英雄的名字。
所以新建一个H
public class Hero { private String imageUrl; private String name; public Hero(String imageUrl, String name) { this.imageUrl = imageUrl; this.name = name; } public String getUrl() { return imageUrl; } public void setUrl(String url) { this.imageUrl = url; } public String getName() { return name; } public void setName(String name) { this.name = name; } }
然后就是ListView的Adapter，新建一个HeroAdapter.class，这个Adapter继承自ArrayAdapter，并将泛型指定为Hero
public class HeroAdapter extends ArrayAdapter<Hero> { private int resourceId; public HeroAdapter(Context context, int textViewResourceId, List<Hero> objects){ super(context,textViewResourceId,objects); resourceId = textViewResourceId; } @NonNull @Override public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) { Hero hero = getItem(position); View view = LayoutInflater.from(getContext()).inflate(resourceId,parent,false); ImageView heroImg = (ImageView) view.findViewById(R.id.hero_img); TextView heroName = (TextView) view.findViewById(R.id.hero_name); Glide.with(getContext()).load(hero.getUrl()).into(heroImg); heroName.setText(hero.getName()); return view; } }
HeroAdapter重写了父类的构造函数，可以获得上下文，ListView的子布局的id和数据，然后重写getView()方法，这个方法会在每个子项被滚动到屏幕时调用，在getItem()中根据position获得当前的Hero实例，然后使用LayoutInflater来为这个子项加载布局，再然后设置布局中的ImageView 和TextView，最后返回布局。
最后活动中的代码
public class MainActivity extends AppCompatActivity { private List<Hero> heroList = new ArrayList<>(); private Handler handler; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final ListView listView = (ListView) findViewById(R.id.list_view); initHeroes(); handler = new Handler(){ @Override public void handleMessage(Message msg) { if(msg.what == 1){ HeroAdapter adapter = new HeroAdapter(MainActivity.this, R.layout.hero_item, heroList); listView.setAdapter(adapter); } } }; } //读取数据 private void initHeroes(){ String weatherUrl = "http://ow.blizzard.cn/heroes/"; HttpUtil.sendOkHttpRequest(weatherUrl, new Callback() { @Override public void onResponse(Call call, Response response) throws IOException { final String responseText = response.body().string(); new Thread(new Runnable() { @Override public void run() { Document doc = Jsoup.parse(responseText);//将String类型的html转换为Document Elements elements1 = doc.select(".portrait"); //读取图片url Elements elements2 = doc.select(".portrait-title");//读取英雄名字 for (int j = 0; j < elements1.size(); j++) { Hero hero = new Hero(elements1.get(j).attr("src"), elements2.get(j).text()); heroList.add(hero); } Message msg = new Message(); msg.what = 1; handler.sendMessage(msg); } }).start(); } @Override public void onFailure(Call call, IOException e) { e.printStackTrace(); runOnUiThread(new Runnable() { @Override public void run() { Toast.makeText(MainActivity.this, "数据获取失败", Toast.LENGTH_SHORT).show(); } }); } }); } }
创建一个HeroAdapter，传入上下文，子布局和数据，再将这个适配器传递给ListView就好了
代码优化：
public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) { Hero hero = getItem(position); View view; ViewHolder viewholder; //检验之前是否已经加载好布局 if(convertView != null) { view = convertView; viewholder = (ViewHolder) view.getTag(); }else { view = LayoutInflater.from(getContext()).inflate(resourceId, parent, false); viewholder = new ViewHolder(); viewholder.heroImg = (ImageView) view.findViewById(R.id.hero_img); viewholder.heroName = (TextView) view.findViewById(R.id.hero_name); view.setTag(viewholder); } Glide.with(getContext()).load(hero.getUrl()).into(viewholder.heroImg); viewholder.heroName.setText(hero.getName()); return view; } class ViewHolder{ ImageView heroImg; TextView heroName; } }
根据如果之前加载过的布局就重用之前的，不再使用LayoutInflater去加载布局，然后还把之前获取的布局控件的id也保存了下来。这样做的话。。像这次这样简单的布局和数据就有点加载得快过头了。。。
ListView的点击事件
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final ListView listView = (ListView) findViewById(R.id.list_view); .... listView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) { Hero hero = heroList.get(i); Toast.makeText(MainActivity.this,hero.getName(),Toast.LENGTH_SHORT).show(); } }); }