平滑的无限循环ViewPager广告轮播

最新推荐文章于 2018-11-26 16:14:18 发布

又见飞

最新推荐文章于 2018-11-26 16:14:18 发布

阅读量1k

点赞数

分类专栏： android 文章标签： viewpager 广告布局

本文链接：https://blog.csdn.net/a18737105569/article/details/53840763

版权

android 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

无限循环的viewpager广告轮播图展示

第一步：我们先写布局文件：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.administrator.text.ViewPagerActivity">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="300dp"/>

    <LinearLayout
        android:layout_alignBottom="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:background="#55000000"
        >
        <TextView
            android:id="@+id/text_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="这里是广告介绍"
            android:textColor="#ffffff"
            android:textSize="20dp"
            android:gravity="center"
            android:padding="5dp"
            />
        <LinearLayout
            android:id="@+id/dot_group"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center"
            android:paddingBottom="5dp"
            >

        </LinearLayout>

    </LinearLayout>


</RelativeLayout>

第二步：初始化 View：就是简单的find

private void initview() {
    mViewPager= (ViewPager) findViewById(R.id.viewpager);
    mLinerlayout_dot_group= (LinearLayout) findViewById(R.id.dot_group);
    mTextview= (TextView) findViewById(R.id.text_view);

    new Thread(){//自动播放开启线程
        public void run(){
        while(isCircul){
            LogUtils.ytf("自动播放");
           SystemClock.sleep(3000);
            handler.sendEmptyMessage(0);
        }
        }
    }.start();

}

第三步：初始化 viewpager的数据在这里我们本地图片模拟网络

/**
 * 初始化VIEWPager的数据
 */
private void initViewpagerData(){
    imageText=new String[]{"汉堡包","饮料可乐","大白加小白","小熊","欢乐游泳"};
    mList_ImageView=new ArrayList<>();
    int imageIDS[]={R.mipmap.a,R.mipmap.b,R.mipmap.c,R.mipmap.d,R.mipmap.e};
    View dotview;
    for(int i=0;i<imageIDS.length;i++){
        iv=new ImageView(this);
        iv.setImageResource(imageIDS[i]);
        iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
        mList_ImageView.add(iv);
        //准备小圆点的数据
        dotview=new View(this);
        dotview.setBackgroundResource(R.drawable.dot_selector);
        //设置小圆点的宽和高
        LinearLayout.LayoutParams params= new LinearLayout.LayoutParams(10,10);
        if(i!=0){
            params.leftMargin=10;//设置小白点间距
        }
        dotview.setLayoutParams(params);
        //设置小圆点的状态
        if(i==0){
            dotview.setEnabled(true);//第一个小白点初始化
        }else{
            dotview.setEnabled(false);
        }
        //把小圆点添加到线性布局中
        mLinerlayout_dot_group.addView(dotview);

    }

}

这里我顺便写一下怎么设置白点

在资源文件drawable文件里新建资源文件分为白点、黑点、点；

1、白点的shape文件

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >

    <size android:height="5dp"
          android:width="5dp"/>
    <solid android:color="#ffffff"/>

</shape>

2、黑点的shape文件

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >

    <size android:height="5dp"
          android:width="5dp"/>
    <solid android:color="#000000"/>

</shape>

3、白点黑点的选择状态文件drawable文件

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/dop_select" android:state_enabled="true"/>
    <item android:drawable="@drawable/dop_unselect" android:state_enabled="false"/>

</selector>

第四步，写适配器让图片展示出来

/**
 * 定义ViewpagerAdapter
 */
class viewpagerAdapter extends PagerAdapter{

    @Override
    public int getCount() {
        return Integer.MAX_VALUE;//无限循环的关键
    }
    //是否复用当前view对象
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }
    //重写每一个条目要显示的内容
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        //用position求余mList_ImageView.size()得到
        int newposition=position%mList_ImageView.size();
        ImageView iv=mList_ImageView.get(newposition);
        container.addView(iv);
        return iv;
    }
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        //移除条目
        container.removeView((View) object);
    }
}

第五步：绑定适配器设置数据

private void setdata() {
    mViewpagerAdapter=new viewpagerAdapter();
    mViewPager.setAdapter( mViewpagerAdapter);
    mTextview.setText(imageText[0]);//第一个标题初始化
}

第六步：要实现滑动时白点状态变化就要监听器

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

        }
        //当页面选中的时候调用
        @Override
        public void onPageSelected(int position) {
            int newposition=position%mList_ImageView.size();
            mLinerlayout_dot_group.getChildAt(newposition).setEnabled(true);//设置小点为白色
            mLinerlayout_dot_group.getChildAt(lastposition).setEnabled(false);//把上一个小圆点设为false
            mTextview.setText(imageText[newposition]);//设置广告介绍
            lastposition=newposition;//记录上一个白点的位置以便滑动后设为黑色
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });
}

最后启动线程自动播放：

new Thread(){//自动播放开启线程
    public void run(){
    while(isCircul){
        LogUtils.ytf("自动播放");
       SystemClock.sleep(3000);
        handler.sendEmptyMessage(0);
    }
    }
}.start();

private Handler handler=new Handler(){
    @Override
    public void handleMessage(Message msg) {
        super.handleMessage(msg);
        mViewPager.setCurrentItem(mViewPager.getCurrentItem()+1);
    }
};

全部activity代码：

public class ViewPagerActivity extends Activity {
    private ViewPager mViewPager;
    private LinearLayout mLinerlayout_dot_group;
    private TextView mTextview;

    private viewpagerAdapter mViewpagerAdapter;
    private int  lastposition=0;
    private boolean isCircul=true;

    private List<ImageView> mList_ImageView;
    private String [] imageText;
    private ImageView iv;

    private Handler handler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            mViewPager.setCurrentItem(mViewPager.getCurrentItem()+1);
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_pager);
        initview();
        initViewpagerData();
        setdata();
        initlistenrt();
    }

    private void setdata() {
        mViewpagerAdapter=new viewpagerAdapter();
        mViewPager.setAdapter( mViewpagerAdapter);
        mTextview.setText(imageText[0]);//第一个标题初始化
    }


    private void initview() {
        mViewPager= (ViewPager) findViewById(R.id.viewpager);
        mLinerlayout_dot_group= (LinearLayout) findViewById(R.id.dot_group);
        mTextview= (TextView) findViewById(R.id.text_view);

        new Thread(){//自动播放开启线程
            public void run(){
            while(isCircul){
                LogUtils.ytf("自动播放");
               SystemClock.sleep(3000);
                handler.sendEmptyMessage(0);
            }
            }
        }.start();

    }

    /**
     * 初始化VIEWPager的数据
     */
    private void initViewpagerData(){
        imageText=new String[]{"汉堡包","饮料可乐","大白加小白","小熊","欢乐游泳"};
        mList_ImageView=new ArrayList<>();
        int imageIDS[]={R.mipmap.a,R.mipmap.b,R.mipmap.c,R.mipmap.d,R.mipmap.e};
        View dotview;
        for(int i=0;i<imageIDS.length;i++){
            iv=new ImageView(this);
            iv.setImageResource(imageIDS[i]);
            iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
            mList_ImageView.add(iv);
            //准备小圆点的数据
            dotview=new View(this);
            dotview.setBackgroundResource(R.drawable.dot_selector);
            //设置小圆点的宽和高
            LinearLayout.LayoutParams params= new LinearLayout.LayoutParams(10,10);
            if(i!=0){
                params.leftMargin=10;//设置小白点间距
            }
            dotview.setLayoutParams(params);
            //设置小圆点的状态
            if(i==0){
                dotview.setEnabled(true);//第一个小白点初始化
            }else{
                dotview.setEnabled(false);
            }
            //把小圆点添加到线性布局中
            mLinerlayout_dot_group.addView(dotview);

        }

    }
    private void initlistenrt() {
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }
            //当页面选中的时候调用
            @Override
            public void onPageSelected(int position) {
                int newposition=position%mList_ImageView.size();
                mLinerlayout_dot_group.getChildAt(newposition).setEnabled(true);//设置小点为白色
                mLinerlayout_dot_group.getChildAt(lastposition).setEnabled(false);//把上一个小圆点设为false
                mTextview.setText(imageText[newposition]);//设置广告介绍
                lastposition=newposition;//记录上一个白点的位置以便滑动后设为黑色
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }
    /**
     * 定义ViewpagerAdapter
     */
    class viewpagerAdapter extends PagerAdapter{

        @Override
        public int getCount() {
            return Integer.MAX_VALUE;//无限循环的关键
        }
        //是否复用当前view对象
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view==object;
        }
        //重写每一个条目要显示的内容
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            //用position求余mList_ImageView.size()得到
            int newposition=position%mList_ImageView.size();
            ImageView iv=mList_ImageView.get(newposition);
            container.addView(iv);
            return iv;
        }
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            //移除条目
            container.removeView((View) object);
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        isCircul=false;
    }
}

又见飞

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
平滑的无限循环ViewPager广告轮播

无限循环的viewpager广告轮播图展示第一步：我们先写布局文件：<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="matc
复制链接

扫一扫