Whatsapp как сворачивание панели инструментов

В моем приложении я хотел бы реализовать домашнюю страницу Whatsapp, например, панель инструментов. То есть, прокручивая список, панель инструментов должна подниматься вверх, а вкладки должны располагаться сверху. Как я могу это достичь?

Вот мой макет панели приложений

            

Теперь TabLayout не отображается, и панель инструментов остается там, хотя список в пейджере просмотра ниже прокручивается. Незлая помощь.

    Чтобы достичь этой функциональности, CollapsingToolbarLayout на самом деле не нужен, вы можете просто свернуть панель инструментов, установленную как ActionBar.

    Вот пример кода с помощью панели инструментов для ActionBar, которая рухнет, и TabLayout с ViewPager.

    Сначала убедитесь, что стиль, используемый для MainActivity, – это тот, который не имеет ActionBar, например:

      

    MainActivity.java , который имеет FragmentPagerAdapter и устанавливает вкладки:

     public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); // Get the ViewPager and set it's PagerAdapter so that it can display items ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager); PagerAdapter pagerAdapter = new PagerAdapter(getSupportFragmentManager(), MainActivity.this); viewPager.setAdapter(pagerAdapter); // Give the TabLayout the ViewPager TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout); tabLayout.setupWithViewPager(viewPager); // Iterate over all tabs and set the custom view for (int i = 0; i < tabLayout.getTabCount(); i++) { TabLayout.Tab tab = tabLayout.getTabAt(i); tab.setCustomView(pagerAdapter.getTabView(i)); } } @Override public void onResume() { super.onResume(); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { int id = item.getItemId(); if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } class PagerAdapter extends FragmentPagerAdapter { String tabTitles[] = new String[] { "Tab One", "Tab Two", "Tab Three" }; Context context; public PagerAdapter(FragmentManager fm, Context context) { super(fm); this.context = context; } @Override public int getCount() { return tabTitles.length; } @Override public Fragment getItem(int position) { switch (position) { case 0: return new BlankFragment(); case 1: return new BlankFragment(); case 2: return new BlankFragment(); } return null; } @Override public CharSequence getPageTitle(int position) { // Generate title based on item position return tabTitles[position]; } public View getTabView(int position) { View tab = LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_tab, null); TextView tv = (TextView) tab.findViewById(R.id.custom_text); tv.setText(tabTitles[position]); return tab; } } } 

    activity_main.xml

    Важные части:

    • Использовать координаторLayout
    • Используйте app:layout_scrollFlags="scroll|enterAlways" в свойствах панели инструментов
    • Используйте app:layout_behavior="@string/appbar_scrolling_view_behavior" в свойствах ViewPager

    Вот файл activity_main.xml :

            

    custom_tab.xml :

         

    BlankFragment.java , это просто добавляет достаточно элементов, чтобы прокручивать:

     import android.support.v4.app.Fragment; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;; public class BlankFragment extends Fragment { public BlankFragment() { // Required empty public constructor } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment View rootView = inflater.inflate(R.layout.fragment_blank, container, false); RecyclerView rv = (RecyclerView) rootView.findViewById(R.id.rv_recycler_view); rv.setHasFixedSize(true); MyAdapter adapter = new MyAdapter(new String[]{"test one", "test two", "test three", "test four", "test five" , "test six" , "test seven", "test eight" , "test nine"}); rv.setAdapter(adapter); LinearLayoutManager llm = new LinearLayoutManager(getActivity()); rv.setLayoutManager(llm); return rootView; } } 

    fragment_blank.xml , важно использовать RecyclerView или любой другой вид, поддерживающий вложенную прокрутку, например, NestedScrollView

    (примечание: вы можете вызвать setNestedScrollingEnabled(true) на api-21 и setNestedScrollingEnabled(true) его с помощью ListView):

            

    MyAdapter.java , адаптер RecyclerView:

     import android.support.v7.widget.CardView; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; public class MyAdapter extends RecyclerView.Adapter { private String[] mDataset; // Provide a reference to the views for each data item // Complex data items may need more than one view per item, and // you provide access to all the views for a data item in a view holder public static class MyViewHolder extends RecyclerView.ViewHolder { public CardView mCardView; public TextView mTextView; public MyViewHolder(View v) { super(v); mCardView = (CardView) v.findViewById(R.id.card_view); mTextView = (TextView) v.findViewById(R.id.tv_text); } } // Provide a suitable constructor (depends on the kind of dataset) public MyAdapter(String[] myDataset) { mDataset = myDataset; } // Create new views (invoked by the layout manager) @Override public MyAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { // create a new view View v = LayoutInflater.from(parent.getContext()) .inflate(R.layout.card_item, parent, false); // set the view's size, margins, paddings and layout parameters MyViewHolder vh = new MyViewHolder(v); return vh; } @Override public void onBindViewHolder(MyViewHolder holder, int position) { holder.mTextView.setText(mDataset[position]); } @Override public int getItemCount() { return mDataset.length; } } 

    card_item.xml , изображение круга и строка «blah blah blah» являются статическим содержимым, только tv_text TextView обновляется из источника данных для этого простого примера:

                  

    Зависимости build.gradle :

     dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:23.0.1' compile 'com.android.support:design:23.0.1' compile 'com.android.support:cardview-v7:23.0.1' compile 'com.android.support:recyclerview-v7:23.0.1' } 

    Результат:

    введите описание изображения здесь

    Эта библиотека поможет вам

    Это очень простая библиотека для Android, которая позволяет вам вставлять заголовок в прокручиваемое представление и легко применять анимацию к нему

    EDIT: для использования библиотеки StikkyHeader вам понадобятся только три строки:

     StikkyHeaderBuilder.stickTo(mListView) .setHeader(R.id.header, containerLayout) .minHeightHeader(250) .build(); 

    Пример:

     public class IconAnimator extends HeaderStikkyAnimator { @Override public AnimatorBuilder getAnimatorBuilder() { View viewToAnimate = getHeader().findViewById(R.id.icon); Point point = new Point(50,100) // translate to the point with coordinate (50,100); float scaleX = 0.5f //scale to the 50% float scaleY = 0.5f //scale to the 50% float fade = 0.2f // 20% fade AnimatorBuilder animatorBuilder = AnimatorBuilder.create() .applyScale(viewToAnimate, scaleX, scaleY) .applyTranslation(viewToAnimate, point) .applyFade(viewToAnimate, fade); return animatorBuilder; } } 

    а затем установите аниматор в StikkyHeader:

      StikkyHeaderBuilder.stickTo(mListView) .setHeader(R.id.header, containerLayout) .minHeightHeader(250) .animator(new IconAnimator()) .build(); 

    Итак, чтобы передать событие прокрутки вашего listview/recyclerview в appbarlayout , вам нужно поместить флаг ниже в ваш framelayout/relativelayout/linearlayout содержащий ваш прокручиваемый вид, то есть listview/recyclerview :

     app:layout_behavior="@string/appbar_scrolling_view_behavior" 

    например, в вашем случае это должно выглядеть так:

          ..........     // Frame containing your listview/recyclerview/ scrollingview   

    Именно то, что вы хотите (просто скопируйте и вставьте его)

                        
    Давайте будем гением компьютера.