android防新闻循环轮播图效果

       前天有朋友问我说实现类似新闻轮播图片的效果该怎么实现?有什么框架比较好一点。我想这不用什么框架,自己写一个就可以实现吧!好了,废话不多说,先看一下实现的效果图,再上代码。
这里写图片描述
实现的效果图

activity_main.xml

<?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"
    >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:id="@+id/viewPager"
        android:layout_height="match_parent"/>
        <LinearLayout
            android:layout_width="wrap_content"
            android:orientation="horizontal"
            android:layout_alignParentBottom="true"
            android:id="@+id/circleLayout"
            android:gravity="center"
            android:paddingBottom="30dp"
            android:layout_centerHorizontal="true"
            android:layout_height="wrap_content">
        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>


ScrollPagerAdapter.java

public class ScrollPagerAdapter extends PagerAdapter {
    private Context context;
    private int[] mIamgeId;
    private ImageView[] mImageViews;

    public ScrollPagerAdapter(Context context, int[] mIamgeId) {
        this.mIamgeId = mIamgeId;
        this.context = context;
        mImageViews = new ImageView[mIamgeId.length];
        for (int i = 0; i < mIamgeId.length; i++) {//通过传进来的图片数量来确定给父布局添加多少个子布局ImageView来显示图片
            mImageViews[i] = new ImageView(context);
        }
    }

    @Override
    public int getCount() {
        return Integer.MAX_VALUE;//这个值需要设置为这个,如果只是设置为mIamgeId.length,那么久无法实现循环滚动
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == arg1;
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        position = (position) % mIamgeId.length;
        ImageView iv = new ImageView(context);
        iv.setScaleType(ImageView.ScaleType.FIT_XY);
        iv.setImageResource(mIamgeId[position]);
        container.addView(iv);//装载对应的ImageVIew
        return iv;

    }
}



MainActivity.java

public class MainActivity extends Activity {
    private ViewPager mViewPager;
    private LinearLayout mCircleLayout;//存放滚动时小圆点的父布局
    private int[] mImageId = new int[]{R.mipmap.one, R.mipmap.two, R.mipmap.three, R.mipmap.four};//存放图片id的数组
    private ScrollPagerAdapter mScrollPagerAdapter;//ViewPager的适配器
    private Context mContext;
    private int mPreviousEnabledPointPosition;//记录上一张显示图片的位置
    private PersonalHandler mHandler; //消息处理器

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext = this;
        initView();//初始化view
        drawRadious();//给mCircleLayout布局绘制对应的圆点,通过图片的数量来绘制对应圆点的数目
        startRunImage();//开始轮播条滚动
    }

    //初始化View
    private void initView() {
        mViewPager = (ViewPager) findViewById(R.id.viewPager);
        mCircleLayout = (LinearLayout) findViewById(R.id.circleLayout);
        mScrollPagerAdapter = new ScrollPagerAdapter(mContext, mImageId);
        mViewPager.setAdapter(mScrollPagerAdapter);
    }

    //给mCircleLayout布局绘制对应的圆点,通过图片的数量来绘制对应圆点的数目
    private void drawRadious() {
        //进行小圆点的绘制
        mCircleLayout.removeAllViews();
        View v;
        LinearLayout.LayoutParams params;
        int size = mImageId.length;
        for (int i = 0; i < size; i++) {
            v = new View(mContext);
            v.setBackgroundResource(R.drawable.scroll_point_bg);
            params = new LinearLayout.LayoutParams(15, 15);
            if (i != 0) {
                params.leftMargin = 10;
            }
            v.setLayoutParams(params);
            v.setEnabled(false);
            mCircleLayout.addView(v);
        }
        mPreviousEnabledPointPosition = 0;
        mCircleLayout.getChildAt(mPreviousEnabledPointPosition).setEnabled(true);

        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                position = position % mImageId.length;
                mCircleLayout.getChildAt(mPreviousEnabledPointPosition).setEnabled(false);
                mCircleLayout.getChildAt(position).setEnabled(true);
                mPreviousEnabledPointPosition = position;
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    //开始轮播条滚动
    private void startRunImage() {
        if (mHandler == null) {
            mHandler = new PersonalHandler();
        } else {
            // 把队列中的所有的消息和任务全部清除出队列
            mHandler.removeCallbacksAndMessages(null);
        }
        // 延时3秒钟, 执行PersonalRunnable任务类中的run方法
        mHandler.postDelayed(new PersonalRunnable(), 3000);
    }

    //消息处理器
    private class PersonalHandler extends Handler {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            // 当前是在主线程中, 把轮播图切换到下一页面
            int currentItem = (mViewPager.getCurrentItem() + 1) % mImageId.length;
            mViewPager.setCurrentItem(mViewPager.getCurrentItem() + 1);
            // 递归: postDelayed -> PersonalRunnable.run -> sendEmptyMessage -> handleMessage
            mHandler.postDelayed(new PersonalRunnable(), 3000);
        }
    }

    private class PersonalRunnable implements Runnable {
        @Override
        public void run() {
            mHandler.sendEmptyMessage(0);
        }
    }
}


现在的APP Banner大多数千篇一律,前几天看到魅族手机上所有魅族自家APP上的Banner效果不错,于是就想着来仿着做一个类似的效果。因此就有了这个库。但是为了使用方便,这个库不仅仅只有仿魅族效果的BannerView 来使用,还可以当作普通的BannerView 来使用,还可以当作一个ViewPager 来使用。使用很方便,具体使用方法和API 请看后面的示例。 ---  左图为魅族APP上的Banner效果,右图是高仿效果。MZBannerView 有以下功能:1 . 仿魅族BannerView 效果。2 . 当普通Banner 使用3 . 当普通ViewPager 使用。4 . 当普通ViewPager使用(有魅族Banner效果)5 . 仿某视频网站Banner效果。Demo APKgif图片有点模糊,可以扫描下方二维码下载APK体验相关博客ViewPager系列之 仿魅族应用的广告BannerView更新日志v1.1.1 : 增加按住Banner 停止轮播,松开开始自动轮播的功能v1.1.0 : fix 在从网上获取数据后,banner 显示 造成 ANR 的bug(如果在onCreate()中设置资源显示则没问题)v1.1.2 : fix 更改数据之后,调用setPages重新刷新数据会crush的bugv2.0.0 :1,add: 添加仿魅族Banner效果,中间Page覆盖两边。 -- 2,fix 部分bug: 添加OnPageChangeListener 回调 pisition 不对的bug.DependencyAdd it in your root build.gradle at the end of repositories:allprojects {      repositories {           ...           maven { url 'https://jitpack.io' }      } }Step 2. Add the dependencydependencies {          compile 'com.github.pinguo-zhouwei:MZBannerView:v2.0.0' }自定义属性属性名属性意义取值open_mz_mode是否开启魅族模式true 为魅族Banner效果,false 则普通Banner效果canLoop是否轮播true 轮播,false 则为普通ViewPagerindicatorPaddingLeft设置指示器距离左侧的距离单位为 dp 的值indicatorPaddingRight设置指示器距离右侧的距离单位为 dp 的值indicatorAlign设置指示器的位置有三个取值:left 左边,center 剧中显示,right 右侧显示middle_page_cover设置中间Page是否覆盖(真正的魅族Banner效果)true 覆盖,false 无覆盖效果使用方法1 . xml 布局文件2 . activity中代码:mMZBanner = (MZBannerView) view.findViewById(R.id.banner);              // 设置数据         mMZBanner.setPages(list, new MZHolderCreator() {             @Override             public BannerViewHolder createViewHolder() {                 return new BannerViewHolder();             }         });  public static class BannerViewHolder implements MZViewHolder {         private ImageView mImageView;         @Override         public View createView(Context cont
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值