安卓图片轮播控件

Question

安卓图片轮播控件

android

3

我想在我的应用程序中创建一个图片轮播。一个轮播将包含大约6张图片，用户可以通过滑动浏览它们。如果用户不交互，则会在一定时间间隔内自动滑动。我想在单个片段中创建3个这样的轮播。

对于这样的设计，最好的方法是三个独立的轮播。当然，我必须尽可能少地使用内存。是否有任何库我应该使用，请建议最优化的方法。

谢谢。

- Hitesh Bisht

请分享你的代码。为什么不尝试使用ViewPager来创建图像滑动器呢？点击链接查看示例（https://www.youtube.com/watch?v=nL0k2usU7I8）。 - mujjuraja

请检查这个链接：https://github.com/daimajia/AndroidImageSlider - DKV

@HiteshBisht，只适用于一个视图页面，并且不使用任何图像滑动库。 - mujjuraja

@mujjuraja 抱歉，我不明白你在建议什么？我想在同一页上放置三个滑动条..所以我需要创建三个带有不同适配器的视图翻页器吗？ - Hitesh Bisht

@HiteshBisht，请检查以下链接：http://androidtechnicalblog.blogspot.in/2014/02/using-viewpager-to-swipe-between.html - mujjuraja

显示剩余3条评论

4个回答

1

如果您想使用最优化的方法，那么您应该使用这个库来制作图像滑块，完整的实现已经给出，您可以轻松理解和使用它。

但是，如果您只想使用简单的ViewPager，则请参考此网站。在本教程中提供了ImageSlider的简单实现。

希望您得到了答案，谢谢。

- AMI CHARADAVA

0

       private LinearLayout dotsLayout;
    private TextView[] dots;
    ArrayList<BannerModel> BannerArrayList;

    private ViewPager viewPager;
    private MyViewPagerAdapter myViewPagerAdapter;

    int currentPage = 0, NUM_PAGES = 0;
    Timer timer;

在onCreate方法中添加这段代码

        dotsLayout = (LinearLayout) findViewById(R.id.layoutDots);
        viewPager = (ViewPager) findViewById(R.id.view_pager_banner);

        BannerArrayList = new ArrayList<>();
        SetAdViewPager();

        //Call this in webservice response .. now i m setting dummy data ------------------------------------------
        //Add data in arraylist 
        for (int i = 0; i < 6; i++) {
            BannerModel bannerModel = new BannerModel();
            //Add your data here in model
            BannerArrayList.add(bannerModel);
        }


        NUM_PAGES = BannerArrayList.size();
        viewPager.getAdapter().notifyDataSetChanged();
        myViewPagerAdapter.notifyDataSetChanged();
        viewPager.setAdapter(myViewPagerAdapter);
        addBottomDots(0);

        SetSliderAutoTimer();
        //---------------------------------------------------------------------------

添加这些方法

      //Method to set timer to slider
    private void SetSliderAutoTimer() {

        Log.e("SetSliderAutoTimer", "SetSliderAutoTimer");
        final Handler handler = new Handler();

        final Runnable update = new Runnable() {
            public void run() {
                Log.e("update", "update");
                if (currentPage == NUM_PAGES) {
                    currentPage = 0;
                }
                viewPager.setCurrentItem(currentPage++, true);
            }
        };


        timer = new Timer();
        timer.schedule(new TimerTask() {

            @Override
            public void run() {
                handler.post(update);
            }
        }, 100, 6000);

    }


    //Set viepager and adapter
    private void SetAdViewPager() {

        myViewPagerAdapter = new MyViewPagerAdapter(BannerArrayList);
        viewPager.setSaveFromParentEnabled(false);
        viewPager.setAdapter(myViewPagerAdapter);
        viewPager.addOnPageChangeListener(viewPagerPageChangeListener);


    }

    //  viewpager change listener
    ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {

        @Override
        public void onPageSelected(int position) {
            addBottomDots(position);


        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {

        }

        @Override
        public void onPageScrollStateChanged(int arg0) {

        }
    };

    //Method to set dots according to slider position
    private void addBottomDots(int currentPage) {
        dots = new TextView[BannerArrayList.size()];


        dotsLayout.removeAllViews();
        for (int i = 0; i < dots.length; i++) {
            dots[i] = new TextView(SetLocationActivity.this);
            dots[i].setText(Html.fromHtml("&#8226;"));
            dots[i].setTextSize(50);
            dots[i].setTextColor(SetLocationActivity.this.getResources().getColor(R.color.colorGray));
            dotsLayout.addView(dots[i]);
        }

        if (dots.length > 0)
            dots[currentPage].setTextColor(SetLocationActivity.this.getResources().getColor(R.color.colorText));
    }

    /**
     * View pager adapter
     */
    public class MyViewPagerAdapter extends PagerAdapter {
        private LayoutInflater layoutInflater;
        private ArrayList<BannerModel> bannerModelArrayList;

        public MyViewPagerAdapter(ArrayList<BannerModel> mbannerModelArrayList) {
            bannerModelArrayList = mbannerModelArrayList;

        }

        @Override
        public Object instantiateItem(ViewGroup container, final int position) {
            layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            View view = layoutInflater.inflate(R.layout.row_banner, container, false);
            ImageView imgAd = view.findViewById(R.id.imgAd);
            Picasso.get().load(bannerModelArrayList.get(position).getImage()).into(imgAd);
            container.addView(view);

            view.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {

                }
            });
            return view;
        }

        @Override
        public int getCount() {
            return bannerModelArrayList.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object obj) {
            return view == obj;
        }


        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            View view = (View) object;
            container.removeView(view);
        }


    }

xml如下：

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.sweedesi.android.customerapp.SetLocationActivity">


    <android.support.v7.widget.CardView
        android:id="@+id/cardView_adv_Slider_surchbuses_fragment"
        android:layout_width="match_parent"
        android:layout_height="250dp"

        app:cardBackgroundColor="@color/colorWhite"
        app:cardElevation="@dimen/margin_10">

        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent">


            <android.support.v4.view.ViewPager
                android:id="@+id/view_pager_banner"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_alignParentStart="true"
                android:layout_alignParentBottom="true" />

            <LinearLayout
                android:id="@+id/layoutDots"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:gravity="center"
                android:orientation="horizontal"></LinearLayout>


        </RelativeLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

- Pratibha Sarode

0

在XML中添加滑块的代码

     <RelativeLayout
                    android:id="@+id/cardView_adv_Slider_surchbuses_fragment"
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:layout_marginBottom="@dimen/margin_10"
                    android:background="@drawable/bg_shadow_transperent_rounded"

                    >

                    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                        xmlns:app="http://schemas.android.com/apk/res-auto"
                        xmlns:tools="http://schemas.android.com/tools"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent">


                        <android.support.v4.view.ViewPager
                            android:id="@+id/view_pager"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:layout_alignParentStart="true"
                            android:layout_alignParentTop="true" />

                        <LinearLayout
                            android:id="@+id/layoutDots"
                            android:layout_width="match_parent"
                            android:layout_height="30dp"
                            android:layout_alignParentBottom="true"
                            android:layout_marginBottom="@dimen/margin_10"
                            android:background="@color/transparent"
                            android:gravity="center"
                            android:orientation="horizontal"></LinearLayout>


                    </RelativeLayout>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:layout_margin="@dimen/margin_5"
                        android:background="@drawable/btn_bg_white_rounded"
                        android:text="Exp - 29 Oct, 2018"
                        android:textColor="@color/colorGreen"
                        android:textStyle="bold" />

                </RelativeLayout>

在onCreate方法中添加以下方法 //显示图片滑块

  SetAdViewPager();
        SetDummyDataToImage();

这里我已经在Arraylist中添加了虚拟数据..你需要在Arraylist中添加你的数据

 private void SetDummyDataToImage() {


        PostImageModel postImageModel = new PostImageModel();
        postImageModel.setImage("fbhgdkfjvbg/5c024b2c86b4c.jpg");
        ImageList.add(postImageModel);


        PostImageModel postImageModel1 = new PostImageModel();
        postImageModel1.setImage("coecureiou/5c0130b533cca.jpg");
        ImageList.add(postImageModel1);

        PostImageModel postImageModel2 = new PostImageModel();
        postImageModel2.setImage("fgvomtig/5c0130c67dbac.jpg");
        ImageList.add(postImageModel2);

        PostImageModel postImageModel3 = new PostImageModel();
        postImageModel3.setImage("frejtufgi/5c01309d3ca33.jpg");
        ImageList.add(postImageModel3);


        NUM_PAGES = ImageList.size();
        viewPager.getAdapter().notifyDataSetChanged();
        myViewPagerAdapter.notifyDataSetChanged();
        // viewPager.setAdapter(myViewPagerAdapter);

        addBottomDots(0);
        SetSliderAutoTimer();

    }


    private void SetAdViewPager() {
        ImageList = new ArrayList<>();
        myViewPagerAdapter = new MyViewPagerAdapter(ImageList);
        viewPager.setSaveFromParentEnabled(false);
        viewPager.setAdapter(myViewPagerAdapter);
        viewPager.addOnPageChangeListener(viewPagerPageChangeListener);


    }

    //  viewpager change listener
    ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {

        @Override
        public void onPageSelected(int position) {
            addBottomDots(position);


        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {

        }

        @Override
        public void onPageScrollStateChanged(int arg0) {

        }
    };


    private void addBottomDots(int currentPage) {
        dots = new TextView[ImageList.size()];


        layoutDots.removeAllViews();
        for (int i = 0; i < dots.length; i++) {
            dots[i] = new TextView(Constants.mDashboardActivity);
            dots[i].setText(Html.fromHtml("&#8226;"));
            dots[i].setTextSize(35);
            dots[i].setTextColor(Constants.mDashboardActivity.getResources().getColor(R.color.colorGray));
            layoutDots.addView(dots[i]);
        }

        if (dots.length > 0)
            dots[currentPage].setTextColor(Constants.mDashboardActivity.getResources().getColor(R.color.colorText));
    }


    /**
     * View pager adapter
     */
    public class MyViewPagerAdapter extends PagerAdapter {
        private LayoutInflater layoutInflater;
        private ArrayList<PostImageModel> adsModelArrayList;

        public MyViewPagerAdapter(ArrayList<PostImageModel> madsModelArrayList) {
            adsModelArrayList = madsModelArrayList;

        }

        @Override
        public Object instantiateItem(ViewGroup container, final int position) {
            layoutInflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            View view = layoutInflater.inflate(R.layout.row_post_image, container, false);
            ImageView imgAd = view.findViewById(R.id.imgAd);
            Picasso.get().load(adsModelArrayList.get(position).getImage()).into(imgAd);
            container.addView(view);

            view.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                   /* Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(adsModelArrayList.get(position).getLink()));
                    startActivity(browserIntent);*/
                }
            });
            return view;
        }

        @Override
        public int getCount() {
            return adsModelArrayList.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object obj) {
            return view == obj;
        }


        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            View view = (View) object;
            container.removeView(view);
        }


    }


    //Method to set timer to slider
    private void SetSliderAutoTimer() {


        final Handler handler = new Handler();

        final Runnable update = new Runnable() {
            public void run() {

                if (currentPage == NUM_PAGES) {
                    currentPage = 0;
                }
                try {
                    viewPager.setCurrentItem(currentPage++, true);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        };


        new Timer().schedule(new TimerTask() {

            @Override
            public void run() {
                handler.post(update);
            }
        }, 100, 5000);

    }

- Pratibha Sarode

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Richard · Accepted Answer

您可以使用视图而不是片段来使用 ViewPager 。

查看此教程，了解如何使用具有视图的ViewPager ： https://www.bignerdranch.com/blog/viewpager-without-fragments/ 要自动滚动，请使用计时器然后调用：

viewPager.setCurrentItem(1)

其中1是第二项，依此类推...