banner2.0自定义轮播布局

news2024/12/23 22:25:15

说明：最近碰到一个需求，让新闻列表实现轮播图的效果，也就是轮播新闻，然后样式必须按照ui设计的样式来弄，之前传统的banner，都是只轮播图片，没想到，这次居然要轮播新闻，
网上找了点资料，发现banner2.0可以实现自定义的样式内容轮播，然后就实现了这个功能，
可以实现点击监听，跳转新闻详情页面
效果图：
在这里插入图片描述

step1:依赖包 ~\app\build.gradle

    implementation 'io.github.youth5201314:banner:2.2.2'
    implementation "com.github.bumptech.glide:glide:4.6.1"
    implementation 'com.google.code.gson:gson:2.8.0'
    implementation 'com.github.bumptech.glide:glide:4.8.0'

step2:清单文件，网络权限 ~\app\src\main\AndroidManifest.xml

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

step3: 主界面ui布局 ~\app\src\main\res\layout\activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/news"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ECECEC"
    android:orientation="vertical">

    <com.youth.banner.Banner
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="320dp"
        android:background="#8DC8F6" />

</LinearLayout>

step4:item界面ui布局 ~\app\src\main\res\layout\view_message.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/iv_logo"
        android:layout_width="100dp"
        android:layout_height="230dp"
        android:scaleType="fitXY"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/tx_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/iv_logo"
        android:text="@string/app_name"
        android:textSize="20sp"
        android:textColor="@android:color/holo_red_dark"
        />
    <TextView
        android:id="@+id/tx_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/tx_title"
        android:text="@string/app_name"
        />
    <TextView
        android:id="@+id/tx_time"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/tx_content"
        android:text="@string/app_name"
        android:textColor="@android:color/holo_orange_light"

        />

</RelativeLayout>

step5: 主界面功能 ~\app\src\main\java\com\example\iosdialogdemo\MainActivity.java

package com.example.iosdialogdemo;


import android.os.Bundle;
import android.util.Log;
import androidx.appcompat.app.AppCompatActivity;
import com.youth.banner.Banner;
import com.youth.banner.indicator.CircleIndicator;
import java.util.ArrayList;
import java.util.List;
import com.youth.banner.listener.OnBannerListener;

public class MainActivity extends AppCompatActivity {
    private Banner banner;
    private List<Notice> notices;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        banner = findViewById(R.id.banner);
        notices = new ArrayList<Notice>();
        notices.add(new Notice(1, "红楼梦", "曹雪芹", "http://img.netbian.com/file/2024/0516/small0017044jQKI1715789824.jpg", "2022-05-22"));
        notices.add(new Notice(2, "西游记", "吴承恩", "http://img.netbian.com/file/2024/0516/small001855bTfrr1715789935.jpg", "2022-05-22"));
        notices.add(new Notice(3, "三国演义", "罗贯中", "http://img.netbian.com/file/2024/0517/small150904ck1C21715929744.jpg", "2022-05-22"));
        notices.add(new Notice(4, "水浒传", "施耐庵", "http://img.netbian.com/file/2024/0516/small002209I5p4J1715790129.jpg", "2022-05-22"));
        notices.add(new Notice(5, "桃花源记", "陶渊明", "http://img.netbian.com/file/2024/0519/small190636mQVqM1716116796.jpg", "2022-05-22"));
        banner.setAdapter(new MsgBannerAdapter(notices, MainActivity.this));
        banner.addBannerLifecycleObserver(this);
        banner.setIndicator(new CircleIndicator(MainActivity.this));
        banner.setOnBannerListener(new OnBannerListener() {
            @Override
            public void OnBannerClick(Object o, int i) {
                Log.e("TAG", "点击了" + notices.get(i).getTitle());
            }
        });
    }
}

step6:轮播适配器 ~\app\src\main\java\com\example\iosdialogdemo\MsgBannerAdapter.java

package com.example.iosdialogdemo;


import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.bumptech.glide.Glide;
import com.youth.banner.adapter.BannerAdapter;
import java.util.List;

public class MsgBannerAdapter extends BannerAdapter<Notice, MsgBannerAdapter.BannerViewHolder> {
    Context mainContext;

    public MsgBannerAdapter(List<Notice> datas, Context context) {
        super(datas);
        mainContext = context;
    }

    @Override
    public BannerViewHolder onCreateHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.view_message, parent, false);
        return new BannerViewHolder(view);
    }

    @Override
    public void onBindView(BannerViewHolder holder, Notice data, final int position, int size) {
        holder.tx_title.setText(mDatas.get(position).getTitle());
        holder.tx_content.setText(mDatas.get(position).getContent());
        holder.tx_time.setText(mDatas.get(position).getUpdatedTimeStr());
        //加载图片
        Glide.with(mainContext)
                .load(mDatas.get(position).getCreateTimeStr())
                .into(holder.iv_logo);
    }

    class BannerViewHolder extends RecyclerView.ViewHolder {
        ImageView iv_logo;
        TextView tx_title, tx_content, tx_time;

        public BannerViewHolder(@NonNull View itemView) {
            super(itemView);
            tx_time = itemView.findViewById(R.id.tx_time);
            iv_logo = itemView.findViewById(R.id.iv_logo);
            tx_title = itemView.findViewById(R.id.tx_title);
            tx_content = itemView.findViewById(R.id.tx_content);
        }
    }
}

step7:data数据类 ~\app\src\main\java\com\example\iosdialogdemo\Notice.java

package com.example.iosdialogdemo;

import java.io.Serializable;
import java.util.Date;

public class Notice implements Serializable {
    private int id;

    private String title;

    private String content;


    private String createTimeStr;

    private String updatedTimeStr;

    private static final long serialVersionUID = 1L;

    public Notice(int id, String title, String content, String createTimeStr, String updatedTimeStr) {
        this.id = id;
        this.title = title;
        this.content = content;
        this.createTimeStr = createTimeStr;
        this.updatedTimeStr = updatedTimeStr;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public String getCreateTimeStr() {
        return createTimeStr;
    }

    public void setCreateTimeStr(String createTimeStr) {
        this.createTimeStr = createTimeStr;
    }

    public String getUpdatedTimeStr() {
        return updatedTimeStr;
    }

    public void setUpdatedTimeStr(String updatedTimeStr) {
        this.updatedTimeStr = updatedTimeStr;
    }
}