布局动画的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.
继承人的code我用它来制作动画。
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天阅读similair问题以及人们如何解决他们，我终于能够创造我想要的东西之后。 我无法与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.
我也encountert一些问题寿。
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
另一个问题是，当我有我的动画最后的工作，我想我的垫层视图的方式做disapear之前的动画结束了，因为我调用 view.setVisabilty（View.GONE）; 。
现在的问题是，当我不调用该方法，动画只是挂一秒钟，然后射手动画的结束位置。
所以我加了一个空的LinearLayout（可以是任何东西），默认的属性上消失了，当动画开始就可见设置。当你恢复动画，再次将其设置为不见了。
这样做后的动画正在我想要的方式。
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.
如果你使用的是相对，直线，或任何其他的布局。 那么你不能堆叠视图的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 code
heres the java code
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.
和最终的结果。
动画之前
第一个动画后
和第二动画回后，离开它指出返回的第一张图像。
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 这个Lib是动作条福尔摩斯兼容。
Update: https://github.com/jfeinstein10/SlidingMenu this lib is compatible with Actionbar Sherlock.
希望这有助于
这篇关于布局动画的Android [Facebook的]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
