Android의 ViewPager
. 내가 원하는 것은 왼쪽과 오른쪽에 페이지의 미리보기를 표시하는 것입니다. 네거티브 pageMargin
를 사용 하여 오른쪽 미리보기를 표시 할 수있는 위치를 확인 했습니다.
setPageMargin(-100);
어쨌든 왼쪽도 미리 볼 수 있나요? 기본적으로 내가 찾고있는 갤러리 위젯과 비슷한 것입니다.
Android의 ViewPager
. 내가 원하는 것은 왼쪽과 오른쪽에 페이지의 미리보기를 표시하는 것입니다. 네거티브 pageMargin
를 사용 하여 오른쪽 미리보기를 표시 할 수있는 위치를 확인 했습니다.
setPageMargin(-100);
어쨌든 왼쪽도 미리 볼 수 있나요? 기본적으로 내가 찾고있는 갤러리 위젯과 비슷한 것입니다.
답변:
왼쪽 및 오른쪽 페이지 미리보기를 표시하려면 다음 두 값을 설정하십시오.
viewpager.setClipToPadding(false);
viewpager.setPadding(left,0,right,0);
뷰 페이저에서 두 페이지 사이에 공간이 필요하면 다음을 추가하십시오.
viewpager.setPageMargin(int);
@JijuInduchoodan의 대답은 완벽하고 효과적입니다. 그러나 저는 안드로이드에 비교적 익숙하지 않기 때문에 제대로 이해하고 설정하는 데 시간이 걸렸습니다. 그래서 나는 미래의 참조를 위해이 답변을 게시하고 나와 같은 입장에있는 다른 사람을 돕습니다.
if (viewPager == null)
{
// Initializing view pager
viewPager = (ViewPager) findViewById(R.id.vpLookBook);
// Disable clip to padding
viewPager.setClipToPadding(false);
// set padding manually, the more you set the padding the more you see of prev & next page
viewPager.setPadding(40, 0, 40, 0);
// sets a margin b/w individual pages to ensure that there is a gap b/w them
viewPager.setPageMargin(20);
}
ViewPager's
어댑터 의 페이지에 너비를 설정할 필요가 없습니다 . 에서 이전 및 다음 페이지를 보는 데 필요한 추가 코드가 없습니다 ViewPager
. 단, 각 페이지의 상단과 하단에 빈 공간을 추가하려면 다음 코드를 ViewPager's
하위 페이지의 상위 레이아웃으로 설정할 수 있습니다 .
android:paddingTop="20dp"
android:paddingBottom="20dp"
이것이 ViewPager의 최종 모습입니다.
요즘에는 " ViewPager 를 대체하여 이전 버전의 문제점 대부분을 해결"하는 ViewPager2 사용을 고려해야 합니다 .
- RecyclerView 기반
- RTL (오른쪽에서 왼쪽으로) 레이아웃 지원
- 수직 방향 지원
- 신뢰할 수있는 Fragment 지원 (기본 Fragment 컬렉션에 대한 변경 처리 포함)
- 데이터 세트 변경 애니메이션 (
DiffUtil
지원 포함 )
활동 / 조각에서 ViewPager2를 설정합니다.
// MyRecyclerViewAdapter is an standard RecyclerView.Adapter :)
viewPager2.adapter = MyRecyclerViewAdapter()
// You need to retain one page on each side so that the next and previous items are visible
viewPager2.offscreenPageLimit = 1
// Add a PageTransformer that translates the next and previous items horizontally
// towards the center of the screen, which makes them visible
val nextItemVisiblePx = resources.getDimension(R.dimen.viewpager_next_item_visible)
val currentItemHorizontalMarginPx = resources.getDimension(R.dimen.viewpager_current_item_horizontal_margin)
val pageTranslationX = nextItemVisiblePx + currentItemHorizontalMarginPx
val pageTransformer = ViewPager2.PageTransformer { page: View, position: Float ->
page.translationX = -pageTranslationX * position
// Next line scales the item's height. You can remove it if you don't want this effect
page.scaleY = 1 - (0.25f * abs(position))
// If you want a fading effect uncomment the next line:
// page.alpha = 0.25f + (1 - abs(position))
}
viewPager2.setPageTransformer(pageTransformer)
// The ItemDecoration gives the current (centered) item horizontal margin so that
// it doesn't occupy the whole screen width. Without it the items overlap
val itemDecoration = HorizontalMarginItemDecoration(
context,
R.dimen.viewpager_current_item_horizontal_margin
)
viewPager2.addItemDecoration(itemDecoration)
추가 HorizontalMarginItemDecoration
사소한 인 ItemDecoration
:
/**
* Adds margin to the left and right sides of the RecyclerView item.
* Adapted from https://stackoverflow.com/a/27664023/4034572
* @param horizontalMarginInDp the margin resource, in dp.
*/
class HorizontalMarginItemDecoration(context: Context, @DimenRes horizontalMarginInDp: Int) :
RecyclerView.ItemDecoration() {
private val horizontalMarginInPx: Int =
context.resources.getDimension(horizontalMarginInDp).toInt()
override fun getItemOffsets(
outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State
) {
outRect.right = horizontalMarginInPx
outRect.left = horizontalMarginInPx
}
}
이전 / 다음 항목이 표시되는 정도와 현재 항목 가로 여백을 제어하는 차원을 추가합니다.
<dimen name="viewpager_next_item_visible">26dp</dimen>
<dimen name="viewpager_current_item_horizontal_margin">42dp</dimen>
마지막으로 ViewPager2
레이아웃 에을 추가하십시오 .
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
한 가지 중요한 것은 ViewPager2
항목에 있어야합니다 layout_height="match_parent"
(그렇지 않으면 IllegalStateException이 발생 함). 따라서 다음과 같이해야합니다.
<androidx.cardview.widget.CardView 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" <-- this!
app:cardCornerRadius="8dp"
app:cardUseCompatPadding="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="280dp">
<!-- ... -->
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Google은 PageTransformer
영감으로 사용할 수있는 두 가지 구현이있는 ViewPager2에 대한 가이드를 추가했습니다 . https://developer.android.com/training/animation/screen-slide-2
viewpager.setPageTransformer { page, position -> page.translationX = -1 * position }
setOffscreenPageLimit(1)
:)
2017 년 RecyclerView
에는 PagerSnapHelper (v7 지원 라이브러리의 버전 25.1.0에 추가됨)를 사용하여 이러한 동작을 추가로 쉽게 수행 할 수 있습니다 . 
언젠가 나는 그러한 뷰 페이저와 같은 기능이 필요했고 작은 라이브러리를 준비했습니다.
MetalRecyclerPagerView- 예제와 함께 모든 코드를 찾을 수 있습니다.
주로 단일 클래스 파일 인 MetalRecyclerViewPager.java (및 두 개의 xml : attrs.xml 및 ids.xml )로 구성됩니다.
누군가를 돕고 몇 시간을 절약하기를 바랍니다. :)
new PagerSnapHelper().attachToRecyclerView(recyclerView)
페이지 스냅이 있습니다.
누군가가 여전히 솔루션을 찾고 있다면 부정적인 여백을 사용하지 않고 ViewPage를 사용자 정의했습니다. 여기에서 샘플 프로젝트를 찾으십시오. https://github.com/44kksharma/Android-ViewPager-Carousel-UI
대부분의 경우 작동하지만 당신은 여전히 페이지 여백을 정의 할 수 있습니다.
mPager.setPageMargin(margin in pixel);
xml 파일에서이 작업을 수행 할 수 있습니다. 아래 코드를 사용하면됩니다.
android:clipToPadding="false"
android:paddingLeft="XX"
android:paddingRight="XX"
예를 들면 :
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingLeft="30dp"
android:paddingRight="30dp" />
참고 : 페이지 사이에 공백이 필요한 경우 패딩 / 여백을 하위 조각으로 설정하십시오.
다른 화면에서이 기능을 사용하는 데 어려움을 겪는 분들을 위해
mPager.setClipToPadding(false);
DisplayMetrics displayMetrics = new DisplayMetrics();
self.getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
int width = displayMetrics.widthPixels;
int paddingToSet = width/4; //set this ratio according to how much of the next and previos screen you want to show.
mPager.setPadding(paddingToSet,0,paddingToSet,0);
뷰 페이저에 제로 패딩을 설정하지 않으면 뷰 페이저의 가장자리 효과 배치가 엉망이됩니다. 이것은 뷰 페이저의 버그입니다 . 여기를 참조하세요 : viewpager edgeeffect bug
android:overScrollMode="never"
viewpager 로 설정하여 가장자리 효과를 비활성화 하거나 EdgeEffect 클래스의 약간 수정 된 버전으로 버그를 수정할 수 있습니다. ViewPagerEdgeEffect 수정
이 조각 어댑터 및 클래스를 사용하여 왼쪽 및 오른쪽 스크롤에서 뷰 페이지를보고 다음 페이지를보기 위해 스크롤하는 데 필요한 클래스를 추가합니다.
package com.rmn.viewpager;
import java.util.List;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
/**
* The <code>PagerAdapter</code> serves the fragments when paging.
* @author mwho
*/
public class PagerAdapter extends FragmentPagerAdapter {
private List<Fragment> fragments;
/**
* @param fm
* @param fragments
*/
public PagerAdapter(FragmentManager fm, List<Fragment> fragments) {
super(fm);
this.fragments = fragments;
}
/* (non-Javadoc)
* @see android.support.v4.app.FragmentPagerAdapter#getItem(int)
*/
@Override
public Fragment getItem(int position) {
return this.fragments.get(position);
}
/* (non-Javadoc)
* @see android.support.v4.view.PagerAdapter#getCount()
*/
@Override
public int getCount() {
return this.fragments.size();
}
}
package com.manishkpr.viewpager;
import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class ViewPagerAdapter extends FragmentPagerAdapter {
private Context _context;
public ViewPagerAdapter(Context context, FragmentManager fm) {
super(fm);
_context=context;
}
@Override
public Fragment getItem(int position) {
Fragment f = new Fragment();
switch(position){
case 0:
f=LayoutOne.newInstance(_context);
break;
case 1:
f=LayoutTwo.newInstance(_context);
break;
}
return f;
}
@Override
public int getCount() {
return 2;
}
}
setPageMargin(-100)
제대로 작동 합니까 ?