Thêm nhiều hình ảnh vào ViewPager

Question

Tôi mới sử dụng chương trình Android. Tôi muốn làm một ứng dụng rất đơn giản, nơi bạn có thể duyệt một vài hình ảnh được xác định trước toàn màn hình. Tôi đã thử các hướng dẫn sau:

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

Android là một chút phức tạp để tôi với các tập tin .xml tài nguyên vv Tôi nghĩ XML chỉ là để xác định các nguồn lực cá nhân, nhưng tôi nhận ra rằng họ cũng hành động tương tự như Các trang HTML khi tôi muốn tạo chế độ xem. Tôi đã quản lý để hiển thị một hình ảnh bằng cách thay thế TextView thứ hai "textView" bằng ImageView của tôi trong activity_screen_slide.xml.

Nhưng vấn đề là bây giờ nó hiển thị cùng một hình ảnh với mỗi trang. Làm cách nào để tôi có thể đặt một trang khác cho mỗi trang? Tôi đã cố gắng thêm nhiều LinearLayouts với các hình ảnh khác nhau nhưng ứng dụng đã bị lỗi.

Bất kỳ ý tưởng nào?

Answer 1

Bạn cần phải thích ứng với mã này

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

Sau đó, bạn chọn một trong những hình ảnh của bạn theo giá trị của "vị trí"

Và phương pháp này cần phải trả lại số hình ảnh của bạn:

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

Answer 2

Để hiển thị một hình ảnh khác nhau trên mỗi trang chiếu, bạn sẽ cần phải thêm một số mã xác định hình ảnh chính xác cho mỗi p tuổi tác. Vì bạn chỉ đang cố gắng hiển thị một vài hình ảnh được xác định trước, tôi đoán rằng bạn đã tải hình ảnh vào thư mục có thể vẽ của dự án của bạn. Với giả định đó trong tâm trí, tôi sẽ hướng dẫn bạn qua các phần còn thiếu trong the example you're following.

Nếu bạn chưa làm như vậy, tạo lớp ScreenSlidePageFragment của bạn, và thay đổi mã để tìm kiếm một cái gì đó như thế này:

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; 
} 

Bởi vì chúng tôi muốn mỗi đoạn để hiển thị một hình ảnh với một id nguồn khác nhau, Tôi đã thêm tham số (id) mà bạn có thể chuyển đến đoạn khi bạn tạo.

Bây giờ, chúng tôi chỉ cần thực hiện một số thay đổi nhỏ đối với ScreenSlidePagerActivity. Đầu tiên, thêm một mảng tĩnh có chứa các tài nguyên hình ảnh có thể vẽ được mà bạn muốn sử dụng. Nó sẽ giống như thế này:

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

Cuối cùng, sửa đổi PagerAdapter của bạn, do đó getCount trả về kích thước của mảng của bạn, và getItem nhìn lên id tài nguyên phù hợp với từng trang trước khi tạo đoạn của mỗi slide.

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; 
    } 
} 

Answer 3

Đây là cách bạn thực hiện. Ngoài ra, hãy đảm bảo bạn đang sử dụng thư viện tải hình ảnh (như Glide) để tránh lỗi OutOfMemory khi tải hình ảnh.

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" /> 

Answer 4

Nếu bạn muốn thêm một cái gì đó như xem showcase hoặc một hướng dẫn/xem giới thiệu cho các ứng dụng của bạn với giao diện tuyệt vời và hình ảnh động bao gồm, sau đó bạn có thể sử dụng các thư viện gradle cho mục đích này. Nó cung cấp một liên lạc chuyên nghiệp cho các ứng dụng là tốt.

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

Answer 5

Bạn cũng có thể sử dụng widget android gọi Xem Flipper để Thêm hình ảnh động hoặc tĩnh dễ dàng animations..Check tùy chỉnh liên kết này cho cái nhìn tổng quan:

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