【问题标题】:Moving the main content to reveal a drawer移动主要内容以显示抽屉
【发布时间】:2015-11-07 20:24:33
【问题描述】:

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

主视图移动的方式和这里可以实现的一样

How to move main content with Drawer Layout left side

但在我的情况下,我希望“抽屉”静态保持在主视图下方。

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

<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_drawer setClickable(false)无效)。

2) 上面链接中的代码在 X 轴上移动 content_frame 而不是 drawyer_layout - 我尝试移动 drawyer_layout 而不是框架 - 这不能正常工作,因为您不能再单击最右侧以再次关闭抽屉。

3) 将drawer_layout的android:layout_width更改为fill_parent,但这仍然是一个问题,因为它不是被移开的层。

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

【问题讨论】:

    标签: android


    【解决方案1】:

    我相信我已经找到了一个相对简单的解决方案。以下DrawerLayout 设置非常标准 - 即首先是内容ViewGroup,最后是抽屉View,使用标准属性等。此外,使用类似于您发布的链接中显示的技术来滑动内容与抽屉。

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

    示例DrawerLayout、main.xml。注意drawer_container ViewGroup 上设置的标准抽屉属性:

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

    此示例Activity 显示了我们需要添加到常规导航抽屉设置中的几行额外行。除了获得对Views 的引用之外,主要位在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);
        }
    }
    

    请记住,DrawerLayout 会在重新创建 Activity 期间恢复抽屉打开/关闭状态,因此您可能需要考虑这一点,例如,在方向更改等期间。

    【讨论】:

    • 没有汗水。这个很有趣。干杯!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多