Android Banner 现实自动轮播 ,小圆点 标题

Android Banner 现实自动轮播 ,小圆点 标题

效果图如上,这里用到的是youth5201314 的banner 更具体可以前往链接查看

添加banner依赖:

    implementation 'com.youth.banner:banner:1.4.9'
    implementation 'com.github.bumptech.glide:glide:3.7.0'

对应布局:

<com.youth.banner.Banner
        android:id="@+id/banner"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/dp_180" />

下面来看具体的代码实现:

public class MainActivity extends AppCompatActivity implements OnBannerListener {
    Banner banner;

    private ArrayList<String> list_path;//这里需要注意 标题和图片使用ArrayList的数组接收

    private ArrayList<String> list_title;//需要把数据遍历保存在string数组中

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        banner = findViewById(R.id.banner);
        
        initView();
    }


    private void initView() {

        banner = (Banner) findViewById(R.id.banner);

        //放图片地址的集合

        list_path = new ArrayList<>();

        //放标题的集合
        list_title = new ArrayList<>();
        
        list_path.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic21363tj30ci08ct96.jpg");
        list_path.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic259ohaj30ci08c74r.jpg");
        list_path.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic2b16zuj30ci08cwf4.jpg");
        list_path.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic2e7vsaj30ci08cglz.jpg");

        list_title.add("好好学习");
        list_title.add("天天向上");
        list_title.add("热爱劳动");
        list_title.add("不搞对象");

        //设置内置样式,共有六种可以点入方法内逐一体验使用。
        banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE);

        //设置图片加载器,图片加载器在下方
        banner.setImageLoader(new MyLoader());

        //设置图片网址或地址的集合
        banner.setImages(list_path);

        //设置轮播的动画效果,内含多种特效,可点入方法内查找后内逐一体验
        banner.setBannerAnimation(Transformer.Default);

        //设置轮播图的标题集合
        banner.setBannerTitles(list_title);

        //设置轮播间隔时间
        banner.setDelayTime(3000);

        //设置是否为自动轮播,默认是“是”。
        banner.isAutoPlay(true);

        //设置指示器的位置,小点点,左中右。
        banner.setIndicatorGravity(BannerConfig.CENTER)

        //以上内容都可写成链式布局,这是轮播图的监听。比较重要。方法在下面。
                .setOnBannerListener(this)

        //必须最后调用的方法,启动轮播图。
                .start();

    }

    //轮播图的监听方法  设置点击事件
    @Override
    public void OnBannerClick(int position) {
        Log.i("tag", "你点了第" + position + "张轮播图");
    }

    //自定义的图片加载器
    private class MyLoader extends ImageLoader {
        @Override
        public void displayImage(Context context, Object path, ImageView imageView) {
            Glide.with(context).load((String) path).into(imageView);
        }
    }

还要加代码混淆,防止在release版本出现异常(正式环境报错)

# glide 的混淆代码
-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public enum com.bumptech.glide.load.resource.bitmap.ImageHeaderParser$** {
  **[] $VALUES;
        public *;
    }
# banner 的混淆代码
-keep class com.youth.banner.** {*;}

书到用时方恨少,纸上得来终觉浅。共勉。

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android 自动轮播图的布局代码和主要代码如下所示: 布局代码: ```xml <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" android:padding="10dp"> <TextView android:id="@+id/tv_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="@android:color/white" android:textSize="18sp" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="200dp"> <androidx.viewpager.widget.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent" /> <LinearLayout android:id="@+id/ll_dots" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:gravity="center_horizontal" android:orientation="horizontal" /> </RelativeLayout> </LinearLayout> ``` 主要代码: ```java public class AutoBannerActivity extends AppCompatActivity { private TextView tvTitle; private ViewPager viewPager; private LinearLayout llDots; private List<Banner> bannerList; private int currentPosition = 0; private boolean isStop = false; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_auto_banner); tvTitle = findViewById(R.id.tv_title); viewPager = findViewById(R.id.view_pager); llDots = findViewById(R.id.ll_dots); initData(); initView(); startAutoPlay(); } private void initData() { bannerList = new ArrayList<>(); bannerList.add(new Banner("标题1", R.drawable.banner_1)); bannerList.add(new Banner("标题2", R.drawable.banner_2)); bannerList.add(new Banner("标题3", R.drawable.banner_3)); bannerList.add(new Banner("标题4", R.drawable.banner_4)); } private void initView() { viewPager.setAdapter(new BannerAdapter()); viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { currentPosition = position; setCurrentTitle(); setCurrentDot(); } @Override public void onPageScrollStateChanged(int state) { } }); addDots(); setCurrentTitle(); setCurrentDot(); } private void addDots() { for (int i = 0; i < bannerList.size(); i++) { ImageView dot = new ImageView(this); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); params.leftMargin = 10; params.rightMargin = 10; dot.setLayoutParams(params); dot.setImageResource(R.drawable.dot_selector); dot.setEnabled(false); llDots.addView(dot); } } private void setCurrentTitle() { tvTitle.setText(bannerList.get(currentPosition).getTitle()); } private void setCurrentDot() { for (int i = 0; i < llDots.getChildCount(); i++) { ImageView dot = (ImageView) llDots.getChildAt(i); dot.setEnabled(i == currentPosition); } } private void startAutoPlay() { new Thread(() -> { while (!isStop) { try { Thread.sleep(3000); } catch (InterruptedException e) { e.printStackTrace(); } currentPosition = (currentPosition + 1) % bannerList.size(); runOnUiThread(() -> { viewPager.setCurrentItem(currentPosition); setCurrentTitle(); setCurrentDot(); }); } }).start(); } @Override protected void onDestroy() { super.onDestroy(); isStop = true; } private class BannerAdapter extends PagerAdapter { @NonNull @Override public Object instantiateItem(@NonNull ViewGroup container, int position) { ImageView imageView = new ImageView(AutoBannerActivity.this); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); imageView.setImageResource(bannerList.get(position).getImageResId()); container.addView(imageView); return imageView; } @Override public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { container.removeView((View) object); } @Override public int getCount() { return bannerList.size(); } @Override public boolean isViewFromObject(@NonNull View view, @NonNull Object object) { return view == object; } } private static class Banner { private String title; private int imageResId; public Banner(String title, int imageResId) { this.title = title; this.imageResId = imageResId; } public String getTitle() { return title; } public int getImageResId() { return imageResId; } } } ``` 这里使用了 ViewPager 来实现自动轮播图,同时在布局文件中添加了一个小圆点指示器来表示当前显示的图片。在主要代码中,我们使用了一个线程来定时切换图片,并且在切换时更新标题小圆点指示器。同时,我们还实现了一个 PagerAdapter 来为 ViewPager 提供数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值