2017-08-20 42 views
10

Jestem nowy w programowaniu Androida. Chciałbym stworzyć bardzo prostą aplikację, w której możesz przeglądać kilka gotowych obrazów w trybie pełnoekranowym. Próbowałem następujące samouczek:Dodawanie wielu zdjęć do ViewPager

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

Android jest nieco skomplikowane do mnie z plików .xml dla zasobów itp myślałem właśnie XML do definiowania poszczególnych zasobów, ale zdałem sobie sprawę, że również działać podobnie do Strony HTML, gdy chcę utworzyć widok. Udało mi się wyświetlić jeden obraz zastępując drugi "tekstView" TextView przez mój ImageView w pliku activity_screen_slide.xml.

Ale problem polega na tym, że teraz wyświetla ten sam obraz na każdej stronie. Jak mogę ustawić inną dla każdej strony? Próbowałem dodać wiele liniowych linek z różnymi obrazami, ale aplikacja się zawiesiła.

Wszelkie pomysły?

+0

Prosimy przesyłać kod –

+0

Dzięki za hojność! Czy mój kod rozwiązał twój problem? Mogę dodać więcej szczegółów, jeśli nadal masz problemy z jego uruchomieniem. –

+0

Nie ma za co! Nie miałem czasu jeszcze go wdrożyć. Dałem ci nagrodę, ponieważ najwyraźniej dołożyłeś na nią najwięcej wysiłku (i uzyskałeś także większość upvotes). Nie mogłem ukończyć projektu na czas z innych powodów, ale zaimplementuję go, gdy będę mógł, i powiem, czy napotkam problem. Dzięki za propozycję! – GregT

Odpowiedz

1

Trzeba dostosować ten kod

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

Następnie należy wybrać jeden z obrazów według wartości „pozycji”

I ta metoda musi zwrócić liczyć obrazu:

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

Aby wyświetlić inny obraz na każdym slajdzie, musisz dodać kod, który definiuje poprawny obraz dla każdego p wiek. Ponieważ próbujesz wyświetlić kilka predefiniowanych obrazów, zgaduję, że już załadowałeś obrazy do katalogu do rysowania twojego projektu. Mając to na uwadze, przeprowadzę Cię przez brakujące elementy w the example you're following.

Jeżeli nie zostało to zrobione, utworzyć klasę ScreenSlidePageFragment i modyfikować kod, aby wyglądać tak:

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

Ponieważ chcemy każdy fragment do wyświetlania obrazu z innym identyfikatorem zasobu, Dodałem parametr (id), który można przekazać do fragmentu podczas jego tworzenia.

Teraz musimy tylko zrobić kilka drobnych zmian do ScreenSlidePagerActivity. Najpierw dodaj statyczną tablicę zawierającą zasoby obrazu, które chcesz wykorzystać. Powinno to wyglądać mniej więcej tak:

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

Wreszcie, modyfikować swój PagerAdapter, tak że getCount zwraca rozmiaru tablicy i getItem wyszukuje odpowiedni identyfikator zasobu dla każdej strony przed utworzeniem fragmentu każdego slajdu.

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

Tak to się dzieje. Upewnij się również, że używasz biblioteki ładującej obrazki (np. Glide), aby uniknąć awarii OutOfMemory podczas ładowania obrazów.

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

Jeśli chcesz dodać coś takiego widoku showcase lub tutorial/widok intro aplikacji z wielką UI i animacji włączone, a następnie można użyć Gradle biblioteki dla tego celu. Daje także profesjonalny dotyk aplikacji.

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