CollapsingToolbarLayout | Проблемы с прокруткой и компоновкой 2
Вопросы, относящиеся
CollapsingToolbarLayout | Проблемы с прокруткой и компоновкой
Backgroud
Я хочу использовать 2 разных фрагмента, которые позволят мне изменить макет на основе ориентации и размера экрана
- Изображение заголовка (в настоящее время только
ImageView
)
- Прокручиваемый контент
Вопросы
-
CollapsingToolbarLayout
не позволяет мне развернуть Toolbar
, чтобы увидеть полный Header Image
- Он показывает большую часть изображения, но не все.
Top
разрезается, но снизу видно.
-
Toolbar
установлен на Pin
, но он скрыт при прокрутке
- Просто
Header Image
должен исчезнуть, но вместо этого весь наш Appbar будет скрыт
-
При прокрутке для просмотра Expanded Toolbar
появляется пустой вид, пока Expanded Toolbar
не достигнет максимальной высоты.
- После того, как сами
Expanded Toolbar
и Toolbar
станут скрытыми
-
Up Arrow
не отображается в Toolbar
Код
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 ![tBTOU.jpg]()
4
5
6 ![w0ODq.jpg]()
Ответы
Ответ 1
Вопрос 1
Добавьте android:fitsSystemWindows="true"
к вашим AppBarLayout
, CollapsingToolbarLayout
и к вашему ImageView
.
Я предполагаю, что часть вашего изображения находится ниже строки состояния (из-за отсутствия этих строк), поэтому вы не можете видеть верхнюю часть изображения.
Вопрос 2
collapseMode="pin"
влияет только на то, как панель инструментов реагирует на свертывание (поэтому ее называют collapseMode
, а не scrollFlags
).
При почти всех случаях при использовании CollapsingToolbarLayout
вы должны использовать scroll|exitUntilCollapsed
для scrollFlags
- это позволяет свернуть панель инструментов даже при прокрутке вниз.
Вопрос 3
Это связано с использованием scroll|enterAlways
. Измените свои флаги согласно # 2
Вопрос 4
Как уже упоминалось в ответе на ваш вопрос, вам нужно позвонить getSupportActionBar().setDisplayHomeAsUpEnabled(true);
, чтобы показать кнопку "Вверх":
@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");
}
Ответ 2
Удалите app:contentScrim="?attr/colorPrimary"
из вашего макета XML в теге CollapsingToolBarLayout
. Он отобразит кнопку "Назад" на панели инструментов
Ответ 3
Удалите эти две строки из Imageview
android:scaleType="centerCrop"
android:fitsSystemWindows="true"