CollapsingToolbarLayout |滚动和布局问题2 [英] CollapsingToolbarLayout | Scrolling and layout issues 2

查看：533
本文介绍了CollapsingToolbarLayout |滚动和布局问题2的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

相关问题

<一个href="http://stackoverflow.com/questions/30899771/collapsingtoolbarlayout-scrolling-and-layout-issues">CollapsingToolbarLayout |滚动和布局问题

化背景

我想用2个不同的片段，让我改变基于方向和屏幕尺寸的布局

  1. 标题图片（目前只是一个的ImageView ）
  2. 滚动内容

问题

  1. 在 Col​​lapsingToolbarLayout 不允许我展开工具栏来看到完全 标题图片

    • 它显示了一个多数图像的，但不是全部。 顶被切断，但底部清晰可见。

  2. 在工具栏设置为针但它滚动时隐藏

    • 就在标题图片应该消失，而是我的整个Appbar获取隐藏

  3. 在滚动查看扩展工具栏有一个空的观点，直到扩展工具栏到达最大高度。

    • 在两个扩展工具栏和工具栏本身成为隐藏

  4. 在向上箭头中不显示了工具栏

code

Layout.xml 

 ＆LT; android.support.design.widget.CoordinatorLayout的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    的xmlns：程序=htt​​p://schemas.android.com/apk/res-auto
    机器人：layout_width =match_parent
    机器人：layout_height =match_parent
    机器人：fitsSystemWindows =真正的＆GT;

    ＆LT; android.support.design.widget.AppBarLayout
        机器人：ID =@ + ID / appbar
        机器人：layout_width =match_parent
        机器人：layout_height =WRAP_CONTENT
        机器人：主题=@风格/ ThemeOverlay.AppCompat.Dark.ActionBar＆GT;

        ＆LT; android.support.design.widget.CollapsingToolbarLayout
            机器人：ID =@ + ID / collapsing_toolbar
            机器人：layout_width =match_parent
            机器人：layout_height =WRAP_CONTENT
            应用程序：contentScrim =？ATTR / colorPrimary
            应用程序：expandedTitleMarginEnd =16DP
            应用程序：expandedTitleMarginStart =48dp
            应用程序：layout_scrollFlags =滚动| enterAlways＆GT;

            ＆LT; ImageView的
                机器人：ID =@ + ID /头
                机器人：layout_width =match_parent
                机器人：layout_height =WRAP_CONTENT
                机器人：背景=@可绘制/下载

                机器人：scaleType =centerCrop/＆GT;

            ＆LT; android.support.v7.widget.Toolbar
                机器人：ID =@ + ID / anim_toolbar
                机器人：layout_width =match_parent
                机器人：layout_height =？ATTR / actionBarSize

                应用程序：layout_collapseMode =针/＆GT;

        ＆LT; /android.support.design.widget.CollapsingToolbarLayout>

    ＆LT; /android.support.design.widget.AppBarLayout>

    ＆LT; android.support.v4.widget.NestedScrollView
        机器人：layout_width =FILL_PARENT
        机器人：layout_height =FILL_PARENT
        机器人：layout_below =@ + ID / anim_toolbar
        应用程序：layout_behavior =@字符串/ appbar_scrolling_view_behavior＆GT;

        ＆LT;片段
            机器人：ID =@ + ID /详细信息
            机器人：NAME =＆LT;包装＆GT;＆LT; fragment_name＆GT;。
            机器人：layout_width =match_parent
            机器人：layout_height =match_parent/＆GT;

    ＆LT; /android.support.v4.widget.NestedScrollView>

＆LT; /android.support.design.widget.CoordinatorLayout>

OnCreate中

  @覆盖
保护无效的onCreate（包savedInstanceState）{

    super.onCreate（savedInstanceState）;
    的setContentView（R.layout.test）;

    最终的工具条工具栏=（栏）findViewById（R.id.anim_toolbar）;
    setSupportActionBar（工具栏）;

    CollapsingToolbarLayout collapsingToolbar =（CollapsingToolbarLayout）findViewById（R.id.collapsing_toolbar）;
    collapsingToolbar.setTitle（复仇者联盟2）;

}

1 2 3

4 5 6

解决方案

问题1

添加安卓fitsSystemWindows =真正的您 AppBarLayout ， Col​​lapsingToolbarLayout ，和你的的ImageView 。

我猜你的形象的一部分是下方的状态栏（由于是缺少这些行），这就是为什么你不能看到图像的顶部。

问题2

collapseMode =针只影响工具栏如何反应崩溃（所以为什么它被称为 collapseMode 和没有 scrollFlags ）。

在几乎所有在使用 Col​​lapsingToolbarLayout ，你应该使用滚动例| exitUntilCollapsed 你的 scrollFlags - 这样下去的崩溃，甚至当你向下滚动工具栏可见

问题3

这是因为使用滚动| enterAlways 。改变你的标志按＃2

问题4

正如在回答你的相关的问题，您需要调用 getSupportActionBar（）setDisplayHomeAsUpEnabled（真）; 显示向上按钮：

  @覆盖
 保护无效的onCreate（包savedInstanceState）{

  super.onCreate（savedInstanceState）;
  的setContentView（R.layout.test）;

  最终的工具条工具栏=（栏）findViewById（R.id.anim_toolbar）;
  setSupportActionBar（工具栏）;
  getSupportActionBar（）setDisplayHomeAsUpEnabled（真）。

  CollapsingToolbarLayout collapsingToolbar =
      （CollapsingToolbarLayout）findViewById（R.id.collapsing_toolbar）;
  collapsingToolbar.setTitle（复仇者联盟2）;
}

Related Questions

CollapsingToolbarLayout | Scrolling and layout issues

Backgroud

I want to use 2 different fragments that will allow me to change the layout based on orientation and screen size

  1. Header Image (Currently just an ImageView)
  2. Scrollable content

Issues

  1. The CollapsingToolbarLayout does not allow me to expand the Toolbar to see the full Header Image

    • It shows a majority of the image, but not all. Top is cut, but the bottom is visible.

  2. The Toolbar is set to Pin but it is hidden when scrolling

    • Just the Header Image should disappear, but instead my whole Appbar gets hidden

  3. When scrolling to view the Expanded Toolbar there is an empty view until the Expanded Toolbar reaches its max height.

    • After both the Expanded Toolbar and the Toolbar itself become hidden

  4. The Up Arrow does not show up in the Toolbar

Code

Layout.xml

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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="16dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|enterAlways">

            <ImageView
                android:id="@+id/header"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/download"

                android:scaleType="centerCrop" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/anim_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"

                app:layout_collapseMode="pin" />

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

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@+id/anim_toolbar"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <fragment
            android:id="@+id/detail"
            android:name="<package>.<fragment_name>"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

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

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

OnCreate

@Override
protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.test);

    final Toolbar toolbar = (Toolbar) findViewById(R.id.anim_toolbar);
    setSupportActionBar(toolbar);

    CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
    collapsingToolbar.setTitle("Avengers: Age of Ultron");

}

1 2 3

4 5 6

解决方案

Question 1

Add android:fitsSystemWindows="true" to your AppBarLayout, CollapsingToolbarLayout, and to your ImageView.

I'm guessing a part of your image is below the status bar (due to these lines being missing) which is why you can't see the top of the image.

Question 2

collapseMode="pin" only affects how the Toolbar reacts to collapsing (hence why it is called collapseMode and not scrollFlags).

In almost all cases when using CollapsingToolbarLayout, you should be using scroll|exitUntilCollapsed for your scrollFlags - this keeps the collapsed Toolbar visible even when you scroll downward.

Question 3

This is due to using scroll|enterAlways. Change your flags as per #2

Question 4

As mentioned in the answer to your related question, you need to call getSupportActionBar().setDisplayHomeAsUpEnabled(true); to show the Up button:

 @Override
 protected void onCreate(Bundle savedInstanceState) {

  super.onCreate(savedInstanceState);
  setContentView(R.layout.test);

  final Toolbar toolbar = (Toolbar) findViewById(R.id.anim_toolbar);
  setSupportActionBar(toolbar);
  getSupportActionBar().setDisplayHomeAsUpEnabled(true);

  CollapsingToolbarLayout collapsingToolbar =
      (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
  collapsingToolbar.setTitle("Avengers: Age of Ultron");
}

这篇关于CollapsingToolbarLayout |滚动和布局问题2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆