Viewpager Android sous forme de diapositives d'images

Question

J'utilise ViewPageIndicator de Jake et je souhaite afficher les images comme une galerie par balayage. N'importe quel lien de référence où je peux commencer. J'ai implémenté le viewpager de base et souhaite maintenant implémenter une image viewpaper comme ci-dessous

Est-il possible de réaliser l'utilisation de ViewPageIndicator ?

Answer 1

Dans de Jake ViewPageIndicator il a mis au Vue de radiomessagerie pour afficher un tableau de Chaîne (c'est à dire ["this","is","a","text"]) qui passent de YourAdapter.java (qui s'étend FragmentPagerAdapter) à l'YourFragment.java qui renvoie une Vue de la viewpager.

Pour afficher quelque chose de différent, vous avez simplement à changer le contexte, le type de votre passage. Dans ce cas, vous voulez passer des images au lieu de texte, comme illustré dans l'exemple ci-dessous:

C'est la façon dont vous configurez votre Viewpager:

public class PlaceDetailsFragment extends SherlockFragment {
    PlaceSlidesFragmentAdapter mAdapter;
    ViewPager mPager;
    PageIndicator mIndicator;

    public static final String TAG = "detailsFragment";

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_place_details,
                container, false);

        mAdapter = new PlaceSlidesFragmentAdapter(getActivity()
                .getSupportFragmentManager());

        mPager = (ViewPager) view.findViewById(R.id.pager);
        mPager.setAdapter(mAdapter);

        mIndicator = (CirclePageIndicator) view.findViewById(R.id.indicator);
        mIndicator.setViewPager(mPager);
        ((CirclePageIndicator) mIndicator).setSnap(true);

        mIndicator
                .setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                    @Override
                    public void onPageSelected(int position) {
                        Toast.makeText(PlaceDetailsFragment.this.getActivity(),
                                "Changed to page " + position,
                                Toast.LENGTH_SHORT).show();
                    }

                    @Override
                    public void onPageScrolled(int position,
                            float positionOffset, int positionOffsetPixels) {
                    }

                    @Override
                    public void onPageScrollStateChanged(int state) {
                    }
                });
        return view;
    }

}

your_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >



    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/indicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="10dip" />

</LinearLayout>

YourAdapter.java

public class PlaceSlidesFragmentAdapter extends FragmentPagerAdapter implements
        IconPagerAdapter {

    private int[] Images = new int[] { R.drawable.photo1, R.drawable.photo2,
            R.drawable.photo3, R.drawable.photo4

    };

    protected static final int[] ICONS = new int[] { R.drawable.marker,
            R.drawable.marker, R.drawable.marker, R.drawable.marker };

    private int mCount = Images.length;

    public PlaceSlidesFragmentAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return new PlaceSlideFragment(Images[position]);
    }

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

    @Override
    public int getIconResId(int index) {
        return ICONS[index % ICONS.length];
    }

    public void setCount(int count) {
        if (count > 0 && count <= 10) {
            mCount = count;
            notifyDataSetChanged();
        }
    }
}

YourFragment.java

// vous avez besoin de retourner l'image instaed de texte à partir d'ici.//

public final class PlaceSlideFragment extends Fragment {
    int imageResourceId;

    public PlaceSlideFragment(int i) {
        imageResourceId = i;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        ImageView image = new ImageView(getActivity());
        image.setImageResource(imageResourceId);

        LinearLayout layout = new LinearLayout(getActivity());
        layout.setLayoutParams(new LayoutParams());

        layout.setGravity(Gravity.CENTER);
        layout.addView(image);

        return layout;
    }
}

Vous devriez obtenir une Vue de radiomessagerie ainsi depuis le code ci-dessus.

Answer 2

J'ai créé une bibliothèque appelée AndroidImageSlider , vous pouvez l'essayer.

Answer 3

Visionneuse d’images avec implémentation de ViewPager, vérifiez ce projet https://github.com/chiuki/android-swipe-image-viewer

Reportez-vous également à cette discussion Balayer des images (pas des mises en page) avec viewpager

Answer 4

Utilisez simplement ce https://gist.github.com/8cbe094bb7a783e37ad1 pour rendre les pages environnantes visibles et http://viewpagerindicator.com/ this, pour indicateur. C'est plutôt cool, je l'utilise pour une galerie.

Answer 5

Hoho.. Il devrait être très facile à utiliser Galerie à le mettre en œuvre, à l'aide de ViewPager est beaucoup plus difficile. Mais je continue de les encourager à utiliser ViewPager depuis la Galerie vraiment avoir beaucoup de problèmes et est obsolète depuis android 4.2.

Dans PagerAdapter il existe une méthode getPageWidth() pour contrôler la taille de la page, mais seulement par la présente vous ne pouvez pas atteindre votre objectif.

Essayez de lire les 2 articles pour vous aider.

plusieurs-vue-viewpager-options

viewpager-conteneur