Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Allow user to control height and width of a view by onTouch

I am trying to implement a user resizable edittext view. It can be resized when user drags the edges of the view.

Here is my onTouchListener for edittext. I have only implemented resizing for left edge. My idea is as the user's touch event x equals the left margin of the view(which means user is touching the left edge), the width and left margin of the view will be varied.

  protected View.OnTouchListener etTouchListener=new View.OnTouchListener() {
           @Override
           public boolean onTouch(View view, MotionEvent event) {
               float x=event.getX();
               float y=event.getY();
               ViewGroup.MarginLayoutParams params=(ViewGroup.MarginLayoutParams)view.getLayoutParams();
               int top=params.topMargin;
               int bottom=params.bottomMargin;
               int left=params.leftMargin;
               int right=params.rightMargin;
               if(x==left){
                   switch (event.getAction()){
                       case MotionEvent.ACTION_DOWN:
                           resize_start(x,y);
                           Log.e("left edge","clicked");
                           break;
                       case MotionEvent.ACTION_MOVE:
                           resize_move(x,y);
                           params.leftMargin=(int)nX;
                           params.width=(int)(editNoteViewParent.getWidth()-nX-params.rightMargin);
                           view.setLayoutParams(params);
                           Log.e("left edge","dragged");
                           break;
                       case MotionEvent.ACTION_UP:
                           break;
                   }
               }  

Here is my resizeStart():

private void resize_start(float x,float y){
        nX = x;
        nY = y;
    }

And my resizeMove():(when user drags the edge)

private void resize_move(float x, float y){
        float dx = Math.abs(x - nX);
        float dy = Math.abs(y - nY);
        if(dx >=TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE){
          nX = x;
          nY = y;
        }
    }

Please help me! Suggestion of relevant tutorials on resizing layoutparams on user touch is super welcomed to! Thank you so much!!

EDIT: My edit text view is created programmatically.

  private void addEditText(float x,float y){
        RelativeLayout.LayoutParams editTextParams= new RelativeLayout.LayoutParams(200, 200);
        editTextParams.leftMargin=(int)x-(editTextParams.width/2);
        editTextParams.topMargin=(int)y-(editTextParams.height/2);

        mEditText=new EditText(this);
        mEditText.setHint("Enter note");
        mEditText.setBackgroundResource(R.drawable.edittext_shape);
        editNoteViewParent.addView(mEditText, editTextParams);
        mEditText.setOnTouchListener(etTouchListener);
        editNoteViewParent.setOnDragListener(etDragListener);
        editTextCreated=true;
    }
like image 307
Alex Avatar asked Apr 11 '15 07:04

Alex


1 Answers

UPDATE:

Ok, I forgot to see your handle. It's too hard for user to touch on the edge of your view. Let try it:

layout:

<EditText
        android:id="@+id/ed_myEdittext"
        android:layout_width="150dp"
        android:layout_height="50dp" />

and code:

EditText ed_myEdittext = (EditText) findViewById(R.id.ed_myEdittext);
ed_myEdittext.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        int x=(int)event.getX();
        int y=(int)event.getY();
        int width= v.getLayoutParams().width;
        int height = v.getLayoutParams().height;


        if((x - width <= 20 && x - width > 0) ||(width - x <= 20 && width - x > 0)){
            switch (event.getAction()){
                case MotionEvent.ACTION_DOWN:
                    break;
                case MotionEvent.ACTION_MOVE:
                    Log.e(">>","width:"+width+" height:"+height+" x:"+x+" y:"+y);
                    v.getLayoutParams().width = x;
                    v.getLayoutParams().height = y;
                    v.requestLayout();
                    break;
                case MotionEvent.ACTION_UP:
                    break;
            }
        }
        return false;
     }
 });
like image 137
Robust Avatar answered Nov 01 '22 07:11

Robust