有没有办法在 android 中创建预览滑块

Question

我正在尝试创建类似

的界面

.

中心元素是 ViewPager 全尺寸图片，顶部元素是 RecyclerView 预览图片。但是我找不到让磁铁元素居中的方法。有没有办法覆盖 RecyclerView 的行为？

Answer 1

LinearLayoutManager 有一个 scrollToPositionWithOffset 方法，它获取项目开始位置和 RecyclerView 开始位置的偏移量，这似乎可以满足您的需要。
您可以使用此图像滑块 (https://github.com/jjhesk/LoyalNativeSlider) 而不是 ViewPager 。

Answer 2

首先，您可以使用此google official example创建将此视图拉到中心的视觉效果。您将在 ViewPager 上使用 ImageView 来显示动画外观。动画完成后，使您的 ImageView 消失并在 ViewPager 中显示请求的图像。

Answer 3

我找到了您所需要的解决方案。我在 github.com 上创建了一个小例子：AndroidPreviewSlider

问题是顶视图是 ViewPager，中心视图也是 ViewPager。详细代码如下：

顶级预览适配器

public class PhotoPreviewAdapter extends FragmentPagerAdapter {

    private static final int DEFAULT_SIDE_PREVIEW_COUNT = 3;

    private final int sidePreviewCount;

    private final List<PhotoInfo> photoInfos;

    public PhotoPreviewAdapter(FragmentManager fm, List<PhotoInfo> photoInfos) {
        this(fm, DEFAULT_SIDE_PREVIEW_COUNT, photoInfos);
    }

    public PhotoPreviewAdapter(FragmentManager fm, int sidePreviewCount, List<PhotoInfo> photoInfos) {
        super(fm);
        this.sidePreviewCount = sidePreviewCount;
        this.photoInfos = photoInfos;
    }

    public int getSidePreviewCount() {
        return sidePreviewCount;
    }

    @Override
    public Fragment getItem(int position) {
        if (isDummy(position)) {
            return DummyPreviewFragment.newInstance();
        } else {
            return PhotoPreviewFragment.newInstance(photoInfos.get(getRealPosition(position)));
        }
    }

    private boolean isDummy(int position) {
        return position < sidePreviewCount || position > photoInfos.size() - 1 + sidePreviewCount;
    }

    private int getRealPosition(int position) {
        return position - sidePreviewCount;
    }

    @Override
    public int getCount() {
        return photoInfos.size() + (sidePreviewCount * 2);
    }

    @Override
    public float getPageWidth(int position) {
        return 1.0f / getElementsPerPage();
    }

    private int getElementsPerPage() {
        return (sidePreviewCount * 2) + 1;
    }
}

中心视图适配器很简单

public class PhotoViewAdapter extends FragmentPagerAdapter {

    private final List<PhotoInfo> photoInfos;

    public PhotoViewAdapter(FragmentManager fm, List<PhotoInfo> photoInfos) {
        super(fm);
        this.photoInfos = photoInfos;
    }

    @Override
    public Fragment getItem(int position) {
        return PhotoViewFragment.newInstance(photoInfos.get(position));
    }

    @Override
    public int getCount() {
        return photoInfos.size();
    }
}

其中一个主要的是 sync listener

public class OnSyncPageChangeListener implements ViewPager.OnPageChangeListener {

    private int scrollState = ViewPager.SCROLL_STATE_IDLE;

    private final ViewPager syncToViewPager;
    private final ViewPager syncWithViewPager;

    public OnSyncPageChangeListener(ViewPager syncToViewPager, ViewPager syncWithViewPager) {
        this.syncToViewPager = syncToViewPager;
        this.syncWithViewPager = syncWithViewPager;
    }

    @Override
    public void onPageScrolled(final int position, final float positionOffset, final int positionOffsetPixels) {
        if (scrollState != ViewPager.SCROLL_STATE_IDLE) {
            final float ratio = calculateRatioForPosition(position);
            final float scrollX = syncWithViewPager.getScrollX();
            final float scrollY = syncWithViewPager.getScrollY();
            syncToViewPager.scrollTo((int) (scrollX * ratio), (int) scrollY);
        }
    }

    private float calculateRatioForPosition(int position) {
        final float syncToViewPagerWidth = syncToViewPager.getWidth();
        final float syncWithViewPagerWidth = syncWithViewPager.getWidth();

        final float syncToViewPagerElementWeight = syncToViewPager.getAdapter().getPageWidth(position);
        final float syncWithViewPagerElementWeight = syncWithViewPager.getAdapter().getPageWidth(position);

        final float syncToViewPagerElementsCount = (1.0f / syncToViewPagerElementWeight);
        final float syncWithViewPagerElementsCount = (1.0f / syncWithViewPagerElementWeight);

        final float syncToViewPagerElementWidth = syncToViewPagerWidth / syncToViewPagerElementsCount;
        final float syncWithViewPagerElementWidth = syncWithViewPagerWidth / syncWithViewPagerElementsCount;

        return syncToViewPagerElementWidth / syncWithViewPagerElementWidth;
    }

    @Override
    public void onPageSelected(final int position) {

    }

    @Override
    public void onPageScrollStateChanged(final int state) {
        scrollState = state;
        if (state == ViewPager.SCROLL_STATE_IDLE) {
            syncToViewPager.setCurrentItem(syncWithViewPager.getCurrentItem(), false);
        }
    }
}

最后 init ViewPager's

@Bind(R.id.photoPreviewPager)
ViewPager photoPreviewPager;

@Bind(R.id.photoViewPager)
ViewPager photoViewPager;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ButterKnife.bind(this);

    final List<PhotoInfo> photoInfos = PhotoInfosProvider.generate();

    final PhotoPreviewAdapter photoPreviewAdapter = new PhotoPreviewAdapter(getSupportFragmentManager(), photoInfos);
    final PhotoViewAdapter photoViewAdapter = new PhotoViewAdapter(getSupportFragmentManager(), photoInfos);

    photoPreviewPager.setAdapter(photoPreviewAdapter);
    photoPreviewPager.addOnPageChangeListener(new OnSyncPageChangeListener(photoViewPager, photoPreviewPager));

    photoViewPager.setAdapter(photoViewAdapter);
    photoViewPager.setOffscreenPageLimit(photoPreviewAdapter.getSidePreviewCount() * 2 + 1);
    photoViewPager.addOnPageChangeListener(new OnSyncPageChangeListener(photoPreviewPager, photoViewPager));
}

更详细的代码在repo

有没有办法在 android 中创建预览滑块

Is there a way to create preview slider in android

android

android-viewpager

android-view

android-recyclerview