问题
I'm trying to make a little view in Android Studio that can drag it from right to left. This view will have 2 buttons.
And when you select one of them or press outside of it, the small menu will hide again.
I have been searching and I have not got any library that does something similar. I also have no idea how to do it.
I can draw the small view in a separate view (layout xml) but I don't know how to add it and create the events to be opened or closed by dragging.
How can I do this?
Thanks.
回答1:
This is a basic example of creating a custom draggable drawer.
These are the references I went through.
To detect drag / fling gesture I have used GestureDetectorCompat, and I referred to : https://developer.android.com/training/gestures/detector
To create drawer open and close animations I referred to : https://youtu.be/OHcfs6rStRo
Please note that this is a very basic example. You can use this as the base to create your end goal. You will have to filter out unwanted drag / fling callbacks you receive. You will have to ignore the taps that you'll get on the drawer.
Here's the implementation.
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/drawer_notch.xml
<shape
android:shape="rectangle">
<corners android:radius="4dp" />
<solid android:color="@color/colorAccent" />
</shape>
app/build.gradle
android {
defaultConfig {
minSdkVersion 19
.
.
.
}
.
.
.
}
Result :
回答2:
First of all add android material dependency in your Gradle :
implementation 'com.google.android.material:material:1.1.0'
Then you can use NavigationView component like this :
<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>
This is very simple example without convention , you should improve it.
来源：https://stackoverflow.com/questions/61618992/create-a-custom-view-with-android-studio