Android 애니메이션 효과 사용자 정의 ViewGroup 레이아웃 애니메이션 추가(5)

선언:
앞의 몇 편의 글 에서 보 간 애니메이션,프레임 애니메이션,속성 애니메이션 을 소 개 했 는데 대부분이 View 를 대상 으로 하 는 애니메이션 입 니 다.그러면 어떻게 ViewGroup 에 애니메이션 을 추가 해 야 합 니까?오늘 은 사용자 정의 View Group 과 결합 하여 레이아웃 애니메이션 을 배 웁 니 다.본 고 는 사용자 정의 그림 선택 컨트롤 설정 애니메이션 을 예 로 들 어 레이아웃 애니메이션 을 배 울 것 입 니 다.
여러 줄 의 그림 을 표시 할 ViewGroup 사용자 정의:
사용자 정의 컨트롤 에 대한 설명 을 하지 않 습 니 다.알 고 싶 은 것 은 다음 과 같은 몇 편의 글 을 볼 수 있 습 니 다.
 •Android 사용자 정의 컨트롤 의 기본 원리(1)
 •Android 사용자 정의 컨트롤 의 사용자 정의 속성(2)
 •Android 사용자 정의 컨트롤 의 사용자 정의 조합 컨트롤(3)
 •Android 사용자 정의 컨트롤 의 사용자 정의 ViewGroup 탭 클 라 우 드 구현(4) 
몇 개의 속성 값 을 설명 합 니 다:

  <declare-styleable name="GridImageViewGroup">
  <attr name="childVerticalSpace" format="dimension"/>
  <attr name="childHorizontalSpace" format="dimension"/>
  <attr name="columnNum" format="integer"/>
 </declare-styleable>

GridImageViewGroup.java 코드

public class GridImageViewGroup extends ViewGroup {
 private int childVerticalSpace = 0;
 private int childHorizontalSpace = 0;
 private int columnNum = 3;
 private int childWidth = 0;
 private int childHeight = 0;


 public GridImageViewGroup(Context context, AttributeSet attrs) {
  super(context, attrs);
  TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.GridImageViewGroup);
  if (attributes != null) {
   childVerticalSpace = attributes.getDimensionPixelSize(R.styleable.GridImageViewGroup_childVerticalSpace, 0);
   childHorizontalSpace = attributes.getDimensionPixelSize(R.styleable.GridImageViewGroup_childHorizontalSpace, 0);
   columnNum = attributes.getInt(R.styleable.GridImageViewGroup_columnNum, 3);
   attributes.recycle();
  }
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  int rw = MeasureSpec.getSize(widthMeasureSpec);
  int rh = MeasureSpec.getSize(heightMeasureSpec);
  int childCount = getChildCount();
  if (childCount > 0) {
   childWidth = (rw - (columnNum - 1) * childHorizontalSpace) / columnNum;

   childHeight = childWidth;

   int vw = rw;
   if (childCount < columnNum) {
    vw = childCount * (childHeight + childVerticalSpace);
   }
   int rowCount = childCount / columnNum + (childCount % columnNum != 0 ? 1 : 0);

   int vh = rowCount * childHeight + (rowCount > 0 ? rowCount - 1 : 0) * childVerticalSpace;

   setMeasuredDimension(vw, vh);
  }
 }

 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
  int left = 0;
  int top = 0;
  int count = getChildCount();
  for (int i = 0; i < count; i++) {
   View child = getChildAt(i);
   left = (i % columnNum) * (childWidth + childHorizontalSpace);
   top = (i / columnNum) * (childHeight + childVerticalSpace);
   child.layout(left, top, left + childWidth, top + childHeight);
  }
 }

xml 에서 참조: 

<com.whoislcj.animation.GridImageViewGroup
   android:id="@+id/image_layout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="10dp"
   android:animateLayoutChanges="true"
   lee:childHorizontalSpace="10dp"
   lee:childVerticalSpace="10dp"
   lee:columnNum="3"/>

Activity 에서 호출:

private void initViews() {
  mImageViewGroup = (GridImageViewGroup) findViewById(R.id.image_layout);
  ImageView imageView = new ImageView(this);
  imageView.setImageResource(R.mipmap.add_image);
  imageView.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    addImageView();
   }
  });
  mImageViewGroup.addView(imageView);
 }

 public void addImageView() {
  final ImageView imageView = new ImageView(MainActivity4.this);
  imageView.setImageResource(R.mipmap.lottery);
  imageView.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    mImageViewGroup.removeView(imageView);
   }
  });
  mImageViewGroup.addView(imageView, 0);
 }

실현 효 과 는 다음 과 같다. 

레이아웃 애니메이션 배경:
모든 일 은 레이아웃 애니메이션 을 왜 도입 해 야 하 는 지 분명하게 물 어 봐 야 한다.사실 위의 실현 효 과 를 통 해 알 수 있 듯 이 그림 을 추가 하고 삭제 할 때 모두 갑 작 스 러 워 보이 고 어떤 말로 표현 해 야 할 지 모 르 겠 지만 어쨌든 불편 하 다.사실 저 는 평소에 View.setVisibility()방법 을 개발 할 때 이런 느낌 을 받 았 습 니 다.이것 도 레이아웃 애니메이션 이 만 든 배경 이 죠. 
레이아웃 애니메이션:
레이아웃 애니메이션 은 ViewGroup 이 레이아웃 할 때 발생 하 는 애니메이션 효 과 를 말 합 니 다.레이아웃 애니메이션 을 실현 하 는 데 는 다음 과 같은 몇 가지 방식 이 있 습 니 다. 
첫 번 째 방식:xml 에서 ViewGrope 에 android:animateLayoutChanges="true"속성 을 설정 합 니 다. 

<com.whoislcj.animation.GridImageViewGroup
   android:id="@+id/image_layout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="10dp"
   android:animateLayoutChanges="true"
   lee:childHorizontalSpace="10dp"
   lee:childVerticalSpace="10dp"
   lee:columnNum="3"/>

이렇게 간단 한 한 마디 로 이 루어 지 는 효 과 를 실현 할 수 있 습 니 다.효과 가 어떤 지 보 세 요.
 
이런 방식 은 간단 하지만 실 현 된 레이아웃 애니메이션 은 비교적 단일 하 다.다음은 두 번 째 방식 을 본다. 
두 번 째 방식:LayoutTransition 실현 

 LayoutTransition mLayoutTransition = new LayoutTransition();

  //           
  mLayoutTransition.setStagger(LayoutTransition.CHANGE_APPEARING, 50);
  mLayoutTransition.setStagger(LayoutTransition.CHANGE_DISAPPEARING, 50);
  mLayoutTransition.setStagger(LayoutTransition.APPEARING, 50);
  mLayoutTransition.setStagger(LayoutTransition.DISAPPEARING, 50);

  PropertyValuesHolder appearingScaleX = PropertyValuesHolder.ofFloat("scaleX", 0.5f, 1.0f);
  PropertyValuesHolder appearingScaleY = PropertyValuesHolder.ofFloat("scaleY", 0.5f, 1.0f);
  PropertyValuesHolder appearingAlpha = PropertyValuesHolder.ofFloat("alpha", 0f, 1f);
  ObjectAnimator mAnimatorAppearing = ObjectAnimator.ofPropertyValuesHolder(this, appearingAlpha, appearingScaleX, appearingScaleY);
  // LayoutTransition         
  mLayoutTransition.setAnimator(LayoutTransition.APPEARING, mAnimatorAppearing);


  PropertyValuesHolder disappearingAlpha = PropertyValuesHolder.ofFloat("alpha", 1f, 0f);
  PropertyValuesHolder disappearingRotationY = PropertyValuesHolder.ofFloat("rotationY", 0.0f, 90.0f);
  ObjectAnimator mAnimatorDisappearing = ObjectAnimator.ofPropertyValuesHolder(this, disappearingAlpha, disappearingRotationY);
  // LayoutTransition         
  mLayoutTransition.setAnimator(LayoutTransition.DISAPPEARING, mAnimatorDisappearing);


  ObjectAnimator mAnimatorChangeDisappearing = ObjectAnimator.ofFloat(null, "alpha", 1f, 0f);
  // LayoutTransition         
  mLayoutTransition.setAnimator(LayoutTransition.CHANGE_DISAPPEARING, mAnimatorChangeDisappearing);

  ObjectAnimator mAnimatorChangeAppearing = ObjectAnimator.ofFloat(null, "alpha", 1f, 0f);
  // LayoutTransition         
  mLayoutTransition.setAnimator(LayoutTransition.CHANGE_APPEARING, mAnimatorChangeAppearing);

  // mImageViewGroup  mLayoutTransition  
  mImageViewGroup.setLayoutTransition(mLayoutTransition);

위 에서 사용자 정의 LayoutTransition 을 통 해 시스템 이 향상 시 킨 기본 애니메이션 효 과 를 수정 합 니 다.사용자 정의 애니메이션 효과 가 필요 하지 않 으 면 mLayoutTransition.setAnimator(LayoutTransition.DISAPEARING,mAnimator Disappearing)를 호출 하지 않 습 니 다.됐어. 
LayoutTransition 은 다음 과 같은 몇 가지 과도 유형 을 제공 합 니 다.
 •APPEARING-요소 가 용기 에 나타 날 때 애니메이션 디 스 플레이 가 필요 합 니 다.
 •CHANGE_APPEARING-용기 에 새로운 요소 가 나타 나 려 면 다른 요소 의 변 화 는 애니메이션 으로 표시 해 야 합 니 다.
 •DISAPPEARING-요소 가 용기 에서 사라 질 때 애니메이션 디 스 플레이 가 필요 합 니 다.
 •CHANGE_DISAPPEARING-용기 에 있 는 요소 가 사라 지기 때문에 다른 요소 의 변 화 는 애니메이션 으로 표시 해 야 합 니 다. 
수 정 된 애니메이션 효과 보기: 

세 번 째 방식:레이아웃 애니메이션 설정 을 통 해 레이아웃 애니메이션 을 실현 합 니 다.

 AlphaAnimation alphaAnimation = new AlphaAnimation(0f, 1f);
  alphaAnimation.setDuration(200);
  LayoutAnimationController animationController = new LayoutAnimationController(alphaAnimation, 0.5f);
  animationController.setOrder(LayoutAnimationController.ORDER_NORMAL);
  mImageViewGroup.setLayoutAnimation(animationController); 

 표시 순 서 는 다음 과 같은 몇 가지 가 있 습 니 다.
 • ORDER_NORMAL;//순서 표시
 • ORDER_REVERSE;//역 디 스 플레이
 • ORDER_RANDOM//랜 덤 디 스 플레이 
xml 로 도 가능 합 니 다. 

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:delay="0.5"
 android:animationOrder="normal"
 android:animation="@anim/alpha"
 />

ViewGroup xml 에 android:layoutAnimation 속성 추가 

 <com.whoislcj.animation.GridImageViewGroup
   android:id="@+id/image_layout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="10dp"
   android:layoutAnimation="@anim/layoutanimation"
   lee:childHorizontalSpace="10dp"
   lee:childVerticalSpace="10dp"
   lee:columnNum="3"/>

이런 방식 은 보충 애니메이션 을 사용 하기 때문에 개인 이 이런 방식 을 추천 하지 않 는 다.그 이 유 는 간단 한 애니메이션 효과 가 상대 적 으로 단일 하기 때문이다.
요약:
이 편 은 레이아웃 애니메이션 을 배 웠 습 니 다.이로부터 안 드 로 이 드 의 애니메이션 학습 도 일 단락 될 것 입 니 다.그 다음 에 애니메이션 을 배 우 는 과정 에서 만난 프로 그래 밍 지식,예 를 들 어 체인 프로 그래 밍,TreadLocal 등 을 정리 하려 고 합 니 다.