使用Android Studio创建自定义视图

Question

我想在Android Studio中做一个可以从右到左拖动的小视图。这个视图会有2个按钮。

当你选择其中一个按钮或在其外按下时，小菜单将再次隐藏。

我一直在搜索，但我没有找到任何库可以做类似的事情。我也不知道该怎么做。

我可以在一个单独的视图（布局xml）中绘制小视图，但我不知道如何添加它并创建通过拖动打开或关闭的事件。

我怎么才能做到这一点？

谢谢。

Answer 1

这是一个创建自定义可拖动抽屉的基本例子。

这些是我的参考资料。

为了检测拖动手势，我使用了GestureDetectorCompat，并且我参考了......。https:/developer.android.comtraininggesturesdetector。

为了创建抽屉的打开和关闭动画，我参考了。https:/youtu.beOHcfs6rStRo。

请注意，这是一个非常基本的例子.你可以用这个作为基础来创建你的最终目标.你将不得不过滤掉你收到的不需要的拖动回调.你将不得不忽略你将在抽屉上得到的点击。

这里是实现。

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);
    }
}

reslayoutactivity_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>

reslayoutactivity_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>

resdrawabledrawer_notch.xml。

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

appbuild.gradle

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

结果:

Answer 2

首先添加安卓系统 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>

这是一个非常简单的例子，没有惯例，你应该改进它。