Расширение и сворачивание панели инструментов в Android

Question

Я реализую расширяющуюся и свернутую панель инструментов с помощью сворачиваемой панели инструментов, но я застреваю, когда моя панель инструментов рушится. Я хочу показать другую панель инструментов. Я видел такой кусок кода, но не смог найти свое решение. Я также видел решение одного из удивительного разработчика https://github.com/saulmm/CoordinatorLayoutExample, но не могу быть в состоянии найти мое решение правильно

Это мой кусок кода, который я реализовал

activity_collapsing_toolbar.xml

<?xml version="1.0" encoding="utf-8"?> 
<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.support.design.widget.AppBarLayout 
     android:id="@+id/app_bar_layout" 
     android:layout_width="match_parent" 
     android:layout_height="176dp" 
     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="match_parent" 
      app:contentScrim="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 


      <RelativeLayout 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:layout_gravity="center" 
       android:background="@color/base_color_theme_new" 
       android:gravity="center_horizontal" 
       app:layout_collapseMode="parallax"> 

       <RelativeLayout 
        android:id="@+id/rl_class_image" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_marginTop="26dp" 
        android:gravity="center"> 

        <LinearLayout 
         android:id="@+id/ll_class" 
         android:layout_width="60dp" 
         android:layout_height="60dp" 
         android:background="@drawable/rounded_white_circle" 
         android:gravity="center"> 

         <ImageView 
          android:id="@+id/iv_class_image" 
          android:layout_width="60dp" 
          android:layout_height="60dp" 
          android:layout_gravity="center" 
          android:padding="8dp" 
          android:src="@drawable/class_4" /> 
        </LinearLayout> 
       </RelativeLayout> 


       <TextView 
        android:id="@+id/tv_class_name" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_below="@id/rl_class_image" 
        android:layout_marginTop="15dp" 
        android:gravity="center" 
        android:text="MATHEMATICS" 
        android:textSize="17sp" /> 

       <TextView 
        android:id="@+id/tv_videos_test" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_below="@id/tv_class_name" 
        android:layout_marginTop="10dp" 
        android:gravity="center" 
        android:text="20 VIDEOS | 5 TESTS" 
        android:textSize="10sp" /> 


      </RelativeLayout> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/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="match_parent" 
     android:layout_height="match_parent" 
     android:layout_marginLeft="10dp" 
     android:layout_marginRight="10dp" 
     android:background="@drawable/rounded_corners_for_list" 
     android:fillViewport="true" 

     app:behavior_overlapTop="10dp" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 


     <!--<include layout="@layout/activity_chapters" />--> 
     <com.chalklit.widget.NonScrollListView 
      android:id="@+id/lv_modules_list" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:background="@android:color/white" 
      android:divider="@null" 
      android:scrollbars="none"></com.chalklit.widget.NonScrollListView> 


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

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

CollapsingToolbarActivity.java

private CollapsingToolbarLayout collapsingToolbarLayout = null; 
protected void onCreate(Bundle savedInstanceState) { 
    // TODO Auto-generated method stub 
    super.onCreate(savedInstanceState); 
    requestWindowFeature(Window.FEATURE_NO_TITLE); 


    setContentView(R.layout.activity_collapsing_toolbar); 

    final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
    toolbar.inflateMenu(R.menu.menu_main); 

    setSupportActionBar(toolbar); 
    ActionBar actionBar = getSupportActionBar(); 
    actionBar.setDisplayHomeAsUpEnabled(true); 

    collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); 
    collapsingToolbarLayout.setTitle(" "); 
    collapsingToolbarLayout.setContentScrimColor(getResources().getColor(R.color.base_color_theme_new)); 
    collapsingToolbarLayout.setStatusBarScrimColor(getResources().getColor(R.color.base_color_theme_new)); 
} 

Answer 1

Для достижения этой цели мы должны создать пользовательское поведение, используя CoordinatorLayout.Behavior

принять во внимание два основных элемента: ребенок и зависимость:

Ребенок вид, что усиливает поведение, зависимость, кто будет служат триггером для взаимодействия с дочерним элементом. В вашем требовании ребенок является ImageView, и зависимость - это панель инструментов, таким образом, если панель инструментов перемещается, ImageView тоже будет перемещаться.

Пожалуйста, проверьте некоторые ссылки ниже для поведения Custome панели инструментов демок

• http://www.devexchanges.info/2016/03/android-tip-custom-coordinatorlayout.html
• https://medium.com/google-developers/intercepting-everything-with-coordinatorlayout-behaviors-8c6adc140c26#.tfsd7ftkl

Answer 2

Вот другой подход, который не использует пользовательские CoordinatorLayoutBehavior.

Используется OnOffsetChangedListener, который исходит от AppBarLayout.

Вот отрывок:

class OnOffsetChangedListener implements AppBarLayout.OnOffsetChangedListener { 

     @Override 
     public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { 

      final int scrollRange = appBarLayout.getTotalScrollRange(); 
      float offsetFactor = (float) (-verticalOffset)/(float) scrollRange; 
      ... 

Это показывает, как найти общий диапазон прокрутки, а затем найти отношение общего диапазона прокрутки и текущей позиции прокрутки. Это то, что вам нужно, чтобы выяснить, как масштабировать и позиционировать ваши панели инструментов.

Для пользовательского макета (как я сделал), вы можете переопределить onAttachedToWindow и добавить слушателя есть:

 // Add an OnOffsetChangedListener if possible 
     final ViewParent parent = getParent(); 
     if (parent instanceof AppBarLayout) { 
      if (mOnOffsetChangedListener == null) { 
       mOnOffsetChangedListener = new OnOffsetChangedListener(); 
      } 
      ((AppBarLayout) parent).addOnOffsetChangedListener(mOnOffsetChangedListener); 
     } 

Я нашел этот подход, чтобы быть немного проще, чем создание пользовательского поведения.

Я создал пример проекта на GitHub. Приложение выглядит следующим образом:

Вы можете увидеть весь проект в https://github.com/klarson2/Collapsing-Image