ViewPager作用于广告条的流程

本文详细介绍了如何在Android应用中实现ViewPager广告轮播效果,包括布局配置、适配器编写、监听器设置及自动翻页功能。同时提供了描述文本与指示点的动态更新方法。

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

ViewPager的使用

1.在需要使用此广告条的Values/xxx.xml的布局文件中,写ViewPager的布局—使用v4包下的v4.view.ViewPager

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

2.关心ViewPager控件,给ViewPager设置适配器,使用的适配器继承PagerAdapter,

    <<适配器必须有参数才能显示>>---imageResIds传递过来的参数
    实现适配器BannerAdapter(Banner-条幅)中我们关心的四个方法
    public class BannerAdapter extends PagerAdapter{
        //返回ViewPager的条目总数
        @Override
        public int getCount() {
            //imageResIds.length为所有的页面数,* 100 * 100是为了实现永不停止的自动滑动
            return imageResIds.length * 100 * 100;
        }

        //是否复用,模板代码
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        //实例化,创造一个页面;container.addView(imageView)--imageView必须要添加才能显示
        //imageResIds--传递攻来给Adaptter显示的图片资源的数值,里面元素为:R.mipmap.a
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView imageView = new ImageView(container.getContext());
            //将扩大后的条目总数通过取页面数模的方式得到条目对应显示的页面
            position = position % imageResIds.length;
            imageView.setBackgroundResource(imageResIds[position]);
            container.addView(imageView);
            return imageView;
            }

        //销毁一个实例
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((ImageView) object);
        }
    }   
    到这里就可以得到一个显示在页面的广告条了,我们在页面下面加上描述的文本以及显示页面的小点

3.viewPager页面下面加上描述的文本以及显示页面的小点

(1)首先我们必须对ViewPager的行为进行监听,设置监听器
    viewPager.setOnPageChangeListener(listener);
(2)实现监听器
    ViewPager.OnPageChangeListener listener = new ViewPager.OnPageChangeListener() {

        //滑动Pager时调用
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { }

        /** 当某一页被选择的时候回掉 *///可以的到ViewPager具体显示的那一页
        @Override
        public void onPageSelected(int position) {
            //我们根据这个页码,就可以设置指定页面的信息,调用方法给页面设置内容
            setTextAndDots(position);
        }

        @Override
        public void onPageScrollStateChanged(int state) { }
    };
(3)初始化dot<显示页面的小点>
    //selector_dot点的状态选择器,用于点的选中状态和非选中状态
    //layoutParams 布局参数,指定宽高(int width, int height);leftMargin 点于点的左边距margin值
    //llDots-->装dot<显示页面的小点>的LinearLayout的containre<容器>
    public void createDots() {
        for (int i = 0; i < describe.length; i++) {
            View dot = new View(this);
            dot.setBackgroundResource(R.drawable.selector_dot);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(5, 5);
            layoutParams.leftMargin = 5;
            dot.setLayoutParams(layoutParams);
            llDots.addView(dot);
        }
    }
(4)根据传递过来的页面的position(条目)设置内容,传递过来的时ViewPager的总的条目,我们要将其转换成对应的页码数
    //tvDesc-->TextView描述信息的View //describe-->提供描述内容的String数值 
    //llDots-->装dot<显示页面的小点>的LinearLayout的containre<容器>
     public void setTextAndDots(int position) {
        position = position % describe.length;
        tvDesc.setText(describe[position]);
        for (int i = 0; i < describe.length; i++) {
            View childAt = llDots.getChildAt(i);
            childAt.setSelected(i == position);
        }
    }
到这里图片下方的描述内容和显示页数的点就可以显示在我们页面上了,我们可以模拟购物网站,加个自动翻页
(5)自动翻页的实现
    //3秒后自动翻页,必须在构造中调用此方法一次才能实现
    private void autoPage() {
       new Handler().postDelayed(new Runnable() {
           @Override
           public void run() {
                //currentItem——>当前的条目数
               int currentItem = viewPager.getCurrentItem();
               viewPager.setCurrentItem(currentItem+1);
               autoPage();//递归,自己掉自己,无限循环的掉
           }
       }, 3000);
    }
    //值得说明的一点时,ViewPager默认时显示第一条的,就是说我们一开始无法向前翻,只能向后翻
    我们可以在初始化时,自动翻页实现前,将ViewPager的当前页码设置为总数的一半
    //初始化页号,显示第一页信息
    setTextAndDots(0);
    //设置ViewPager现在的条目数为总条目的一半
    viewPager.setCurrentItem(viewPager.getAdapter().getCount()/2);

小圆点的状态选择器selector_dot的做法

(1)shape<形状,模型>标签创造小圆点的selector<选中>状态 normal<正常>状态
    res/drawable/shape_dot_normal.xml或者res/drawable/shape_dot_select.xml
    //指定shape为oval实心圆 指定color颜色为自定义的selector<选中>状态的颜色
    //指定shape为oval实心圆 指定color颜色为自定义的normal<正常>状态的颜色
    <?xml version="1.0" encoding="utf-8"?>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
        <solid android:color="@color/doc_select" />
    </shape>
(2)状态选择器指定两种状态res/drawable/select_dot.xml
    //选中状态必须在上面
    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/spah_dot" android:state_selected="true" />
        <item android:drawable="@color/doc_normal" />
    </selector>

有错漏或者没写清楚的请留言,看都后会抽时间修改

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值