安卓首页界面：用Banner框架实现Android轮播图效果

1111

浅蓝起司

1753人浏览 · 2022-12-20 15:04:36

浅蓝起司 · 2022-12-20 15:04:36 发布

用于记录安卓开发功能

效果图：

实现步骤：

1.引入banner依赖

implementation 'com.youth.banner:banner:1.4.9'
implementation 'com.squareup.picasso:picasso:2.5.2'

或者

com.youth.banner:banner:1.4.9
com.squareup.picasso:picasso:2.5.2

2.在XML加入Banner组件

<com.youth.banner.Banner
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="200dp" />

3.在Fragment页面上设置banner

package com.example.wechatapplication.fragment;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

import com.example.wechatapplication.R;
import com.example.wechatapplication.utils.Picss;
import com.youth.banner.Banner;
import com.youth.banner.BannerConfig;
import com.youth.banner.Transformer;

import java.util.ArrayList;
import java.util.List;

public class HomeFragment extends Fragment {

    public View view;
    private List<String> images;
    private List<Integer> img;
    private List<String> titles;
    private Banner banner;
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_home, container, false);
        initDate();
        initBanner();
//        return inflater.inflate(R.layout.fragment_home, container, false);
        return view;
    }


    private void initDate() {
//        images = new ArrayList<>();
//        images.add("https://tubie.gitee.io/hskjimg/01.png");
//        images.add("https://tubie.gitee.io/hskjimg/02.png");
//        images.add("https://tubie.gitee.io/hskjimg/03.png");
        img = new ArrayList<>();
        img.add(R.drawable.a);
        img.add(R.drawable.c);
        img.add(R.drawable.d);
        titles = new ArrayList<>();
        titles.add("标题1");
        titles.add("标题2");
        titles.add("标题3");
    }

    private void initBanner() {
        banner =(Banner) view.findViewById(R.id.banner);
        //设置轮播的样式
        banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE);  //CIRCLE_INDICATOR
        //设置图片加载器
        banner.setImageLoader(new Picss());
        //设置轮播的动画效果,里面有很多种特效,可以都看看效果。
        banner.setBannerAnimation(Transformer.Default);
        //设置轮播间隔时间
        banner.setDelayTime(3000);
        //设置是否为自动轮播，默认是true
        banner.isAutoPlay(true);
        //设置图片加载地址
//        banner.setImages(images);
        banner.setImages(img);
        banner.setBannerTitles(titles);
        //开始调用的方法，启动轮播图。
        banner.start();


    }


}

4.创建工具类图片加载器：

package com.example.wechatapplication.utils;

import android.content.Context;
import android.net.Uri;
import android.widget.ImageView;

import com.squareup.picasso.Picasso;
import com.youth.banner.loader.ImageLoader;


public class Picss extends ImageLoader {


    @Override
    public void displayImage(Context context, Object path, ImageView imageView) {
//        Picasso.with(context).load((String ) path).into(imageView);
        Picasso.with(context).load((Integer ) path).into(imageView);

    }


}

总XML 布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
<!--    <include layout="@layout/commonbar_top" />-->
    <com.youth.banner.Banner
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="200dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:orientation="horizontal">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10dp"
                android:background="@mipmap/ico" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:gravity="center"
                android:text="标题1" />
        </LinearLayout>
<!--        2222222222-->
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10dp"
                android:background="@mipmap/ico" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:gravity="center"
                android:text="标题2" />
        </LinearLayout>

<!--333-->
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10dp"
                android:background="@mipmap/ico" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:gravity="center"
                android:text="标题3" />
        </LinearLayout>

<!--4444-->

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10dp"
                android:background="@mipmap/ico" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:gravity="center"
                android:text="标题4" />
        </LinearLayout>
<!--end-->

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:text="待办"
            android:textColor="#333"
            android:textSize="16dp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:text="更多"
            android:textColor="#666" />
    </LinearLayout>




</LinearLayout>

二.banner 2.2.2 使用

引入依赖：

implementation 'io.github.youth5201314:banner:2.2.2'
implementation 'com.github.bumptech.glide:glide:4.13.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.13.0'

xml:

<com.youth.banner.Banner
    android:id="@+id/main_banner"
    android:layout_width="match_parent"
    android:layout_height="210dp"
    app:banner_radius="15dp"
    android:layout_marginTop="15dp"
    android:layout_marginStart="10dp"
    android:layout_marginEnd="10dp"
    app:banner_loop_time="2000"
    />

实现：

private Banner banner;
private List<String> banner_data;

//     轮播图 数据
    private void initData(){
        banner_data = new ArrayList<>();
         banner_data.add("https://www.keaidian.com/uploads/allimg/190424/24110307_6.jpg");
         banner_data.add("https://img.mianfeiwendang.com/pic/65133e4129b6446aa22c9f9f/1-810-jpg_6-1080-0-0-1080.jpg");
    }

banner = view.findViewById(R.id.main_banner);
banner.setAdapter(new BannerImageAdapter<String>(banner_data) {
    @Override
    public void onBindView(BannerImageHolder holder, String data, int position, int size) {
        Glide.with(holder.imageView)
                .load(data)
                .into(holder.imageView);
    }
});

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

华为云Stack8.3面向香港正式发布，六大亮点激发云上跃迁

华为云开发者联盟

cover

6个实例带你解读TinyVue 组件库跨框架技术

华为云开发者联盟

cover

GaussDB SQL查询语句执行过程解析

华为云开发者联盟

所有评论(0)

查看更多评论

浅蓝起司

已为社区贡献2条内容