Android-轮播图banner的使用步骤

Android-轮播图banner框架的使用步骤

  • 1.添加依赖
  • 2.布局文件里添加控件:
  • 3.编写逻辑代码
  • 运行效果

1.添加依赖

在build.gradle配置文件的dependencies 代码块中添加依赖

Android-轮播图banner的使用步骤_第1张图片
在这里插入图片描述

2.布局文件里添加控件:

对目录下的res/layout/activity_main.xml文件进行代码编写

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

	    <com.youth.banner.Banner
	        android:id="@+id/banner"
	        android:layout_width="match_parent"
	        android:layout_height="230dp"
	        app:layout_constraintTop_toTopOf="parent"
	        />
	        
	    <TextView
	        android:id="@+id/textView"
	        android:layout_width="115dp"
	        android:layout_height="91dp"
	        android:layout_marginTop="116dp"
	        android:layout_marginEnd="244dp"
	        android:text="TextView"
	        android:textSize="20sp"
	        app:layout_constraintEnd_toEndOf="parent"
	        app:layout_constraintBottom_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

3.编写逻辑代码

对java目录下的MainActivity.java文件进行代码编写
该代码上面没用的包自行删除,因为我后面做了其他业务所以就导了很多包

package com.example.qq;

import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

import com.bumptech.glide.Glide;
import com.youth.banner.Banner;
import com.youth.banner.BannerConfig;
import com.youth.banner.Transformer;
import com.youth.banner.listener.OnBannerListener;
import com.youth.banner.loader.ImageLoader;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private Banner mbanner;
    private MyImageLoader myImageLoader;
    private ArrayList<Integer> imagePath;
    private ArrayList<String> imageTitle;
    private TextView textView;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView =findViewById(R.id.textView);
        initData();
        initView();
    }


    private void initData() {
        imagePath =new ArrayList<>();
        imageTitle =new ArrayList<>();
        imagePath.add(R.drawable.num1);
        imagePath.add(R.drawable.num2);
        imagePath.add(R.drawable.num3);
        imageTitle.add("机电");
        imageTitle.add("60周年");
        imageTitle.add("习近平");

    }

    private void initView(){
        myImageLoader =new MyImageLoader();
        mbanner =findViewById(R.id.banner);
        //设置banner样式
        mbanner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE);
        //设置图片加载器
        mbanner.setImageLoader(myImageLoader);
        //设置轮播的动画效果
        mbanner.setBannerAnimation(Transformer.ZoomOutSlide);
        //设置图片的文字
        mbanner.setBannerTitles(imageTitle);
        //设置轮播的时间间隔
        mbanner.setDelayTime(3000);
        //设置是否为自动轮播
        mbanner.isAutoPlay(true);
        //设置指示器的位置,小点点,居中显示
        mbanner.setIndicatorGravity(BannerConfig.CENTER);
        //设置图片加载地址
        mbanner.setImages(imagePath)
                //轮播图的监听
                .setOnBannerListener(new OnBannerListener() {
                    @Override
                    public void OnBannerClick(int position) {
                        switch (position){
                            case 0:
                                textView.setText("机电");
                            case 1:
                                textView.setText("60周年");
                            case 2:
                                textView.setText("习近平");
                                break;

                        }
                    }
                }).start();
    }


    public class MyImageLoader extends ImageLoader{
        @Override
        public void displayImage(Context context, Object path, ImageView imageView) {
            Glide.with(context.getApplicationContext())
                    .load(path)
                    .into(imageView);
        }
    }
}

运行效果

至此banner轮播图就完成了,可以运行项目进行查看,上面的图片需要自己在drawable里面添加。
Android-轮播图banner的使用步骤_第2张图片
Android-轮播图banner的使用步骤_第3张图片


持续更新中…

你可能感兴趣的:(Android,AndroidStudio)