Android : Xui- RecyclerView+BannerLayout 轮播图简单应用

实例图：

1.引用XUI

http://t.csdnimg.cn/Wb4KR

2.创建显示图片布局 banner_item.xml

XML 复制代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="260dp"
    android:layout_height="100dp"
    app:cardCornerRadius="5dp">

    <ImageView
        android:id="@+id/iv_item"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop" />

</LinearLayout>

3.写个适配器继承 RecyclerView BannerAdapter.java

java 复制代码

package com.example.xuicarousel.xui.adapter;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.example.xuicarousel.R;
import com.xuexiang.xui.widget.imageview.ImageLoader;

public class BannerAdapter extends RecyclerView.Adapter<BannerAdapter.BannerViewHolder> {

    private String[] urls;//图片地址
    private Context context;

    public BannerAdapter(Context context, String[] urls) {
        this.urls = urls;
        this.context = context;
    }

    @NonNull
    @Override
    public BannerViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.banner_item, parent, false);
        return new BannerViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull BannerViewHolder holder, int position) {
        ImageView imageView = holder.imageView;
        //XUI 的图片加载器
        ImageLoader.get().loadImage(imageView, urls[position]);
    }

    @Override
    public int getItemCount() {
        return urls.length;
    }


    class BannerViewHolder extends RecyclerView.ViewHolder {

        ImageView imageView;//轮播条的 item 项

        public BannerViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.iv_item);
        }


    }
}

4.主布局xml activity_main.xml

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">




    <!-- 倒计时button-->

    <!--轮播条控件-->

    <ScrollView
        android:id="@+id/scroll_view"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <com.xuexiang.xui.widget.button.CountDownButton
                android:id="@+id/bt_countdown4"
                style="@style/Button.Blue"
                android:text="轮播图："
                tools:ignore="MissingConstraints" />

            <!--
可以点进去自行查看  Ctrl +鼠标左键

app:bl_centerScale 图片缩放系数，默认值是1.2。
app:bl_autoPlaying 是否自动滚动，默认为 true。
app:bl_orientation 轮播的方向，有垂直和水平两种方式。
app:bl_indicatorSelectedSrc 小黑点可以为其设置指定的资源文件
app:bl_indicatorSelectedColor 小黑点
索引器的对齐方式，默认left
            <attr format="enum" name="bl_indicatorGravity">

轮播间隔，单位ms，默认是4000ms
 app:bl_interval="1000"
 app:bl_showIndicator="false" 不显示
轮播速度，默认是1.0F
app:bl_moveSpeed="1.8"
            -->
            <com.xuexiang.xui.widget.banner.recycler.BannerLayout
                android:id="@+id/bl"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_marginTop="8dp"
                app:bl_autoPlaying="true"
                app:bl_centerScale="1.9"
                app:bl_indicatorGravity="center"
                app:bl_indicatorSelectedColor="#ff00ff00"
                app:bl_itemSpace="10dp"
                app:bl_moveSpeed="1.1">



            </com.xuexiang.xui.widget.banner.recycler.BannerLayout>
            <View
                android:id="@+id/view"
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="#ccc" />

            <com.xuexiang.xui.widget.banner.recycler.BannerLayout
                android:id="@+id/bltwo"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_marginTop="8dp"
                app:bl_autoPlaying="true"
                app:bl_centerScale="1.5"
                app:bl_interval="1000"
                app:bl_itemSpace="10dp"
                app:bl_moveSpeed="1.1"
                app:bl_orientation="vertical"
                app:bl_showIndicator="false" />

            <View
                android:id="@+id/view2"
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="#ccc" />

            <com.xuexiang.xui.widget.banner.recycler.BannerLayout
                android:id="@+id/blthree"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                app:bl_autoPlaying="true"
                app:bl_centerScale="1.3"
                app:bl_itemSpace="10dp"
                app:bl_moveSpeed="1.1">



            </com.xuexiang.xui.widget.banner.recycler.BannerLayout>

        </LinearLayout>
    </ScrollView>


</androidx.constraintlayout.widget.ConstraintLayout>

5.MainActivity.java

java 复制代码

package com.example.xuicarousel;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import com.example.xuicarousel.xui.adapter.BannerAdapter;
import com.xuexiang.xui.widget.banner.recycler.BannerLayout;

public class MainActivity extends AppCompatActivity {

    private BannerAdapter mAdapter;

    private BannerLayout mBl, mBlTwo, mBlThree;

    public String[] urls = new String[]{//轮播图片地址
            "http://photocdn.sohu.com/tvmobilemvms/20150907/144160323071011277.jpg",
            "http://photocdn.sohu.com/tvmobilemvms/20150907/144158380433341332.jpg",
            "http://photocdn.sohu.com/tvmobilemvms/20150907/144160286644953923.jpg",
            "http://photocdn.sohu.com/tvmobilemvms/20150902/144115156939164801.jpg",
            "http://photocdn.sohu.com/tvmobilemvms/20150907/144159406950245847.jpg",
    };


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mAdapter = new BannerAdapter(this, urls);

        mBl = findViewById(R.id.bl);
        mBl.setAdapter(mAdapter);


        mBlTwo = findViewById(R.id.bltwo);
        mBlTwo.setAdapter(mAdapter);

        mBlThree = findViewById(R.id.blthree);
        mBlThree.setAdapter(mAdapter);


      /*
      // 事件
      mBlThree.setOnIndicatorIndexChangedListener(new BannerLayout.OnIndicatorIndexChangedListener() {
            @Override
            public void onIndexChanged(int position) {
                Toast.makeText(MainActivity.this,"轮播到了第 "+position+" 个"  ,Toast.LENGTH_SHORT).show();
            }
        });
*/

    }
}

6.其他配置

java 复制代码

AndroidMainifest.xml 中

联网权限：

    <uses-permission android:name="android.permission.INTERNET"/>


//
上网配置
<application
...
  android:usesCleartextTraffic="true"
...
>

buid.gradle 中：导入

dependencies {

    //Xui
    implementation 'com.github.xuexiangjys:XUI:1.1.5'
...
    //解决加载图片报错
    implementation 'com.github.bumptech.glide:glide:4.11.0'
    implementation 'com.github.bumptech.glide:compiler:4.11.0'
...

}