如何实现可折叠(带手柄)垂直侧边栏android

时间:2016-06-14 12:27:06

标签: java android xml android-layout

我试图用手柄实现可折叠的侧边栏右侧。侧边栏包含将被拖放到线性布局中的项目。基本上我之后的功能有点像:

期望的功能 enter image description here

" H"是按钮/手柄,用于切换侧边栏打开/关闭。此外,我希望它覆盖或浮动活动的主要内容(这样视图的扩展和折叠不会影响主要内容的布局)。

但是,我努力想出一种实现这一目标的方法。我试着把它想象成一个导航抽屉,但我不会用它来导航,所以我不认为这是正确的。我一直在研究不同的可折叠视图,但大多数是水平的(垂直扩展)或与主要内容处于同一级别并修改其布局。

有没有办法创建一个布局/片段,允许我从侧边栏访问这些拖放项目,就像我描述的那样?我想不出办法解决这个问题。

3 个答案:

答案 0 :(得分:1)

试试这个,它对你有用

activity_main.xml

 <?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/my_drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_height="match_parent">
        <Button
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:text="H"
            android:layout_gravity="end"
            android:id="@+id/clickBtnId"
            android:layout_marginTop="100dp"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="128dp"
            android:gravity="center"
            android:text="Item 1"
            android:textSize="18sp" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:gravity="center"
            android:text="Item 1"
            android:textSize="18sp" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:gravity="center"
            android:text="Item 1"
            android:textSize="18sp" />
    </LinearLayout>

    <com.google.android.material.navigation.NavigationView
        android:layout_width="wrap_content"
        android:background="#334257"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        app:itemTextColor="#fff"
        app:menu="@menu/navigation_menu" />

</androidx.drawerlayout.widget.DrawerLayout>

menu/navigation_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:ignore="HardcodedText">
    <item
        android:title="Item 1"/>
    <item
        android:title="Item 2" />
    <item
        android:title="Item 3" />
    <item
        android:title="Item 4" />
</menu>

最后MainActivity.java

public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Button clickBtn;
    clickBtn = findViewById(R.id.clickBtnId);
    clickBtn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            DrawerLayout drawerLayout = findViewById(R.id.my_drawer_layout);
            if(!drawerLayout.isDrawerOpen(Gravity.RIGHT)) {
                drawerLayout.openDrawer(Gravity.RIGHT);
                clickBtn.setGravity(Gravity.CENTER);
            }
            else {
                drawerLayout.closeDrawer(Gravity.RIGHT);
                clickBtn.setGravity(Gravity.END);
            }
        }
    });
}}

输出

1st

2nd

答案 1 :(得分:1)

由于您不想使用导航抽屉,

布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:animateLayoutChanges="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:background="@color/black">


    </LinearLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:background="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:background="@color/black"
        android:text="H"
        app:layout_constraintEnd_toStartOf="@+id/recyclerView"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

活动

public class MainActivity extends AppCompatActivity {

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

        View view = findViewById(R.id.recyclerView);
        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(view.getVisibility() == View.VISIBLE) {
                    view.setVisibility(View.GONE);
                } else {
                    view.setVisibility(View.VISIBLE);
                }
            }
        });
    }
}

说明

使用约束布局,您可以通过单击按钮启用或禁用可见性。动画简单地由 android:animateLayoutChanges="true" 完成。您可以根据需要使用不同的视图和自定义动画。

答案 2 :(得分:0)

android studio中是否有例子:

右键点击您的包裹 - &gt;新的 - &gt;活动 - &gt;导航抽屉活动

enter image description here