xamarin.android - 如何在导航抽屉内添加蓝色布局
问题描述
我想将蓝色布局添加到 android 的导航抽屉中。我试图添加，但它在导航视图后面。如何添加这样的？
解决方案
看看你想要达到的目标会很有用。如果您希望导航抽屉（动画出来）具有蓝色背景，则只需设置 NavigationView 的背景 - 即抽屉。包装 DrawLayout 包含整个页面布局。
这是一个非常完整的 Navigation Drawer 实现示例：
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start"
>
<!-- Page Content Area - includes App Bar Definition -->
<android.support.design.widget.CoordinatorLayout
android:id="@+id/nav_coordinator_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- App Bar Definition -->
<android.support.design.widget.AppBarLayout
android:id="@+id/nav_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
>
<android.support.v7.widget.Toolbar
android:id="@+id/nav_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="0dp"
android:background="@color/app_background"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
>
<LinearLayout
android:id="@+id/toolbar_title_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:orientation="vertical"
android:paddingLeft="@dimen/abc_action_bar_default_padding_start_material"
android:paddingRight="@dimen/abc_action_bar_default_padding_end_material"
android:layout_gravity="center"
android:gravity="center"
>
<android.support.v7.widget.AppCompatTextView
android:id="@+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:singleLine="true"
android:ellipsize="end"
android:textAppearance="@style/Base.TextAppearance.Widget.AppCompat.Toolbar.Title"
android:text="Edison"
android:textColor="@color/app_blue"
android:visibility="gone"
/>
<android.support.v7.widget.AppCompatTextView
android:id="@+id/toolbar_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:singleLine="true"
android:ellipsize="end"
android:textAppearance="@style/Base.TextAppearance.Widget.AppCompat.Toolbar.Subtitle"
android:text="Subtitle"
android:textColor="@color/app_blue"
android:visibility="gone"
/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<!-- Content Area -->
<FrameLayout
android:id="@+id/page_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="@dimen/content_elevation"
android:clipChildren="false"
android:clipToPadding="false"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
>
<!-- Fragment Target -->
<FrameLayout
android:id="@+id/content_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</FrameLayout>
<!-- Other Content on page -->
<LinearLayout
android:id="@+id/brightness_slider_container"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
android:paddingTop="5dp"
android:paddingBottom="0dp"
android:layout_gravity="top|right"
android:gravity="center"
android:visibility="invisible"
android:clipChildren="false"
android:clipToPadding="false"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:elevation="@dimen/content_elevation"
>
<edison.mobile.android.common.controls.SeekBarRotator
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
>
<android.support.v7.widget.AppCompatSeekBar
android:id="@+id/brightness_slider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:thumbTint="@color/app_blue"
android:progressTint="@color/app_blue"
android:progressBackgroundTint="@color/app_background_darkgrey"
/>
</edison.mobile.android.common.controls.SeekBarRotator>
<android.support.v7.widget.AppCompatImageView
android:id="@+id/moon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:layout_marginTop="5dp"
app:srcCompat="@drawable/moon"
android:tint="@color/app_blue"
/>
</LinearLayout>
<!-- Floating Action Button -->
<android.support.design.widget.FloatingActionButton
android:id="@+id/content_floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="@drawable/ic_add_24"
app:layout_anchor="@id/content_container"
app:layout_anchorGravity="bottom|right|end"
app:backgroundTint="?attr/colorAccent"
android:elevation="@dimen/design_fab_elevation"
android:visibility="visible"
/>
<!-- Bottom Sheet -->
<LinearLayout
android:id="@+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginTop="0dp"
android:elevation="@dimen/bottom_sheet_elevation"
android:background="@drawable/bottom_sheet_background"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
app:behavior_peekHeight="160dp"
>
<android.support.v7.widget.AppCompatImageView
android:id="@+id/bs_thumb"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/bottom_sheet_thumb_padding"
android:layout_marginBottom="@dimen/bottom_sheet_thumb_padding"
app:srcCompat="@drawable/bottom_sheet_thumb"
/>
<FrameLayout
android:id="@+id/bottom_sheet_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
<!-- Navigation Area Definition -->
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top|start"
app:elevation="@dimen/nav_drawer_elevation"
android:background="@color/navdrawer_background"
>
<LinearLayout
android:id="@+id/nav_wrapper"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<!-- navigation drawer header area-->
<LinearLayout
android:id="@+id/nav_header"
android:layout_width="match_parent"
android:layout_height="@dimen/nav_header_height"
android:orientation="vertical"
android:padding="@dimen/activity_horizontal_margin"
>
<edison.mobile.android.common.controls.CircularProfileView
android:id="@+id/img_profile"
android:layout_width="@dimen/profile_size"
android:layout_height="@dimen/profile_size"
android:layout_marginTop="@dimen/nav_header_vertical_spacing"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:backgroundTint="@color/profile_background"
android:textColor="@color/profile_initials_color"
android:fontFamily="@font/rubikblack"
app:borderWidth="@dimen/profile_image_border_width"
app:borderColor="@color/app_blue"
/>
<android.support.v7.widget.AppCompatTextView
android:id="@+id/profile_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:textColor="@color/profile_name_color"
android:textSize="@dimen/profile_name_text_size"
android:text="ALISON SUMMERFIELD"
/>
</LinearLayout>
<!-- navigation drawer selection area-->
<ExpandableListView
android:id="@+id/nav_list"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:paddingLeft="@dimen/nav_drawer_menu_left_padding"
android:layout_gravity="top|start"
android:groupIndicator="@null"
/>
</LinearLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
（它有几个自定义控件，我改变了这个项目的高度，但布局是通用的，所以你应该明白要点）。
这是一个导航绘制布局的抽象结构图：
还有一个更详细的：
如果您想满足完整的 Material Design 规范并拥有一个半透明的状态栏，并且导航抽屉滑过它，请记住正确设置您的主题：
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
推荐阅读
- javascript - 用 JavaScript 编写评论轮播功能
- angular - Angular部署子文件夹重写
- django-views - Django：删除 wiki 项目的条目（.md）
- javascript - 无法取消 Mozilla Firefox 上的 http 请求
- wordpress - Chrome 上的 1 台计算机上的 WP 菜单搞砸了，其他装有 Chrome 的计算机很好
- apache-kafka - 如何在 Faust 代理中运行 concurrent.futures.ProcessPoolExecutor？
- javascript - 如何在不重新加载页面的情况下根据 jQuery 中设置的 cookie 值更改元素？
- docker - 如何在 Dockerfile 中提供挂载的相对路径
- pandas - Plotly-Dash 实时图表：回调失败
- tagging - AWS Packer Builder 是否可以将 SourceAMItags.TagName 与空格一起使用？