Android导航抽屉和工具栏

时间:2014-11-16 16:04:05

标签: android navigation-drawer android-toolbar

请帮我创建Toolbar,哪些内容将超过@+id/left_drawer?可能吗? enter image description here

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/my_awesome_toolbar"
        style="@style/MainTheme.ToolBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <com.astuetz.RobottoRegularTextView
                android:id="@+id/toolbar_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textColor="@android:color/white"
                android:textSize="20sp" />

            <com.astuetz.RobottoLightTextView
                android:id="@+id/toolbar_subtitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:textColor="@android:color/white"
                android:textSize="@dimen/small_text"
                android:visibility="gone" />
        </LinearLayout>
    </android.support.v7.widget.Toolbar>

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

<!--ImageView for test -->
<ImageView
    android:id="@+id/left_drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:layout_marginTop="0dp"
    android:layout_marginBottom="0dp"
    android:scaleType="centerCrop"
    android:adjustViewBounds="true"
    android:src="@drawable/background" />

3 个答案:

答案 0 :(得分:1)

在父级LinearLayout中,工具栏可以放在第一位,而DrawerLayout可以放在第二位。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.support.v7.widget.Toolbar
        android:id="@+id/my_awesome_toolbar"
        style="@style/MainTheme.ToolBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    (...)

    </android.support.v7.widget.Toolbar>

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <fragment
            android:id="@+id/left_drawer"
            android:layout_width="@dimen/navigation_drawer_width"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            tools:layout="@layout/fragment_navigation_drawer" />

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

</LinearLayout>

答案 1 :(得分:1)

@hata非常接近正确答案。您需要在Toolbar之后放置DrawerLayout,使Toolbar的背景透明,并在@+id/content_frame DrawerLayout之前创建表单,其中?attr/actionBarSize的高度为<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <com.kpi.timetable.views.HackyDrawerLayout android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <FrameLayout android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/YOUR_ACTIONBAR_COLOR"/> <FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> <ImageView android:id="@+id/left_drawer" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" android:layout_marginBottom="0dp" android:layout_marginTop="0dp" android:adjustViewBounds="true" android:scaleType="centerCrop" android:src="@drawable/background" /> </com.kpi.timetable.views.HackyDrawerLayout> <!-- in your MainTheme.ToolBar style set background --> <!-- color to "@android:color/transparent" or set it here --> <!-- as android:background="@android:color/transparent" --> <android.support.v7.widget.Toolbar android:id="@+id/my_awesome_toolbar" style="@style/MainTheme.ToolBar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <com.astuetz.RobottoRegularTextView android:id="@+id/toolbar_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="Расписание" android:textColor="@android:color/white" android:textSize="20sp" /> <com.astuetz.RobottoLightTextView android:id="@+id/toolbar_subtitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:singleLine="true" android:textColor="@android:color/white" android:textSize="@dimen/small_text" android:visibility="gone" /> </LinearLayout> </android.support.v7.widget.Toolbar> </RelativeLayout> 与工具栏的背景颜色。这是我的解决方案

{{1}}

答案 2 :(得分:0)

您正在寻找的是导航抽屉。

我建议您访问Android文档

http://developer.android.com/training/implementing-navigation/nav-drawer.html

在这种情况下,您的代码将是

<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.support.v7.widget.Toolbar
        android:id="@+id/my_awesome_toolbar"
        style="@style/MainTheme.ToolBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <com.astuetz.RobottoRegularTextView
                android:id="@+id/toolbar_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textColor="@android:color/white"
                android:textSize="20sp" />

            <com.astuetz.RobottoLightTextView
                android:id="@+id/toolbar_subtitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:textColor="@android:color/white"
                android:textSize="@dimen/small_text"
                android:visibility="gone" />
        </LinearLayout>
    </android.support.v7.widget.Toolbar>

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:background="#fff"/>
</android.support.v4.widget.DrawerLayout>