Создайте собственный вид с помощью Android Studio

Question

Я пытаюсь сделать небольшой вид в Android Studio, который можно перетаскивать справа налево. Это представление будет иметь 2 кнопки.

И когда вы выберете одну из них или нажмете за ее пределами, маленькое меню снова скроется.

Я искал, но у меня нет библиотеки что-то подобное. Я также не знаю, как это сделать.

Я могу нарисовать небольшой вид в отдельном виде (макет xml), но я не знаю, как его добавить и создать события для открытия или закрывается перетаскиванием.

Как это сделать?

Спасибо.

Answer 1

Это базовый c пример создания настраиваемого перетаскиваемого ящика.

Это ссылки, которые я просмотрел.

Для обнаружения жеста перетаскивания я использовал GestureDetectorCompat, и Я сослался на: https://developer.android.com/training/gestures/detector

Чтобы создать анимацию открытия и закрытия ящика, я упомянул: https://youtu.be/OHcfs6rStRo

Обратите внимание, что это очень простой пример c. Вы можете использовать это как основу для создания своей конечной цели. Вам нужно будет отфильтровать нежелательные обратные вызовы перетаскивания, которые вы получаете. Вам придется игнорировать нажатия, которые вы получите на ящике.

Вот реализация.

MainActivity. java

import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.constraintlayout.widget.ConstraintSet;
import androidx.core.view.GestureDetectorCompat;

import android.os.Bundle;
import android.transition.TransitionManager;
import android.view.GestureDetector;
import android.view.MotionEvent;

public class MainActivity extends AppCompatActivity {

    private boolean mIsDrawerOpened;
    private ConstraintLayout mRootConstraintLayout;
    private final ConstraintSet mDrawerClosedConstraintSet = new ConstraintSet();
    private final ConstraintSet mDrawerOpenedConstraintSet = new ConstraintSet();
    private GestureDetectorCompat mGestureDetector;

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

        // Drawer is initially closed
        mIsDrawerOpened = false;

        mRootConstraintLayout = findViewById(R.id.rootConstraintLayout);

        mDrawerClosedConstraintSet.clone(this, R.layout.activity_main_drawer_closed);
        mDrawerOpenedConstraintSet.clone(this, R.layout.activity_main_drawer_opened);

        mGestureDetector = new GestureDetectorCompat(
                getApplicationContext(),
                new GestureDetector.SimpleOnGestureListener() {

                    @Override
                    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {

                        // Drag / Fling gesture detected

                        // TODO: Recongnize unwanted drag / fling gestures and ignore them.

                        TransitionManager.beginDelayedTransition(mRootConstraintLayout);

                        // Drawer is closed?
                        if(!mIsDrawerOpened) {
                            // Open the drawer
                            mDrawerOpenedConstraintSet.applyTo(mRootConstraintLayout);
                            mIsDrawerOpened = true;
                        }

                        return true;
                    }

                    @Override
                    public boolean onSingleTapUp(MotionEvent e) {

                        // Single tap detected

                        // TODO: If user has tapped on the drawer, do not close it.

                        TransitionManager.beginDelayedTransition(mRootConstraintLayout);

                        // Drawer is opened?
                        if(mIsDrawerOpened) {
                            // Close the drawer
                            mDrawerClosedConstraintSet.applyTo(mRootConstraintLayout);
                            mIsDrawerOpened = false;
                        }

                        return true;
                    }

                    @Override
                    public boolean onDown(MotionEvent e) {
                        return true;
                    }
                }
        );
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        mGestureDetector.onTouchEvent(event);
        return super.onTouchEvent(event);
    }
}

res / layout / activity_main_drawer_closed. xml

<ConstraintLayout
    android:id="@+id/rootConstraintLayout"
    android:clipChildren="false" >

    <ConstraintLayout
        android:id="@+id/drawerConstraintLayout"
        android:layout_width="152dp"
        android:layout_height="108dp"
        android:background="@color/colorPrimaryDark"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="parent" >

        <Button
            android:id="@+id/button1"
            android:layout_width="52dp"
            android:layout_height="52dp"
            android:text="1"
            android:backgroundTint="@color/colorAccent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/button2" />

        <Button
            android:id="@+id/button2"
            android:layout_width="52dp"
            android:layout_height="52dp"
            android:text="2"
            android:backgroundTint="@color/colorAccent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@id/button1"
            app:layout_constraintEnd_toEndOf="parent" />

    </ConstraintLayout>

    <ImageView
        android:id="@+id/notch"
        android:layout_width="8dp"
        android:layout_height="72dp"
        android:src="@drawable/drawer_notch"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/drawerConstraintLayout" />

</ConstraintLayout>

res / layout / activity_main_drawer_opened. xml

<ConstraintLayout
    android:id="@+id/rootConstraintLayout" >

    <ConstraintLayout
        android:id="@+id/drawerConstraintLayout"
        android:layout_width="152dp"
        android:layout_height="108dp"
        android:background="@color/colorPrimaryDark"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" >

        <Button
            android:id="@+id/button1"
            android:layout_width="52dp"
            android:layout_height="52dp"
            android:text="1"
            android:backgroundTint="@color/colorAccent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/button2" />

        <Button
            android:id="@+id/button2"
            android:layout_width="52dp"
            android:layout_height="52dp"
            android:text="2"
            android:backgroundTint="@color/colorAccent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@id/button1"
            app:layout_constraintEnd_toEndOf="parent" />

    </ConstraintLayout>

    <ImageView
        android:id="@+id/notch"
        android:layout_width="8dp"
        android:layout_height="72dp"
        android:src="@drawable/drawer_notch"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/drawerConstraintLayout" />

</ConstraintLayout>

res / drawable / drawable_notch. xml

<shape
    android:shape="rectangle">
    <corners android:radius="4dp" />
    <solid android:color="@color/colorAccent" />
</shape>

app / build.gradle

android {
    defaultConfig {
        minSdkVersion 19
        .
        .
        .
    }
    .
    .
    .
}

Результат:

Answer 2

Прежде всего добавьте android material зависимость в Gradle:

implementation  'com.google.android.material:material:1.1.0'

Затем вы можете использовать компонент NavigationView следующим образом:

<com.google.android.material.navigation.NavigationView
    android:id="@+id/navi_view"
    android:layout_width="wrap_content"
    android:layout_height="100dp"
    android:background="@color/colorPrimary"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <Button
        android:id="@+id/btn1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="btn1" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="end"
        android:text="btn2" />


</com.google.android.material.navigation.NavigationView>

Это очень простой пример без условных обозначений, вы должны его улучшить.