Android — перетаскивание

Сегодня я хочу поговорить об одной из моих самых любимых функций в разработке для Android — «Перетаскивание».

В современных пользовательских интерфейсах перетаскивание стало важным шаблоном взаимодействия, позволяющим пользователям перемещать объекты по экрану с помощью сенсорного жеста.

Платформа перетаскивания в Android Kotlin предоставляет простой и гибкий способ реализации функции перетаскивания в вашем приложении. Это позволяет пользователям перетаскивать представление или элемент из одного места в другое, просто нажав и удерживая элемент, а затем перетащив его в нужное место. Инфраструктура перетаскивания основана на трех ключевых компонентах: DragEvent, DragShadow, и ClipDataобъект.

Событие перетаскивания:

Класс DragEventотвечает за управление всем жизненным циклом перетаскивания. Он предоставляет набор констант, которые представляют различные состояния операции перетаскивания. Эти состояния включают ACTION_DRAG_STARTED, ACTION_DRAG_ENTERED, ACTION_DRAG_LOCATION, ACTION_DRAG_EXITED, ACTION_DROP, и ACTION_DRAG_ENDED. Эти состояния используются для определения начала операции перетаскивания, ее выполнения и завершения.

Перетащите тень:

Класс DragShadowотвечает за создание визуального представления перетаскиваемого элемента. Это необязательный компонент, который можно использовать для предоставления пользовательского визуального представления перетаскиваемого элемента. Также можно использовать тень перетаскивания по умолчанию, которая представляет собой простое непрозрачное изображение перетаскиваемого вида.

Данные клипа:

Класс ClipDataотвечает за хранение данных, связанных с перетаскиваемым элементом. Эти данные могут быть чем угодно, что вы хотите связать с элементом, например текстом, изображениями или другими типами данных. Вы можете использовать этот ClipData.newPlainText()метод для создания нового ClipDataобъекта, содержащего данные в виде обычного текста, или создать настраиваемый ClipDataобъект, содержащий данные любого типа.

Это были основные части. Теперь давайте подумаем об игре с перетаскиванием, которую вы хотите создать для детей. Чтобы построить это, вы должны знать о View.setOnTouchListener() и View.OnDragEventListener().

Обратите внимание, что я просто делюсь основной концепцией. Предположим, я хочу соответствовать форме. Назовем это « Соответствие форме ». В этом приложении у меня есть объект в форме треугольника, и я хочу сопоставить его с формой. Теперь приступайте к созданию этого небольшого приложения.

1. Нажмите «Файл» , затем «Создать» => «Новый проект» .
2. После этого включите поддержку Kotlin и нажмите «Далее».
3. Выберите минимальный SDK для удобства и нажмите кнопку «Далее» .
4. Затем выберите действие Empty => next => finish .

Я использовал привязку представления в этом проекте. Чтобы включить привязку представления в модуле, установите для viewBindingпараметра сборки значение trueв файле уровня модуля build.gradle, как показано в следующем примере:

buildFeatures {
    viewBinding = true
}

В файле xml у нас есть два ImageView: один для отображения фигуры ivTriangle, а другой ivTriangleDragдля перетаскивания на фигуру.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:text="Match the Shape"
        android:textAlignment="center"
        android:textSize="24sp" />

    <ImageView
        android:id="@+id/ivTriangle"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="12dp"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:src="@drawable/ic_triangle" />

    <ImageView
        android:id="@+id/ivTriangleDrag"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="12dp"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:src="@drawable/ic_triangle_drag" />


</LinearLayout>

Мы будем реализовывать onTouchфункции onDragи View.OnTouchListenerсоответственно View.OnDragListener.

class MainActivity : AppCompatActivity(), View.OnTouchListener, View.OnDragListener{

..........
 override fun onTouch(v: View?, event: MotionEvent?): Boolean {
        ........
  }

 override fun onDrag(v: View?, event: DragEvent?): Boolean {
        .........
  }

}

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    mViewBinding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(mViewBinding.root)

    mViewBinding.ivTriangleDrag.setOnTouchListener(this)
    mViewBinding.ivTriangle.setOnDragListener(this)

}

override fun onTouch(v: View?, event: MotionEvent?): Boolean {
    return if (event!!.action == MotionEvent.ACTION_DOWN) {
        val data = ClipData.newPlainText("", "")
        val shadowBuilder = DragShadowBuilder(v)
        v?.startDragAndDrop(data, shadowBuilder, v, 0)
        true
    } else {
        false
    }
}

override fun onDrag(v: View?, event: DragEvent?): Boolean {
    when (event?.action) {
        ACTION_DRAG_STARTED -> {
            Log.d(msg, "Action is DragEvent.ACTION_DRAG_STARTED");
        }
        ACTION_DRAG_ENTERED -> {
            Log.d(msg, "Action is DragEvent.ACTION_DRAG_ENTERED")
        }
        ACTION_DRAG_EXITED -> {
            Log.d(msg, "Action is DragEvent.ACTION_DRAG_EXITED")
        }
        ACTION_DRAG_LOCATION -> {
            Log.d(msg, "Action is DragEvent.ACTION_DRAG_LOCATION")
        }
        ACTION_DRAG_ENDED -> {
            Log.d(msg, "Action is DragEvent.ACTION_DRAG_ENDED")
        }
        ACTION_DROP -> {
            Log.d(msg, "ACTION_DROP event")
            mViewBinding.ivTriangle.setImageResource(R.drawable.ic_triangle_drag)
            mViewBinding.ivTriangleDrag.visibility = INVISIBLE
            Toast.makeText(this@MainActivity,"You have matched the shape!!",Toast.LENGTH_SHORT).show()
        }

    }
    return true
}

Надеюсь, эта статья поможет вам. Чтобы проверить полный код, вот репозиторий .

Если вам понравилась статья, подписывайтесь на меня, чтобы не пропустить другие интересные темы по Android-разработке.

Удачного кодирования! :)