如何设置对象动画制作器以跨各种屏幕尺寸制作动画

Question

So I have this animation I have been working on. Essentially, when you click the image all it does is simply animate the image to a new Y coordinate. Note: Keep in mind that my images are all scaled appropriately for mdli, hdpi, xhdpi etc. So I have 2 problems: 1 . When I use .setY on an image view, the y coordinate is loaded differently on other phones. 2 . When I use both my image and txt animate methods, they both animate to different y coordinates based on different phones/screens. So my question is how do I fix both of these problems so that they are consistent across all screen sizes?

public class MainActivity extends Activity {

    final String tag = "My activity";

    ImageView mWhatsTheAnswerImg, mInspireMeImg, mHelpMeThink, mTalkToVince;


    ObjectAnimator mImageAnimation, mTxtAnimation;



    TextView mWhatsTheAnswerText, mInspireMeTxt, mHelpMeThinkTxt, mTalkToVinceTxt;
    boolean mWhatsTheAnswerBOOL,  mInspireMeBOOL, mHelpMeThinkBOOL, mTalkToVinceBOOL =false;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);



        ActionBar actionBar = getActionBar();
        actionBar.hide();



        mInspireMeImg = (ImageView) findViewById(R.id.inspireme);

        mInspireMeImg.setY(750);

        mInspireMeTxt = (TextView) findViewById(R.id.inspireMeTxt);

        mInspireMeTxt.setY(750);


        mInspireMeImg.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                if (mInspireMeBOOL) {



                    imageAnimate(mInspireMeImg, 750);
                    txtAnimate(mInspireMeTxt, 750);

                    Log.w(tag, "DOWN Coordinates: " + mInspireMeImg.getY() + "Txt: " + mInspireMeTxt.getY());





                    mInspireMeBOOL = false;
                } else {



                    mInspireMeBOOL = true;



                    imageAnimate(mInspireMeImg, +290);
                    txtAnimate(mInspireMeTxt, +290);

                    Log.w(tag, "UP Coordinates: " + mInspireMeImg.getY() + "Txt: " + mInspireMeTxt.getY());



                }

            }
        });

Image animate and txt animate methods:

private void imageAnimate(ImageView img, float YCoordinates){

     mImageAnimation =ObjectAnimator.ofFloat(img, View.TRANSLATION_Y,YCoordinates);

        Log.w(tag, "IMG Coordinates: " + img.getY());

        mImageAnimation.setDuration(1000);

        mImageAnimation.start();

    }


    private void txtAnimate(TextView txt, float YCoordinates){


        mTxtAnimation = ObjectAnimator.ofFloat(txt, View.TRANSLATION_Y, YCoordinates);

        Log.w(tag, "TXT Coordinates: " + txt.getY());


        mTxtAnimation.setDuration(1000);

        mTxtAnimation.start();
    }



}

Edit: 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"

    tools:context="com.wyatt.avinceandroid.app.MainActivity">


    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/Background"
        android:src="@drawable/coachvincebackground"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:scaleType="fitXY"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="1000dp"
        android:id="@+id/inspireme"
        android:src="@drawable/inspiremescreen"
        android:scaleType="fitXY"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/inspireMeTxt"
        android:layout_alignTop="@+id/helpMeThink"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="89dp" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="1000dp"
        android:id="@+id/helpMeThink"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="71dp"
        android:src="@drawable/helpmethinkscreen"
        android:scaleType="fitXY"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/helpMeThinkTxt"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="1000dp"
        android:id="@+id/whatsTheAnswer"
        android:src="@drawable/whatstheanswerscreen"
        android:scaleType="fitXY"
      />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/whatsTheAnswerTxt"
        android:layout_alignTop="@+id/AskVince"
        android:layout_alignLeft="@+id/inspireMeTxt"
        android:layout_alignStart="@+id/inspireMeTxt" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="1000dp"
        android:id="@+id/AskVince"
        android:src="@drawable/askvincescreen"
        android:scaleType="fitXY"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/askVinceTxt"
        android:layout_below="@+id/helpMeThinkTxt"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

Answer 1

The setY and other similar methods expect values in pixels. Now, this is exactly where the problem lies. Different phones have screens of different resolutions and so the 750th pixel will be located at different positions on different phones unless two displays are identical.

The solution is simple. Use values in DP :

mInspireMeImg.setY(dpToPx(750));

and keep this method stored somewhere:

public static int dpToPx(float dpValue, Context context){
    return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpValue, context.getResources().getDisplayMetrics());
}

More about DP unit:

http://developer.android.com/training/multiscreen/screendensities.html

What is the difference between "px", "dp", "dip" and "sp" on Android?