Android Animation effect Custom ViewGroup add layout animation (v) _android

Objective:

The previous articles introduced motion tweens, frame-by-step animations, property animations, most of which are animated for view, so how do you add animations for a viewgroup? Today, combine custom ViewGroup to learn about layout animations. This article will learn about layout animations by setting up animations for custom picture selection controls.

Customize a viewgroup that displays multiple lines of pictures:

Here is no longer a custom control to explain, want to know how to look at the following article
Android The rationale for custom controls (i)
Android Custom Control custom properties (ii)
Android custom control with a customized combination control (iii)
Android Custom Control custom ViewGroup implementation Tag Cloud (iv)

Declare several property values:

  <declare-styleable name= "Gridimageviewgroup" >
  <attr name= "Childverticalspace" format= "Dimension"/ >
  <attr name= "Childhorizontalspace" format= "Dimension"/> <attr name= "Columnnum"
  Integer "/>
 </declare-styleable>

Gridimageviewgroup.java Code

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, 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 (widthmeasuresp
  EC, 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);

 }
 }

Referencing in 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"/>

Called in the 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);
 }

The implementation effect is as follows:

Layout animation generated by the background:

Always ask a clear question, why to introduce layout animation? In fact, through the implementation of the above can be seen in the addition and deletion of pictures are very abrupt, do not know what language to describe, in short, is not feeling comfortable. In fact, I usually in the development of the call View.setvisibility () method will have this feeling, this is the layout of animation generated a background bar.

Layout Animation:

Layout animation refers to the animation effect that viewgroup produces when it is laid out. There are several ways to implement layout animations
The first way: in XML, set the android:animatelayoutchanges= "true" attribute to Viewgrope:

<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"/>

So simple a word to achieve the effect can be achieved, see how the effect

Although this approach is simple but the implementation of the layout of the animation is relatively single, the second way to see below.

The second way: Layouttransition implementation

 Layouttransition mlayouttransition = new Layouttransition ();
  Set the duration of each animation 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);


  Set animation and animation types for 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); Set animation and animation types for layouttransition mlayouttransition.setanimator (layouttransition.disappearing, manimatordisappearing)


  ;
  Objectanimator manimatorchangedisappearing = objectanimator.offloat (null, "alpha", 1f, 0f); Set animation and animation types for layouttransition mlayouttransition.setanimator (layouttransition.change_disappearing,

  manimatorchangedisappearing);
  Objectanimator manimatorchangeappearing = objectanimator.offloat (null, "alpha", 1f, 0f); Set animation and animation types for layouttransition mlayouttransition.setanimator (layouttransition.change_appearing,

  manimatorchangeappearing);

 Set up Mlayouttransition object Mimageviewgroup.setlayouttransition (mlayouttransition) for Mimageviewgroup;

The above custom layouttransition modifies the system's enhanced default animation effect, and does not call Mlayouttransition.setanimator if you do not need a custom animation effect ( Layouttransition.disappearing, manimatordisappearing); on the line.
Layouttransition provides the following types of transitions:
appearing--elements need to be animated when they appear in the container.
change_appearing--because a new element is to appear in the container, the changes to the other elements need to be animated.
The disappearing--element needs to be animated when it disappears in the container.
change_disappearing--because an element in the container is going to disappear, the changes to other elements need to be animated.

Look at the modified animation effect:

The Third Way: to implement layout animation by setting layoutanimation

 Alphaanimation alphaanimation = new Alphaanimation (0f, 1f);
  Alphaanimation.setduration ();
  Layoutanimationcontroller Animationcontroller = new Layoutanimationcontroller (alphaanimation, 0.5f);
  Animationcontroller.setorder (layoutanimationcontroller.order_normal);
  Mimageviewgroup.setlayoutanimation (Animationcontroller); 

The display order has the following types:
order_normal;//Order Display
order_reverse;//Reverse Display
order_random//Random Display

can also be implemented through 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 Add Android:layoutanimation Property

 <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 "/>

Because this method uses a motion tween, the individual no longer recommends this way, because it is simple to achieve a relatively single animation effect.

Summarize:

This article learned the layout of animation, since the Android animation learning will come to an ending, and then prepare to summarize the learning of animation encountered in the process of programming knowledge, such as chain-type programming, treadlocal and so on.