2012-01-12 14 views
40

Czy istnieje możliwość wyświetlenia dwóch stron jednocześnie, gdy używany jest ViewPager? Nie szukam efektu krawędzi, ale raczej dla dwóch stron pełna w tym samym czasie.Wiele stron jednocześnie na ViewPager

Z góry dziękuję.

+0

Nie jestem pewien, co masz asking..can Ciebie wyjaśnić trochę więcej? – Cody

+0

Chcę, aby ekran ViewPager wyświetlał dwie dostępne strony obok siebie, podobnie jak książka. –

+0

Czy możesz użyć dwóch fragmentów, aby uzyskać efekt strony obok siebie? to tylko pomysł ... Nie obwiniaj mnie ..... – NIPHIN

Odpowiedz

-2

Nie wydaje mi się, że jest to możliwe z ograniczeniami strony View. Pozwala tylko użytkownikowi na przeglądanie stron 1 na raz. Możesz być w stanie przerobić coś za pomocą fragmentów i mieć 2 fragmenty ViewPager obok siebie i używać przycisków, aby obliczyć przewijanie strony, które chcesz zaimplementować, ale kod może stać się bardzo skomplikowany.

Możesz wypróbować coś takiego jak ViewFlipper - gdzie możesz zrobić dużo więcej dostosowań (w tym animacji).

Mam nadzieję, że to pomoże.

64

Proszę spojrzeć na metodę getPageWidth w odpowiednim PagerAdapter. Zastąp go i zwróć np. 0.8f, aby wszystkie strony podrzędne zawierały tylko 80% szerokości okna ViewPager.

Więcej informacji: http://developer.android.com/reference/android/support/v4/view/PagerAdapter.html#getPageWidth(int)

+0

Problem z tą techniką polega na tym, że pojawia się dodatkowy margines-dół, dodając dziwne puste miejsce pod Viewpager – elgui

+0

Myślę, że to najlepsza odpowiedź! –

+0

Powoduje to dodanie efektu migotania do pagera widoku, nadal mogę przesuwać palcem, a widoki mogą powodować dziwne migotanie. – pyus13

2

Możesz rozwiązać ten problem, używając getPageWidth w klasie PagerAdapter.

Bądź pewny, czy JAR jest up-to-date .Od wcześniej ViewPager nie wsparcie wielu stron w tym samym czasie.

pływak publicznego getPageWidth() {

powrót 0.4f; (można go wybrać .Do pełnego ekranu na stronie należy podać 1f) }

30

zobaczyć moje bardziej up-to-date odpowiedzi tutaj: Can ViewPager have multiple views in per page?

Odkryłem, że być może jeszcze prostsze rozwiązanie poprzez określenie ujemnego marginesu dla ViewPager. Utworzyłem projekt MultiViewPager na GitHub, który może chcesz przyjrzeć:

https://github.com/Pixplicity/MultiViewPager

Chociaż to pytanie konkretnie prosi o rozwiązanie bez efektu krawędziowego, niektóre odpowiedzi tutaj proponują obejście przez CommonsWare, takie jak sugestia autorstwa kaw.

W przypadku tego konkretnego rozwiązania występują różne problemy z obsługą dotykową i akceleracją sprzętową.Prostszy i bardziej eleganckie rozwiązanie, moim zdaniem, jest określenie ujemny margines dla ViewPager:

ViewPager.setPageMargin(
    getResources().getDimensionPixelOffset(R.dimen.viewpager_margin)); 

Następnie określono tego wymiaru w moim dimens.xml:

<dimen name="viewpager_margin">-64dp</dimen> 

Aby zrekompensować nakładających się stron, widok zawartości Każda strona zawiera odwrotny margin:

android:layout_marginLeft="@dimen/viewpager_margin_fix" 
android:layout_marginRight="@dimen/viewpager_margin_fix" 

ponownie dimens.xml:

<dimen name="viewpager_margin_fix">32dp</dimen> 

(Zauważ, że wymiar viewpager_margin_fix jest połowę wartości bezwzględnej viewpager_margin wymiaru.)

Wdrożyliśmy ten in the Dutch newspaper app De Telegraaf Krant:

Phone example in De Telegraaf KrantTablet example

+0

Kochałem twoje rozwiązanie. Prosty i elegancki ...! Dzięki. Próbowałem osiągnąć to za pomocą 'PageTransformer'. –

+2

pracował dla mnie.Musisz również dodać setOffScreenPageLimit (2), aby poprawić buforowanie do 2, aby uniknąć opóźnień w drugim następnym widoku. – Giorgio

+0

W poprzedniej notatce: To jest ViewPager.setOffscreenPageLimit (2) na wypadek, gdyby ktoś został wyrzucony. – fooser

11

Trzeba zastąpić metodę getPageWidth() na Adapter Viewpagera. Na przykład:

@Override 
public float getPageWidth(int position) { 
    return 0.9f; 
} 

Wypróbuj ten kod w swoim adapterze, a następnie zrozumiesz.

+2

To wygląda bardzo podobnie do odpowiedzi @ Markus-Wörz? – bummi

1

utworzyć plik układ: my_layout.xml:

<?xml version="1.0" encoding="utf-8"?> 
<layout xmlns:android="http://schemas.android.com/apk/res/android"> 
<FrameLayout 
    android:id="@+id/pager_container" 
    android:layout_width="match_parent" 
    android:layout_height="240dp" 
    android:clipChildren="false"> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/pager" 
     android:layout_width="200dp" 
     android:clipToPadding="false" 
     android:layout_height="200dp" 
     android:layout_marginLeft="70dp" 
     android:layout_marginRight="70dp" 
     android:layout_gravity="center" /> 
</FrameLayout> 
</layout> 

viewpager jest tak mały, jak chcesz, aby strona się. Z android: clipToPadding = "false" strony poza pagerami są również widoczne. Ale teraz przeciągając poza viewpager nie ma wpływu Można temu zaradzić poprzez zbieranie akcenty z pagera-pojemnika i przekazywaniem ich do pagera:

MyLayoutBinding binding = DataBindingUtil.<MyLayoutBinding>inflate(layoutInflater, R.layout.my_layout, parent, false) 
binding.pager.setOffscreenPageLimit(3); 
binding.pager.setPageMargin(15); 
binding.pagerContainer.setOnTouchListener(new View.OnTouchListener() { 
     @Override 
     public boolean onTouch(View v, MotionEvent event) { 
      return chatCollectionLayoutBinding.pager.onTouchEvent(event); 
     } 
}); 
0

Może być don w układzie poz z Viewpager. Załóżmy, że chcesz dwie strony na raz.

To rozmieszczenie Przedmiot (photo_slider_item.xml):

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="@style/photosSliderItem"> 
     <ImageView android:id="@id/photoBox1" style="@style/photoBox"/> 
     <ImageView android:id="@id/photoBox2" style="@style/photoBox"/> 
    </LinearLayout> 

I w PagerAdapter:

@Override 
public View instantiateItem(ViewGroup container, int position){ 
    View sliderItem = LayoutInflater.from(container.getContext()).inflate(photo_slider_item, container, false); 
    ImageView photoBox1 = (ImageView) sliderItem.findViewById(R.id.photoBox1); 
    ImageView photoBox2 = (ImageView) sliderItem.findViewById(R.id.photoBox2); 
    photoBox1.setImageResource(photosIds[position]); 
    if(position < photosIds.length-1){ 
     photoBox2.setImageResource(photosIds[position+1]); 
    } else {photoBox2.setImageResource(photosIds[0]);} 
    container.addView(sliderItem); 
    return sliderItem; 
} 
Powiązane problemy