从外部布局到实际位置对视图进行动画处理

时间:2019-07-22 19:15:37

标签: android animation android-gridlayout

我有下一个xml结构:

<RelativeLayout
    ...>
    <RelativeLayout
        ...
        android:centerInParent=true/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="3"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:weightSum="2"
            android:orientation="horizontal"
            android:layout_weight="1">
            <View
                android:id="@+id/top_left"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_weight="1"/>
            <View
                android:id="@+id/top_right"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_weight="1"/>
         </Linearlayout>

         <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:weightSum="2"
            android:orientation="horizontal"
            android:layout_weight="1">
            <View
                android:id="@+id/middle_left"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_weight="1"/>
            <View
                android:id="@+id/middle_right"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_weight="1"/>
         </Linearlayout>

         <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:weightSum="2"
            android:orientation="horizontal"
            android:layout_weight="1">
            <View
                android:id="@+id/bottom_left"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_weight="1"/>
            <View
                android:id="@+id/bottom_right"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_weight="1"/>
         </Linearlayout>

     </Linearlayout>

 </Relativelayout>

enter image description here

我需要像放置图片一样放置视图(如果视图有4个正方形,则需要放置在这些正方形的中间)

加载视图后,我需要将所有视图从父级RelativeLayout中心移动到正常视图位置。

我尝试将RelativeLayout作为父视图并为所有视图设置动画,但是视图可以更改其大小,因此我不知道每个视图的最终位置。

反正上面的结构可以实现吗?

谢谢!

3 个答案:

答案 0 :(得分:0)

移动任何视图的最简单方法:

view.animate().x(toX).y(toY).start()

答案 1 :(得分:0)

我不确定这是您要的内容,但是如果我理解正确,您希望视图从屏幕中心移动到布局中的正确位置。这样做的想法是让每个视图都以属性android:layout_centerInParent="true"开始,以确保它们在屏幕中间开始。这样(我添加了颜色,使它们更易于查看:

<?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">

<View
    android:id="@+id/top_left"
    android:layout_centerInParent="true"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@android:color/black"/>

<View
    android:id="@+id/top_right"
    android:layout_centerInParent="true"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@android:color/holo_orange_dark"/>


<View
    android:id="@+id/middle_left"
    android:layout_centerInParent="true"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@android:color/holo_blue_dark"/>

<View
    android:id="@+id/middle_right"
    android:layout_centerInParent="true"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@android:color/holo_green_dark"/>

<Button
    android:id="@+id/button"
    android:gravity="bottom"
    android:layout_alignParentBottom="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Start animation"/>

</RelativeLayout>

然后,在您的代码中,您必须更改视图相对于彼此的位置。 像这样:

View tl = findViewById(R.id.top_left);
View tr = findViewById(R.id.top_right);
View ml = findViewById(R.id.middle_left);
View mr = findViewById(R.id.middle_right);

TransitionManager.beginDelayedTransition((ViewGroup) tl.getParent());
RelativeLayout.LayoutParams layoutParams1 = (RelativeLayout.LayoutParams) tl.getLayoutParams();
// Remove this property.
layoutParams1.removeRule(RelativeLayout.CENTER_IN_PARENT);
// Position View in correct location.
layoutParams1.addRule(RelativeLayout.ALIGN_PARENT_TOP);
layoutParams1.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
tl.setLayoutParams(layoutParams1);

TransitionManager.beginDelayedTransition((ViewGroup) tr.getParent());
RelativeLayout.LayoutParams layoutParams2 = (RelativeLayout.LayoutParams) tr.getLayoutParams();
layoutParams2.removeRule(RelativeLayout.CENTER_IN_PARENT);
layoutParams2.addRule(RelativeLayout.RIGHT_OF, R.id.top_left);
tr.setLayoutParams(layoutParams2);

TransitionManager.beginDelayedTransition((ViewGroup) ml.getParent());
RelativeLayout.LayoutParams layoutParams3 = (RelativeLayout.LayoutParams) ml.getLayoutParams();
layoutParams3.removeRule(RelativeLayout.CENTER_IN_PARENT);
layoutParams3.addRule(RelativeLayout.BELOW, R.id.top_left);
ml.setLayoutParams(layoutParams3);

TransitionManager.beginDelayedTransition((ViewGroup) mr.getParent());
RelativeLayout.LayoutParams layoutParams4 = (RelativeLayout.LayoutParams) mr.getLayoutParams();
layoutParams4.removeRule(RelativeLayout.CENTER_IN_PARENT);
layoutParams4.addRule(RelativeLayout.BELOW, R.id.top_right);
layoutParams4.addRule(RelativeLayout.RIGHT_OF, R.id.middle_left);
mr.setLayoutParams(layoutParams4);

答案 2 :(得分:0)

我解决了这个问题,将其添加到所有视图的父母中:

data:image/png;base64