编程排队在一个角落里两个视图 [英] Programmatically line up two views at a corner

查看:108
本文介绍了编程排队在一个角落里两个视图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

所以,这似乎是一个很简单的问题,但我不能弄清楚如何缩放视图后,即可获取正确的位置。

我想一个ImageView的排队到另一个的ImageView的右下角。这code,如果我不修改 firstImageView

工作正常

  secondImageView.setX(firstImageView.getRight());
secondImageView.setY(firstImageView.getBottom());

但后来我申请一个翻译或缩放后的firstImageView中,code上面似乎并没有正常工作(在角落不排队)。我猜,缩放不会影响视图的实际大小,即使它明显调整。所以,我怎么会去已被修改后,即使缩放,旋转和/或翻译secondImageView设置为firstImageView右下方?

编辑:在一个角落里code两个视图

  firstImageView.setOnTouchListener(新View.OnTouchListener(){            startx的浮动,startY;
            浮translationX,translationY;
            浮startMoveX,startMoveY;            公共布尔onTouch(视图V,MotionEvent五){                如果(e.getAction()== MotionEvent.ACTION_DOWN){
                    secondImageView.setX(imageView.getRight());
                    secondImageView.setY(imageView.getBottom());
                    secondImageView.setVisibility(View.VISIBLE);                    运行startx = e.getRawX();
                    startY = e.getRawY();                    startMoveX = firstImageView.getX();
                    startMoveY = firstImageView.getY();
                }否则如果(e.getAction()== MotionEvent.ACTION_MOVE){                    translationX = e.getRawX() - 运行startx + startMoveX;
                    translationY = e.getRawY() - startY + startMoveY;
                    firstImageView.setTranslationX(translationX);
                    firstImageView.setTranslationY(translationY);
                    secondImageView.setTranslationX(firstImageView.getX()+ firstImageView.getMeasuredWidth());
                    secondImageView.setTranslationY(firstImageView.getY()+ firstImageView.getMeasuredHeight());                }否则如果(e.getAction()== MotionEvent.ACTION_UP){                }
                返回true;
            }
        });
    }

缩放code:

  secondImageView.setScaleX(2);
secondImageView.setScaleY(2);


解决方案

您在你的假设是正确的。 翻译不影响视图的边界即可。但是,如果你计算的姿态开始从第一第二视图的位置偏移(增量),您可以一次转换两种观点。下面是一个工作示例,您可以使用。

activity_test.xml

 <的RelativeLayout的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android
  的xmlns:工具=htt​​p://schemas.android.com/tool​​s
  机器人:layout_width =match_parent
  机器人:layout_height =match_parent>  < ImageView的
    机器人:ID =@ + ID /摄
    机器人:layout_width =WRAP_CONTENT
    机器人:layout_height =WRAP_CONTENT
    机器人:layout_alignParentTop =真
    机器人:layout_centerHorizo​​ntal =假
    机器人:layout_marginTop =0dp
    机器人:SRC =@绘制/摄/>  < ImageView的
    机器人:ID =@ + ID / photo_two
    机器人:layout_width =WRAP_CONTENT
    机器人:layout_height =WRAP_CONTENT
    机器人:layout_alignRight =@ + ID /摄
    机器人:layout_alignBottom =@ + ID /摄
    机器人:SRC =@绘制/ ic_launcher/>< / RelativeLayout的>

TestActivity.java

 公共类测试活动扩展了活动{  私有静态字符串标记=测试活动;
  私人ImageView的mPhoto;
  私人ImageView的mPhotoTwo;
  私人浮动mStartX;
  私人浮动mStartY;
  私人浮动mDeltaX;
  私人浮动mDeltaY;  @覆盖
  保护无效的onCreate(捆绑savedInstanceState){
    super.onCreate(savedInstanceState);
    的setContentView(R.layout.activity_test);
    Log.d(TAG的onCreate);    mPhoto =(ImageView的)findViewById(R.id.photo);
    mPhotoTwo =(ImageView的)findViewById(R.id.photo_two);    mPhoto.setOnTouchListener(新View.OnTouchListener(){
      @覆盖
      公共布尔onTouch(查看视图,MotionEvent五){
        布尔结果= FALSE;
        INT行动= e.getAction();        如果(动作== MotionEvent.ACTION_DOWN){          mStartX = e.getX();
          mStartY = e.getY();
          mDeltaX = mPhoto.getWidth() - mPhotoTwo.getWidth();
          mDeltaY = mPhoto.getHeight() - mPhotoTwo.getHeight();
          结果=真;        }否则如果(动作== MotionEvent.ACTION_MOVE){          浮X = e.getX();
          浮Y = e.getY();
          浮DELTAX = X - mStartX;
          浮DELTAY = Y - mStartY;          浮viewX = view.getX();
          浮空想的= view.getY();
          浮valueX = DELTAX + viewX;
          浮VALUE年= DELTAY +空想的;          mPhoto.setX(valueX);
          mPhoto.setY(VALUE年);          浮valueTwoX = valueX + mDeltaX;
          浮valueTwoY = VALUE年+ mDeltaY;          mPhotoTwo.setX(valueTwoX);
          mPhotoTwo.setY(valueTwoY);          结果=真;
        }        返回结果;      }
    });
  }
}

更新

每要求我修改code,从布局文件中删除所有layout_align属性。所有定位(包括视图的初始渲染)将通过程序来完成。

activity_test.xml

 <的RelativeLayout的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android
  的xmlns:工具=htt​​p://schemas.android.com/tool​​s
  机器人:ID =@ + ID / RelativeLayout的
  机器人:layout_width =match_parent
  机器人:layout_height =match_parent>  < ImageView的
    机器人:ID =@ + ID /摄
    机器人:layout_width =WRAP_CONTENT
    机器人:layout_height =WRAP_CONTENT
    机器人:SRC =@绘制/摄/>  < ImageView的
    机器人:ID =@ + ID / photo_two
    机器人:layout_width =WRAP_CONTENT
    机器人:layout_height =WRAP_CONTENT
    机器人:SRC =@绘制/ ic_launcher/>< / RelativeLayout的>

TestActivity.java

 公共类测试活动扩展了活动{  私有静态字符串标记=测试活动;
  私人的RelativeLayout mRelativeLayout;
  私人ImageView的mPhoto;
  私人ImageView的mPhotoTwo;
  私人浮动mStartX;
  私人浮动mStartY;
  私人浮动mDeltaX;
  私人浮动mDeltaY;  @覆盖
  保护无效的onCreate(捆绑savedInstanceState){
    super.onCreate(savedInstanceState);
    的setContentView(R.layout.activity_test);
    Log.d(TAG的onCreate);    mRelativeLayout =(RelativeLayout的)findViewById(R.id.relativelayout);
    mPhoto =(ImageView的)findViewById(R.id.photo);
    mPhotoTwo =(ImageView的)findViewById(R.id.photo_two);    ViewTreeObserver观察者= mRelativeLayout.getViewTreeObserver();
    observer.addOnGlobalLayoutListener(新ViewTreeObserver.OnGlobalLayoutListener(){
      @覆盖
      公共无效onGlobalLayout(){
        浮viewX = mPhoto.getX();
        浮空想的= mPhoto.getY();        mDeltaX = mPhoto.getWidth() - mPhotoTwo.getWidth();
        mDeltaY = mPhoto.getHeight() - mPhotoTwo.getHeight();        浮valueTwoX = viewX + mDeltaX;
        浮valueTwoY =空想的+ mDeltaY;        mPhotoTwo.setX(valueTwoX);
        mPhotoTwo.setY(valueTwoY);
      }
    });
    mPhoto.setOnTouchListener(新View.OnTouchListener(){
      @覆盖
      公共布尔onTouch(查看视图,MotionEvent五){
        布尔结果= FALSE;
        INT行动= e.getAction();        如果(动作== MotionEvent.ACTION_DOWN){          mStartX = e.getX();
          mStartY = e.getY();
          结果=真;        }否则如果(动作== MotionEvent.ACTION_MOVE){          浮X = e.getX();
          浮Y = e.getY();
          浮DELTAX = X - mStartX;
          浮DELTAY = Y - mStartY;          浮viewX = view.getX();
          浮空想的= view.getY();
          浮valueX = DELTAX + viewX;
          浮VALUE年= DELTAY +空想的;          mPhoto.setX(valueX);
          mPhoto.setY(VALUE年);          浮valueTwoX = valueX + mDeltaX;
          浮valueTwoY = VALUE年+ mDeltaY;          mPhotoTwo.setX(valueTwoX);
          mPhotoTwo.setY(valueTwoY);          结果=真;
        }        返回结果;      }
    });
  }
}

So this seems like a very simple question, but I can't figure out how to get the proper location after scaling a view.

I'm trying to line up an imageView to the bottom right corner of another imageView. This code works fine if I don't modify firstImageView.

secondImageView.setX(firstImageView.getRight());
secondImageView.setY(firstImageView.getBottom());

But then after I apply a translation or scale to the firstImageView, the code above doesn't seem to work correctly (doesn't line up at corners). I'm guessing that scaling doesn't affect the actual size of the view, even though it's clearly resized. So how would I go about setting the secondImageView to the bottom right of the firstImageView even after scale, rotation and/or translation have been modified?

EDIT: two views at a corner code

firstImageView.setOnTouchListener(new View.OnTouchListener() {

            float startX, startY;
            float translationX, translationY;
            float startMoveX, startMoveY;



            public boolean onTouch(View v, MotionEvent e) {

                if (e.getAction() == MotionEvent.ACTION_DOWN) {
                    secondImageView.setX(imageView.getRight());
                    secondImageView.setY(imageView.getBottom());
                    secondImageView.setVisibility(View.VISIBLE);

                    startX = e.getRawX();
                    startY = e.getRawY();

                    startMoveX = firstImageView.getX();
                    startMoveY = firstImageView.getY();




                } else if (e.getAction() == MotionEvent.ACTION_MOVE) {

                    translationX = e.getRawX() - startX + startMoveX;
                    translationY = e.getRawY() - startY + startMoveY;
                    firstImageView.setTranslationX(translationX);
                    firstImageView.setTranslationY(translationY);


                    secondImageView.setTranslationX(firstImageView.getX()+firstImageView.getMeasuredWidth());
                    secondImageView.setTranslationY(firstImageView.getY()+firstImageView.getMeasuredHeight());

                } else if (e.getAction() == MotionEvent.ACTION_UP) {

                }
                return true;
            }
        });
    }

scaling code:

secondImageView.setScaleX(2);
secondImageView.setScaleY(2);

解决方案

You are correct in your assumption. Translation does not affect the bounds of the view. However if you calculate the position offset (delta) of the second view from the first at the beginning of the gesture, you can translate both views at once. Here's a working sample that you can use.

activity_test.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">

  <ImageView
    android:id="@+id/photo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="false"
    android:layout_marginTop="0dp"
    android:src="@drawable/photo"/>

  <ImageView
    android:id="@+id/photo_two"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignRight="@+id/photo"
    android:layout_alignBottom="@+id/photo"
    android:src="@drawable/ic_launcher"/>

</RelativeLayout>

TestActivity.java

public class TestActivity extends Activity {

  private static String TAG = "TestActivity";
  private ImageView mPhoto;
  private ImageView mPhotoTwo;
  private float mStartX;
  private float mStartY;
  private float mDeltaX;
  private float mDeltaY;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_test);
    Log.d(TAG, "onCreate");

    mPhoto = (ImageView)findViewById(R.id.photo);
    mPhotoTwo = (ImageView)findViewById(R.id.photo_two);

    mPhoto.setOnTouchListener(new View.OnTouchListener(){
      @Override
      public boolean onTouch(View view, MotionEvent e) {
        boolean result = false;
        int action = e.getAction();

        if(action == MotionEvent.ACTION_DOWN){

          mStartX = e.getX();
          mStartY = e.getY();
          mDeltaX = mPhoto.getWidth() - mPhotoTwo.getWidth();
          mDeltaY = mPhoto.getHeight() - mPhotoTwo.getHeight();
          result = true;

        }else if(action == MotionEvent.ACTION_MOVE){

          float x = e.getX();
          float y = e.getY();
          float deltaX = x - mStartX;
          float deltaY = y - mStartY;

          float viewX = view.getX();
          float viewY = view.getY();
          float valueX = deltaX + viewX;
          float valueY = deltaY + viewY;

          mPhoto.setX(valueX);
          mPhoto.setY(valueY);

          float valueTwoX = valueX + mDeltaX;
          float valueTwoY = valueY + mDeltaY;

          mPhotoTwo.setX(valueTwoX);
          mPhotoTwo.setY(valueTwoY);

          result = true;
        }

        return result;

      }
    });
  }
}

UPDATE

Per request I'm modifying the code to remove all layout_align properties from the layout files. All positioning (including the initial rendering of the view) will be done programatically.

activity_test.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/relativelayout"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <ImageView
    android:id="@+id/photo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/photo"/>

  <ImageView
    android:id="@+id/photo_two"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher"/>

</RelativeLayout>

TestActivity.java

public class TestActivity extends Activity {

  private static String TAG = "TestActivity";
  private RelativeLayout mRelativeLayout;
  private ImageView mPhoto;
  private ImageView mPhotoTwo;
  private float mStartX;
  private float mStartY;
  private float mDeltaX;
  private float mDeltaY;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_test);
    Log.d(TAG, "onCreate");

    mRelativeLayout = (RelativeLayout)findViewById(R.id.relativelayout);
    mPhoto = (ImageView)findViewById(R.id.photo);
    mPhotoTwo = (ImageView)findViewById(R.id.photo_two);

    ViewTreeObserver observer = mRelativeLayout.getViewTreeObserver();
    observer.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
      @Override
      public void onGlobalLayout() {
        float viewX = mPhoto.getX();
        float viewY = mPhoto.getY();

        mDeltaX = mPhoto.getWidth() - mPhotoTwo.getWidth();
        mDeltaY = mPhoto.getHeight() - mPhotoTwo.getHeight();

        float valueTwoX = viewX + mDeltaX;
        float valueTwoY = viewY + mDeltaY;

        mPhotoTwo.setX(valueTwoX);
        mPhotoTwo.setY(valueTwoY);
      }
    });


    mPhoto.setOnTouchListener(new View.OnTouchListener(){
      @Override
      public boolean onTouch(View view, MotionEvent e) {
        boolean result = false;
        int action = e.getAction();

        if(action == MotionEvent.ACTION_DOWN){

          mStartX = e.getX();
          mStartY = e.getY();
          result = true;

        }else if(action == MotionEvent.ACTION_MOVE){

          float x = e.getX();
          float y = e.getY();
          float deltaX = x - mStartX;
          float deltaY = y - mStartY;

          float viewX = view.getX();
          float viewY = view.getY();
          float valueX = deltaX + viewX;
          float valueY = deltaY + viewY;

          mPhoto.setX(valueX);
          mPhoto.setY(valueY);

          float valueTwoX = valueX + mDeltaX;
          float valueTwoY = valueY + mDeltaY;

          mPhotoTwo.setX(valueTwoX);
          mPhotoTwo.setY(valueTwoY);

          result = true;
        }

        return result;

      }
    });
  }
}

这篇关于编程排队在一个角落里两个视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆