Question

我试图让一个图层列表可绘制从其自身的一端到另一端。图层列表必须是当前屏幕宽度的400％。这是我到目前为止所做的：

我正在努力让它按照下图所示的方式工作。

包含视图loading.xml

<RelativeLayout 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:id="@+id/loading" >

    <ImageView
        android:id="@+id/iv_loading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:scaleType="matrix"
        android:layout_alignParentLeft="true"
        android:src="@drawable/scale_loading" />

    <TextView
        android:layout_below="@id/iv_loading"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:textSize="20sp"
        android:layout_marginRight="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="L O A D I N G"/>


</RelativeLayout>

loading_line.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:left="0dp" android:right="420dp">
        <shape android:shape="rectangle">
            <gradient 
                android:startColor="#FFFFFFFF" 
                android:endColor="@color/green_100"
                android:angle="0" />            
            <size 
                android:width="60dp"
                android:height="2dp" />

        </shape>
    </item>
    <item android:left="60dp" android:right="360dp">
        <shape android:shape="rectangle">       
            <gradient 
                android:startColor="@color/green_100" 
                android:endColor="#FFFFFFFF"
                android:angle="0" />
            <size
                android:width="60dp"
                android:height="2dp" />           
        </shape>    
    </item>
    <item android:left="120dp" android:right="300dp">
        <shape android:shape="rectangle">
            <gradient 
                android:startColor="#FFFFFFFF" 
                android:endColor="@color/blue_100"
                android:angle="0" />            
            <size 
                android:width="60dp"
                android:height="2dp" />

        </shape>
    </item>
    <item android:left="180dp" android:right="240dp">
        <shape android:shape="rectangle">       
            <gradient 
                android:startColor="@color/blue_100" 
                android:endColor="#FFFFFFFF"
                android:angle="0" />
            <size
                android:width="60dp"
                android:height="2dp" />           
        </shape>    
    </item>
        <item android:left="240dp" android:right="180dp">
        <shape android:shape="rectangle">
            <gradient 
                android:startColor="#FFFFFFFF" 
                android:endColor="@color/red_100"
                android:angle="0" />            
            <size 
                android:width="60dp"
                android:height="2dp" />

        </shape>
    </item>
    <item android:left="300dp" android:right="120dp">
        <shape android:shape="rectangle">       
            <gradient 
                android:startColor="@color/red_100" 
                android:endColor="#FFFFFFFF"
                android:angle="0" />
            <size
                android:width="60dp"
                android:height="10dp" />              
        </shape>    
    </item>
    <item android:left="360dp" android:right="60dp">
        <shape android:shape="rectangle">
            <gradient 
                android:startColor="#FFFFFFFF" 
                android:endColor="@color/green_100"
                android:angle="0" />            
            <size 
                android:width="60dp"
                android:height="2dp" />

        </shape>
    </item>
    <item android:left="420dp" android:right="0dp">
        <shape android:shape="rectangle">       
            <gradient 
                android:startColor="@color/green_100" 
                android:endColor="#FFFFFFFF"
                android:angle="0" />
            <size
                android:width="60dp"
                android:height="2dp" />           
        </shape>    
    </item>
</layer-list>

loading_left_to_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set>
  <translate xmlns:android="http://schemas.android.com/apk/res/android"
   android:fromXDelta="100%"
   android:toXDelta="0"
   android:interpolator="@android:anim/linear_interpolator"
   android:duration="5000"/>
</set>

scale_loading.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:drawable="@drawable/loading_line"
        android:scaleGravity="center_vertical|center_horizontal"
        android:scaleHeight="100%"
        android:scaleWidth="400%" />

Android中的代码：

    View view = inflater.inflate(R.layout.loading, container, false);               
    ImageView myImage = (ImageView) view.findViewById(R.id.iv_loading);
    Animation animation = AnimationUtils.loadAnimation(getActivity(), R.anim.loading_left_to_right);
    animation.setRepeatCount(Animation.INFINITE);
    myImage.startAnimation(animation);

以下是我希望loading_line.xml看起来和动画的图片集：

enter image description here

Answer 1

这是我的工作代码：

<强> loading.xml

android：scaleX在缩放drawable方面做得更好，而且完全没有scale_loading.xml

<ImageView
    android:id="@+id/iv_loading"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_alignParentLeft="true"
    android:src="@drawable/loading_line"
    android:scaleX="4"
    />

<TextView
    android:layout_below="@id/iv_loading"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="20dp"
    android:textSize="20sp"
    android:layout_marginRight="20dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="L O A D I N G"/>

<强> loading_left_to_right.xml

必须稍微调整XDelta

<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="150%"
    android:toXDelta="-150%"
    android:duration="1000"
    android:repeatMode="restart"
    android:repeatCount="infinite"/>

<强> MyActivity.java

只需启动动画即可。我有一个线性插值器，但这取决于你先生。

Animation animation = AnimationUtils.loadAnimation(this, R.anim.loading_left_to_right);
myImage.startAnimation(animation);

<强>摘要

这些是我编辑过的所有文件。

。不再需要scale_loading.xml

希望这一切都有帮助！这是一部非常甜美的动画，无论你做什么都好运！

Android Drawable动画和缩放

1 个答案: