2016-10-28 87 views
11

我添加图片动态查看我的线性布局,查看动画在Android的折叠/展开视图中的LinearLayout

我想实现

enter image description here

下面是示例代码,我做了什么

MainActivity

package ksp.com.animationssample; 

import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 
import android.view.View; 
import android.view.animation.AccelerateInterpolator; 
import android.view.animation.Animation; 
import android.view.animation.TranslateAnimation; 
import android.widget.Button; 
import android.widget.ImageView; 
import android.widget.LinearLayout; 

public class MainActivity extends AppCompatActivity { 

    private Button btn_expand; 
    private Button btn_collapse; 


    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 
     btn_expand = (Button) findViewById(R.id.btn_expand); 
     btn_collapse = (Button) findViewById(R.id.btn_collapse); 
     LinearLayout.LayoutParams vp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT); 
     final LinearLayout layout = (LinearLayout) findViewById(R.id.imageLayout); 


     for (int i = 0; i < 3; i++) { 
      final ImageView image = new ImageView(MainActivity.this); 
      image.setLayoutParams(vp); 
      if (i == 0) 
       image.setImageDrawable(getResources().getDrawable(R.drawable.item_image1)); 
      else image.setImageDrawable(getResources().getDrawable(R.drawable.item_image2)); 
      if (i == 2) 
       image.setVisibility(View.VISIBLE); 
      else 
       image.setVisibility(View.GONE); 
      layout.addView(image); 
     } 


     btn_expand.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       expandOrCollapse(layout.getChildAt(2), true, layout.getChildAt(0).getHeight() + layout.getChildAt(1).getHeight()); 
       expandOrCollapse(layout.getChildAt(1), true, layout.getChildAt(0).getHeight()); 
       expandOrCollapse(layout.getChildAt(0), true, 0); 


      } 
     }); 
     btn_collapse.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 

       expandOrCollapse(layout.getChildAt(0), false, 0); 
       expandOrCollapse(layout.getChildAt(1), false, layout.getChildAt(0).getHeight()); 
       expandOrCollapse(layout.getChildAt(2), false, layout.getChildAt(0).getHeight() + layout.getChildAt(1).getHeight()); 
      } 
     }); 


    } 


    public void expandOrCollapse(final View v, boolean is_expand, final int animheight) { 
     TranslateAnimation anim = null; 
     if (is_expand) { 
      anim = new TranslateAnimation(0.0f, 0.0f, -animheight, 0.0f); 
      v.setVisibility(View.VISIBLE); 
      Animation.AnimationListener expandedlistener = new Animation.AnimationListener() { 
       @Override 
       public void onAnimationStart(Animation animation) { 
       } 

       @Override 
       public void onAnimationRepeat(Animation animation) { 
       } 

       @Override 
       public void onAnimationEnd(Animation animation) { 


       } 
      }; 

      anim.setAnimationListener(expandedlistener); 
     } else { 
      anim = new TranslateAnimation(0.0f, 0.0f, 0.0f, -animheight); 
      Animation.AnimationListener collapselistener = new Animation.AnimationListener() { 
       @Override 
       public void onAnimationStart(Animation animation) { 
       } 

       @Override 
       public void onAnimationRepeat(Animation animation) { 
       } 

       @Override 
       public void onAnimationEnd(Animation animation) { 
        v.setVisibility(View.GONE); 
       } 
      }; 

      anim.setAnimationListener(collapselistener); 
     } 

     anim.setDuration(1500); 
     anim.setInterpolator(new AccelerateInterpolator(0.5f)); 
     v.startAnimation(anim); 
    } 
} 

activity_mainn.xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/activity_main" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    android:orientation="vertical" 
    android:background="@android:color/holo_blue_dark" 
    tools:context="ksp.com.animationssample.MainActivity"> 

    <Button 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerHorizontal="true" 
     android:id="@+id/btn_expand" 
     android:text="Expand" 
     /> 
    <Button 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/btn_collapse" 
     android:text="Collopse"/> 
<ScrollView 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:scrollbars="vertical"> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:id="@+id/imageLayout" 
     android:gravity="center" 

     android:orientation="vertical" 
     android:layout_height="wrap_content"> 
    </LinearLayout> 
    <!--android:animateLayoutChanges="true"--> 
</ScrollView> 


</RelativeLayout> 

当我点击在第一时间展开按钮没有显示从它的工作,第二次的动画。

启用可见项后点击崩溃按钮。

下一步做什么: 当我选择它来显示选择动画,然后合拢动画播放,倒塌后它就像我在图片上面提到显示为顶视图中的任何视图项目。目前我硬编码的意见,并为每个视图静态动画编写静态动画,即(expandOrCollapse(view, height_of_view)

我搜索了一段时间,但没有运气。

我遵循Vie expand/collapsesmooth expand/collapse,但他们不能帮助我扩展线性布局中的所有视图。

我们可以做这个列表视图是回收视图还是什么?

为节省时间我已经加入我的样品git的枢纽,你可以尝试一下Animation Sample Github

建议我请。

+0

只是为了清楚这个问题 - 你想要底部的信用卡在折叠后仍然可见?还是有其他问题? –

+0

假设当我点击第二张牌时,它必须在崩溃后出现顶部 – Kathi

+1

CardStackView是一个很好的库,考虑访问一次,https://github.com/loopeer/CardStackView –

回答

1

尽量不要隐藏你的目标视图(现在你设置可见走了倒塌的动画结束后,所有的意见),并做到这一点:

targetView.bringToFront(); 
targetView.invalidate(); 
targetView.getParent().requestLayout(); 
+0

感谢'v.bringToFront()'方法我将更新我的回购与该更改,但我们如何处理,如果视图是动态的,即从服务器计数。在这里,我为每个视图单独编写了动画,这不是正确的方式吗?你能建议我更好的方式来处理这种类型的动画多视图?您也可以看到列表中应该有选择视图的选择动画。我们该如何处理?感谢您的帮助 – Kathi

+0

我想,您可以将动画应用于for-loop。对于选择动画 - 你说什么样的动画?在onClick回调中,我们获得目标视图,并可以应用任何类型的动画,甚至可以在xml布局中设置动画。我想你没有太多的项目要动画,所以它足以使用FrameLayout作为容器(而不是ListView) –

+0

@ kathi可以附上学习目的的代码:)。真的我不能如何处理这个问题:( – udayatom

5

我已经单独的类吧。检查它是否适用于您:

public class DropDownAnim extends Animation { 
    private final int sourceHeight; 
    private final int targetHeight; 
    private final View view; 
    private final boolean down; 

    public DropDownAnim(View view, int sourceHeight, int targetHeight, boolean down) { 
     this.view = view; 
     this.sourceHeight = sourceHeight; 
     this.targetHeight = targetHeight; 
     this.down = down; 
    } 

    @Override 
    protected void applyTransformation(float interpolatedTime, Transformation t) { 
     int newHeight; 
     if (down) { 
      newHeight = sourceHeight + (int) (targetHeight * interpolatedTime); 
     } else { 
      newHeight = sourceHeight + targetHeight - (int) (targetHeight * interpolatedTime);//(int) (targetHeight * (1 - interpolatedTime)); 
     } 
     view.getLayoutParams().height = newHeight; 
     view.requestLayout(); 
     view.setVisibility(down ? View.VISIBLE : View.GONE); 
    } 

    @Override 
    public void initialize(int width, int height, int parentWidth, 
      int parentHeight) { 
     super.initialize(width, height, parentWidth, parentHeight); 
    } 

    @Override 
    public boolean willChangeBounds() { 
     return true; 
    } 
} 

虽然与此工作。为了扩大

public void expand(final View v) { 
     final int sourceHeight = v.getLayoutParams().height; 
     final int targetHeight = getResources().getDimensionPixelSize(R.dimen.notification_height);//v.getMeasuredHeight(); 
     DropDownAnim a = new DropDownAnim(v,targetHeight,true); 
     a.setDuration((int) (targetHeight/v.getContext().getResources().getDisplayMetrics().density)); 
     a.setAnimationListener(new Animation.AnimationListener() { 
      @Override 
      public void onAnimationStart(Animation animation) { 

      } 

      @Override 
      public void onAnimationEnd(Animation animation) { 
       // Your code on end of animation 
      } 

      @Override 
      public void onAnimationRepeat(Animation animation) { 

      } 
     }); 
     v.setVisibility(View.INVISIBLE); 
     v.startAnimation(a); 
    } 

对于崩溃:

public void collapse(final View v) { 
     final int sourceHeight = v.getLayoutParams().height; 
     final int targetHeight = v.getMeasuredHeight(); 
     DropDownAnim a = new DropDownAnim(v, targetHeight, false); 
     a.setDuration((int) (targetHeight/v.getContext().getResources().getDisplayMetrics().density)); 
     a.setAnimationListener(new Animation.AnimationListener() { 
      @Override 
      public void onAnimationStart(Animation animation) { 

      } 

      @Override 
      public void onAnimationEnd(Animation animation) { 
       // Your code on end of animation 
      } 

      @Override 
      public void onAnimationRepeat(Animation animation) { 

      } 
     }); 
     v.startAnimation(a); 
    } 

更新:
sourceHeight加入防止视图闪烁。

+0

感谢您的全面解决方法,我将这些方法应用于我像'expand(layout.getChildAt(2)); expand(layout.getChildAt(1)); expand(layout.getChildAt(0)); '似乎是它的作品。此代码如何适用于动态添加的布局?我们可以用循环吗? – Kathi

+0

是的,你可以使用循环 –

+0

经过对你的代码的研究之后,我把你的代码放到了我的项目中,但是我的观点只是闪烁而去。你能帮助更多的代码如何工作。我在线性布局中申请了每个视图。另外它是如何知道动画高度的? – Kathi