반응형

리스트 뷰의 아이템을 클릭하면 파싱한 데이터를 조합하여 이미지  URL을 생성하고 이미지를 다운로드하여 새로운 액티비티에 보여주는 과정을 설명합니다.



  • Flickr API 사용 해보기

http://webnautes.tistory.com/459


  • Android에서 REST 요청 후 JSON 응답 받기

http://webnautes.tistory.com/462


  • Android에서 JSON 파싱하여 ListView에 출력

http://webnautes.tistory.com/471


  • ListView 아이템 클릭하면 이미지 다운로드해서 보여주기

http://webnautes.tistory.com/472



최초 작성        - 2014.07. 7

최종 업데이트 - 2017.12.22






실행 과정

1. 검색할 이미지를 위한 단어를 입력하고 버튼을 클릭합니다.





2. 검색한 단어에 대응하는 이미지를 보여주기 위해 필요한 JSON 데이터 파싱 결과를 보여줍니다.





3. 리스트뷰의 아이템을 선택해주면 아이템에 있는 문자열들을 조합하여 이미지를 다운로드 받을 수 있는 URL을 생성합니다.

그리고 나서 해당 URL로부터 이미지를 다운로드 받고 새로운 액티비티의 ImageView에 보여줍니다.

돌아가기를 누르면 메인 액티비티로 돌아갑니다.





소스코드 설명

1. MainActivity의 onCreate 메소드에  다음 코드를 추가합니다.

ListView의 아이템을 클릭했을 때 해당 사진을 보여주기 위해 필요한 정보들과 함께 ShowImage 액티비티를 실행합니다.

      listviewPhtoList.setOnItemClickListener(new AdapterView.OnItemClickListener() {

           @Override
           public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

               TextView textviewId = (TextView)view.findViewById(R.id.textview_main_listviewdata1);
               TextView textviewTitle = (TextView)view.findViewById(R.id.textview_main_listviewdata2);
               TextView textviewSecret = (TextView)view.findViewById(R.id.textview_main_listviewdata3);
               TextView textviewServer = (TextView)view.findViewById(R.id.textview_main_listviewdata4);
               TextView textviewFarm = (TextView)view.findViewById(R.id.textview_main_listviewdata5);

               Bundle bundle = new Bundle();
               bundle.putString( "id", textviewId.getText().toString());
               bundle.putString( "title", textviewTitle.getText().toString());
               bundle.putString( "secret", textviewSecret.getText().toString());
               bundle.putString( "server", textviewServer.getText().toString());
               bundle.putString( "farm", textviewFarm.getText().toString());

               Intent intent = new Intent(MainActivity.this, ShowImage.class);
               intent.putExtras(bundle);
               startActivity(intent);
           }
       });




2. ShowImage 액티비티가 실행되려면 매니페스트 파일에 다음처럼 추가해줘야 합니다.


   <application
       android:allowBackup="true"
       android:icon="@mipmap/ic_launcher"
       android:label="@string/app_name"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:supportsRtl="true"
       android:theme="@style/AppTheme">
       <activity android:name=".MainActivity">
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />

               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>
       </activity>

       <activity android:name=".ShowImage"> </activity>
   </application>

</manifest>




3. ShowImage 액티비티가 실행되면 인자들을 받아서 이미지를 가져오기 위한 주소를 조합합니다.

그리고나서 AsyncTask를 실행합니다.


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

       imageviewThumbnailPhoto = (ImageView)findViewById(R.id.imageview_showimage_small);
       imageviewLargePhoto = (ImageView)findViewById(R.id.imageview_showimage_large);
       Button buttonBack = (Button)findViewById(R.id.button_showimage_back);
       buttonBack.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               finish();
           }
       });

       Intent intent = getIntent();
       Bundle bundle = intent.getExtras();
       String id = bundle.getString("id");
       String title = bundle.getString("title");
       String secret = bundle.getString("secret");
       String server = bundle.getString("server");
       String farm = bundle.getString("farm");

       String thumbnailPhotoURL = "http://farm"+farm+".staticflickr.com/"+server+"/"
               +id+"_"+secret+"_t.jpg";
       String largePhotoURL = "http://farm"+farm+".staticflickr.com/"+server+"/"
               +id+"_"+secret+"_b.jpg";


      showimageTask task = new showimageTask();
      task.execute(thumbnailPhotoURL, largePhotoURL);
   }




4. doInBackground에서 getImageFromURL함수를 호출하여 이미지를 가져와서 bitmap에 저장합니다.

그리고 onPostExecute에서 ImageVIew에 보여지도록 해줍니다.


   private class showimageTask extends AsyncTask<String, Void, Bitmap[]> {


       ProgressDialog progressDialog;

       @Override
       protected void onPreExecute() {
           super.onPreExecute();

           progressDialog = new ProgressDialog( ShowImage.this );
           progressDialog.setMessage("Please wait.....");
           progressDialog.show();
       }


       @Override
       protected Bitmap[] doInBackground(String... url) {

           String thumbnailPhotoURL = url[0].toString();
           String largePhotoURL = url[1].toString();


           Bitmap[] bitmap = new Bitmap[2];
           bitmap[0] = getImagefromURL(thumbnailPhotoURL);
           bitmap[1] = getImagefromURL(largePhotoURL);

           return bitmap;
       }

       @Override
       protected void onPostExecute(Bitmap[] bitmap) {
           super.onPostExecute(bitmap);

           imageviewThumbnailPhoto.setImageBitmap(bitmap[0]);
           imageviewLargePhoto.setImageBitmap(bitmap[1]);

           progressDialog.dismiss();
       }

   }




전체 소스코드

세번째 포스팅과 중복되는 코드는 제외했습니다.


activity_showimage.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="0.9"
       android:orientation="vertical">

       <ImageView
           android:id="@+id/imageview_showimage_small"
           android:layout_width="match_parent"
           android:layout_height="0dp"
           android:layout_weight="0.3"/>
       <ImageView
           android:id="@+id/imageview_showimage_large"
           android:layout_width="match_parent"
           android:layout_height="0dp"
           android:layout_weight="0.7"/>

   </LinearLayout>

   <Button
       android:id="@+id/button_showimage_back"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="0.1"
       android:text="돌아가기" />
</LinearLayout>




ShowImage.java


package com.tistory.webnautes.imagesearchexample;

import android.app.ProgressDialog;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

import java.io.BufferedInputStream;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;

/**
* Created by webnautes on 2017-12-22.
*/

public class ShowImage extends AppCompatActivity {

   private static final String TAG = "imagesearchexample";
   private ImageView imageviewThumbnailPhoto;
   private ImageView imageviewLargePhoto;

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

       imageviewThumbnailPhoto = (ImageView)findViewById(R.id.imageview_showimage_small);
       imageviewLargePhoto = (ImageView)findViewById(R.id.imageview_showimage_large);
       Button buttonBack = (Button)findViewById(R.id.button_showimage_back);
       buttonBack.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               finish();
           }
       });

       Intent intent = getIntent();
       Bundle bundle = intent.getExtras();
       String id = bundle.getString("id");
       String title = bundle.getString("title");
       String secret = bundle.getString("secret");
       String server = bundle.getString("server");
       String farm = bundle.getString("farm");

       String thumbnailPhotoURL = "http://farm"+farm+".staticflickr.com/"+server+"/"
               +id+"_"+secret+"_t.jpg";
       String largePhotoURL = "http://farm"+farm+".staticflickr.com/"+server+"/"
               +id+"_"+secret+"_b.jpg";


      showimageTask task = new showimageTask();
      task.execute(thumbnailPhotoURL, largePhotoURL);
   }


   private class showimageTask extends AsyncTask<String, Void, Bitmap[]> {


       ProgressDialog progressDialog;

       @Override
       protected void onPreExecute() {
           super.onPreExecute();

           progressDialog = new ProgressDialog( ShowImage.this );
           progressDialog.setMessage("Please wait.....");
           progressDialog.show();
       }


       @Override
       protected Bitmap[] doInBackground(String... url) {

           String thumbnailPhotoURL = url[0].toString();
           String largePhotoURL = url[1].toString();


           Bitmap[] bitmap = new Bitmap[2];
           bitmap[0] = getImagefromURL(thumbnailPhotoURL);
           bitmap[1] = getImagefromURL(largePhotoURL);

           return bitmap;
       }

       @Override
       protected void onPostExecute(Bitmap[] bitmap) {
           super.onPostExecute(bitmap);

           imageviewThumbnailPhoto.setImageBitmap(bitmap[0]);
           imageviewLargePhoto.setImageBitmap(bitmap[1]);

           progressDialog.dismiss();
       }

   }


   public Bitmap getImagefromURL(final String photoURL){

       if ( photoURL == null) return null;


       try {

           URL url = new URL(photoURL);
           HttpURLConnection httpURLConnection = (HttpURLConnection) url.openConnection();


           httpURLConnection.setReadTimeout(3000);
           httpURLConnection.setConnectTimeout(3000);
           httpURLConnection.setDoInput(true);
           httpURLConnection.setRequestMethod("GET");
           httpURLConnection.setUseCaches(false);
           httpURLConnection.connect();


           int responseStatusCode = httpURLConnection.getResponseCode();

           InputStream inputStream;
           if (responseStatusCode == HttpURLConnection.HTTP_OK) {

               inputStream = httpURLConnection.getInputStream();
           }
           else
               return null;

           BufferedInputStream bufferedInputStream = new BufferedInputStream(inputStream);
           Bitmap bitmap = BitmapFactory.decodeStream(bufferedInputStream);

           bufferedInputStream.close();
           httpURLConnection.disconnect();

           return  bitmap;

       } catch (Exception e) {
           Log.d(TAG, e.toString());
       }

       return null;
   }
}


반응형

포스트 작성시에는 문제 없었지만 이후 문제가 생길 수 있습니다.
댓글로 알려주시면 빠른 시일내에 답변을 드리겠습니다.

여러분의 응원으로 좋은 컨텐츠가 만들어집니다.
지금 본 내용이 도움이 되었다면 유튜브 구독 부탁드립니다. 감사합니다 : )

유튜브 구독하기


제가 쓴 책도 한번 검토해보세요.

  1. fix 2018.06.28 09:16

    매번 글 잘 보고 있습니다
    혹시 서버에 이미지를 올리는 법에 대한 예제도 있을까요?
    어제 하루종일 삽질했는데 해결이 안되네요ㅡㅜ

    • Favicon of https://webnautes.tistory.com BlogIcon webnautes 2018.06.28 09:19 신고

      다음 사이트를 참고해보세요..

      http://www.androidcodefinder.com/blog/2018/02/04/android-upload-image-to-server-using-php-mysql/

  2. 2018.10.18 20:09

    비밀댓글입니다

    • Favicon of https://webnautes.tistory.com BlogIcon webnautes 2018.10.18 20:20 신고

      괜찮습니다.^^

      그 부분은 저도 아직 못해본 부분입니다..

      찾아보니 작성한 코드로 동작 한다고 나와있긴 합니다.

      http://it77.tistory.com/98


  3. 2018.10.18 20:41

    비밀댓글입니다

  4. singa 2019.02.12 22:24

    사진 리스트 가져올 때는 thread 를 만들어 쓰셨는데 사진을 가져올 때는 async task 를 쓰신 이유를 알 수 있을까요?

    • Favicon of https://webnautes.tistory.com BlogIcon webnautes 2019.02.12 23:22 신고

      둘 다 AsyncTask로 해도 될듯합니다.

      네트워크 처리 후, GUI에 결과를 반영하기에는 AsyncTask가 편한듯 합니다.

  5. ddldldl 2019.09.26 09:43

    정말 감사드립니다.
    현 시점에서 같은 방식으로 코딩을했는데 이미지 상세페이지에서 이미지 url은 정상적인 경로인데 앱을 만들어 실행하면 ShowImage 화면에서 이미지가 로드되질 않네요. 혹시 확인가능할까요?

    • Favicon of https://webnautes.tistory.com BlogIcon webnautes 2019.09.26 09:46 신고

      상위버전 sdk에서 바뀐 권한이 있을지 모릅니다. 버튼누르면 이미지 다운로드하도록하고 버튼클릭시 로그캣에서 어떤 메시지가 보이나 보세요

+ Recent posts