设备屏幕上的中心图像

Question

I've a simple square image for test the drag zoom & rotation system. All work fine but I've problem on center the image in the center of device as show in picture (the same thing of matrix images... I've read a lot of post here but not have found a solution). With the code below the image is on the left corner.

the xml file...

<?xml version="1.0" encoding="utf-8"?>

xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
tools:context="com.br1dev.myapplication.MainActivity">

<RelativeLayout

    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/fullImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:contentDescription="@android:string/untitled"
        android:scaleType="centerInside"
        app:srcCompat="@drawable/f1" />

</RelativeLayout>

and the activity

public class MainActivity extends AppCompatActivity
{
ImageView fullImage;
float scalediff;
private static final int NONE = 0;
private static final int DRAG = 1;
private static final int ZOOM = 2;
private int mode = NONE;
private float oldDist = 1f;
private float d = 0f;
private float newRot = 0f;

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

    init();

    RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(800, 800);
    layoutParams.topMargin = 0;
    layoutParams.bottomMargin = 0;
    layoutParams.rightMargin = 0;
    layoutParams.leftMargin = 0;

    fullImage.setLayoutParams(layoutParams);

    fullImage.setOnTouchListener(new View.OnTouchListener()
    {
        RelativeLayout.LayoutParams parms;
        int startwidth;
        int startheight;
        float dx = 0, dy = 0, x = 0, y = 0;
        float angle = 0;

        @Override
        public boolean onTouch(View v, MotionEvent event)
        {

            final ImageView view = (ImageView) v;

            ((BitmapDrawable) view.getDrawable()).setAntiAlias(true);
            switch (event.getAction() & MotionEvent.ACTION_MASK)
            {
                case MotionEvent.ACTION_DOWN:

                    parms = (RelativeLayout.LayoutParams) view.getLayoutParams();
                    startwidth = parms.width;
                    startheight = parms.height;
                    dx = event.getRawX() - parms.leftMargin;
                    dy = event.getRawY() - parms.topMargin;
                    mode = DRAG;
                    break;

                case MotionEvent.ACTION_POINTER_DOWN:

                    oldDist = spacing(event);
                    if (oldDist > 10f)
                    {
                        mode = ZOOM;
                    }

                    d = rotation(event);

                    break;

                case MotionEvent.ACTION_UP:

                    break;

                case MotionEvent.ACTION_POINTER_UP:

                    mode = NONE;

                    break;

                case MotionEvent.ACTION_MOVE:

                    if (mode == DRAG)
                    {
                        x = event.getRawX();
                        y = event.getRawY();

                        parms.leftMargin = (int) (x - dx);
                        parms.topMargin = (int) (y - dy);

                        parms.rightMargin = 0;
                        parms.bottomMargin = 0;
                        parms.rightMargin = parms.leftMargin + (5 * parms.width);
                        parms.bottomMargin = parms.topMargin + (10 * parms.height);

                        view.setLayoutParams(parms);

                    } else if (mode == ZOOM) {

                        if (event.getPointerCount() == 2)
                        {
                            newRot = rotation(event);
                            float r = newRot - d;
                            angle = r;

                            x = event.getRawX();
                            y = event.getRawY();

                            float newDist = spacing(event);
                            if (newDist > 10f)
                            {
                                float scale = newDist / oldDist * view.getScaleX();
                                if (scale > 0.6)
                                {
                                    scalediff = scale;
                                    view.setScaleX(scale);
                                    view.setScaleY(scale);
                                }
                            }

                            view.animate().rotationBy(angle).setDuration(0).setInterpolator(new LinearInterpolator()).start();

                            x = event.getRawX();
                            y = event.getRawY();

                            parms.leftMargin = (int) ((x - dx) + scalediff);
                            parms.topMargin = (int) ((y - dy) + scalediff);

                            parms.rightMargin = 0;
                            parms.bottomMargin = 0;
                            parms.rightMargin = parms.leftMargin + (5 * parms.width);
                            parms.bottomMargin = parms.topMargin + (10 * parms.height);

                            view.setLayoutParams(parms);
                        }
                    }
                    break;
            }
            return true;
        }
    });
}

private void init()
{
    fullImage = findViewById(R.id.fullImage);
}

private float spacing(MotionEvent event)
{
    float x = event.getX(0) - event.getX(1);
    float y = event.getY(0) - event.getY(1);
    return (float) Math.sqrt(x * x + y * y);
}

private float rotation(MotionEvent event)
{
    double delta_x = (event.getX(0) - event.getX(1));
    double delta_y = (event.getY(0) - event.getY(1));
    double radians = Math.atan2(delta_y, delta_x);
    return (float) Math.toDegrees(radians);
}
}

Answer 1

In RelativeLayout , add android:layout_centerInParent="true" .

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon"
        android:scaleType="centerInside"
        android:layout_centerInParent="true" />

</RelativeLayout>

Answer 2

Since you are assigning your image view a new set of layout params programmatically:

RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(800, 800);
layoutParams.topMargin = 0;
layoutParams.bottomMargin = 0;
layoutParams.rightMargin = 0;
layoutParams.leftMargin = 0;

fullImage.setLayoutParams(layoutParams);

Every constraint on the image view in this layout that you previously used (inside .xml) is reset to default and you must include the constraints again programatically. For example in case of your code, you forgot to add the centerInParent constraint, so including centerInParent and changing width and height to match parent:

RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT);
    layoutParams.topMargin = 0;
    layoutParams.bottomMargin = 0;
    layoutParams.rightMargin = 0;
    layoutParams.leftMargin = 0;

    fullImage.setLayoutParams(layoutParams);

Results in what was expected: