结合 DrawerLayout 与 CoordinatorLayout 和 FAB
Combining DrawerLayout with CoordinatorLayout and FAB
针对我的问题,我准备了a simple project at GitHub。
在 DrawerLayout
的应用程序中,我正在尝试显示社交网络(Google+、Facebook、Twitter)的登录页面。
登录页面应显示社交网络徽标(或用户照片 - 如果已登录),然后是水平进度条和 FloatingActionButton
,最后是底部的一些文本:
不幸的是,我在 ActionBar
区域有一些奇怪的人工制品 - 正如您在上面屏幕截图的右侧所见。
为什么会发生这种情况以及如何解决这个问题?
这是我的 activity_main.xml,带有 DrawerLayout
和左侧抽屉菜单:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF0"/>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/left_drawer"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:background="#FFF"
app:itemIconTint="@color/drawer_item_text"
app:itemTextColor="@color/drawer_item_text"
app:headerLayout="@layout/header_left"
app:menu="@menu/menu_main"/>
</android.support.v4.widget.DrawerLayout>
这是我的 fragment_google.xml 和 CoordinatorLayout
和 FAB
:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/photo"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.4"
android:src="@drawable/photo"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<CheckBox
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.2"
android:layout_gravity="center_horizontal"
android:text="Main profile"
/>
<TextView
android:id="@+id/given"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.2"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="@+id/place"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.2"
android:layout_gravity="center_horizontal"
/>
</LinearLayout>
<ProgressBar
android:id="@+id/progress"
android:indeterminate="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_anchor="@id/photo"
app:layout_anchorGravity="bottom"
style="?android:attr/progressBarStyleHorizontal"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:layout_anchor="@id/photo"
app:layout_anchorGravity="bottom|right|end"
android:src="@drawable/ic_account_plus_white_48dp"
android:elevation="8dp"/>
</android.support.design.widget.CoordinatorLayout>
从 fragment_google.xml 中删除 fitsSystemWindows="true"
已解决问题:
针对我的问题,我准备了a simple project at GitHub。
在 DrawerLayout
的应用程序中,我正在尝试显示社交网络(Google+、Facebook、Twitter)的登录页面。
登录页面应显示社交网络徽标(或用户照片 - 如果已登录),然后是水平进度条和 FloatingActionButton
,最后是底部的一些文本:
不幸的是,我在 ActionBar
区域有一些奇怪的人工制品 - 正如您在上面屏幕截图的右侧所见。
为什么会发生这种情况以及如何解决这个问题?
这是我的 activity_main.xml,带有 DrawerLayout
和左侧抽屉菜单:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF0"/>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/left_drawer"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:background="#FFF"
app:itemIconTint="@color/drawer_item_text"
app:itemTextColor="@color/drawer_item_text"
app:headerLayout="@layout/header_left"
app:menu="@menu/menu_main"/>
</android.support.v4.widget.DrawerLayout>
这是我的 fragment_google.xml 和 CoordinatorLayout
和 FAB
:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/photo"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.4"
android:src="@drawable/photo"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<CheckBox
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.2"
android:layout_gravity="center_horizontal"
android:text="Main profile"
/>
<TextView
android:id="@+id/given"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.2"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="@+id/place"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.2"
android:layout_gravity="center_horizontal"
/>
</LinearLayout>
<ProgressBar
android:id="@+id/progress"
android:indeterminate="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_anchor="@id/photo"
app:layout_anchorGravity="bottom"
style="?android:attr/progressBarStyleHorizontal"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:layout_anchor="@id/photo"
app:layout_anchorGravity="bottom|right|end"
android:src="@drawable/ic_account_plus_white_48dp"
android:elevation="8dp"/>
</android.support.design.widget.CoordinatorLayout>
从 fragment_google.xml 中删除 fitsSystemWindows="true"
已解决问题: