SlideShowView用viewpaper实现图片轮播效果

本文详细介绍了自定义轮播图控件的实现过程,包括数据填充、UI初始化、轮播逻辑、圆点指示器等功能。通过使用Universal Image Loader插件进行网络图片加载,并实现了自动轮播和手动切换功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

主代码:

public class SlideShowView extends FrameLayout {

    // 使用universal-image-loader插件读取网络图片,需要工程导入universal-image-loader-1.8.6-with-sources.jar
    public List<SliderShowViewItem> list = new ArrayList<SliderShowViewItem>();

    public List<SliderShowViewItem> getList() {
        return list;
    }

    private static ImageLoader imageLoader = ImageLoader.getInstance();
    private static DisplayImageOptions options;

    // 轮播图图片数量
    private final static int IMAGE_COUNT = 5;
    // 自动轮播的时间间隔
    private final static int TIME_INTERVAL = 5;
    // 自动轮播启用开关
    private final static boolean isAutoPlay = true;

    // 自定义轮播图的资源
    private List<String> imageUrls;
    // 放轮播图片的ImageView 的list
    private List<ImageView> imageViewsList;
    private List<String> foodnameList;

    public List<ImageView> getImageViewsList() {
        return imageViewsList;
    }

    // 放圆点的View的list
    private List<View> dotViewsList;

    private ViewPager viewPager;
    // 当前轮播页
    private int currentItem = 0;
    // 定时任务
    private ScheduledExecutorService scheduledExecutorService;

    private Context context;
    private TextView foodnametextview;

    // Handler
    private Handler handler = new Handler() {

        @Override
        public void handleMessage(Message msg) {
            // TODO Auto-generated method stub
            super.handleMessage(msg);
            // Log.i("gundong", currentItem + "");
            viewPager.setCurrentItem(currentItem);
            foodnametextview.setText(foodnameList.get(currentItem));
        }

    };

    /**
     * 
     * @param context
     * 
     * 
     * public View (Context context)是在java代码创建视图的时候被调用,如果是从xml填充的视图,就不会调用这个
       public View (Context context, AttributeSet attrs)这个是在xml创建但是没有指定style的时候被调用
       public View (Context context, AttributeSet attrs, int defStyle)这个也是在xml创建指定style的时候被调用
     */

    public SlideShowView(Context context) {
        this(context, null);
        // TODO Auto-generated constructor stub
    }

    public SlideShowView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
        // TODO Auto-generated constructor stub
    }

    public SlideShowView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        this.context = context;
        initImageLoader(context);
        initData();
    }

    /**
     * 开始轮播图切换
     */
    private void startPlay() {
        scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
        scheduledExecutorService.scheduleAtFixedRate(new SlideShowTask(), 1, 4,
                TimeUnit.SECONDS);
    }

    /**
     * 停止轮播图切换
     */
    private void stopPlay() {
        scheduledExecutorService.shutdown();
    }

    /**
     * 初始化相关Data
     */
    private void initData() {
        imageViewsList = new ArrayList<ImageView>();
        dotViewsList = new ArrayList<View>();
        imageUrls = new ArrayList<String>();
        foodnameList = new ArrayList<String>();

        // 一步任务获取图片
        new GetListTask().execute("");
    }

    /**
     * 初始化Views等UI
     */
    private void initUI(Context context) {
        if (imageUrls == null || imageUrls.size() == 0)
            return;

        LayoutInflater.from(context).inflate(R.layout.layout_slideshow, this,
                true);

        LinearLayout dotLayout = (LinearLayout) findViewById(R.id.dotLayout);
        dotLayout.removeAllViews();

        // 热点个数与图片特殊相等
        for (int i = 0; i < imageUrls.size(); i++) {
            ImageView view = new ImageView(context);
            view.setTag(imageUrls.get(i));
            if (i == 0)// 给一个默认图
                view.setBackgroundResource(R.drawable.xiaolian);
            view.setScaleType(ScaleType.FIT_XY);
            imageViewsList.add(view);

            ImageView dotView = new ImageView(context);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            params.leftMargin = 4;
            params.rightMargin = 4;
            dotLayout.addView(dotView, params);
            dotViewsList.add(dotView);
        }

        viewPager = (ViewPager) findViewById(R.id.viewPager);
        foodnametextview = (TextView) findViewById(R.id.foodname);
        viewPager.setFocusable(true);
        viewPager.setAdapter(new MyPagerAdapter());
        viewPager.setOnPageChangeListener(new MyPageChangeListener());
        if (isAutoPlay) {
            startPlay();
        }
    }

    /**
     * 填充ViewPager的页面适配器
     * 
     */

    private class MyPagerAdapter extends PagerAdapter {

        @Override
        public void destroyItem(View container, int position, Object object) {
            // TODO Auto-generated method stub
            // ((ViewPag.er)container).removeView((View)object);
            ((ViewPager) container).removeView(imageViewsList.get(position));
        }

        @Override
        public Object instantiateItem(View container, final int position) {
            ImageView imageView = imageViewsList.get(position);
            imageView.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    // TODO Auto-generated method stub
                    Intent intent = new Intent(context, SliderShowViewTeachcontent.class);
                    Bundle bundle = new Bundle();
                    bundle.putString("url", list.get(position).getLink());
                    bundle.putInt("flag", 1);
                    intent.putExtras(bundle);
                    context.startActivity(intent);
                }
            });
            imageLoader.displayImage(imageView.getTag() + "", imageView,
                    options);
            ((ViewPager) container).addView(imageViewsList.get(position));
            return imageViewsList.get(position);
        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return imageViewsList.size();
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            // TODO Auto-generated method stub
            return arg0 == arg1;
        }

        @Override
        public void restoreState(Parcelable arg0, ClassLoader arg1) {
            // TODO Auto-generated method stub

        }

        @Override
        public Parcelable saveState() {
            // TODO Auto-generated method stub
            return null;
        }

        @Override
        public void startUpdate(View arg0) {
            // TODO Auto-generated method stub

        }

        @Override
        public void finishUpdate(View arg0) {
            // TODO Auto-generated method stub

        }

    }

    /**
     * ViewPager的监听器 当ViewPager中页面的状态发生改变时调用
     * 
     */
    private class MyPageChangeListener implements OnPageChangeListener {

        boolean isAutoPlay = false;

        @Override
        public void onPageScrollStateChanged(int arg0) {
            // TODO Auto-generated method stub
            switch (arg0) {
            case 1:// 手势滑动,空闲中
                isAutoPlay = false;
                break;
            case 2:// 界面切换中
                isAutoPlay = true;
                break;
            case 0:// 滑动结束,即切换完毕或者加载完毕
                    // 当前为最后一张,此时从右向左滑,则切换到第一张
                if (viewPager.getCurrentItem() == viewPager.getAdapter()
                        .getCount() - 1 && !isAutoPlay) {
                    viewPager.setCurrentItem(0);
                    // foodnametextview.setText(foodnameList.get(0));
                }
                // 当前为第一张,此时从左向右滑,则切换到最后一张
                else if (viewPager.getCurrentItem() == 0 && !isAutoPlay) {
                    viewPager
                            .setCurrentItem(viewPager.getAdapter().getCount() - 1);
                    // foodnametextview.setText(viewPager.getAdapter().getCount()
                    // - 1);
                }
                break;
            }
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onPageSelected(int pos) {
            // TODO Auto-generated method stub
            currentItem = pos;
            for (int i = 0; i < dotViewsList.size(); i++) {
                if (i == pos) {
                    ((View) dotViewsList.get(pos))
                            .setBackgroundResource(R.drawable.dot_focus);
                } else {
                    ((View) dotViewsList.get(i))
                            .setBackgroundResource(R.drawable.dot_blur);
                }
            }
        }

    }

    /**
     * 执行轮播图切换任务
     * 
     */
    private class SlideShowTask implements Runnable {

        @Override
        public void run() {
            // TODO Auto-generated method stub
            synchronized (viewPager) {
                currentItem = (currentItem + 1) % imageViewsList.size();
                handler.obtainMessage().sendToTarget();
            }
        }

    }

    /**
     * 销毁ImageView资源,回收内存
     * 
     */
    private void destoryBitmaps() {

        for (int i = 0; i < IMAGE_COUNT; i++) {
            ImageView imageView = imageViewsList.get(i);
            Drawable drawable = imageView.getDrawable();
            if (drawable != null) {
                // 解除drawable对view的引用
                drawable.setCallback(null);
            }
        }
    }

    /**
     * 异步任务,获取数据
     * 
     */
    class GetListTask extends AsyncTask<String, Integer, Boolean> {

        @Override
        protected Boolean doInBackground(String... params) {
            try {
                // 这里一般调用服务端接口获取一组轮播图片,下面是从百度找的几个图片
                list = new SliderShowViewItemBiz()
                        .getNewsItems("http://www.meishij.net/");
                for (int i = 0; i < list.size(); i++) {
                    // Log.i("msg", list.get(i).getImgLink());
                    imageUrls.add(list.get(i).getImgLink());
                    foodnameList.add(list.get(i).getFoodname());
                }
                return true;
            } catch (Exception e) {
                e.printStackTrace();
                return false;
            }
        }

        @Override
        protected void onPostExecute(Boolean result) {
            super.onPostExecute(result);
            if (result) {
                initUI(context);
            }
        }
    }

    /**
     * ImageLoader 图片组件初始化
     * 
     * @param context
     */
    public static void initImageLoader(Context context) {
        imageLoader.init(ImageLoaderConfiguration.createDefault(context));
        options = new DisplayImageOptions.Builder()
                .showStubImage(R.drawable.xiaolian)
                .showImageForEmptyUri(R.drawable.ic_launcher)
                .showImageOnFail(R.drawable.ic_launcher).cacheInMemory()
                .cacheOnDisc().displayer(new RoundedBitmapDisplayer(20))
                .displayer(new FadeInBitmapDisplayer(300)).build();
    }
}

布局文件:

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" >

        <TextView
            android:id="@+id/foodname"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginLeft="10dp"
            android:text="美食推荐"
            android:textColor="@color/white"
            android:textSize="20dp" />

        <LinearLayout
            android:id="@+id/dotLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:gravity="right"
            android:orientation="horizontal"
            android:padding="8dp" >

            <View
                android:id="@+id/v_dot1"
                android:layout_width="8dp"
                android:layout_height="8dp"
                android:background="@drawable/dot_focus" />

            <View
                android:id="@+id/v_dot2"
                android:layout_width="8dp"
                android:layout_height="8dp"
                android:layout_marginLeft="5dp"
                android:background="@drawable/dot_blur" />
        </LinearLayout>
    </FrameLayout>

</RelativeLayout>

使用该自定义控件的用法:

<?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="wrap_content"
    android:orientation="vertical" >

    <FrameLayout
        android:id="@+id/SlideShowView"
        android:layout_width="fill_parent"
        android:layout_height="150dp" >

        <com.example.slideshowdemo.customview.SlideShowView
            android:id="@+id/slideshowView"
            android:layout_width="fill_parent"
            android:layout_height="150dp"
            android:layout_centerHorizontal="true" />
    </FrameLayout>

    <GridView
        android:id="@+id/gridview"
        android:layout_width="fill_parent"
        android:layout_height="203dp"
        android:horizontalSpacing="0.0dip"
        android:listSelector="@null"
        android:numColumns="3"
        android:scrollbars="none"
        android:stretchMode="columnWidth"
        android:verticalSpacing="0.0dip" >
    </GridView>

</LinearLayout>
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值