当前位置: 首页 > 知识库问答 >
问题:

移动主要内容以显示抽屉

祁飞翰
2023-03-14

我想创建一个导航抽屉效果,但不是抽屉从左侧滑出,它必须在主视图的“后面”,因此滑动的项目是视图本身(即向右)-抽屉根本不移动,而是通过滑动主视图来“显示”。手指滑动(并点击汉堡图标)的动作与抽屉相同,只是显示效果不同。

主视图移动的方式与此处可以实现的方式相同

如何在抽屉布局左侧移动主要内容

但在我的例子中,我希望“抽屉”静态地位于主视图下方。

我通过叠加视图并使抽屉透明达到了预期效果——当然这意味着抽屉不再用于导航;只是为了效果。使用上述链接中的代码

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/whole_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">

<!-- everything here is now the new "drawer" -->
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="BOO I am hiding!"
    android:id="@+id/tv2"
    android:layout_gravity="left|top" />
<!-- /everything here is now the new "drawer" -->

<android.support.v4.widget.DrawerLayout

android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<!-- The This is the main content frame -->
<FrameLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="MOOOOOO!"
        android:id="@+id/textView"
        android:layout_gravity="left|top" />
</FrameLayout>


<!-- The see-through navigation drawer -->
<RelativeLayout
    android:layout_width="280dp"
    android:layout_height="match_parent"
    android:id="@+id/left_drawer"
    android:clickable="false"
    android:background="@drawable/transparent_bg" <!-- #00FFFFFF -->
    android:layout_gravity="start">

</RelativeLayout>

</android.support.v4.widget.DrawerLayout>

除了id/tv2(或该层上的其他项目)在“抽屉”打开时不可点击外,一切都很完美。

我试过:

1)使上面的布局不可点击(drawer_layout,content_frame和left_drawerhtml" target="_blank">setClickable(false)没有效果)。

2) 上面链接中的代码在X轴上移动content\u框架,而不是drawyer\u布局-我尝试移动drawer\u布局而不是框架-这无法正常工作,因为您无法再单击最右侧再次关闭抽屉。

3)更改android:layout_widthdrawer_layoutfill_parent,但这仍然是一个问题,因为它不是层被移出的方式。

我的猜测是DrawerLayout(android.support.v4.widget.DrawerLayout)并不意味着在另一个布局之上,我可能需要创建自己的抽屉来达到预期的效果-任何想法或建议都很好。

共有1个答案

扈瑞
2023-03-14

我相信我已经找到了一个相对简单的解决方案。以下抽屉布局设置相当标准,即首先是内容视图组,最后是抽屉视图,使用标准属性等。此外,使用类似于发布链接中所示的技术,将内容与抽屉一起滑动。

示例中的诀窍是抽屉本身的设置。我们将使用两个嵌套的ViewGroups-外部是常规滑动抽屉View;内部是用于实际抽屉内容的ViewGroup。然后,我们将使用DrawerListener(在我们的示例中为ActionBarDrawerTougle)将内部内容ViewGroup与抽屉幻灯片的方向相反滑动,使抽屉在左侧看起来是静态的。

示例DrawerLayoutmain。xml。请注意在“抽屉”容器上设置的标准抽屉属性:

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000">

    <FrameLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#cccccc" />

    <FrameLayout
        android:id="@+id/drawer_container"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start">

        <LinearLayout
            android:id="@+id/drawer_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/ic_launcher" />

            ...

        </LinearLayout>

    </FrameLayout>

</android.support.v4.widget.DrawerLayout>

本例显示了我们需要添加到常规导航抽屉设置中的少数额外行。除了获取对视图的引用之外,主位位于ActionBarDrawerToggle的onDrawerSlide()方法中:

public class MainActivity extends Activity  {

    ActionBarDrawerToggle toggle;
    DrawerLayout drawerLayout;
    View drawerContainer;
    View drawerContent;
    View mainContent;

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

        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawerContainer = findViewById(R.id.drawer_container);
        drawerContent = findViewById(R.id.drawer_content);
        mainContent = findViewById(R.id.main_content);

        toggle = new ActionBarDrawerToggle(...) {
            @Override
            public void onDrawerSlide(View drawer, float slideOffset) {
                super.onDrawerSlide(drawer, slideOffset);

                drawerContent.setTranslationX(drawerContainer.getWidth() * (1 - slideOffset));
                mainContent.setTranslationX(drawerContainer.getWidth() * slideOffset);
            }
        };

        drawerLayout.addDrawerListener(toggle);
    }
}

请记住,抽屉布局在活动重新创建期间恢复抽屉打开/关闭状态,因此您可能需要对此进行说明,例如,在方向更改期间等。

 类似资料:
  • 我在Jackrabbit节点内容从一个路径移动到另一个路径时遇到了问题。 尝试将节点下的文档列表(从jcr中的临时节点)移动到新路径(新节点,不包含任何文档)。 节点是混合类型的。 以下是创建文档节点的部分代码片段: 节点类型说明: 希望使用jcr api本身移动内容,而不是让所有子节点迭代并移动到目标文件夹。 使用Jackrabbit core 2.6.0和JCR 2.0。

  • 显示Flash®内容   使用PSP-1000系列时,选择PSP™主机之(设定) > (主机设定),并将[启动Flash® Player]设定为有效后,即能显示支持Macromedia® Flash®之内容。 提示 已安装Macromedia® Flash® Player 6(不支持部份机能)。 设定为有效却仍无法显示Flash®内容时,请进入选单列之[工具] > [设定] > [显示设置]并变更

  • 我已将导航抽屉连接到我的应用程序的主

  • 问题内容: 我试图用来建立3列。 它在一开始就可以正常工作,但是当我向第一列添加内容时,它会影响其余的布局,并在较低的层次上呈现其余的列。 我该怎么做才能避免这种情况? 问题答案: 您应该添加CSS声明以使列在顶部垂直对齐: 老实说,我不喜欢在页面上创建列,因为它们之间有空白。 在正在使用了一段时间,但现在框或CSS可以是一种选择。

  • 嘿,我正在尝试植入一个HTML模板,但我无法让显示的内容正常工作。。 }` Lorem ipsum dolor sit amet,consetetur sadipscing elitr,sed diam nonumy eirmod tempor invidunt ut laboure et dolore magna aliquyam erat,sed diam voluptua。在vero eos

  • 我试图在TableView中插入一些值,但它不显示列中的文本,尽管这些列不是空的,因为有三行(与我在TableView中插入的条目数量相同)可单击。 我有一个类“ClientIController”,它是fxml文件的控制器,这些是TableView和TableView的列的声明。 我在initialize()方法中调用了一个名为loadTable()的函数,该函数将内容添加到TableView中