[JAVA][Android] 동적으로 View 여러 개 추가 후 해당 View 드래그 앤 드랍으로 이동시키기

안녕하세요.

오늘은 안드로이드에서 VIew를 동적으로 여러개 추가하고,

해당 View들을 드래그 앤 드랍으로 이동시키는 것을 해보겠습니다.

해당 기능은 가구 인테리어 배치나, 좌석배치도에서 좌석을 원하는 위치에 배치시키고 싶을 때 사용할 수 있습니다.

 

바로 레이아웃 파일부터 보겠습니다.

 

<!-- test.xml -->

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/addButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="버튼 추가"
            android:layout_weight="50"/>
        <Button
            android:id="@+id/removeButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="버튼 삭제"
            android:layout_weight="50"/>
    </LinearLayout>
    
    <LinearLayout
        android:id="@+id/dynamicArea"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="1000dp"
        />
    
</LinearLayout>

해당 xml 화면

화면을 보시는 것과 같이 View를 추가하는 <버튼 추가> 버튼과 삭제하는 <버튼 삭제> 버튼을 생성하였습니다.

(버튼 삭제부분은 다음 시간에 알아볼 예정입니다.)

 

그리고 두 버튼 아래에 LinearLayout을 배치해 버튼이 추가될 공간을 만들어 줍니다.

 

다음으로 Java 파일을 보도록하겠습니다.

 

//MainActivity.java

public class MainActivity extends Activity implements View.OnTouchListener {

    private LinearLayout dynamicLayout; // 버튼이 생성될 공간

    Button addBtn, removeBtn; // 추가, 삭제 버튼

    private Integer numButton = 0; // 버튼의 개수

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

        addBtn = findViewById(R.id.addButton);
        removeBtn = findViewById(R.id.removeButton);
        dynamicLayout = findViewById(R.id.dynamicArea);

        addBtn.setOnClickListener(new View.OnClickListener() { // 추가 버튼 클릭 시
            @Override
            public void onClick(View v) {
                pushButton(); // 해당 메소드 실행
            }
        });


    }
    
    private void pushButton() {
        numButton++; // 버튼 추가할 때마다 버튼의 개수 1씩 증가

        Button dynamicButton = new Button(this); // 새로운 버튼 생성
        dynamicButton.setText("버튼" + numButton); // 버튼의 이름를 버튼의 개수로 표시
        dynamicButton.setOnTouchListener(this); // 버튼을 드래그 앤 드랍하기 위해 setOnTouchListener 선언

        //아까 만든 공간에 크기에 맞는 버튼을 생성함.
        dynamicLayout.addView(dynamicButton, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
                                                 LinearLayout.LayoutParams.WRAP_CONTENT));
    }

    float oldXvalue; // 드래그 앤 드랍을 위한 X좌표
    float oldYvalue; // 드래그 앤 드랍을 위한 Y좌표

    @Override
    public boolean onTouch(View v, MotionEvent event) { // 버튼을 드래그 앤 드랍하는 메소드(OnTouchListener)
        int width = ((ViewGroup) v.getParent()).getWidth() - v.getWidth();
        int height = ((ViewGroup) v.getParent()).getHeight() - v.getHeight();

        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            oldXvalue = event.getX();
            oldYvalue = event.getY();
            //  Log.i("Tag1", "Action Down X" + event.getX() + "," + event.getY());
//            Log.i("Tag1", "Action Down rX " + event.getRawX() + "," + event.getRawY());
        } else if (event.getAction() == MotionEvent.ACTION_MOVE) {
            v.setX(event.getRawX() - oldXvalue);
            v.setY(event.getRawY() - (oldYvalue + v.getHeight()));
            //  Log.i("Tag2", "Action Down " + me.getRawX() + "," + me.getRawY());
        } else if (event.getAction() == MotionEvent.ACTION_UP) {

            if (v.getX() > width && v.getY() > height) {
                v.setX(width);
                v.setY(height);
            } else if (v.getX() < 0 && v.getY() > height) {
                v.setX(0);
                v.setY(height);
            } else if (v.getX() > width && v.getY() < 0) {
                v.setX(width);
                v.setY(0);
            } else if (v.getX() < 0 && v.getY() < 0) {
                v.setX(0);
                v.setY(0);
            } else if (v.getX() < 0 || v.getX() > width) {
                if (v.getX() < 0) {
                    v.setX(0);
                    v.setY(event.getRawY() - oldYvalue - v.getHeight());
                } else {
                    v.setX(width);
                    v.setY(event.getRawY() - oldYvalue - v.getHeight());
                }
            } else if (v.getY() < 0 || v.getY() > height) {
                if (v.getY() < 0) {
                    v.setX(event.getRawX() - oldXvalue);
                    v.setY(0);
                } else {
                    v.setX(event.getRawX() - oldXvalue);
                    v.setY(height);
                }
            }


        }
        return true;
    }
}

해당 코드를 실행해 보도록 하겠습니다.

 

해당 영상처럼 버튼을 유동적으로 생성 후 생성한 버튼들을 드래그 앤 드랍을 통해 움직이는 것을 확인할 수 있습니다.

다음 시간에는 해당 버튼을 삭제하는 부분에 대하여 공부해보도록 하겠습니다.

감사합니다.