viewpager实现轮播图效果

最新推荐文章于 2025-07-03 12:15:11 发布

原创最新推荐文章于 2025-07-03 12:15:11 发布 · 452 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#viewpager #banner

android 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种基于Android平台的简单实用的Banner轮播组件实现方法。该组件使用ViewPager作为核心展示组件，并通过自定义Adapter实现了图片轮播、标题显示及指示器功能。此外，还提供了自动轮播和点击事件回调等功能。

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

比较简单实用的banner效果

public class BannerViewPager extends ViewPager {

private TextView textView;
private LinearLayout linearLayout;
private final int SCROLL_BORDER = 2, TIMER_UPDATE = 3;
private MiniBannerViewPagerAdapter adapter;
private Timer timer;

public interface MiniBannerViewPagerAdapter {
    int bannerImageCount();//图片的总数

    String bannerImageUrlAtIndex(int index);//通过index获取对象图片里的url

    String bannerTextAtIndex(int index); //通过index获取对象的title

    void bannerDidSelectAtIndex(int index); //点击把当前的对象返回进行相应的操作
}


private Handler handler = new Handler() {
    public void handleMessage(Message msg) {
        switch (msg.what) {
            case TIMER_UPDATE: {
                int count = adapter.bannerImageCount();
                int index = getCurrentItem();
                index = (index + 1) % (count + 2);
                setCurrentItem(index);
                break;
            }
            case SCROLL_BORDER: {
                int count = adapter.bannerImageCount();
                int current = getCurrentItem();
                if (current == 0) {
                    setCurrentItem(count, false);
                } else if (current == count + 1) {
                    setCurrentItem(1, false);
                }
                break;
            }
        }
    }
};

public MiniBannerViewPager(Context context) {
    super(context);
}

public MiniBannerViewPager(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public void setRootView(View view) {
    this.textView = (TextView) view.findViewById(R.id.banner_text);
    this.linearLayout = (LinearLayout) view.findViewById(R.id.banner_layout);
}

private void stopTimer() {
    if (timer != null) {
        timer.cancel();
        timer = null;
    }
}

public void setPagerAdapter(MiniBannerViewPagerAdapter adapter) {
    this.stopTimer();
    this.adapter = adapter;
    if (this.adapter != null) {
        ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter();
        super.setAdapter(viewPagerAdapter);
        super.setOnPageChangeListener(viewPagerAdapter);
        final int count = adapter.bannerImageCount();
        if (count > 1) {
            // 设置展示的红点
            linearLayout.setVisibility(VISIBLE);
            linearLayout.removeAllViews();
            for (int i = 0; i < count; i++) {
                ImageView imageView = new ImageView(getContext());
                imageView.setBackgroundResource(R.drawable.school_news_item_main_point_normal);
                LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,
                        LayoutParams.WRAP_CONTENT);
                layoutParams.leftMargin = 5;
                linearLayout.addView(imageView, layoutParams);
            }

            this.setCurrentItem(1);
            timer = new Timer();
            timer.schedule(new TimerTask() {
                @Override
                public void run() {
                    handler.sendEmptyMessage(TIMER_UPDATE);
                }
            }, 5000, 5000);
        } else {
            linearLayout.setVisibility(GONE);
        }
    }
}

public class ViewPagerAdapter extends PagerAdapter implements OnPageChangeListener {

    public String urlAtIndex(int index) {
        return adapter.bannerImageUrlAtIndex(index);
    }

    public void onPageSelected(int var1) {
        int count = adapter.bannerImageCount();
        if (count > 1) {
            handler.sendEmptyMessageDelayed(SCROLL_BORDER, 500);
        }
        int index = indexForPosition(var1);
        for (int i = 0; i < linearLayout.getChildCount(); i++) {
            ImageView imageView = (ImageView) linearLayout.getChildAt(i);
            if (i == index) {
                imageView.setBackgroundResource(R.drawable.school_news_item_main_point_pressed);
            } else {
                imageView.setBackgroundResource(R.drawable.school_news_item_main_point_normal);
            }
        }
        String title = adapter.bannerTextAtIndex(index);
        textView.setText(title);
    }

    public void onPageScrolled(int var1, float var2, int var3) {

    }

    public void onPageScrollStateChanged(int var1) {

    }

    public int getCount() {
        int count = 0;
        if (adapter != null) {
            count = adapter.bannerImageCount();
            if (count > 1) {
                return count + 2;
            }
        }
        return count;
    }

    public Object instantiateItem(ViewGroup container, int position) {
        final int index = indexForPosition(position);
        int count = adapter.bannerImageCount();
        if (count == 1) {
            String title = adapter.bannerTextAtIndex(index);
            textView.setText(title);
        }
        ImageView imageView = new ImageView(container.getContext());
        imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT));
        imageView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                adapter.bannerDidSelectAtIndex(index);
            }
        });
        Object parent = imageView.getParent();
        if (parent != null && parent instanceof ViewGroup) {
            ((ViewGroup) parent).removeView(imageView);
        }
        container.addView(imageView);
        imageView.setBackgroundResource(R.mipmap.ic_launcher);
        return imageView;
    }

    private int indexForPosition(int position) {
        int index = position;
        if (adapter.bannerImageCount() > 1) {
            if (position == 0) {
                index = adapter.bannerImageCount() - 1;
            } else if (position == adapter.bannerImageCount() + 1) {
                index = 0;
            } else {
                index = position - 1;
            }
        }
        return index;
    }

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

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

}

MainActivity code

 MainActivity extends Activity implements  MiniBannerViewPager.MiniBannerViewPagerAdapter{

     @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initData();
    mBannerViewPager = (MiniBannerViewPager) findViewById(R.id.banner_viewpager);
    mBannerLayout = (RelativeLayout) findViewById(R.id.banner_relayout_layout);
    mBannerViewPager.setRootView(mBannerLayout);
    mBannerViewPager.setPagerAdapter(this);
    }

   private void initData() {
    mImages = new ArrayList<Integer>();
    mTitles = new ArrayList<String>();
    for (int i = 0; i < 5; i++) {
        mImages.add(R.drawable.icon_send);
        mTitles.add("第" + i + 1 + "展示图片");
    }
}

   @Override
      public int bannerImageCount() {
          return mImages.size();
       }

@Override
public String bannerImageUrlAtIndex(int index) {
    return mImages.get(index).toString();
}

@Override
public String bannerTextAtIndex(int index) {
    return mTitles.get(index);
}

@Override
public void bannerDidSelectAtIndex(int index) {
    Toast.makeText(this, mTitles.get(index), Toast.LENGTH_LONG).show();
}

activity_main.xml布局

 <RelativeLayout
    android:id="@+id/view_feed_banner_inner"
    android:layout_width="match_parent"
    android:layout_height="150dp">


    <com.example.BannerViewPager
        android:id="@+id/banner_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

    <RelativeLayout
        android:id="@+id/banner_relayout_layout"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_alignParentBottom="true"
        android:background="#33000000"
        android:paddingLeft="10dp"
        android:paddingRight="10dp">

        <TextView
            android:id="@+id/banner_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="30dp"
            android:layout_toRightOf="@+id/banner_layout"
            android:singleLine="true"
            android:textColor="#ffffff"
            android:textSize="14sp"/>

        <LinearLayout
            android:id="@+id/banner_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:orientation="horizontal"/>
    </RelativeLayout>

</RelativeLayout>

}