将多个图像添加到ViewPager

时间:2017-08-20 20:52:59

标签: android android-viewpager slider slideshow

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

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

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

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

有什么想法吗?

5 个答案:

答案 0 :(得分:5)

要在每张幻灯片上显示不同的图像,您需要添加一些代码,为每个页面定义正确的图像。由于您只是想显示一些预定义的图像,我猜您已经将图像加载到项目的可绘制目录中。考虑到这一假设,我将引导您完成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;
    }
}

答案 1 :(得分:3)

这就是你如何去做的。另外,请确保使用图像加载库(如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" />

答案 2 :(得分:1)

您需要调整此代码

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

然后根据“位置”

的值选择一个图像

此方法需要返回您的图像计数:

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

答案 3 :(得分:1)

如果您希望为应用程序添加类似展示视图或教程/介绍视图的内容,并且包含很棒的UI和动画,那么您可以使用gradle库来实现此目的。它也为应用程序提供了专业的触摸。

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

答案 4 :(得分:1)

您还可以使用名为View Flipper的Android小部件通过简单的自定义动画添加动态或静态图像。查看此链接以获取概述:

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