Ответ 1
Изменить:
С момента выпуска библиотеки поддержки Android Design существует более простое решение. Отметьте ответ joaquin
-
Здесь, как я это сделал, вероятно, есть много других решений, но это работало для меня.
-
Прежде всего, вы должны использовать
Toolbarс прозрачным фоном. Расширяющийся и коллапсирующийToolbarна самом деле является поддельным, который под прозрачнымToolbar. (вы можете увидеть на первом снимке экрана снизу - тот, у которого есть поля, - это также то, как они это сделали в Telegram).Мы сохраняем фактический
ToolbarдляNavigationIconи переполненияMenuItem.![1. Transparent Toolbar - 2. Expanded header - 3. Collapsed header]()
-
Все, что в красном прямоугольнике на втором скриншоте (т.е. подделка
ToolbarиFloatingActionButton) на самом деле заголовок, который вы добавляете к настройкамListView( илиScrollView).Итак, вам нужно создать макет для этого заголовка в отдельном файле, который может выглядеть так:
<!-- The headerView layout. Includes the fake Toolbar & the FloatingActionButton --> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"> <RelativeLayout android:id="@+id/header_container" android:layout_width="match_parent" android:layout_height="@dimen/header_height" android:layout_marginBottom="3dp" android:background="@android:color/holo_blue_dark"> <RelativeLayout android:id="@+id/header_infos_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:padding="16dp"> <ImageView android:id="@+id/header_picture" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginRight="8dp" android:src="@android:drawable/ic_dialog_info" /> <TextView android:id="@+id/header_title" style="@style/TextAppearance.AppCompat.Title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/header_picture" android:text="Toolbar Title" android:textColor="@android:color/white" /> <TextView android:id="@+id/header_subtitle" style="@style/TextAppearance.AppCompat.Subhead" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/header_title" android:layout_toRightOf="@+id/header_picture" android:text="Toolbar Subtitle" android:textColor="@android:color/white" /> </RelativeLayout> </RelativeLayout> <FloatingActionButton android:id="@+id/header_fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:layout_margin="10dp" android:src="@drawable/ic_open_in_browser"/> </FrameLayout>(Обратите внимание, что вы можете использовать отрицательные поля/отступы для того, чтобы fab переместился на 2
Views) -
Теперь идет интересная часть. Чтобы оживить расширение нашего поддельного
Toolbar, мы реализуемListViewonScrollListener.// The height of your fully expanded header view (same than in the xml layout) int headerHeight = getResources().getDimensionPixelSize(R.dimen.header_height); // The height of your fully collapsed header view. Actually the Toolbar height (56dp) int minHeaderHeight = getResources().getDimensionPixelSize(R.dimen.action_bar_height); // The left margin of the Toolbar title (according to specs, 72dp) int toolbarTitleLeftMargin = getResources().getDimensionPixelSize(R.dimen.toolbar_left_margin); // Added after edit int minHeaderTranslation; private ListView listView; // Header views private View headerView; private RelativeLayout headerContainer; private TextView headerTitle; private TextView headerSubtitle; private FloatingActionButton headerFab; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.listview_fragment, container, false); listView = rootView.findViewById(R.id.listview); // Init the headerHeight and minHeaderTranslation values headerHeight = getResources().getDimensionPixelSize(R.dimen.header_height); minHeaderTranslation = -headerHeight + getResources().getDimensionPixelOffset(R.dimen.action_bar_height); // Inflate your header view headerView = inflater.inflate(R.layout.header_view, listview, false); // Retrieve the header views headerContainer = (RelativeLayout) headerView.findViewById(R.id.header_container); headerTitle = (TextView) headerView.findViewById(R.id.header_title); headerSubtitle = (TextView) headerView.findViewById(R.id.header_subtitle); headerFab = (TextView) headerView.findViewById(R.id.header_fab);; // Add the headerView to your listView listView.addHeaderView(headerView, null, false); // Set the onScrollListener listView.setOnScrollListener(this); // ... return rootView; } @Override public void onScrollStateChanged(AbsListView view, int scrollState) { // Do nothing } @Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { Integer scrollY = getScrollY(view); // This will collapse the header when scrolling, until its height reaches // the toolbar height headerView.setTranslationY(Math.max(0, scrollY + minHeaderTranslation)); // Scroll ratio (0 <= ratio <= 1). // The ratio value is 0 when the header is completely expanded, // 1 when it is completely collapsed float offset = 1 - Math.max( (float) (-minHeaderTranslation - scrollY) / -minHeaderTranslation, 0f); // Now that we have this ratio, we only have to apply translations, scales, // alpha, etc. to the header views // For instance, this will move the toolbar title & subtitle on the X axis // from its original position when the ListView will be completely scrolled // down, to the Toolbar title position when it will be scrolled up. headerTitle.setTranslationX(toolbarTitleLeftMargin * offset); headerSubtitle.setTranslationX(toolbarTitleLeftMargin * offset); // Or we can make the FAB disappear when the ListView is scrolled headerFab.setAlpha(1 - offset); } // Method that allows us to get the scroll Y position of the ListView public int getScrollY(AbsListView view) { View c = view.getChildAt(0); if (c == null) return 0; int firstVisiblePosition = view.getFirstVisiblePosition(); int top = c.getTop(); int headerHeight = 0; if (firstVisiblePosition >= 1) headerHeight = this.headerHeight; return -top + firstVisiblePosition * c.getHeight() + headerHeight; }
Обратите внимание, что есть некоторые части этого кода, которые я не тестировал, поэтому не стесняйтесь выделять ошибки. Но в целом, я знаю, что это решение работает, хотя я уверен, что его можно улучшить.
ИЗМЕНИТЬ 2:
Были ошибки в коде выше (что я не тестировал до сегодняшнего дня...), поэтому я изменил несколько строк, чтобы заставить его работать:
- Я представил другую переменную minHeaderTranslation, которая заменила minHeaderHeight;
-
Я изменил значение перевода Y, примененное к заголовку. Вид из:
headerView.setTranslationY(Math.max(-scrollY, minHeaderTranslation));to:
headerView.setTranslationY(Math.max(0, scrollY + minHeaderTranslation));Предыдущее выражение вообще не работало, я сожалею об этом...
-
Также был изменен расчет отношения, так что теперь он развивается из нижней панели инструментов (вместо верхней части экрана) в полный расширенный заголовок.
