对一个列表中的图片进行reshape 图片列表的实现过程

转载

mob64ca13f9e726 2024-03-22 20:32:21

文章标签 对一个列表中的图片进行reshape android 前端 List java 文章分类 架构后端开发

第二篇：列表的实现

上一篇我们只是新建了项目，那么这一篇我们就先来实现app的主体——列表。

说到列表大家可能一下子就会想到ListView，虽然现在ListView已经被功能更为强大的RecycleView逐步替代了，但是对于初学者来说掌握ListView的用法比学习曲线陡峭的RecycleView更为容易，所以这次也先使用ListView。

从这一部分开始我会把每次的代码更新到github:BingPicAnother上，有兴趣的也可以试着从第一个commit开始fork一下做自己的魔改。

第一部分：ListView

ListView是非常常用的控件，它由内部的多个item构成，也就是说真正显示信息的其实是那些item。

下面我们来实际操作，建立一个简单的ListView：

首先是res/layout/activity_main.xml，这是我们app的主要activity的布局文件，我们在父容器中建立一个ListView：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.xugino.bingpicanother.MainActivity">

    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </ListView>

</RelativeLayout>

大家可能注意到了我的父容器使用的是RelativeLayout，这是为了方便调整内部布局，当然使用LinearLayout也并没有什么问题。

然后下一步我们在activity里绑定上面那个布局并且找到我们定义的ListView:

package com.xugino.bingpicanother

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {

    ListView mListView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mListView=(ListView)this.findViewById(R.id.list);
    }
}

第二部分：Adapter

Adapter按照字面翻译就是适配器，它的作用就是把你的数据按需放进ListView里面。

通常在使用时会直接继承BaseAdapter写一个新类，这是因为原生Adapter往往不能在每一个方面都满足我们的需求，尤其是getView()方法非常需要按需重写。

不过在实现Adapter之前，我们先要为内部的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="150dp"
    android:background="#fffafafa">

    <ImageView
        android:id="@+id/item_pic"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_margin="15dp" />

    <LinearLayout
        android:id="@+id/item_doc"
        android:orientation="vertical"
        android:layout_width="205dp"
        android:layout_height="120dp"
        android:layout_marginTop="15dp"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@id/item_pic"
        android:layout_alignEnd="@+id/download_btn">

        <TextView
            android:id="@+id/item_text"
            android:layout_width="match_parent"
            android:layout_height="90dp"
            android:gravity="left|top"
            android:textSize="18sp"
            android:textColor="#000000"/>

        <TextView
            android:id="@+id/item_time"
            android:layout_width="140dp"
            android:layout_height="30dp"
            android:gravity="left|bottom"
            android:textSize="16sp"
            android:textColor="#666666"/>

    </LinearLayout>

    <Button
        android:id="@+id/download_btn"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:text="这是按钮"
        android:textColor="@color/colorAccent"
        android:background="@color/colorPrimary"
        android:textSize="16sp"
        android:focusable="false"
        android:layout_alignParentRight="true"
        android:layout_alignBottom="@id/item_doc"
        android:layout_marginRight="5dp" />

</RelativeLayout>

（这里的所有数值当然可以根据需要改）

然后还有一步：定义一个用于存储数据的类，以这里为例，我们建立一个叫DataResource的类,并在其中实现数据的初始化：

package com.xugino.bingpicanother;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class DataResource {

    private List<Map<String,Object>> list;
    private Map<String,Object> map;

    public DataResource(){
        list=new ArrayList<>();
    }

    public List<Map<String,Object>> getData()
    {
        for(int i=1;i<=5;i++){
            map=new HashMap<>();
            map.put("pic",R.mipmap.test);
            map.put("text","这里应该是内容");
            map.put("time","这里应该有时间");
            list.add(map);
        }
        return list;
    }
}

最后再来实现Adapter，我们新建一个MyAdapter.java。既然要继承自BaseAdapter，那么以下几个方法是一定要重写的：构造函数，getCount()，getId()，getItem()和getView()：

package com.xugino.bingpicanother;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;
import java.util.Map;

public class MyAdapter extends BaseAdapter
{
    Context mContext;
    private LayoutInflater mInflater;
    private List<Map<String,Object>> mapList;
    private DataResource data;

    public MyAdapter(Context mContext, List<Map<String,Object>> mapList,DataResource data){
        this.mContext=mContext;
        mInflater=LayoutInflater.from(mContext);
        this.mapList=mapList;
        this.data=data;
    }

    @Override
    public int getCount() {
        return mapList.size();
    }

    @Override
    public Object getItem(int i) {
        return mapList.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder;
        if(convertView==null){
            viewHolder = new ViewHolder();
            convertView=mInflater.inflate(R.layout.list_item,null);
            viewHolder.pic=convertView.findViewById(R.id.item_pic);
            viewHolder.text=convertView.findViewById(R.id.item_text);
            viewHolder.time=convertView.findViewById(R.id.item_time);
            viewHolder.btn=convertView.findViewById(R.id.download_btn);
            convertView.setTag(viewHolder);
        }else{
            viewHolder=(ViewHolder)convertView.getTag();
        }
        viewHolder.pic.setImageResource((int)data.getData().get(position).get("pic"));
        viewHolder.text.setText((CharSequence) data.getData().get(position).get("text"));
        viewHolder.time.setText((CharSequence) data.getData().get(position).get("time"));
        viewHolder.btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

            }
        });
        return convertView;
    }

    private class ViewHolder{
        ImageView pic;
        TextView text;
        TextView time;
        Button btn;
    }
}

大家应该注意到了有一个需要注意的东西：ViewHolder。ViewHolder的作用是为ListView提供缓存，当你拖动ListView时新的View就会从缓存中提取出来放到List的可见区域里，利用这种方式我们就不用在显示一个新Item时再重新创建对象了。

此外细心的人还会发现构造函数里多了一个List，这里先卖个关子，我们都后面再讲。

当然不要忘了更新MainActivity，包括View的初始化和数据的初始化：

package com.xugino.bingpicanother;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

public class MainActivity extends AppCompatActivity {

    ListView mListView;
    List<Map<String,Object>> mList;
    DataResource data;
    MyAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initData();
    }

    private void initView(){
        mList=new ArrayList<>();
        data=new DataResource();
        mAdapter=new MyAdapter(MainActivity.this,mList,data);
        mListView=(ListView)this.findViewById(R.id.list);
        mListView.setAdapter(mAdapter);
    }

    private void initData(){
        mList.addAll(data.getData());
        mAdapter.notifyDataSetChanged();
    }

}

mAdapter.notifyDataSetChanged()是通知适配器数据有更新，如果不加这一句那么多次更新就会报错（当然现在只涉及一次更新并不会弹错，这并不意味着这句就可以不加）

然后就可以运行来看结果了：

对一个列表中的图片进行reshape 图片列表的实现过程_List