当前位置：首页 > news >正文

banner2.0自定义轮播布局

news 来源：原创 2024/7/7 16:57:24

说明：最近碰到一个需求，让新闻列表实现轮播图的效果，也就是轮播新闻，然后样式必须按照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.Bannerandroid: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"><ImageViewandroid:id="@+id/iv_logo"android:layout_width="100dp"android:layout_height="230dp"android:scaleType="fitXY"android:src="@mipmap/ic_launcher" /><TextViewandroid: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"/><TextViewandroid: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"/><TextViewandroid: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;@Overrideprotected 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() {@Overridepublic 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;}@Overridepublic BannerViewHolder onCreateHolder(ViewGroup parent, int viewType) {View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.view_message, parent, false);return new BannerViewHolder(view);}@Overridepublic 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;}
}