android轮播图组件的制作方法
本文实例为大家分享了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"/>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Android实现炫酷轮播图效果
轮播图的实现有很多种方式,早先我在网上看了下别人写的轮播图,感觉都比较的墨守成规,有的还有可能加载不了网络图片.所以我在这里自己重新写了下轮播图 ,方便日后的项目使用. 在下面的代码中,我也用volley封装了网络请求框架,异步加载网络图片,也可以给大家参考,非常实用. 效果图:这只是其中的一种效果 底层封装的我在下面会一一展示,先看下在MainActivity中怎样调取这个轮播控件 package com.wujie.advertisment.activity; import android.
-
Android自定义控件实现优雅的广告轮播图
前言 今天给大家带来一个新的控件–轮播图,网上已经有很多这类的博客来讲解如何实现的,那么我的这个有哪些特点呢?或是说有哪些不同呢? 满足了轮播图的基本要求,循环滑动,在最后一张切到第一张时可以平稳的过渡 简洁简洁简洁 扩展性强 如何使用 下面我们先展示两种效果图 1 默认效果 代码实现 //布局代码 <com.landptf.view.BannerM android:id="@+id/bm_banner" android:layout_width="match_pare
-
Android实现ViewPage轮播图效果
在android移动端的开发中,首页轮播图是一个特别常见的功能,所以今天就来将最近写的一个小demo记录一下. 首先当然是新建一个项目代码如下: activity_main.xml文件: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to
-
Android实现基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigureView控件
最近用到需要无限轮播自动播放的轮播轮播图,网上感觉都有这样那样的问题,于是自己写了一个通用的控件CarouselFigureView. 特点: 1.可以轮播view可以自己定义,不一定是要是ImageView2.指示器默认显示,但是可以隐藏3.可以设置指示器的颜色.间距.大小 4.有基础的可以自己修改代码改变指示器位置,这个应该不难5.可以自己开启和关闭自动轮播,开启轮播的时候可以设置轮播时间间隔,默认3000毫秒 我们先来看看效果图: 然后来看看使用代码 xml代码 <?xml version
-
Android自定义控件实现简单的轮播图控件
最近要做一个轮播图的效果,网上看了几篇文章,基本上都能找到实现,效果还挺不错,但是在写的时候感觉每次都要单独去重新在Activity里写一堆代码.于是自己封装了一下.本篇轮播图实现原理原文出处:循环广告位组件的实现,这里只是做了下封装成一个控件,不必每次重复写代码了. 效果图: 实现分析 轮播图的功能就是实现左右滑动的广告.图片信息展示,那我们就用ViewPager来实现,由于考虑到用户体验,我们还需要在下面加一个指示器来标示滑动到了第几张轮播图.指示器我们可以用一个线性布局来根据要展示的轮播图
-
Android开发实现的自动换图片、轮播图效果示例
本文实例讲述了Android开发实现的自动换图片.轮播图效果.分享给大家供大家参考,具体如下: 50行代码急速实现轮播图: 先看效果: 两个例子没太大区别, 不过i是布局文件中控件的Height不一样罢了这里一第二个为例: public class MainActivity extends Activity { int[] imageIds = new int[]{ R.drawable.a00,R.drawable.a01,R.drawable.a02,R.drawable.a3,R.draw
-
Android ViewPager实现轮播图效果
先上一张效果图: 说到ViewPager实现轮播图效果,那么肯定会用到PagerAdapter,下面先介绍下这个类. PagerAdapter简介 PagerAdapter是Android.support.v4包中的类,是一个抽象类,直接继承于Object,导入包android.support.v4.view.PagerAdapter即可使用. PagerAdapter主要是viewpager的适配器,而viewPager则也是在android.support.v4扩展包中新添加的一个强大的控件
-
Android如何使用RecyclerView打造首页轮播图
先看看效果图: 停在中间自动翻页 序言:最近接到一个任务,做一个类似上面自动翻页的功能.可以看到,这一屏中有三张图片显示出来了,有两张没有显示完全,看到设计图的时候第一反应是可以用viewpager来实现,但是任务却跟你开了一个天大的玩笑,要求是以最左边的图片为基准,也就是说,左边的图片也得显示完全,就像下图所示,后来仔细想想viewpager好像没有这样的功能,也有可能是我不知道,我也没有找到这样的文章或者信息,希望知道的简友私戳交流一下,感激不尽,好了,言归正传 停在左边 在开始之前呢,首先
-
Android实现轮播图片展示效果
本文实例为大家分享了Android轮播图片的展示,供大家参考,具体内容如下 实现逻辑 1.创建XML布局文件,使用ViewPager完成轮播图片 2.初始化ViewPager控件,然后为控件设置适配器,创建出来的适配器实现里面的四个方法 3.四个方法分别是getCount isViewFromObject instantiateItem destroyItem 4.在onCreat方法中,加载图片资源,将图片ID存在集合中,使图片能够在页面中显示,(图片之所以能够在页面中显示,是因为在适配器中的
-
Android使用viewpager实现自动无限轮播图
1.具体步骤 说下大概实现步骤,一般我们有两种,一种是viewpager+作为游标的点 .另外一种是重写viewpager. 效果图: 1.1 布局,直接viewpager+一个viewgroup就好. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android: