woong's

Android Activity Transition ImageView 이동하기 [2] 본문

Develop/Android

Android Activity Transition ImageView 이동하기 [2]

dlsdnd345 2016. 2. 14. 19:06
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

Android Activity Transition ImageView 이동하기 [2]


1.샘플소개


Android Activity Transition 샘플 & 소개하기 [1] 

위 포스트를 안보신분은 위포스트 샘플을 다운로드후 진행하면 좀더 수월하게 학습 해볼 수 있습니다.



샘플이 준비 되었으니 이제 조금씩 transition 을 사용해 보려 합니다.

샘플을 실행해 보면 아래와 같은 화면이 두개가 있습니다.


이번 포스트에서 사용해볼 transition 은 앨범리스트를 선택하면 

이미지가 커지면서 해당위치로 이동하는 trasition을 해보려 합니다.


android 에서 사용하기 쉽게 해놓아서 저또한 사용하고 이게 어떻게 이렇게 되지 의심을 했습니다.


 2.사용방법


변경 코드는 정말 별거 없습니다. 


1. xml 코드 추가

row_album.xml 의 이미지 뷰 속성 추가


1
2
3
4
5
6
       <ImageView
        android:id="@+id/imgAlbum"
        android:layout_width="280dp"
        android:layout_height="200dp"
        android:scaleType="fitXY"
        android:transitionName="imgAlbumArt" />
cs


제일 하단의 transitionName 을 지정 합니다.

저이름으로 이미지뷰를 매칭 시키는 작업을 합니다.


두번째로 activity_album_detail 의 이미지 뷰 속성 추가


1
2
3
4
5
6
       <ImageView
        android:id="@+id/imgAlbumArt"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:scaleType="centerCrop"
        android:transitionName="imgAlbumArt" />
cs

 


여기도 마찬가지로 하단 속성의 이름을 맞추어 주면 되겠습니다.

이렇게 진행하면 첫번째 이미지뷰가 두번째 이미지뷰와 매칭작업이 완료 되었습니다.


2. javaCode 추가


샘플코드에 MainActivity Listener 가있습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    /**
     * 앨범 리싸이클러 뷰 선택 시
     */
    private AlbumViewHolderListener mAlbumViewHolderListener = new AlbumViewHolderListener(){
 
        @Override
        public void onClicked(AlbumListAdapter.AlbumViewHolder albumViewHolder, int position) {
 
            int albumArtResId = albumList.get(position);
            Intent intent = new Intent(MainActivity.this, AlbumDetailActivity.class);
            intent.putExtra(AlbumDetailActivity.EXTRA_ALBUM_ART_RESID, albumArtResId);
 
            ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this,
                    albumViewHolder.imgAlbum, albumViewHolder.imgAlbum.getTransitionName());
            startActivity(intent, options.toBundle());
 
 
        }
    };
cs


recyclerView  선택시 화면 전환이 이루어 집니다.

화면 전환이 이루어 질때


해당 이미지 데이터를 넘기고

ActivityOption 을 통해서 이동할 뷰와 , xml 에서 매칭했던 이름을 넣어주면 되겠습니다.

위와 같이 설정하고 앱을 실행해보면

두번째 이미지 뷰로 이동하는 화면을 볼수 있습니다.




Comments