利用ViewPager实现广告栏广告页面轮播效果

关注

原创最新推荐文章于 2026-04-04 09:10:37 发布 839 阅读 AI 写同款· GEO 优化 ›

React Native之广告栏Banner实现 Banner广告栏效果在应用中相当的普遍，比如网易，搜狐等新闻客户端以及天猫，京东之类的商城，在Android原生开发中一般会用ViewPager.实现起来也相对容易，在这里我简单介绍下用React Native（RN）如何来实现这种效果. 阅读详情

效果展示：
这里写图片描述
不废话，直接上代码：
1.MainActivity类的代码：

public class MainActivity extends AppCompatActivity {
    private List<View> viewList;
    private ViewPager viewPager;
    //4定时器：广告页面轮播功能
    private Timer timer;
    TimerTask timerTask = new TimerTask() {//2创建定时器任务，把任务放在子线程执行
        @Override
        public void run() {
            //使用runOnUiThread方法可以将里面的代码段推到UI线程中运行
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    //a获取当前页面
                   int currentItem = viewPager.getCurrentItem();
                    //c当走到最后一页
                    if(currentItem==viewList.size()-1){
                        currentItem =-1;
                    }
                    //b切换到指定position的页面
                    viewPager.setCurrentItem(currentItem+1);
                    //d启动定时器
                }
            });
        }
    };
    private MyPagerAdaper adaper;
    @Override
 protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager)  findViewById(R.id.viewpager);//1在布局文件中添加ViewPager标签
        loadData();//2把布局存入List集合中
        //3把得到的Fragment利用PagerAdapter进行适配
        adaper = new MyPagerAdaper(viewList);
        viewPager.setAdapter(adaper);
          //d启动定时器
        timer = new Timer();
        timer.schedule(timerTask,3000,3000);//参数一：定时器任务对象，二：延时时间，三：间隔时间
    }
  private void loadData() {
        viewList =new ArrayList<>();
        View view = getLayoutInflater().inflate(R.layout.viewpager_item,null);
        viewList.add(view);
view=getLayoutInflater().inflate(R.layout.viewpager_item2,null);
        viewList.add(view);
        view = getLayoutInflater().inflate(R.layout.viewpager_item3,null);
        viewList.add(view);
 view =getLayoutInflater().inflate(R.layout.viewpager_item4,null;
    view.findViewById(R.id.viewpager_item_layout);     
     viewList.add(view);

    }
}

2 PagerAdapter适配类的代码：

public class MyPagerAdaper extends PagerAdapter{
    private List<View> viewList;
    public MyPagerAdaper(List<View> viewList) {
        this.viewList =viewList;
    }
    //1返回页面的数量
    @Override
    public int getCount() {
        return viewList.size();
    }
    //2判断两个view是否相同
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }
    //3将拿到的view添加到容器中
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = viewList.get(position);
        container.addView(view);
        return view;
    }
    //4destroyItem:销毁掉最后那个view
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(viewList.get(position));
    }
}