Question

我正在寻找这样的组件：

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

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

谢谢！

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

Answer 1

您可以执行自己的实现，也可以使用某些库。对于您自己的实现，建议您使用ViewPager传递Views而不是使用片段，或者如果需要更详细的说明，可以使用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。您也可以更改为其他类型的图像列表，没关系。当前位置是，并且int从0开始。

对于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 arsenal中，您可以在GitHub中找到它，即使我在此处发布了一些代码，如果库关闭，过时或类似的事情，，该代码将不再有用。

Android-循环浏览图片组件

1 个答案: