调整两个视图的大小（展开/折叠）

Question

我在这样的垂直线性布局中有两个视图（片段）。

<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。

我正在努力如何用漂亮的动画来做到这一点？

总体来说是不是调整地图控件的操作太繁重了？

Answer 1

我用两个 imageViews 而不是 FragmentLayout 实现了这个示例。它就像您想要的那样折叠和扩展。有两个按钮可以展开和折叠。

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

java类

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

<?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)。希望这对您有所帮助。