caTea 블로그

Magnify Anim View Pager 본문

android

Magnify Anim View Pager

ZaRas 2017. 3. 13. 14:06
반응형

돋보기 처럼 선택된 뷰가 커보이게 되는 뷰페이저

양옆의 뷰들은 조금 작아진다.


그래서 돋보기의 영어인 Magnify 으로 이름을 지었다.





import android.content.Context;
import android.graphics.Color;
import android.support.v4.view.PagerAdapter;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

import java.util.ArrayList;

/**
* Created by achee7059 on 2017. 3. 13..
*/

public class MagnifyAnimPageAdapter extends PagerAdapter {

//이미지들의 데이터
ArrayList<String> datas = new ArrayList<String>();
Context context;

public MagnifyAnimPageAdapter(Context context, ArrayList<String> datas) {
this.datas = datas;
this.context = context;
}

@Override
public Object instantiateItem(ViewGroup container, int position) {

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, container.getLayoutParams().height);
params.gravity = Gravity.CENTER_VERTICAL;

LinearLayout ll = new LinearLayout(context);
ll.setLayoutParams(params);

ImageView imageView = new ImageView(context);
imageView.setLayoutParams(params);
imageView.setBackgroundColor(Color.BLUE);
imageView.setMaxHeight(2000);
imageView.setMaxWidth(2000);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);


//중요하다 인터페이스 부분에서 사용하니 꼭 해주자

imageView.setTag(position);


imageView.requestLayout();

ll.addView(imageView);

if(imageView != null){
container.addView(ll);
}

return ll;
}

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

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// TODO Auto-generated method stub
container.removeView((View)object);
}

@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}

@Override
public int getItemPosition(Object object) {
// TODO Auto-generated method stub
return POSITION_NONE;
}
}

=======================================================================================================



import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

/**
* Created by achee7059 on 2017. 3. 13..
* 돋보기처럼 뷰페이저 이미지들의 애니매이션을 하는 클래스
* 현재 보이는 뷰가 크고 다른나머지들은 작아지는 효과를 보여줌
*/

public class MagnifyingAnimPageTransInterface implements ViewPager.PageTransformer {

/**
* 뷰들의 높이 차이 값
* 현재 이 뷰는 높으값을 전제로 구동한다
* Deflaut 는 200
*/
private static int BIAS = 200;

/**
* 뷰페이저가 오른쪽으로 움직이는지 왼쪽으로 움직이는지 여부
*/
private boolean isMovePrev = false;

/**
* 현재 뷰의 옵셋값
*/
private float currentOffset;

/**
* 이전의 뷰의 옵셋값
*/
private float prevOffset;

/**
* 기본의 뷰 높이 크기
*/
public int baseItemViewHeight = 0;

/**
* 기본의 뷰 높이에서 BIAS값을 뺸 값
* 공식 : baseItemViewHeight - bias
*/
public int tempItemViewHeight = 0;

public MagnifyingAnimPageTransInterface(int bias, int viewPagerHeight) {
if(bias > 0){
BIAS = bias;
}

baseItemViewHeight = viewPagerHeight;
tempItemViewHeight = baseItemViewHeight - bias;
}

@Override
public void transformPage(View page, float position) {
currentOffset = position;

ImageView imageView = null;

if(page instanceof LinearLayout){
LinearLayout targetLayout = (LinearLayout) page;

if(targetLayout.getChildCount() > 0){
imageView = (ImageView)targetLayout.getChildAt(0);
}
} else {
return;
}

LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) imageView.getLayoutParams();

if((int)imageView.getTag() == 0){
if(currentOffset < prevOffset){
isMovePrev = true;
} else{
isMovePrev = false;
}
}

if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.

} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
if(baseItemViewHeight - Math.round(BIAS * Math.abs(position)) > baseItemViewHeight - BIAS){
params.height = baseItemViewHeight - Math.round(BIAS * Math.abs(position));
}

} else if (position <= 1) { // (0,1]
// Fade the page out.
int curHeight = params.height;

//뒤로갈땐 베이스 높이에서 합하는게 아니라 뒤로가기전 높이에서 ㄱ계산되어야한다
if(isMovePrev){
if(baseItemViewHeight > curHeight){
params.height = tempItemViewHeight + Math.round(BIAS * (1 - Math.abs(position)));
}
} else {
if(baseItemViewHeight > curHeight){
params.height = baseItemViewHeight + Math.round(BIAS * (1 - Math.abs(position)));
}
}

} else { // (1,+Infinity]
// This page is way off-screen to the right.
if(baseItemViewHeight - Math.round(BIAS * (Math.abs(position) - 1)) > baseItemViewHeight - BIAS){
params.height = baseItemViewHeight - Math.round(BIAS * Math.abs(position));
}
}

prevOffset = currentOffset;
imageView.setLayoutParams(params);
}
}

=========================================================================

사용방법

imageViewPager = (ViewPager) v.findViewById(R.id.vp_item_record_images);

기본 세팅 안해도 무방하며 보이는 방식의 차이 양옆의 뷰들이 조금 보이고 싶다면 설정해주자
imageViewPager.setPageMargin(20);
imageViewPager.setClipToPadding(false);
imageViewPager.setPadding(100, 0, 100, 0);


imageViewPager.setAdapter(new MagnifyAnimPageAdapter(context, imageArr));


첫번째 파라미터는 얼마만큼의 높이차를 줄것인지 값 디폴트는 200

두번째 파라미터는 뷰페이저의 높이값을 준다.

imageViewPager.setPageTransformer(true, new MagnifyingAnimPageTransInterface(200, baseItemViewHeight));


728x90

'android' 카테고리의 다른 글

android google map 좌표들을 이용해 스크린에 꽉차게  (0) 2017.05.25
AppBarLayout 부드럽게 스크롤  (0) 2017.04.14
android frame animation class  (0) 2017.02.22
android permission activity  (0) 2017.02.22
vertical view pager  (0) 2016.07.01