2015-08-05 1 views
16

Я пытаюсь добиться эффекта, такого как WhatsApp, где панель инструментов (при прокрутке) будет зажиматься в виде магнита или вне поля зрения магнита.Как сделать панель инструментов в представлении или вне поля зрения при использовании библиотеки дизайна Google?

То, что я им мой MainActivity XML:

  • DrawerLayout - Base Layout
  • CoordinatorLayout - Макет для AppBar и панели инструментов и вкладок
  • AppBarLayout - Для проведения панели инструментов и вкладок
  • Панели инструментов - имеет ЭТО флаг: app:layout_scrollFlags="scroll|enterAlways"
  • SlidingTabLayout - отображает вкладки
  • ViewPager - Для вкладок
  • RecyclerView - Для coordinatorlayout

Теперь не получите меня неправильно, это работает, когда я прокручиваю вниз панель получает вытеснены зрения, но сказать, что я остановить прокрутку на полпути, то панель просто сидит наполовину скрытый вне поля зрения и другая половина в поле зрения.

Как я могу подойти к решению этой проблемы, так как я хочу, чтобы она либо выходила из вида, либо в виде.

+1

То же здесь! Я только нашел этот пост, но я еще не там ... https: //mzgreen.github.io/2015/06/23/How-to-hideshow-Toolbar-when-list-is-scrolling%28part3% 29/ – Entreco

ответ

35

Эта функция была добавлена ​​в 23.1.0 версии библиотеки поддержки Android. Из заметок о выпуске:

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

<android.support.design.widget.CoordinatorLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <android.support.design.widget.AppBarLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

      <android.support.v7.widget.Toolbar 
        android:id="@+id/toolbar" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        app:layout_scrollFlags="scroll|enterAlways|snap" /> 
      ----- 
      ----- 

Для получения дополнительной информации: http://android-developers.blogspot.in/2015/10/android-support-library-231.html

EDIT: Добавлен конец цитаты в layout_scrollFlags сделать это синтаксический правильный

+1

С момента выпуска библиотеки поддержки дизайна Android 23.1.0 это должен быть правильный ответ – Anjz

+1

Намного проще! Действительно, сейчас должен быть правильный ответ. – tdevaux

+1

Это работает, но почему Android Studio выделяет флаг привязки с красным текстом? Затем, когда вы наводите указатель на предупреждение, он говорит: «Невозможно разрешить флаг». – toobsco42

7

EDIT: с опорой 23.1.0 это больше не нужно. См. Также this answer.

Один из возможных способов решения этой проблемы - настроить Behavior на AppBarLayout.

<android.support.design.widget.AppBarLayout 
    app:layout_behavior="com.myapp.AppBarLayoutSnapBehavior" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 
    ... 

Ваш AppBarLayoutSnapBehavior бы изменить поведение по умолчанию AppBarLayout.Behavior, добавив логику привязки, когда прокрутка останавливается. Надеюсь, приведенный ниже код сам пояснит.

package com.myapp; 

public class AppBarLayoutSnapBehavior extends AppBarLayout.Behavior { 

    private ValueAnimator mAnimator; 
    private boolean mNestedScrollStarted = false; 

    public AppBarLayoutSnapBehavior(Context context, AttributeSet attrs) { 
     super(context, attrs); 
    } 

    @Override 
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child, 
             View directTargetChild, View target, int nestedScrollAxes) { 
     mNestedScrollStarted = super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes); 
     if (mNestedScrollStarted && mAnimator != null) { 
      mAnimator.cancel(); 
     } 
     return mNestedScrollStarted; 
    } 

    @Override 
    public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target) { 
     super.onStopNestedScroll(coordinatorLayout, child, target); 

     if (!mNestedScrollStarted) { 
      return; 
     } 

     mNestedScrollStarted = false; 

     int scrollRange = child.getTotalScrollRange(); 
     int topOffset = getTopAndBottomOffset(); 

     if (topOffset <= -scrollRange || topOffset >= 0) { 
      // Already fully visible or fully invisible 
      return; 
     } 

     if (topOffset < -(scrollRange/2f)) { 
      // Snap up (to fully invisible) 
      animateOffsetTo(-scrollRange); 
     } else { 
      // Snap down (to fully visible) 
      animateOffsetTo(0); 
     } 
    } 

    private void animateOffsetTo(int offset) { 
     if (mAnimator == null) { 
      mAnimator = new ValueAnimator(); 
      mAnimator.setInterpolator(new DecelerateInterpolator()); 
      mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { 
       @Override 
       public void onAnimationUpdate(ValueAnimator animation) { 
        setTopAndBottomOffset((int) animation.getAnimatedValue()); 
       } 
      }); 
     } else { 
      mAnimator.cancel(); 
     } 

     mAnimator.setIntValues(getTopAndBottomOffset(), offset); 
     mAnimator.start(); 
    } 
} 

Единственное, вид прокрутки (в моем случае RecyclerView) щелкает вместе с Toolbar. Мне это действительно нравится, но я не уверен, что это то, что вы хотите.

+0

Это фактически не дает точного точного эффекта, как стиль whatsapp. Даже на простой сенсорной панели выходит экран. и при небольшом перетаскивании на самом деле вытаскивает панель инструментов где угодно (положение прокрутки) в recyclerview – rohit

+1

Как бы у вас было так, чтобы RecyclerView не хватал вместе с панелью инструментов? Ваше решение идеально, за исключением одного. – StackOverflowMaster

0

Я просто спрячут действия бар макета в основной деятельности и установить срок для CollapsingToolbarLayout. он работает для меня.

в основной деятельности

setSupportActionBar(mToolbar); 
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);  
    getSupportActionBar().hide(); 

    CollapsingToolbarLayout collapsingToolbar = 
      (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); 
    collapsingToolbar.setTitle("Name"); 
    loadBackdrop(); 

и layout_activity_main

<android.support.design.widget.AppBarLayout 
    android:id="@+id/appbar" 
    android:layout_width="match_parent" 
    android:layout_height="@dimen/detail_backdrop_height" 
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
    android:fitsSystemWindows="true"> 

    <android.support.design.widget.CollapsingToolbarLayout 
     android:id="@+id/collapsing_toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_scrollFlags="scroll|snap" 
     android:fitsSystemWindows="true" 
     app:contentScrim="?attr/colorPrimary" 
     app:expandedTitleMarginStart="48dp" 
     app:expandedTitleMarginEnd="64dp"> 

     <ImageView 
      android:id="@+id/backdrop" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:scaleType="centerCrop" 
      android:fitsSystemWindows="true" 
      app:layout_collapseMode="parallax" /> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
      app:layout_collapseMode="pin" /> 

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

</android.support.design.widget.AppBarLayout> 
+0

Zahra.HY, пожалуйста, отправьте свой адрес электронной почты, мне нужно связаться с вами. –

Смежные вопросы