重新调整两个视图(展开/折叠)

时间:2015-05-16 21:19:10

标签: android animation layout android-animation

我在垂直linearlayout中有两个视图(片段),就像这样。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <FrameLayout
        android:id="@+id/mapFragment"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />

    <FrameLayout
        android:id="@+id/listFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        />

</LinearLayout>

我试图扩展mapFragment占用整个空间。将listFragment很好地向下推,同时展开mapFragment。

我正在努力学习如何用漂亮的动画做到这一点?

总的来说,调整地图控件的操作太重了吗?

1 个答案:

答案 0 :(得分:0)

我用两个imageView而不是FragmentLayout实现了这个例子。正如您想要的那样,它正在崩溃和扩展。有两个按钮可以展开和折叠。

这些是我的java类,xml和动画。

java class

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;

public class expandAndCollapes extends Activity{


    boolean isExpanded=false;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.extend_lay);

        Button expand=(Button)findViewById(R.id.button1);
        Button collapse=(Button)findViewById(R.id.button2);


        final ImageView image1=(ImageView)findViewById(R.id.imageView1);
        final ImageView image2=(ImageView)findViewById(R.id.imageView2);



        expand.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                if(!isExpanded){
                    image1.startAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.scale_out));
                    image2.startAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_down));
                    isExpanded=true;
                }

            }
        });

        collapse.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {

                if(isExpanded){
                    image1.startAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.scale_in));
                    image2.startAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_up));
                    isExpanded=false;
                }
            }
        });
    }

}

<强> XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <Button
        android:id="@+id/button1"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="expand" />

    <Button
        android:id="@+id/button2"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/button1"
        android:text="collapse" />

    <LinearLayout
        android:id="@+id/inner_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/button1"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
            android:src="@drawable/ic_launcher" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
            android:src="@drawable/ic_launcher" />

    </LinearLayout>

</RelativeLayout>

<强> scale_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/linear_interpolator">


    <scale
        android:duration="1000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="0%"
        android:toXScale="1"
        android:toYScale="4" >
    </scale>
</set>

<强> scale_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/linear_interpolator">


    <scale
        android:duration="1000"
        android:fromXScale="1"
        android:fromYScale="4"
        android:pivotX="50%"
        android:pivotY="0%"
        android:toXScale="1"
        android:toYScale="1" >
    </scale>
</set>

<强> slide_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/linear_interpolator" >

    <translate
        android:duration="1000"
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="100%" />

</set>

向上滑动

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/linear_interpolator" >

    <translate
        android:duration="1000"
        android:fromXDelta="0%"
        android:fromYDelta="100%"
        android:toXDelta="0%"
        android:toYDelta="0%" />

</set>

我所做的是缩放第一个视图1到4并向下滑动第二个视图。 它应该是4,因为你的布局权重是1和3(1 + 3 = 4)。希望这有助于您获得一些想法。