CollapsingToolbarLayout |滚动和布局问题
我想用2个不同的片段,让我改变基于方向和屏幕尺寸的布局
标题图片(目前只是一个的ImageView
)
滚动内容
在 CollapsingToolbarLayout
不允许我展开工具栏
来看到完全 标题图片
顶
被切断,但底部清晰可见。
在工具栏
设置为针
但它滚动时隐藏
标题图片
应该消失,而是我的整个Appbar获取隐藏
在滚动查看扩展工具栏
有一个空的观点,直到扩展工具栏
到达最大高度。
扩展工具栏
和工具栏
本身成为隐藏
在向上箭头
中不显示了工具栏
< android.support.design.widget.CoordinatorLayout的xmlns:机器人=http://schemas.android.com/apk/res/android
的xmlns:程序=http://schemas.android.com/apk/res-auto
机器人:layout_width =match_parent
机器人:layout_height =match_parent
机器人:fitsSystemWindows =真正的>
< android.support.design.widget.AppBarLayout
机器人:ID =@ + ID / appbar
机器人:layout_width =match_parent
机器人:layout_height =WRAP_CONTENT
机器人:主题=@风格/ ThemeOverlay.AppCompat.Dark.ActionBar>
< 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>
< ImageView的
机器人:ID =@ + ID /头
机器人:layout_width =match_parent
机器人:layout_height =WRAP_CONTENT
机器人:背景=@可绘制/下载
机器人:scaleType =centerCrop/>
< android.support.v7.widget.Toolbar
机器人:ID =@ + ID / anim_toolbar
机器人:layout_width =match_parent
机器人:layout_height =?ATTR / actionBarSize
应用程序:layout_collapseMode =针/>
< /android.support.design.widget.CollapsingToolbarLayout>
< /android.support.design.widget.AppBarLayout>
< android.support.v4.widget.NestedScrollView
机器人:layout_width =FILL_PARENT
机器人:layout_height =FILL_PARENT
机器人:layout_below =@ + ID / anim_toolbar
应用程序:layout_behavior =@字符串/ appbar_scrolling_view_behavior>
<片段
机器人:ID =@ + ID /详细信息
机器人:NAME =<包装>< fragment_name>。
机器人:layout_width =match_parent
机器人:layout_height =match_parent/>
< /android.support.v4.widget.NestedScrollView>
< /android.support.design.widget.CoordinatorLayout>
@覆盖
保护无效的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
解决方案添加安卓fitsSystemWindows =真正的
您 AppBarLayout
, CollapsingToolbarLayout
,和你的的ImageView
。
我猜你的形象的一部分是下方的状态栏(由于是缺少这些行),这就是为什么你不能看到图像的顶部。
collapseMode =针
只影响工具栏如何反应崩溃(所以为什么它被称为 collapseMode
和没有 scrollFlags
)。
在几乎所有在使用 CollapsingToolbarLayout
,你应该使用滚动例| exitUntilCollapsed
你的 scrollFlags
- 这样下去的崩溃,甚至当你向下滚动工具栏可见
这是因为使用滚动| enterAlways
。改变你的标志按#2
正如在回答你的相关的问题,您需要调用 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);
}
CollapsingToolbarLayout | Scrolling and layout issues
I want to use 2 different fragments that will allow me to change the layout based on orientation and screen size
Header Image (Currently just anImageView
)
Scrollable content
The CollapsingToolbarLayout
does not allow me to expand the Toolbar
to see the full Header Image
Top
is cut, but the bottom is visible.
The Toolbar
is set to Pin
but it is hidden when scrolling
Header Image
should disappear, but instead my whole Appbar gets hidden
When scrolling to view the Expanded Toolbar
there is an empty view until the Expanded Toolbar
reaches its max height.
Expanded Toolbar
and the Toolbar
itself become hidden
The Up Arrow
does not show up in the Toolbar
<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>
@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
解决方案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.
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.
This is due to using scroll|enterAlways
. Change your flags as per #2
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");
}