LoginSignup
22
22

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-10-07

やりたいこと

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);
    }
}

22
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
22