Android - 通过图像组件循环

Question

我正在寻找这样的组件：

如果您使用过 Tinder，我希望您在查看个人资料时了解如何循环浏览他们的照片。

我很确定我可以手动实现它，但想知道是否已经存在某些东西，我真的不知道如何查找它。

谢谢！

编辑：也很抱歉标题不好，真的不知道如何命名这些类型的问题。

Answer 1

您可以自己实现，也可以使用一些库。对于您自己的实现，我建议您使用 ViewPager 传递视图而不是片段，或者如果您想要更详细的内容，我建议使用 PageTransformer。

如果你更喜欢库，我会推荐InfiniteCycleViewPager、sayyam's carouselview 或者你可以在这里参观：https://android-arsenal.com/tag/154，有很多不同实现的库。

使用ViewPager实现图像滑块的示例：

首先使用 ViewPager 组件创建活动的 xml：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager 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/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.stackoverflow.imageslider.MainActivity">

</android.support.v4.view.ViewPager>

然后在您的活动的 onCreate 方法中实例化 ViewPager 并为其创建一个适配器：

    ViewPager viewPager = findViewById(R.id.view_pager);
    ViewPagerAdapter adapter = new ViewPagerAdapter(this, imageList);
    viewPager.setAdapter(adapter);

在 ViewPagerAdapter 类（应该扩展 PageAdapter）中，您将控制覆盖方法 instantiateItem() 的图像：

@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
    ImageView imageView = new ImageView(context);
    imageView.setImageDrawable(imageList.get(position));

    return imageView;
}

在此示例中，imageList 将是一个在其他地方实现的 List。

此示例基于codinginflow.com 的教程，您也可以在那里查看。

现在让我们看一个更简单的实现，就像你问的那样，触摸图像的侧面而不是滑动。

更简单的实现示例：

创建一个布局，其中包含一个 ImageView 和两个覆盖它的按钮，一个用于右侧的下一个图像，一个用于左侧的上一个图像：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:srcCompat="@tools:sample/backgrounds/scenic" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <Button
            android:id="@+id/buttonPrevious"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent" />

        <Button
            android:id="@+id/buttonNext"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent" />
    </LinearLayout>

</FrameLayout>

然后设置每个按钮的onClick从列表中获取图片并设置在ImageView中。

    final ImageView imageView = findViewById(R.id.imageView);

    Button next = findViewById(R.id.buttonNext);
    next.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            currentPosition ++;
            imageView.setImageDrawable(drawableList.get(currentPosition));
        }
    });

    Button previous = findViewById(R.id.buttonPrevious);
    previous.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            currentPosition --;
            imageView.setImageDrawable(drawableList.get(currentPosition));
        }
    });

drawableList 将是在其他地方实现的 Drawable。您也可以更改为不同类型的图像列表，没关系。当前位置是从 0 开始的 int。

对于 PageTransformer 我会推荐 Bincy Baby 的 answer 和 phantomraa 的 answer。

如果链接被破坏，我会在这里留下 Bincy Baby 的代码：

viewPagerMusicCategory.setPageTransformer(false, new ViewPager.PageTransformer() {
        @Override
        public void transformPage(View page, float position) {
            Log.e("pos",new Gson().toJson(position));
            if (position < -1) {
                page.setScaleY(0.7f);
                page.setAlpha(1);
            } else if (position <= 1) {
                float scaleFactor = Math.max(0.7f, 1 - Math.abs(position - 0.14285715f));
                page.setScaleX(scaleFactor);
                Log.e("scale",new Gson().toJson(scaleFactor));
                page.setScaleY(scaleFactor);
                page.setAlpha(scaleFactor);
            } else {
                page.setScaleY(0.7f);
                page.setAlpha(1);
            }
        }
    }
);

我认为您也可以将 PageTransformer 与我给出的示例混合使用。

每个库都已经有一个很好的文档，如果不在 android 库中，你可以在 GitHub 中找到它，即使我在这里发布了一些代码，如果库关闭、过时或类似的情况，代码将不再有用。