我正在使用Android的ViewPager
。我要做的是在左右两边都显示页面的预览。我已经看到可以在底片pageMargin
上显示右侧预览的地方。
setPageMargin(-100);
无论如何,我还能显示左侧的预览吗?它基本上类似于我正在寻找的Gallery小部件。
我正在使用Android的ViewPager
。我要做的是在左右两边都显示页面的预览。我已经看到可以在底片pageMargin
上显示右侧预览的地方。
setPageMargin(-100);
无论如何,我还能显示左侧的预览吗?它基本上类似于我正在寻找的Gallery小部件。
Answers:
要显示左右页面的预览,请设置以下两个值
viewpager.setClipToPadding(false);
viewpager.setPadding(left,0,right,0);
如果您需要在viewpager中的两个页面之间放置空格,请添加
viewpager.setPageMargin(int);
@JijuInduchoodan的答案是完美且有效的。但是,由于我是Android的新手,所以花了我一段时间来理解和正确设置它。因此,我将发布此答案以供将来参考,并帮助其他与我有同感的人。
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的最终外观。
如今,您应该考虑使用ViewPager2,它“取代了ViewPager,解决了其前任的大部分难题”:
- 基于RecyclerView
- RTL(从右到左)布局支持
- 垂直方向支撑
- 可靠的片段支持(包括处理对基础片段集合的更改)
- 数据集更改动画(包括
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在ViewPager2上添加了一个指南,其中包含2种PageTransformer
实现方式,您可以从中获得启发: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中添加)一起轻松实现这种行为:
不久前,我需要类似viewpager的功能并准备了一个小库:
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设置零填充时,viewpager的edgeeffect位置被弄乱了,这是viewpager的bug,请参见此处:viewpager edgeeffect bug
您可以通过设置android:overScrollMode="never"
为viewpager 来禁用边缘效果,也可以使用EdgeEffect类的稍作修改的版本来修复该错误:ViewPagerEdgeEffect修复
使用此片段适配器和类可在左右滚动条中查看viewpager。添加必要的类可滚动查看下一页。
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)
工作正常?