Adapter 와 함께 사용 하기 (ListView, GridView,...)

원문 링크: 어댑터 사용 (ListView, GridView,...)

원문 저자: Future Studio

번역문 은 작은 덩 자의

에서 나 왔 다.

번역자: 덩 쯔

상태: 완성

간단 한 갤러리 구현: ListView
우선, 우 리 는 테스트 를 위해 그림 을 제공 해 야 한다.우 리 는 eatfoody. com 에서 일부 맛 있 는 식단 도 를 캡 처 하여 imgur 에 올 렸 다.

public static String[] eatFoodyImages = {
        "http://i.imgur.com/rFLNqWI.jpg",
        "http://i.imgur.com/C9pBVt7.jpg",
        "http://i.imgur.com/rT5vXE1.jpg",
        "http://i.imgur.com/aIy5R2k.jpg",
        "http://i.imgur.com/MoJs9pT.jpg",
        "http://i.imgur.com/S963yEM.jpg",
        "http://i.imgur.com/rLR2cyc.jpg",
        "http://i.imgur.com/SEPdUIx.jpg",
        "http://i.imgur.com/aC9OjaM.jpg",
        "http://i.imgur.com/76Jfv9b.jpg",
        "http://i.imgur.com/fUX7EIB.jpg",
        "http://i.imgur.com/syELajx.jpg",
        "http://i.imgur.com/COzBnru.jpg",
        "http://i.imgur.com/Z3QjilA.jpg",
};

그 다음 에 우 리 는 Activity 가 필요 합 니 다. 이 안에 adapter 를 만 든 다음 에 ListView 에 추가 할 것 입 니 다.

public class UsageExampleAdapter extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_usage_example_adapter);

        listView.setAdapter(new ImageListAdapter(UsageExampleAdapter.this, eatFoodyImages));
    }
}

마지막 으로 Adapter 의 레이아웃 파일 을 살 펴 보 겠 습 니 다.이 Listview 의 아 이 템 은 매우 간단 합 니 다.

최종 결 과 는 이미지 집합 을 보 여 주 는 것 으로 아 이 템 마다 200dp 높이 가 있 고 너 비 는 전체 화면 에 가득 할 것 이다.이런 갤러리 가 특별히 예 뻐 보이 지 는 않 지만 본문 이 주목 해 야 할 중점 은 아니다.
그 후에 우 리 는 ListView 을 위해 Adapter 를 실현 해 야 한다.논리 가 간단 하도록 한 다음 에 eatfoody 의 예제 그림 을 Adapter 에 연결 합 니 다.아 이 템 마다 그림 을 한 장 씩 보 여 줍 니 다.

public class ImageListAdapter extends ArrayAdapter {
    private Context context;
    private LayoutInflater inflater;

    private String[] imageUrls;

    public ImageListAdapter(Context context, String[] imageUrls) {
        super(context, R.layout.listview_item_image, imageUrls);

        this.context = context;
        this.imageUrls = imageUrls;

        inflater = LayoutInflater.from(context);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (null == convertView) {
            convertView = inflater.inflate(R.layout.listview_item_image, parent, false);
        }

        Picasso
            .with(context)
            .load(imageUrls[position])
            .fit() // will explain later
            .into((ImageView) convertView);

        return convertView;
    }
}

가장 재 미 있 는 것 은 ImageListAdapter 의 getView() 방법 에서 발생 한다.Picasso 의 호출 방식 은 앞에서 말 한 '일반적인' 로 딩 방식 과 같다 는 것 을 알 게 될 것 입 니 다.당신 이 어떤 항목 에 있 든 지 간 에 Picasso 의 호출 방식 은 변 하지 않 습 니 다.
경험 이 있 는 안 드 로 이 드 개발 자로 서 우 리 는 빠 르 고 유창 한 미끄럼 체험 을 실현 하기 위해 재 활용 ListView 의 구 조 를 생각해 야 한다 고 생각 했 을 것 이다.Picasso 는 로 딩 요청 을 자동 으로 취소 하고 ImageView 에 있 는 그림 을 비 운 다음 적당 한 ImageView 에 정확 한 그림 을 불 러 올 수 있 는 뛰어난 기능 을 가지 고 있 습 니 다.
변 주: fit() 와 tags() 를 옵션 으로 하여 Adapter 를 최적화 시 킬 수 있 습 니 다. 우 리 는 다음 글 에서 소개 할 것 입 니 다.
Picasso 의 강점: 캐 시
위아래 로 미 끄 러 질 때 그림 의 전시 가 이전 보다 훨씬 빠르다 는 것 을 알 게 될 것 이다.이 그림 들 은 네트워크 를 통 해 다시 불 러 오 는 것 이 아니 라 캐 시 에서 나 온 것 임 을 알 수 있 습 니 다.Picasso 의 캐 시 는 매우 전면적 이 고 일 을 간단하게 해 줍 니 다.캐 시 크기 는 장치 의 디스크 용량 에 달 려 있 습 니 다.
그림 을 불 러 올 때마다Picasso 는 메모리, 디스크, 네트워크 등 세 가지 로 딩 소스 가 있 습 니 다.다시 한 번 강조 하지만, 여 기 는 네가 반드시 해 야 할 일이 없다.캐 시 크기 를 만 드 는 데 있어 서 Picasso 는 복잡 한 디 테 일 을 모두 숨 겼 습 니 다.물론 Picasso 의 실현 이념 을 보면 캐 시 구성 요 소 를 바 꿀 수 있 습 니 다.우 리 는 앞으로 의 글 에서 캐 시 메커니즘 을 더욱 이해 할 것 이다.
GridView GridView 의 아 이 템 은 ListView 의 실현 과 다 름 이 없다.실제로 같은 Adapter 를 사용 할 수 있 습 니 다.Activity 가 가지 고 있 는 Layout 를 해당 하 는 GridView 로 바 꾸 면 됩 니 다.

최종 전시 효 과 는 다음 과 같다.
기타 응용 프로그램: 여러 개의 ImageView 를 요소 로 합 니 다.
이로써 우 리 는 Adapter 전체 에 하나의 ImageView 요소 만 있 는 상황 을 보 여 주 었 다.만약 에 하나 이상 ImageView 이 Adapter 의 일부분 으로 존재 한다 면 이런 방법 은 여전히 적용 된다. 다만 getView() 의 코드 는 약간 다 를 수 있 지만 Picasso 의 로드 방식 은 변 하지 않 는 다.