Question

我想在我的应用程序中创建一个图像滑块。滑块将包含大约6个图像，用户可以滑动它们。如果用户没有进行交互，它将在一定的时间间隔内自行刷卡。我想在一个片段中创建3个这样的滑块。

这种设计的最佳方法是什么？三个独立的滑块。当然，我必须使用尽可能少的内存..

我应该使用任何库吗？请提出最优化的方法。

谢谢

Answer 1

您可以将ViewPager与视图而不是片段一起使用。

查看本教程，了解如何将ViewPager与视图配合使用： https://www.bignerdranch.com/blog/viewpager-without-fragments/

要自动滚动使用计时器，然后调用：

viewPager.setCurrentItem(1)

其中1是第二项等......

Answer 2

如果您想使用大多数优化方法，那么您应该将此Library用于图像滑块，并且提供了完整的实现，以便您可以轻松地理解和使用它。

但是如果你只想使用简单的ViewPager，那么请参考this site。在本教程中，给出了ImageSlider的简单实现。

希望你得到答案，感谢。

Answer 3

将ImageSlider与viepager一起使用

https://github.com/theshivamlko/ImageSliderViewExample

Answer 4

在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中添加ur数据

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

    }

Answer 5

       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>

Android图片滑块

5 个答案: