【问题标题】:Adding multiple images to ViewPager向 ViewPager 添加多个图像
【发布时间】:2018-01-28 21:56:03
【问题描述】:

我是 Android 编程新手。我想制作一个非常简单的应用程序,您可以在其中全屏浏览一些预定义的图像。我尝试了以下教程:

https://developer.android.com/training/animation/screen-slide.html#viewpager

Android 对于资源等的 .xml 文件对我来说有点复杂。我认为 XML 只是用于定义单个资源,但我意识到当我想创建视图时它们的行为也类似于 HTML 页面。我设法通过在activity_screen_slide.xml中用我的ImageView替换第二个TextView“textView”来显示一个图像。

但问题是它现在每个页面都显示相同的图像。如何为每个页面设置不同的页面?我尝试添加多个具有不同图像的 LinearLayout,但应用程序崩溃了。

有什么想法吗?

【问题讨论】:

  • 请发布您的代码
  • 感谢您的赏金!我的代码解决了你的问题吗?如果您仍然无法使用它,我可以添加更多详细信息。
  • 不客气!我还没有时间实施它。我把赏金给了你,因为你似乎付出了最大的努力(也得到了最多的支持)。由于其他原因我无法及时完成项目,但我会尽快实施,如果遇到问题会告诉你。谢谢你的提议!

标签: android android-viewpager slider slideshow


【解决方案1】:

要在每张幻灯片上显示不同的图像,您需要添加一些代码来定义每个页面的正确图像。由于您只是想显示一些预定义的图像,我猜您已经将图像加载到项目的可绘制目录中。考虑到这一假设,我将带您了解 the example you're following 中缺失的部分。

如果您还没有这样做,请创建您的 ScreenSlidePageFragment 类,并将代码修改为如下所示:

public class ScreenSlidePageFragment extends Fragment {
private static final String ARG_RESOURCE_ID = "resource_id";
private int id; // resource id of the static image to display in this page

public ScreenSlidePageFragment() {
    // Required empty public constructor
}

// Your program should call this to create each instance of this Fragment.
public static ScreenSlidePageFragment newInstance(int id) {
    ScreenSlidePageFragment fragment = new ScreenSlidePageFragment();
    Bundle args = new Bundle();
    args.putInt(ARG_RESOURCE_ID, id);
    fragment.setArguments(args);
    return fragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (getArguments() != null) {
        id = getArguments().getInt(ARG_RESOURCE_ID);
    }
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_screen_slide_page, container, false);
    // assign our image's resource id here
    ImageView imageView = (ImageView) view.findViewById(R.id.image);
    imageView.setImageResource(id);
    return view;
}

因为我们希望每个片段显示具有不同资源 ID 的图像,所以我添加了一个参数 (id),您可以在创建片段时将其传递给它。

现在,我们只需要对ScreenSlidePagerActivity 进行一些小改动。首先,添加一个包含您要使用的可绘制图像资源的静态数组。它应该看起来像这样:

private static final int[] IMAGES = {R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4};

最后,修改您的 PagerAdapter,让 getCount 返回数组的大小,getItem 在创建每个幻灯片的片段之前为每个页面查找适当的资源 ID。

private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {
    public ScreenSlidePagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        if (position < IMAGES.length)
            return ScreenSlidePageFragment.newInstance(IMAGES[position]);
        else
            return null;
    }

    @Override
    public int getCount() {
        return IMAGES.length;
    }
}

【讨论】:

    【解决方案2】:

    这就是你的做法。此外,请确保您使用的是图像加载库(如 Glide)以避免在加载图像时出现 OutOfMemory 崩溃。

        public class ImagesAdapter extends FragmentPagerAdapter {
        public ImagesAdapter(FragmentManager fm) {
            super(fm);
        }
    
        @Override
        public int getCount() {
            return 6; //number of images you want to display
        }
    
        @Override
        public Fragment getItem(int position) {
            return ImageFragment.newInstance(position);
        }
       }
    
        public class ImageFragment extends Fragment {
    
        public static ImageFragment newInstance(int position){
           Bundle bundle = new Bundle();
           bundle.putInt("IMAGE_POSITION", position);
           ImageFragment fragment = new ImageFragment();
           fragment.setArguments(bundle);
           return fragment;
        }
    
        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
            View view =  inflater.inflate(R.layout.image_fragment_layout, container, false);
    int option =           getArguments().getInt("IMAGE_POSITION");
            ImageView imageView = (ImageView)view.findViewById(R.id.imageView);
            TypedArray imgs = getResources().obtainTypedArray(R.array.images);
            Glide.with(this).load(imgs.getResourceId(SAUtils.getIndex(option) - 1, -1)).into(imageView);
            imgs.recycle();
            return view;
    
    
           }
            }
    
    //in main activity
    ViewPager pager = findViewById(R.id.viewpager);
    ImagesAdapter adapter = new ImagesAdapter();
    pager.setAdapter(adapter);
    
    
    //in resources.xml    
    <integer-array name="options_icons">
            <item>@drawable/image_1</item>
            <item>@drawable/image_2</item>
            <item>@drawable/image_3</item>
            <item>@drawable/image_4</item>
            <item>@drawable/image_5</item>
            <item>@drawable/image_6</item>
        </integer-array>
    
    //image_fragment_layout
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/transparent"
        android:orientation="vertical">
    
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitCenter" />
            </FrameLayout>
    
    
            //main_activity_layout
                   <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/main_app_gradient"
                android:paddingBottom="56dp"
                android:visibility="visible" />
    

    【讨论】:

      【解决方案3】:

      您需要修改此代码

      @Override
              public Fragment getItem(int position) {
                  return new ScreenSlidePageFragment();
              }
      

      然后你根据“位置”的值选择你的一张图片

      而且这个方法需要返回你的图片数量:

       @Override
              public int getCount() {
                  return NUM_PAGES;
              }
      

      【讨论】:

        【解决方案4】:

        如果您想为您的应用程序添加诸如展示视图或教程/介绍视图之类的内容,并包含出色的 UI 和动画,那么您可以为此目的使用 gradle 库。它也为应用程序提供了专业的触感。

        https://github.com/florent37/TutoShowcase
        https://github.com/deano2390/MaterialShowcaseView
        https://github.com/florent37/TutoShowcase
        

        【讨论】:

          【解决方案5】:

          您还可以使用名为 View Flipper 的 android 小部件添加具有简单自定义动画的动态或静态图像。查看此链接以了解概述:

          https://developer.android.com/reference/android/widget/ViewFlipper.html

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多