Android实现图片自动切换功能(实例代码详解)

在Android中图片的自动切换不仅可以实现自动切换,而且还可以使用手动切换。而且一般在切换的时候,在图片下方还带有其他内容的切换,用来标记是第几个图片的切换。

这种效果在我们日常生活中很常见,例如某宝购物,一些商城都可以使用到,用户体验度极好,今天小编就通过实例代码给大家分享android 图片自动切换功能的实现。

实现效果如下:

具体的示例代码如下:

布局代码:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
 android:layout_height="match_parent"
 android:layout_width="match_parent"
 android:orientation="vertical"
 xmlns:android="http://schemas.android.com/apk/res/android">
 <RelativeLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <FrameLayout
   android:layout_width="match_parent"
   android:layout_height="250dp"
   android:padding="20dp"
   android:orientation="vertical">
   <androidx.viewpager.widget.ViewPager
    android:id="@+id/viewContent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
   <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="25dp"
    android:orientation="horizontal"
    android:layout_gravity="bottom"
    android:gravity="center"
    android:layout_marginTop="5dp"
    android:background="#E6E6E6">
    <View
     android:id="@+id/p1"
     android:layout_width="5dp"
     android:layout_height="5dp"
     android:layout_marginLeft="2dp"
     android:layout_marginRight="2dp"
     android:background="@drawable/dot_focus"/>
    <View
     android:id="@+id/p2"
     android:layout_width="5dp"
     android:layout_height="5dp"
     android:layout_marginLeft="2dp"
     android:layout_marginRight="2dp"
     android:background="@drawable/dot_normal"/>
    <View
     android:id="@+id/p3"
     android:layout_width="5dp"
     android:layout_height="5dp"
     android:layout_marginLeft="2dp"
     android:layout_marginRight="2dp"
     android:background="@drawable/dot_normal"/>
   </LinearLayout>
  </FrameLayout>
 </RelativeLayout>
</ScrollView>

dot_focus.xml文件代码如下:

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval"
 xmlns:android="http://schemas.android.com/apk/res/android">
 <corners android:radius="5dp"/>
 <solid android:color="@color/white"/>
</shape>

dot_normal.xml文件代码如下:

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval"
 xmlns:android="http://schemas.android.com/apk/res/android">
 <corners android:radius="5dp"/>
 <solid android:color="@color/blue"/>
</shape>

Activity代码:

public class MainActivity extends AppCompatActivity {
 private ArrayList<ImageView> imageViews= new ArrayList<>();
 private ArrayList<View>dots=new ArrayList<>();
 private ViewPager vp;
 private int image[]={R.drawable.denglu,R.drawable.disanye,R.drawable.hhh};
 private int oldPosition=0;
 private int currentItem;
 private ScheduledExecutorService scheduledExecutorService;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  //获取图片资源
  for (int i=0;i<image.length;i++){
   ImageView imageView=new ImageView(this);
   imageView.setImageResource(image[i]);
   imageViews.add(imageView);
  }
  //显示的点的集合
  dots.add(findViewById(R.id.p1));
  dots.add(findViewById(R.id.p2));
  dots.add(findViewById(R.id.p3));

  vp=findViewById(R.id.viewContent);
  vp.setAdapter(new ViewPagerAdapter());
  vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
   @Override
   public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

   }

   @Override
   public void onPageSelected(int position) {
    //点的效果切换
    dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);
    dots.get(position).setBackgroundResource(R.drawable.dot_fouced);
    oldPosition=position;
    currentItem=position;
   }

   @Override
   public void onPageScrollStateChanged(int state) {

   }
  });
 }

 class ViewPagerAdapter extends PagerAdapter {
  @Override
  public int getCount() {
   return imageViews.size();
  }

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

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

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

 @Override
 protected void onStart() {
  super.onStart();
  scheduledExecutorService= Executors.newSingleThreadScheduledExecutor();
  scheduledExecutorService.scheduleWithFixedDelay(new ViewPagerTask(),2,2, TimeUnit.SECONDS);
 }
 class ViewPagerTask implements Runnable{

  @Override
  public void run() {
   currentItem=(currentItem+1)%image.length;
   handler.obtainMessage().sendToTarget();
  }
 }
 Handler handler=new Handler(){
  @Override
  public void handleMessage(@NonNull Message msg) {
   vp.setCurrentItem(currentItem);
  }
 };
}

总结

到此这篇关于Android实现图片自动切换功能的文章就介绍到这了,更多相关android 图片自动切换内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Android中ViewPager组件的基本用法及实现图片切换的示例

    ViewPager是android-support-v4.jar包里的组件.在布局文件里标签需要连包名一起 写全称<android.support.v4.view.ViewPager /> 基本用法 ViewPager的基本用法我概括为三步 第一步 在主布局文件里放一个ViewPager组件 第二步 为每个页面建立布局文件,把界面写好 第三步 在主Activity里获取ViewPager组件,并为它设定Adapter. Adapter详细讲讲,ViewPager对应的Adapter继承自Pag

  • Android应用中图片浏览时实现自动切换功能的方法详解

    先给最终效果图: 当我们在最下边的gallery中切换图片时,上面的大图片会自动切换,切换时有动画效果哦,很简单的一个程序,有待完善更多的功能! activity代码: package cn.com.chenzheng_java; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.view.View; import android.view.V

  • Android 图片切换器(dp、sp、px) 的单位转换器

    Android 图片切换器 这几天一直在整理组件想留着以后使用.还是一点一点整理吧.今天把上周整理的 ImageSwitcher 和单位转换器(dp/sp/px). 下面上内容 ImageSwitcher: 图像查看器,好像是老组件了,今天先更一个基础的组件,后期如果有时间继续扩展. 那么图像查看器,就是和 Windows 系统下的图片查看器比较类似.自带上一张和下一张的功能. 这个组件有以下几个特点,本人感觉: 1.该组件属于容器性质; 2.ImageSwitcher 本身继承了 FrameL

  • Android开发之使用ViewPager实现图片左右滑动切换效果

    Android中图片的左右切换随处可见,今天我也试着查阅资料试着做了一下,挺简单的一个小Demo,却也发现了一些问题,话不多说,上代码~: 使用了3个xml文件作为ViewPager的滑动page,布局都是相同的,如下只展示其中之一: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/

  • Android编程单击图片实现切换效果的方法

    本文实例讲述了Android编程单击图片实现切换效果的方法.分享给大家供大家参考,具体如下: 新建一个Android项目,命名为FrameLayout 此实例主要操作src文件夹下的MainActivity.Java类文件和res/layout下的activity_main.xml布局文件 1.布局主页面代码activity_main.xml↓ <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android&qu

  • Android编程实现图片背景渐变切换与图层叠加效果

    本文实例讲述了Android编程实现图片背景渐变切换与图层叠加效果.分享给大家供大家参考,具体如下: 本例要实现的目的: 1.图片背景渐变的切换,例如渐变的从红色切换成绿色. 2.代码中进行图层叠加,即把多个Drawable叠加在一起显示在一个组件之上. 效果图: 代码很简单: (1)布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="

  • Android基于ImageSwitcher实现图片切换功能

    左右切换图片控件大家都用ViewPager, ViewFipper比较多吧,我之前也用ViewPager实现了,使用ViewPager实现左右循环滑动图片,有兴趣的可以去看下,今天介绍的是基于ImageSwitcher实现的左右切换图片,先上截图吧 好了,接下来来看代码吧,第一张图是一个GridView,点击item跳转到第二个界面,第一个界面可以忽略,主要是讲解ImageSwitcher的左右却换图片,先看布局文件 <?xml version="1.0" encoding=&q

  • Android实现图片轮播切换实例代码

    利用Android的ViewFlipper和AnimationUtils实现图片带有动画的轮播切换,其中当点击"上一张"图片时,切换到上一张图片:当点击"下一张"图片时,切换到下一张图片.其效果图如下: 设置布局文件,其内容如下: activity_image_flipper_shade.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xm

  • Android实现图片自动切换功能(实例代码详解)

    在Android中图片的自动切换不仅可以实现自动切换,而且还可以使用手动切换.而且一般在切换的时候,在图片下方还带有其他内容的切换,用来标记是第几个图片的切换. 这种效果在我们日常生活中很常见,例如某宝购物,一些商城都可以使用到,用户体验度极好,今天小编就通过实例代码给大家分享android 图片自动切换功能的实现. 实现效果如下: 具体的示例代码如下: 布局代码: <?xml version="1.0" encoding="utf-8"?> <S

  • 微信小程序中的列表切换功能实例代码详解

    感觉这列表切换有点类似于轮播图,而且感觉这代码直接可以拿来用,稍微改一改样式什么的就OK了,列表切换也是用到的地方也很多 wxml中的代码如下: <!-- 标签页面标题 --> <view class="tab"> <view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐<

  • BootstrapTable加载按钮功能实例代码详解

    1      html <!--工具栏--> <div id="toolbar" class="btn-group"> <div style="float:left;margin-right: 10px"> <button class="btn btn-danger"onclick="openModal('add',0,'')">增加</button&g

  • Android 倒计时控件 CountDownView的实例代码详解

    一个精简可自定义的倒计时控件,使用 Canvas.drawArc() 绘制.实现了应用开屏页的圆环扫过的进度条效果. 代码见https://github.com/hanjx-dut/CountDownView 使用 allprojects { repositories { ... maven { url 'https://jitpack.io' } } } dependencies { implementation 'com.github.hanjx-dut:CountDownView:1.1'

  • Android自定义指示器时间轴效果实例代码详解

    指示器时间轴在外卖.购物类的APP里会经常用到,效果大概就像下面这样,看了网上很多文章,大都是自己绘制,太麻烦,其实通过ListView就可以实现. 在Activity关联的布局文件activity_main.xml中放置一个ListView,代码如下.由于这个列表只是用于展示信息,并不需要用户去点击,所以将其clickable属性置为false:为了消除ListView点击产生的波纹效果,我们设置其listSelector属性的值为透明:我们不需要列表项之间的分割线,所以设置其divider属

  • Android图片采样缩放功能实例代码

    为什么要对Android中的图片进行采样缩放呢? 是为了更加高效的加载Bitmap.假设通过imageView来显示图片,很多时候ImageView并没有图片的原始尺寸那么大,这时候把整张图片加载进来后再设给ImageView是没有必要的,因为ImagView并没有办法显示原始的图片. 所以我们可以使用BitmapFactory.Options按照一定的采样率加载缩小后的图片,将缩小后的图片在ImageView中显示,这样就能降低内存占用,在一定程度上避免OOM,提高bitma加载时候的性能.

  • JavaScript实现简单的图片切换功能(实例代码)

    代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片切换</title> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 300px; margin: 50px auto; padding: 20p

  • input file上传 图片预览功能实例代码

    input file上传图片预览其实很简单,只是没做过的感觉很神奇,今天我就扒下她神秘的面纱,其实原理真的很简单,下面通过一段代码大家都明白了. 具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="jquery.js"></script>

  • Android 百度地图POI搜索功能实例代码

    在没介绍正文之前先给大家说下poi是什么意思. 由于工作的关系,经常在文件中会看到POI这三个字母的缩写,但是一直对POI的概念和含义没有很详细的去研究其背后代表的意思.今天下班之前,又看到了POI这三个字母,决定认认真真的搜索一些POI具体的含义. POI是英文的缩写,原来的单词是point of interest, 直译成中文就是兴趣点的意思.兴趣点这个词最早来自于导航地图厂商.地图厂商为了提供尽可能多的位置信息,花费了很大的精力去寻找诸如加油站,餐馆,酒店,景点等目的地,这些目的地其实都可

随机推荐