빠르게 배우는 안드로이드 -12 ListView-3

Glide를 사용한 이미지 로드

빠르게 배우는 안드로이드 -11  ListView-2

이 강좌에 이어서 진행하도록하겠습니다.

우리의 프로필 이미지는 현재 기본 ic_launcher 이미지로 되어있습니다. 그래서 현재 list_item 클래스에는 profile_image가 int로 되어있는데요 int를 String으로 수정하여 파일의 경로를 받도록수정합니다.

public class list_item {


    private int profile_image;
private String nickname;
private String title;
private Date write_date;
private String content;  

를 다음과같이 String으로 변경

public class list_item {

private String profile_image;
private String nickname;
private String title;
private Date write_date;
private String content;

이렇게하면 아래에 만들었던

public int getProfile_image() {
    return profile_image;
}

public void setProfile_image(int profile_image) {
    this.profile_image = profile_image;
}
public list_item(int profile_image, String nickname, String title, Date write_date, String content) {
    this.profile_image = profile_image;
    this.nickname = nickname;
    this.title = title;
    this.write_date = write_date;
    this.content = content;
}

이 부분들이 Type(자료형) 이 맞지 않아 오류가 나는것을 볼수 있는데요

이부분들을 alt+insert의 도움을 받아 setter and getter 와 constructor를 다시 만들어줍니다.

public class list_item {

    private String profile_image;
    private String nickname;
    private String title;
    private Date write_date;
    private String content;


    public String getProfile_image() {
        return profile_image;
    }

    public void setProfile_image(String profile_image) {
        this.profile_image = profile_image;
    }

    public String getNickname() {
        return nickname;
    }

    public void setNickname(String nickname) {
        this.nickname = nickname;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }



    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public Date getWrite_date() {
        return write_date;
    }

    public void setWrite_date(Date write_date) {
        this.write_date = write_date;
    }


    public list_item(String profile_image, String nickname, String title, Date write_date, String content) {
        this.profile_image = profile_image;
        this.nickname = nickname;
        this.title = title;
        this.write_date = write_date;
        this.content = content;
    }
}

이렇게 수정하면 MainActivity와 MyListAdapter에 들어있던 것들이 자료형이 맞지않아 마찬가지로 오류를 내뿜을것입니다. 우선 MainActivity에 R.mipmap.ic_launcher부분을

“https://cdn-images-1.medium.com/fit/c/36/36/0*HgJ2Psmia7PjQsp9.jpg” 혹은 자신이 찾은 인터넷상의 이미지 경로를 지정하여줍니다.

https://cdn-images-1.medium.com/fit/c/36/36/0*HgJ2Psmia7PjQsp9.jpg

list_itemArrayList.add(new list_item("https://cdn-images-1.medium.com/fit/c/36/36/0*HgJ2Psmia7PjQsp9.jpg",
"보라돌이","제목1",new Date(System.currentTimeMillis()),"내용1"));

list_itemArrayList.add(new list_item("https://cdn-images-1.medium.com/fit/c/36/36/0*HgJ2Psmia7PjQsp9.jpg",
"뚜비","제목2",new Date(System.currentTimeMillis()),"내용2"));

list_itemArrayList.add(new list_item("https://cdn-images-1.medium.com/fit/c/36/36/0*HgJ2Psmia7PjQsp9.jpg",
"나나","제목3",new Date(System.currentTimeMillis()),"내용3"));

list_itemArrayList.add(new list_item("https://cdn-images-1.medium.com/fit/c/36/36/0*HgJ2Psmia7PjQsp9.jpg",
"뽀","제목4",new Date(System.currentTimeMillis()),"내용4"));

list_itemArrayList.add(new list_item("https://cdn-images-1.medium.com/fit/c/36/36/0*HgJ2Psmia7PjQsp9.jpg",
"햇님","제목5",new Date(System.currentTimeMillis()),"내용5"));

이제 MyListAdapter로 가서

getView안에있는 

viewholder.profile_imageView.setImageResource(list_itemArrayList.get(position).getProfile_image());

이부분을 제거해줍니다.

public class MyListAdapter extends  BaseAdapter {


    Context context;
    ArrayList<list_item> list_itemArrayList;
    ViewHolder viewholder;

    public MyListAdapter(Context context, ArrayList<list_item> list_itemArrayList) {
        this.context = context;
        this.list_itemArrayList = list_itemArrayList;
    }



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

    @Override
    public Object getItem(int position) {
        return this.list_itemArrayList.get(position);
    }

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

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


        if(convertView == null){
            convertView = LayoutInflater.from(context).inflate(R.layout.item,null);
            viewholder = new ViewHolder();
            viewholder.nickname_textView = (TextView)convertView.findViewById(R.id.nickname_textview);
            viewholder.content_textView = (TextView)convertView.findViewById(R.id.content_texview);
            viewholder.date_textView = (TextView)convertView.findViewById(R.id.date_textview);
            viewholder.title_textView  =(TextView)convertView.findViewById(R.id.title_textview);
            viewholder.profile_imageView = (ImageView)convertView.findViewById(R.id.profile_imageView);
            convertView.setTag(viewholder);
        }else{
            viewholder = (ViewHolder)convertView.getTag();
        }

        viewholder.nickname_textView.setText(list_itemArrayList.get(position).getNickname());
        viewholder.title_textView.setText(list_itemArrayList.get(position).getTitle());
        viewholder.content_textView.setText(list_itemArrayList.get(position).getContent());
        viewholder.date_textView.setText(list_itemArrayList.get(position).getWrite_date().toString());
    
        return convertView;
    }


    class ViewHolder{

        TextView nickname_textView;
        TextView title_textView;
        TextView date_textView;
        TextView content_textView;
        ImageView profile_imageView;
    }
}

이제 오류는 제거 되었습니다. 이미지를 불러오기 위하여 구글에서 만든 Glide 라이브러리를 추가합니다.    

왼쪽에서 build.gradle(Module:app)을 클릭합니다.

Dependincies{

}부분에

compile ‘com.github.bumptech.glide:glide:3.6.1’ 를 추가합니다.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.github.bumptech.glide:glide:3.6.1'
}

상단에 초록색 알림이 공지되는데

Sync now를 눌러줍니다.

이제 라이브러리 추가가 끝났습니다.

Glide의 사용법은

Glide.with(Context).load(“파일경로”).into(이미지뷰); 만 적으면 간단하게  동작합니다.

따라서 getView부분에 

Glide.with(context).load(list_itemArrayList.get(position).getProfile_image()).into(viewholder.profile_imageView);

코드를 추가합니다.

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


    if(convertView == null){
        convertView = LayoutInflater.from(context).inflate(R.layout.item,null);
        viewholder = new ViewHolder();
        viewholder.nickname_textView = (TextView)convertView.findViewById(R.id.nickname_textview);
        viewholder.content_textView = (TextView)convertView.findViewById(R.id.content_texview);
        viewholder.date_textView = (TextView)convertView.findViewById(R.id.date_textview);
        viewholder.title_textView  =(TextView)convertView.findViewById(R.id.title_textview);
        viewholder.profile_imageView = (ImageView)convertView.findViewById(R.id.profile_imageView);
        convertView.setTag(viewholder);
    }else{
        viewholder = (ViewHolder)convertView.getTag();
    }

    viewholder.nickname_textView.setText(list_itemArrayList.get(position).getNickname());
    viewholder.title_textView.setText(list_itemArrayList.get(position).getTitle());
    viewholder.content_textView.setText(list_itemArrayList.get(position).getContent());
    viewholder.date_textView.setText(list_itemArrayList.get(position).getWrite_date().toString());
    Glide.with(context).load(list_itemArrayList.get(position).getProfile_image()).into(viewholder.profile_imageView);
    return convertView;
}

이제 실행을 해봅니다.    

다음과 같이 이미지가 나오지 않음을 볼수있습니다. 코드상에는 문제가 없습니다. 왜 그럴까요?

안드로이드에서는 기본 기능 이외에 인터넷 접속, 주소록 접근 등을 할때 퍼미션(권한) 이라는 속성을 Manifest에 추가해주어야 해당 기능이 올바로 동작하도록 되어있습니다. 따라서 우리는 인터넷 접속 퍼미션을 추가하지 않았기때문에 제대로 동작하지 않는 것입니다. Manifest에 퍼미션을 추가하도록합시다.

왼쪽에 manifests를 클릭합니다.    

다음과 같은 화면이 나오는데요

</application> 밑 부분에

<use 를 입력하시면    

다음과 같은 팝업이 뜹니다. 맨위의 uses-permission을 클릭합니다.    

다음과 같은 새 팝업이 나옵니다. 여기서 우리가 원하는 Internet 퍼미션을 찾아서 클릭하면됩니다.    

<uses-permission android:name="android.permission.INTERNET"/>

다음과 같이 코드를 완성한후 다시 앱을 실행합니다.    

이미지가 로드되긴하는데 전체를 덮어버리네요 이미지가 너무 큰가봅니다. 
item.xml 에서 imageview의 width와 height를 80 80 으로 각각 지정하고 다시실행합니다.    

우리가 원하는대로 이미지가 나오는것을 볼수있습니다.