【问题标题】:android toolbar display half contentandroid工具栏显示一半内容
【发布时间】:2016-02-23 07:52:15
【问题描述】:

我使用 CoordinatorLayout 和 CollapsingToolbarLayout, 我不知道是什么导致了这个错误, 这是我的 xml 文件

活动的main.xml

<?xml version="1.0" encoding="utf-8"?>

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.

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

    <include layout="@layout/toolbar" />


    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


</android.support.design.widget.CoordinatorLayout>

工具栏视图的toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="@color/actionbar"
        app:expandedTitleTextAppearance="@style/actinbar.textview.big"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:statusBarScrim="@color/actionbar"
        app:titleEnabled="false">



        <ImageView
            android:id="@+id/toolbarbg"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:src="@drawable/bg_ovenui_pic_"
            android:visibility="gone"
            app:layout_collapseMode="parallax" />

        <RelativeLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="180dp"
            android:layout_gravity="bottom"
            android:visibility="gone"></RelativeLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            style="@style/ToolBarStyle"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways" />

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

【问题讨论】:

  • 向 CollapsingToolbarLayout 添加一个空视图,设置高度 80dp,看起来可行,但这不是一个好的解决方案
  • 有什么解决办法吗?有同样的问题

标签: android android-layout toolbar android-toolbar


【解决方案1】:

从 AppBarLayout 中删除 android:fitsSystemWindows="true" 就可以了。 启用后,AppBarLayout 假定状态栏不可用,它必须占据整个空间。

【讨论】:

    【解决方案2】:

    只需删除 android:fitsSystemWindows="true" 因为当它为true时,它会调整AppbarLayout的padding,为状态栏留出空间。

    【讨论】:

      【解决方案3】:

      只需在如下所示的 LinearLayout 中插入工具栏布局和框架布局。

      <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content">
      
          <include layout="@layout/toolbar"/>
      
          <FrameLayout
              android:id="@+id/fragment_container"
              android:layout_width="fill_parent"
              android:layout_height="match_parent"
              android:orientation="vertical"
              app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
      </LinearLayout>
      

      这可能会对您有所帮助。

      【讨论】:

      • 这使得工具栏显示正常,但是这个内容视图不能显示,
      • 协调器布局是一种特殊的框架布局,所以我认为问题出在 layout_height 或 layout_width 上。在框架布局中将布局宽度设置为 match_parent 而不是 fill_parent。
      【解决方案4】:

      当我想在 CollapsingToolbarLayout 中加载 ImageView 时,我遇到了同样的问题,经过一番研究,我找到了如下解决方案:

      <?xml version="1.0" encoding="utf-8"?>
      <android.support.design.widget.CoordinatorLayout 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/coordinator_layout"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:fitsSystemWindows="true"
      android:windowDrawsSystemBarBackgrounds="true"
      tools:context="com.example.k1.DetailActivity">
      
      <android.support.design.widget.AppBarLayout
          android:id="@+id/detail_app_bar"
          android:layout_width="match_parent"
          android:layout_height="@dimen/app_bar_height"
          android:fitsSystemWindows="true"
          android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
      
          <android.support.design.widget.CollapsingToolbarLayout
              android:id="@+id/collapsing_toolbar_layout"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:fitsSystemWindows="true"
              app:collapsedTitleTextAppearance="@android:style/TextAppearance.Material.Small"
              app:contentScrim="?attr/colorPrimary"
              app:expandedTitleTextAppearance="@android:color/transparent"
              app:layout_scrollFlags="scroll|exitUntilCollapsed"
              tools:targetApi="lollipop">
      
      
              <ImageView
                  android:id="@+id/detail_sliding_view_pager"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:layout_gravity="fill|center"
                  android:fitsSystemWindows="true"
                  app:layout_collapseMode="parallax" />
      
              <android.support.v7.widget.Toolbar
                  android:id="@+id/detail_toolbar"
                  android:layout_width="match_parent"
                  android:layout_height="?attr/actionBarSize"
                  android:minHeight="?attr/actionBarSize"
                  app:contentScrim="?attr/colorPrimary"
                  app:layout_collapseMode="pin"
                  app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                  app:statusBarScrim="?attr/colorAccent" />
      
          </android.support.design.widget.CollapsingToolbarLayout>
      
      </android.support.design.widget.AppBarLayout>
      

      注意:AppBarLayout 的高度值设置为 android:layout_height="@dimen/app_bar_height" 在尺寸资源值中,通过 300dp 获取 xxhdpi,如您所见 &lt;dimen name="app_bar_height"&gt;300dp&lt;/dimen&gt;
      希望对您有所帮助。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2017-09-28
        • 2015-08-15
        • 2016-05-16
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多