Android

Question

我正在寻找这样的组件：

如果您使用过 Tinder，我想要一些类似当您查看个人资料时如何循环浏览他们的照片的东西。

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

谢谢！

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

Answer 1

您可以自己实现，也可以使用一些库。对于您自己的实现，如果您想要更详细的内容，我建议您使用 ViewPager passing Views instead of fragments or PageTransformer。

如果你更喜欢库，我会推荐 InfiniteCycleViewPager, sayyam's carouselview or you can go in a tour here: https://android-arsenal.com/tag/154，有很多不同实现的库。

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

首先使用 ViewPager 组件创建 activity 的 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.Whosebug.imageslider.MainActivity">

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

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

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

在 ViewPagerAdapter class（应该扩展 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 将是一个在其他地方实现的列表。

这个例子来自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 的 and phantomraa's answer.

万一 link 坏了，我会在这里留下 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 中找到它，即使我 post 这里有一些代码，如果库关闭、过时或类似情况，代码将不再有用。

Android - 循环浏览图像组件

Android - Cycling through Images component

carousel

android-components