3

Я хочу создать пользовательский интерфейс, такой как приложение Google Play Store. То есть, она включает в себя эти виды функций:Параллакс-эффект и привязка панели инструментов, например, приложение Google Play Store

  • DrawerLayout
  • Parallax эффект
  • Замыканием панели инструментов, которая входит, когда пользователь прокручивает
  • Top изображения позади панели статуса

Я создал макет для достижения указанных функций, и он отлично работает, за исключением двух вещей:

  1. панель не щелкать, когда он попадает на прокрутку вверх
  2. Parallax эффект не работает

Вот мой макет:

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v4.widget.DrawerLayout 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/drawer_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"> 

    <android.support.design.widget.CoordinatorLayout 
     android:id="@+id/coordinator_layout" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:fitsSystemWindows="true"> 

     <android.support.design.widget.AppBarLayout 
      android:id="@+id/app_bar_layout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:background="@color/green_dark" 
      android:fitsSystemWindows="true"> 

      <android.support.design.widget.CollapsingToolbarLayout 
       android:id="@+id/collapsing_toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:fitsSystemWindows="true" 
       app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" 
       app:contentScrim="@color/green_dark" 
       app:statusBarScrim="@color/green_dark" 
       app:titleEnabled="false"> 

       <ImageView 
        android:id="@+id/top_app_imageview" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:adjustViewBounds="true" 
        android:fitsSystemWindows="true" 
        android:scaleType="centerCrop" 
        app:layout_collapseMode="parallax" 
        app:layout_collapseParallaxMultiplier="0.7" /> 

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

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

     <android.support.v7.widget.RecyclerView 
      android:id="@+id/recycler_view" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:paddingBottom="10dp" 
      app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 
    </android.support.design.widget.CoordinatorLayout> 


    <android.support.design.widget.NavigationView 
     android:id="@+id/navigation_view" 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:layout_gravity="start" 
     android:elevation="6dp" 
     app:headerLayout="@layout/layout_drawer_header" 
     app:menu="@menu/drawer_menu" /> 

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

Вот как мой Gradle выглядит следующим образом:

{ 
... 
buildToolsVersion "25.0.0" 
... 
} 

dependencies { 
    .... 
    compile 'com.android.support:appcompat-v7:25.1.0' 
    compile 'com.android.support:recyclerview-v7:25.1.0' 
    compile 'com.android.support:support-v4:25.1.0' 
    compile 'com.android.support:design:25.1.0' 
    compile 'com.android.support:cardview-v7:25.1.0' 
    .... 
} 

Любой идеал как почему эффект парраллакса не работает и как можно получить панель инструментов?

ответ

1
  1. Причина, почему Parallax эффект не работал было то, что я устанавливал ширину и высоту ImageView (id: top_app_imageview) с setLayoutParams. Это как-то прервалось, чтобы получить правильный эффект параллакса. Обходной путь состоял в том, чтобы программно установить ширину и высоту AppBarLayout и изменить Imageviewlayout_height на match_parent.
  2. Я сделал панель привязки путем изменения layout_scrollFlags от CollapsingToolbarLayout к "scroll|enterAlways|enterAlwaysCollapsed|snap"
+0

** 1. ** Таким образом, вы должны поместить эту информацию в свой вопрос, прежде чем спрашивать ... Мой ответ правильный, как вы можете видеть здесь: http://stackoverflow.com/a/35241363/4409113 ** 2. * * Не могли бы вы просто сделать видео с результатами, чтобы посмотреть, что происходит? – Mohsen

0

Попробуйте это;

Удалить эту строку в Toolbar:

app:layout_collapseMode="pin" 

И просто использовать это в вашем Toolbar:

app:layout_scrollFlags="scroll|enterAlways" 

Итак, мы имеем:

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

Спасибо за ваш ответ. Но это не сработало! Тот же результат – Umarov

+0

@Umarov Вы пытаетесь получить что-то вроде этого видео выхода? правильно ? https://sendvid.com/ugjspx8r Снято с: http://stackoverflow.com/questions/32569824/collapsing-toolbar-layout-like-google-play-store Потому что я сделал тест, и он сработал. Пожалуйста, ясно, какая часть не сработала, взяв видео с вывода, это было бы здорово. – Mohsen

+0

Спасибо за ваше время. Пожалуйста, взгляните на мой ответ. – Umarov