布局动画Android[Facebook] [英] Layout Animation Android[Facebook]
问题描述
我想为两个不同的布局制作动画.
I want to Animate two Different layouts.
示例
我已经按照我想要的方式制作了动画，我只想为不同的 XML 布局制作动画.有一个 LayoutAnimationController 类，但我真的不知道如何使用它.有人能指出我正确的方向吗，举个例子或很好的解释.
I already have the animation the way I want, I just want to animate a different XML Layout. There is a class LayoutAnimationController, but I really dont know how to use it. Can some one point me in the right direction, with an example or good explanation.
这是我用来制作动画的代码.
heres the code I use to animate.
TranslateAnimation slide = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 300f, 0,0 );
slide.setAnimationListener(AL);
slide.setFillAfter(true);
slide.setDuration(1000);
parentlayout.startAnimation(slide);
更新由于获得了很多赞成票，我决定将一个示例项目放入 Git 存储库.请参阅我对链接的回答.
Update Because of the many up-votes I decided to put a example project into a Git repository. See my answers for the link.
推荐答案
好的 在花了 2 天时间阅读类似问题以及人们如何解决这些问题后，我终于能够创建我想要的东西.我无法使用 2 个不同的 XML 文件执行此操作，但我怀疑这是不可能的.
Ok After spending 2 days reading about similair problems and how people solved them I finally was able to create the thing I wanted. I was not able to do it with 2 diffrent XML files, but I doubt it is not possible.
我确实遇到了一些问题.
I did encountert some problems tho.
第一个动画结束后，按钮不可点击.这是因为动画显示所有东西都移动了但没有更新布局，所以按钮仍然在动画开始的位置.所以我不得不计算布局的新位置.
After the first animation ended, the button was not clickable. This is because the animation shows that everything is moved but it does not update the layout, so the button is still at the position where the animation started. So I had to calculate the new position of the layout.
我想我在某处读到这在 3.0 中不再是问题，但如果我错了，请纠正我
I think I read somewhere that this is no longer an issue in 3.0, but correct me if I am wrong
另一个是，当我的动画最终按照我希望的方式工作时，我的底层视图在动画完成之前消失了，因为我调用了 view.setVisabilty(View.GONE);.现在的问题是，当我没有调用该方法时，动画只是挂了一秒钟，然后射击者到达动画的结束位置.所以我添加了一个空的 LinearLayout(可以是任何东西)，默认属性为 GONE，当动画开始时将它设置为 Visible.当您恢复动画时，再次将其设置为消失.完成此操作后，动画按照我想要的方式工作.
Another was that when I had my animation finally working the way I wanted my underlaying view did disapear before the animation was finished because I invoked view.setVisabilty(View.GONE);.
Now the problem was when I did not invoke that method, the animation just hang for a second and then shooter to the end position of the animation.
So I added a empty LinearLayout (can be anything) , Default property on GONE, when the animation starts set it on Visible. when you revert the animation, set it again to gone.
after doing this the animation was working the way I wanted.
如果您使用的是 Rel、Linear 或任何其他布局.那么你不能按 Z 顺序堆叠视图，所以你必须使用 SurfaceView.
And if you are using a Rel, Linear, or any other layout. then you cant stack views in the Z order so you have to use an SurfaceView.
这里是 main.xml
so heres main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<SurfaceView
android:id="@+id/surfaceView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<RelativeLayout
android:id="@+id/layout"
android:layout_width="220dp"
android:layout_height="fill_parent"
android:background="#ffee00"
android:orientation="vertical" >
<LinearLayout
android:id="@+id/fake_layouy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" android:visibility="gone">
</LinearLayout>
<ListView
android:id="@+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</RelativeLayout>
<RelativeLayout
android:id="@+id/layoutTwo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ff00ee"
android:orientation="vertical">
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" android:background="#ff0000" android:layout_margin="2dp">
<Button
android:id="@+id/button"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="slide" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
这里是java代码
public class MenuAnimationActivity extends Activity {
private Button buttonSwitch;
private View subLayout;
private View topLayout;
private ListView subViewListView;
private String listViewDummyContent[]={"Android","iPhone","BlackBerry","AndroidPeople"};
private Display display;
private View fakeLayout;
private AnimationListener AL;
// Values for after the animation
private int oldLeft;
private int oldTop;
private int newleft;
private int newTop;
private int screenWidth;
private int animToPostion;
// TODO change the name of the animToPostion for a better explanation.
private boolean menuOpen = false;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
buttonSwitch = (Button)findViewById(R.id.button);
subLayout = (View) findViewById(R.id.layout);
topLayout = (View) findViewById(R.id.layoutTwo);
subViewListView=(ListView)findViewById(R.id.listView1);
fakeLayout = (View)findViewById(R.id.fake_layouy);
subViewListView.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1 , listViewDummyContent));
display = getWindowManager().getDefaultDisplay();
screenWidth = display.getWidth();
int calcAnimationPosition = (screenWidth /3);
// Value where the onTop Layer has to animate
// also the max width of the layout underneath
// Set Layout params for subLayout according to calculation
animToPostion = screenWidth - calcAnimationPosition;
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(animToPostion, RelativeLayout.LayoutParams.FILL_PARENT);
subLayout.setLayoutParams(params);
topLayout.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_DOWN) {
if (menuOpen == true) {
animSlideLeft();
}
}
return false;
}
});
buttonSwitch.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(menuOpen == false){
animSlideRight();
} else if (menuOpen == true) {
animSlideLeft();
}
}
});
AL = new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
buttonSwitch.setClickable(false);
topLayout.setEnabled(false);
}
@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationEnd(Animation animation) {
if(menuOpen == true) {
Log.d("", "Open");
topLayout.layout(oldLeft, oldTop, oldLeft + topLayout.getMeasuredWidth(), oldTop + topLayout.getMeasuredHeight() );
menuOpen = false;
buttonSwitch.setClickable(true);
topLayout.setEnabled(true);
} else if(menuOpen == false) {
Log.d("","FALSE");
topLayout.layout(newleft, newTop, newleft + topLayout.getMeasuredWidth(), newTop + topLayout.getMeasuredHeight() );
topLayout.setEnabled(true);
menuOpen = true;
buttonSwitch.setClickable(true);
}
}
};
}
public void animSlideRight(){
fakeLayout.setVisibility(View.VISIBLE);
newleft = topLayout.getLeft() + animToPostion;
newTop = topLayout.getTop();
TranslateAnimation slideRight = new TranslateAnimation(0,newleft,0,0);
slideRight.setDuration(500);
slideRight.setFillEnabled(true);
slideRight.setAnimationListener(AL);
topLayout.startAnimation(slideRight);
}
public void animSlideLeft() {
fakeLayout.setVisibility(View.GONE);
oldLeft = topLayout.getLeft() - animToPostion;
oldTop = topLayout.getTop();
TranslateAnimation slideLeft = new TranslateAnimation(newleft,oldLeft,0,0);
slideLeft.setDuration(500);
slideLeft.setFillEnabled(true);
slideLeft.setAnimationListener(AL);
topLayout.startAnimation(slideLeft);
}
}
我对触摸视图和其他东西做了一些额外的编码.
I did some extra coding on touching views and stuff.
最后的结果
动画之前
第一个动画之后
在第二个 Animation 回到左边之后，它声明作为第一个 Image 返回.
And after the second Animation back to the left it states returns as the first Image.
那些对我有帮助的帖子确实值得称赞，但我找不到任何一个.
Al those posts that helped me really deserve some credit but I cant find any of them.
编辑
GIT https://bitbucket.org/maikelbollemeijer/sidepanelswitcher
更新:https://github.com/jfeinstein10/SlidingMenu此库与 Actionbar Sherlock 兼容.
Update: https://github.com/jfeinstein10/SlidingMenu this lib is compatible with Actionbar Sherlock.
希望能帮到你
这篇关于布局动画Android[Facebook]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
