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

用于记录安卓开发功能

效果图：

 实现步骤：

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&gt; images;
    private List<Integer&gt; img;
    private List<String&gt; 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<&gt;();
//        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>

代码007普通

打赏 收藏 海报 链接