返回顶部
首页 > 资讯 > 移动开发 >android轮播图组件的制作方法
  • 728
分享到

android轮播图组件的制作方法

2024-04-02 19:04:59 728人浏览 泡泡鱼
摘要

本文实例为大家分享了Android轮播图组件的制作方法,供大家参考,具体内容如下 BannerLayout package com.coral3.common_module.co

本文实例为大家分享了Android轮播图组件的制作方法,供大家参考,具体内容如下

BannerLayout


package com.coral3.common_module.components;

import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;
import com.coral3.common_module.R;
import com.coral3.common_module.utils.LogUtil;
import com.coral3.common_module.viewPager.ChildViewPager;
import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.atomic.AtomicInteger;

public class BannerLayout extends LinearLayout {

    private Context mContext;
    private View view;
    private ChildViewPager viewPager;
    private ImageView indicator;
    private ImageView[] indicators;
    private Boolean isContinue = true;
    private ViewGroup group;
    private AtomicInteger index = new AtomicInteger();
    private Handler handler = new Handler(new Handler.Callback(){

        @Override
        public boolean handleMessage(Message message) {
            viewPager.setCurrentItem(message.what);
            return false;
        }
    });

    public BannerLayout(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        initView();
        initListener();
    }

    private void initView(){
        view = LayoutInflater.from(mContext).inflate(R.layout.layout_banner, this);
        group = view.findViewById(R.id.view_indicators);
        viewPager = view.findViewById(R.id.view_banners);
        // 动态加入图片
        List<View> listPics = new ArrayList<>();
        ImageView img1 = new ImageView(mContext);
        img1.setBackgroundResource(R.drawable.banner1);
        listPics.add(img1);
        ImageView img2 = new ImageView(mContext);
        img2.setBackgroundResource(R.drawable.banner2);
        listPics.add(img2);
        ImageView img3 = new ImageView(mContext);
        img3.setBackgroundResource(R.drawable.banner3);
        listPics.add(img3);
        ImageView img4 = new ImageView(mContext);
        img4.setBackgroundResource(R.drawable.banner4);
        listPics.add(img4);
        ImageView img5 = new ImageView(mContext);
        img5.setBackgroundResource(R.drawable.banner4);
        listPics.add(0, img5);
        ImageView img0 = new ImageView(mContext);
        img0.setBackgroundResource(R.drawable.banner1);
        listPics.add(img0);
        //动态加入指示器
        indicators = new ImageView[listPics.size()];
        for(int i = 0; i < indicators.length; i++){
            indicator = new ImageView(mContext);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(15, 15);
            layoutParams.setMargins(0, 0, 10, 0);
            indicator.setLayoutParams(layoutParams);
            indicators[i] = indicator;
            if(i == 1){
                indicators[i].setBackgroundResource(R.drawable.shape_banner_checked);
            }else{
                indicators[i].setBackgroundResource(R.drawable.shape_banner_unchecked);
            }
            if(i == 0 || i == 5){
                indicators[i].setVisibility(View.INVISIBLE);
            }
            group.addView(indicators[i]);
        }
        viewPager.setAdapter(new MyPagerAdapter(listPics));
        index.incrementAndGet();
        // 轮播
        new Thread(new Runnable() {

            @Override
            public void run() {
                while (true){
                    if(isContinue){
                        handler.sendEmptyMessage(index.get());
                        whatOption();
                    }
                }
            }
        }).start();
    }

    private void initListener(){
        // 设置监听器
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                LogUtil.d(positionOffset + "-" + positionOffsetPixels);
                // 无缝滚动均滑
//                if(positionOffset == 0.0){
//                    LogUtil.d(position + "");
//                    if(position == 5) {
//                        viewPager.setCurrentItem(1, false);
//                    }
//                    if(position == 0) {
//                        viewPager.setCurrentItem(4, false);
//                    }
//                }
            }

            @Override
            public void onPageSelected(int position) {
                index.getAndSet(position);
                if(position == 5) {
                    viewPager.setCurrentItem(1, false);
                }
                if(position == 0) {
                    viewPager.setCurrentItem(4, false);
                }
                for(int i = 0; i < indicators.length; i++){
                    if(i == index.get()){
                        indicators[i].setBackgroundResource(R.drawable.shape_banner_checked);
                    }else{
                        indicators[i].setBackgroundResource(R.drawable.shape_banner_unchecked);
                    }
                }
                if(position == 0) indicators[4].setBackgroundResource(R.drawable.shape_banner_checked);
                if(position == 5) indicators[1].setBackgroundResource(R.drawable.shape_banner_checked);
            }

            @Override
            public void onPageScrollStateChanged(int state) {}
        });
        // 设置触摸时停止定时
        viewPager.setOnTouchListener(new View.OnTouchListener() {

            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                switch (motionEvent.getAction()){
                    case MotionEvent.ACTION_DOWN:
                        isContinue = false;
                        break;
                    case MotionEvent.ACTION_UP:
                        isContinue = true;
                        break;
                }
                return false;
            }
        });
    }

    class MyPagerAdapter extends PagerAdapter {

        private List<View> listView;

        @Override
        public int getCount() {
            return listView.size();
        }

        public MyPagerAdapter(List<View> listView){
            this.listView = listView;
        }

        @Override
        public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
            return view == object;
        }

        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {
            container.addView(listView.get(position));
            return listView.get(position);
        }

        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
            container.removeView(listView.get(position));
        }
    }

    private void whatOption(){
        index.incrementAndGet();
        if(index.get() > indicators.length - 2){
            index.getAndAdd(-4);
        }
        try {
            Thread.sleep(3000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }
}

layout_banner


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="Http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <com.coral3.common_module.viewPager.ChildViewPager
            android:id="@+id/view_banners"
            android:layout_width="match_parent"
            android:layout_height="200dp"/>
        <LinearLayout
            android:id="@+id/view_indicators"
            android:layout_below="@+id/view_banners"
            android:gravity="center"
            android:layout_marginTop="-15dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" />
    </RelativeLayout>
</LinearLayout>

ChildViewPager


package com.coral3.common_module.viewPager;

import android.content.Context;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.view.MotionEvent;
import androidx.viewpager.widget.ViewPager;

public class ChildViewPager extends ViewPager {
    
    PointF downP = new PointF();
    
    PointF curP = new PointF();
    public ChildViewPager(Context context) {
        super(context);
    }

    public ChildViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    private static final String TAG = "ChildViewpager";
    @Override
    public boolean onTouchEvent(MotionEvent arg0) {
        //每次进行onTouch事件都记录当前的按下的坐标
        if(getChildCount()<=1)
        {
            return super.onTouchEvent(arg0);
        }
        curP.x = arg0.getX();
        curP.y = arg0.getY();

        if(arg0.getAction() == MotionEvent.ACTION_DOWN)
        {

            //记录按下时候的坐标
            //切记不可用 downP = curP ,这样在改变curP的时候,downP也会改变
            downP.x = arg0.getX();
            downP.y = arg0.getY();
            //此句代码是为了通知他的父ViewPager现在进行的是本控件的操作,不要对我的操作进行干扰
            getParent().requestDisallowInterceptTouchEvent(true);
        }

        if(arg0.getAction() == MotionEvent.ACTION_MOVE){
            //此句代码是为了通知他的父ViewPager现在进行的是本控件的操作,不要对我的操作进行干扰
            getParent().requestDisallowInterceptTouchEvent(true);
        }

        if(arg0.getAction() == MotionEvent.ACTION_UP || arg0.getAction() == MotionEvent.ACTION_CANCEL){
            //在up时判断是否按下和松手的坐标为一个点
            //如果是一个点,将执行点击事件,这是我自己写的点击事件,而不是onclick
            getParent().requestDisallowInterceptTouchEvent(false);
            if(downP.x==curP.x && downP.y==curP.y){
                return true;
            }
        }
        super.onTouchEvent(arg0); //注意这句不能 return super.onTouchEvent(arg0); 否则触发parent滑动
        return true;
    }
}

使用


<com.coral3.common_module.components.BannerLayout
            android:id="@+id/home_banner"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: android轮播图组件的制作方法

本文链接: https://lsjlt.com/news/133068.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • android轮播图组件的制作方法
    本文实例为大家分享了android轮播图组件的制作方法,供大家参考,具体内容如下 BannerLayout package com.coral3.common_module.co...
    99+
    2024-04-02
  • js实现轮播图制作方法
    本文实例为大家分享了js实现轮播图展示的具体代码,供大家参考,具体内容如下 效果如图所示 代码如下: <!DOCTYPE html> <html> &...
    99+
    2024-04-02
  • vue3封装轮播图组件的方法
    目的 封装轮播图组件,直接使用,具体内容如下 大致步骤 准备my-carousel组件基础布局,全局注册 准备home-banner组件,使用my-carousel...
    99+
    2024-04-02
  • js原生轮播图插件制作
    本文实例为大家分享了js原生轮播图插件制作的具体代码,供大家参考,具体内容如下 调用时也只需要写一个DIV即可 调用的js部分配置内容: 传入轮播图需显示的位置(div) 传入图...
    99+
    2024-04-02
  • js制作轮播图效果
    轮播图在前端开发中我认为是一个比较重要的点,因为包含了很多原生js知识点,以下是我学习制作轮播图的过程 难点: 1、如何让底下圆圈和图片所对应自动动态生成 2、如何让底下圆圈和图片所...
    99+
    2024-04-02
  • uniapp vue与nvue轮播图之轮播图组件的示例代码
    vue部分如下: <template> <view class=""> <!-- 轮播图组件 --> <swiper :ind...
    99+
    2024-04-02
  • android轮播图实现的方法是什么
    Android中轮播图的实现方法一般有以下几种: 使用ViewPager:ViewPager是Android提供的用于实现滑动切...
    99+
    2024-02-29
    android
  • Vue使用Swiper封装轮播图组件的方法详解
    目录Swiper为什么要封装组件开始封装1.下载安装Swiper2.引入css样式文件3.引入js文件4.把官网使用方法中的HTML结构复制粘贴过来5.初始化Swiper自定义效果完...
    99+
    2024-04-02
  • 使用CSS3怎么制作轮播图
    这期内容当中小编将会给大家带来有关使用CSS3怎么制作轮播图,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。<style>    *{margin:0;p...
    99+
    2023-06-08
  • JavaScript制作轮播图的的示例代码
    这篇文章主要介绍了JavaScript制作轮播图的的示例代码,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下<!DOCTYP...
    99+
    2024-04-02
  • Vue实现轮播图组件的封装
    目录轮播图功能-获取数据轮播图-通用轮播图组件轮播图-数据渲染轮播图-逻辑封装轮播图功能-获取数据 目标: 基于pinia获取轮播图数据 核心代码: (1)在types/data.d...
    99+
    2023-05-16
    Vue轮播图组件封装 Vue组件封装
  • 怎么使用vue轮播组件vue-awesome-swiper实现轮播图
    这篇文章主要讲解了“怎么使用vue轮播组件vue-awesome-swiper实现轮播图”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么使用vue轮播组件vue-awesome-swipe...
    99+
    2023-07-04
  • Android实现图片轮播效果的两种方法
    大家在使用APP的过程中,经常会看到上部banner图片轮播的效果,那么今天我们就一起来学习一下,android中图片轮询的几种实现方法: 第一种:使用动画的方法实现:(代码繁...
    99+
    2022-06-06
    方法 图片 轮播 Android
  • Vue实现可复用轮播组件的方法
    本文用vue简单的实现了一个轮播图的基础功能,并抽离出来作为一个公共组件,方便复用 html和js部分 <template>   <div     class="i...
    99+
    2024-04-02
  • 微信小程序swiper轮播图组件使用方法详解
    本文实例为大家分享了微信小程序swiper轮播图组件的使用,供大家参考,具体内容如下 在components中新建文件夹swiper components/swiper/swiper...
    99+
    2024-04-02
  • 基于vue.js轮播组件vue-awesome-swiper实现轮播图的示例分析
    这篇文章主要为大家展示了“基于vue.js轮播组件vue-awesome-swiper实现轮播图的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“基于vu...
    99+
    2024-04-02
  • css实现图片轮播的方法
    这篇文章主要介绍css实现图片轮播的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!css的选择器有哪些css的选择器可以分为三大类,即id选择器、class选择器、标签选择器。它们之间可以有多种组合,有后代选择器...
    99+
    2023-06-14
  • Android使用Recyclerview实现图片轮播效果的方法
    这篇文章将为大家详细讲解有关Android使用Recyclerview实现图片轮播效果的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。效果图:思路:准备m张图片使用Recyclerview实现,返回无...
    99+
    2023-05-30
    android recyclerview 滚动效果
  • JavaScript滚动轮播图制作原理详解
    本文实例为大家分享了JavaScript滚动轮播图制作原理,供大家参考,具体内容如下 滚动轮播图 滚动轮播图布局关键:是所有图片并排在一起,所以unit的宽要足够宽。克隆第一张图片追...
    99+
    2024-04-02
  • CSS3如何制作轮播图切割效果
    这篇文章主要介绍CSS3如何制作轮播图切割效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!<!DOCTYPE html><html lang="en&q...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作