Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

JSONから取得したurlで画像をlistviweに表示する(Volley)

More than 5 years have passed since last update.

やりたいこと

JSONから情報を取得しListViewに表示。そのとき、JSONと画像はVolleyで取ってくる。

必要なファイル(クラス)

  1. MyActivity.java メイン。
  2. Member.java ListViewで表示するデータ。ArrayListで使う。
  3. MemberAdapter.java カスタムアダプター(肝)。
  4. MyLruCache.java キャッシュクラス。ImageLoaderの引数に必要(まるまるコピペ)

追記:JsonObjectRequestの第三引数を(String)null,と型指定しました。

コード

setAdapter(adapter)の後にリクエスト。

MyActivity.java
public class MyActivity extends Activity {

    ListView myListView;
    RequestQueue queue;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);

        //queue for imageLoader
        queue = Volley.newRequestQueue(this);

        //db
        MyDbHelper mDbHelper = new MyDbHelper(this);
        SQLiteDatabase db = mDbHelper.getWritableDatabase();

        //array list
        final ArrayList<Member> members = new ArrayList<Member>();

        //adapter
        MemberAdapter adapter = new MemberAdapter(this,0,members,queue);

        //listview
        myListView = (ListView)findViewById(R.id.myListView);
        //bindして表示
        myListView.setAdapter(adapter);
        //クリックしたとき各行のデータ(特に_id)を取得
        myListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {

                //
                String s1 = ((TextView)view.findViewById(R.id.txtName)).getText().toString();
                String s2 = ((TextView)view.findViewById(R.id.txtAge)).getText().toString();

                Log.v("tama","position=" + s1);
                Log.v("tama","position=" + s2);
            }
        });

        //非同期 json request
        String api_url = "http://www.bluecode.jp/test/getMembers.php";
        JsonObjectRequest jsonRequest = new JsonObjectRequest(Request.Method.GET,api_url,(String)null,
            new Response.Listener<JSONObject>() {
                @Override
                public void onResponse(JSONObject jsonObject) {

                    try{

                        JSONArray json_members = jsonObject.getJSONArray("members");

                        for(int i=0;i<json_members.length();i++){

                            //取得
                            JSONObject member = json_members.getJSONObject(i);

                            String name = member.getString("name");
                            String age = member.getString("age");
                            String url = member.getString("url");

                            //表示
                            Member m = new Member();

                            m.setImage(BitmapFactory.decodeResource(getResources(),R.drawable.ic_launcher));
                            m.setName(name);
                            m.setAge(Integer.parseInt(age));
                            m.setUrl(url);

                            members.add(m);

                            //
                        }

                    }catch (Exception e){

                    }

                }
            },
            new Response.ErrorListener(){
                @Override
                public void onErrorResponse(VolleyError error){
                    //
                }
            }
        );

        //実行(キュー)
        queue.add(jsonRequest);

    }

    @Override
    protected void onResume(){
        super.onResume();
        if(queue!=null){
            queue.start();
        }
    }

    @Override
    protected void onPause(){
        super.onPause();
        if(queue!=null){
            queue.stop();
        }
    }
}

特に説明なし。

Member.java
public class Member {

    //declear
    private Bitmap image;
    private String name;
    private int age;
    private String url;

    //set

    //image
    public Bitmap getImage(){
        return this.image;
    }

    public void setImage(Bitmap image){
        this.image = image;
    }

    //name
    public String getName(){
        return this.name;
    }

    public void setName(String name){
        this.name = name;
    }

    //age
    public int getAge(){
        return this.age;
    }

    public void setAge(int age){
        this.age = age;
    }

    //url
    public String getUrl(){
        return this.url;
    }

    public void setUrl(String url){
        this.url = url;
    }
}


肝。sqliteをソースにした時と変わらず。

MemberAdapter.java
public class MemberAdapter extends ArrayAdapter<Member> {

    //Inflater
    private LayoutInflater layoutInflater;
    private ImageLoader imageLoader;

    //constructor
    public MemberAdapter(Context context, int resource,ArrayList<Member> members,RequestQueue queue) {
        super(context, resource, members);
        imageLoader = new ImageLoader(queue,new MyLruCache());
        this.layoutInflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public View getView(int position,View convertView, ViewGroup parent){

        ViewHolder viewHolder;

        //最初 or 再利用するものがなかったら
        if(convertView == null){
            //レイアウトを指定
            convertView = layoutInflater.inflate(R.layout.row,null);
            viewHolder = new ViewHolder(convertView);
            convertView.setTag(viewHolder);
        }else {
            viewHolder = (ViewHolder)convertView.getTag();
        }

        //普通の処理

        //レイアウトの取得と値のマッピング
        Member member = (Member) getItem(position);


        //cancel
        ImageLoader.ImageContainer imageContainer = (ImageLoader.ImageContainer)viewHolder.memberImage.getTag();
        if(imageContainer != null){
            imageContainer.cancelRequest();
        }

        //
        //viewHolder.memberImage.setImageBitmap(member.getImage());
        String url = member.getUrl();
        ImageLoader.ImageListener listener = ImageLoader.getImageListener(
                viewHolder.memberImage, R.drawable.ic_launcher, R.drawable.ic_launcher);
        Log.v("tama",url);
        imageLoader.get(url,listener);

        viewHolder.memberName.setText(member.getName());
        viewHolder.memberAge.setText(Integer.toString(member.getAge()));
        viewHolder.memberUrl.setText(member.getUrl());

        //
        return convertView;
    }

    //ViewHolder
    private static class ViewHolder{

        ImageView memberImage;
        TextView memberName;
        TextView memberAge;
        TextView memberUrl;

        public ViewHolder(View view){

            this.memberImage = (ImageView)view.findViewById(R.id.image);
            this.memberName = (TextView)view.findViewById(R.id.txtName);
            this.memberAge = (TextView)view.findViewById(R.id.txtAge);
            this.memberUrl = (TextView)view.findViewById(R.id.txtUrl);

        }
    }
}

Cacheのコード。
レピカ開発者のブログのコードをそのまま利用させていただきました。

MyLruCache.java
public class MyLruCache implements ImageLoader.ImageCache{

    private LruCache<String, Bitmap> mMemoryCache;

    public MyLruCache() {
        int maxSize = 10 * 1024 * 1024;
        mMemoryCache = new LruCache<String, Bitmap>(maxSize) {
            @Override
            protected int sizeOf(String key, Bitmap value) {
                return value.getRowBytes() * value.getHeight();
            }
        };
    }

    @Override
    public Bitmap getBitmap(String url) {
        return mMemoryCache.get(url);
    }

    @Override
    public void putBitmap(String url, Bitmap bitmap) {
        mMemoryCache.put(url, bitmap);
    }
}

zaburo
こんにちは。自分用のメモをだらだら公開しています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away