2016-05-05 5 views
1

Я использую Viewpager в верхней части моего макета и ниже, что есть макет фрейма, который содержит просмотрщик ресайклеров. Я хочу свернуть просмотрщик, когда я просматриваю просмотр ресайклера, чтобы его можно было просматривать в полноэкранном режиме.Как использовать viewpager внутри разборной панели инструментов?

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

<RelativeLayout 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/main_container" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:background="@android:color/white" 
android:orientation="vertical" 
tools:context=".MainActivity"> 


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

<android.support.v4.view.ViewPager 
    android:id="@+id/pager_container" 
    android:layout_width="match_parent" 
    android:layout_height="180dp" 
    android:layout_gravity="center_horizontal" 
    android:layout_marginTop="?attr/actionBarSize" /> 

<FrameLayout 
    android:id="@+id/content" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_below="@id/seperator" 
    android:layout_marginTop="20dp" /> 
    </RelativeLayout> 

Я приложил screenshort также для того же.

enter image description here

ответ

0

Поместите свой вид пейджер внутри макета координатора расположения и использования Сворачивания панели инструментов.

Посмотрите на приведенную ниже ссылку. Поймите это и начните внедрять. Любые сомнения не стесняйтесь спрашивать меня здесь.

http://antonioleiva.com/collapsing-toolbar-layout/

После того, как вы сделали с этим также взглянуть на ссылку ниже.

Collapsing Toolbar and Fragment

+0

Я делаю то же самое, но мой макет становится грязным. Можете ли вы отредактировать мой файл макета? – Abhishek

+0

Что случилось? Я жду вашего ответа. Пожалуйста, помогите – Abhishek

+0

jaydroider на нем. Посмотрите на его ответ –

1

Используйте ссылку ниже вы можете найти как использовать CoordinatorLayout и CollapsingToolbarLayout также в этой связи они использовали TabLayout и ViewPager

https://gist.github.com/iPaulPro/1468510f046cb10c51ea

+0

Viewpager используется вне collapsingtoolbar. Я хочу свернуть только просмотр пейджера – Abhishek

0

Редакцией:

Первый вам необходимо скомпилировать

compile 'com.android.support:design:23.3.0' 

, а затем здесь образец

<android.support.design.widget.CoordinatorLayout 
    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:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/app_bar" 
     android:layout_width="match_parent" 
     android:layout_height="180dp" 
     android:fitsSystemWindows="true" 
     android:theme="@style/AppTheme.AppBarOverlay"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/toolbar_layout" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fitsSystemWindows="true" 
      app:contentScrim="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

      <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.v4.view.ViewPager 
      android:id="@+id/pager_container" 
      android:layout_width="match_parent" 
      android:layout_height="180dp" 
      android:layout_gravity="center_horizontal" 
      android:layout_marginTop="?attr/actionBarSize" /> 

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

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

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

+0

Но в вашем коде viewpager находится за пределами collipsingtoolbar. Я хочу свернуть только просмотр пейджера. – Abhishek

+0

Я обновил ответ – Max

3

Использование CoordinatorLayout вы можете сделать это.

Следуйте за этим образом Layout.

<?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:id="@+id/main_content" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appbar" 
     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="?attr/actionBarSize" 
      android:background="?attr/colorPrimary" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
      app:layout_scrollFlags="scroll|enterAlways|snap" /> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:fillViewport="false" /> 

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

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="end|bottom" 
     android:layout_margin="@dimen/fab_margin" 
     android:src="@drawable/ic_done" /> 

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

EDIT 1:

<?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:id="@+id/main_content" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

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

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:background="?attr/colorPrimary" 
      android:fitsSystemWindows="true" 
      app:layout_collapseMode="pin" 
      app:layout_scrollFlags="scroll|enterAlways|snap" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> 


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

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:orientation="vertical" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 


     <android.support.design.widget.TabLayout 
      android:id="@+id/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_below="@+id/toolbar" 
      android:background="?attr/colorPrimary" 
      android:elevation="6dp" 
      android:fillViewport="false" 
      android:minHeight="?attr/actionBarSize" 
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
      app:layout_scrollFlags="enterAlways" /> 

     <android.support.v4.view.ViewPager 
      android:id="@+id/viewpager" 
      android:layout_width="match_parent" 
      android:layout_height="fill_parent" 
      android:layout_below="@+id/tabs" 
      app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 


    </LinearLayout> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="end|bottom" 
     android:layout_margin="@dimen/fab_margin" 
     android:src="@drawable/ic_done" /> 

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

Как вы можете видеть на скриншоте, который я опубликовал, viewpager находится в верхней части экрана, и я хочу свернуть его на прокрутке ниже просмотра recycler. Код, который вы отправили в качестве ответа, имеет viewpager, но он находится вне collapsabletoolbar. – Abhishek

+0

@Abhishek Проверьте с обновленным ответом. при прокрутке вверх он будет сбрасывать просмотр пейджера под панелью инструментов. –

+0

@Abhishek Сообщите мне, это сработало для вас или нет? –

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