广告
返回顶部
首页 > 资讯 > 移动开发 >ViewPager实现图片切换效果
  • 832
分享到

ViewPager实现图片切换效果

2024-04-02 19:04:59 832人浏览 独家记忆
摘要

本文实例为大家分享了ViewPager实现图片切换效果的具体代码,供大家参考,具体内容如下 xml布局: <RelativeLayout         Android:lay

本文实例为大家分享了ViewPager实现图片切换效果的具体代码,供大家参考,具体内容如下

xml布局:

<RelativeLayout
        Android:layout_width="match_parent"
        android:layout_height="260dp">
        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:background="#000"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <LinearLayout
            android:id="@+id/layout_point"
            android:background="#00000000"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:orientation="horizontal"
            android:layout_marginBottom="40dp"
            android:layout_alignParentBottom="true"/>
</RelativeLayout>

activity代码:

import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import com.bumptech.glide.Glide;
import com.example.uoso.myapplicationdemo.R;

import java.text.SimpleDateFORMat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;


public class Fragment2 extends Fragment{

    private ViewPager viewPager;
    private LinearLayout layoutPoint;
    private String[] imgs = {"1图片url"
            ,"2图片url",
            "3图片url"};

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment2, null);
        viewPager = (ViewPager) view.findViewById(R.id.view_pager);
        layoutPoint = (LinearLayout) view.findViewById(R.id.layout_point);       
        initView();
        return view;
    }

    private void initView(){        
        //ViewPager相关
        ViewPagerAdater myAdater = new ViewPagerAdater(getContext());
        viewPager.setAdapter(myAdater);
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //在滑动完成后向布局中添加小圆点
                setLayoutPoint(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        setLayoutPoint(0);
    }

    
    private void setLayoutPoint(int position){
        layoutPoint.removeAllViews();
        for (int i = 0; i <3 ; i++) {
            ImageView imageView = new ImageView(getContext());
            //设置ImageView
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20, 20);
            params.setMargins(10,0,10,0);
            imageView.setLayoutParams(params);
            //设置小圆点样式
            if (position==i){
                imageView.setImageDrawable(getResources().getDrawable(R.drawable.point_white));
            }else {
                imageView.setImageDrawable(getResources().getDrawable(R.drawable.point_gray));
            }
            layoutPoint.addView(imageView);
        }
    }  

    public class ViewPagerAdater extends PagerAdapter {
        private Context context;

        public ViewPagerAdater(Context context) {
            this.context = context;
        }

        @Override
        public int getCount() {
            return imgs.length;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView imageView = new ImageView(context);
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            Glide.with(context).load(imgs[position]).into(imageView);
            container.addView(imageView);
            return imageView;
        }

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

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


}

小圆点样式:

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

Glide依赖:

compile 'com.GitHub.bumptech.glide:glide:3.7.0'

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

--结束END--

本文标题: ViewPager实现图片切换效果

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

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • ViewPager实现图片切换效果
    本文实例为大家分享了ViewPager实现图片切换效果的具体代码,供大家参考,具体内容如下 xml布局: <RelativeLayout         android:lay...
    99+
    2022-11-13
  • Android自定义ViewPager实现个性化的图片切换效果
    第一次见到ViewPager这个控件,瞬间爱不释手,做东西的主界面通通ViewPager,以及图片切换也抛弃了ImageSwitch之类的,开始让ViewPager来做。时间长...
    99+
    2022-06-06
    图片 viewpager Android
  • vue实现图片切换效果
    本文实例为大家分享了vue实现图片切换效果的具体代码,供大家参考,具体内容如下 1)v-if/v-show 二者都可以实现让元素隐藏和显示。但是实现原理不同: v-if 是通过将元素...
    99+
    2022-11-12
  • Android ViewPager实现动画切换效果
    概述 ViewPager是Android开发中使用场景非常频繁的控件,单一的动画效果切换已经越来越不能满足追求个性化的应用中。而ViewPager自身也带有一个接口来处理页面间...
    99+
    2022-06-06
    viewpager 动画 Android
  • Android开发之使用ViewPager实现图片左右滑动切换效果
    Android中图片的左右切换随处可见,今天我也试着查阅资料试着做了一下,挺简单的一个小Demo,却也发现了一些问题,话不多说,上代码~: 使用了3个xml文件作为ViewPa...
    99+
    2022-06-06
    图片 viewpager android开发 Android
  • js实现图片数组中图片切换效果
    写一个图片切换的小案例,巩固一下setAttribute的用法。setAttribute()方法能够给dom元素添加属性并指定属性值,如果属性已经存在则更改属性值。 方法:将图片放入...
    99+
    2022-11-13
  • iOS实现图片自动切换效果
    本文实例为大家分享了iOS实现图片自动切换的具体代码,供大家参考,具体内容如下 #import "ViewController.h" #define ImageViewCount...
    99+
    2022-05-24
    iOS 图片切换
  • Vue实现简单图片切换效果
    本文实例为大家分享了Vue实现简单图片切换的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en">...
    99+
    2022-11-12
  • AndroidFlutter实现图片滑动切换效果
    目录前言SlideTransition 介绍示例效果实现总结前言 我们开始来介绍转换类的动画组件,实际上这类转换动画组件也可以自己通过 AnimatedBuilder&nb...
    99+
    2022-11-13
  • js实现图片轮播切换效果
    最近在b站上学习的时候,学到了一个用原生js实现图片轮播切换效果的实战,码下来收藏 上图是这个小实战的效果图,整个小实战所实现的功能是图片自动轮播切换、点击上下键图片切换上下图片、...
    99+
    2022-11-13
  • Android ViewPager实现图片轮翻效果
    很多App都有这种效果,特别一些电商类的App,顶部每隔几秒钟会向右翻页显示下张图片,用来作推广或者内容展示用的。今天来简单地模仿一下,还自带一个自动跳动的小功能(底部有几个小...
    99+
    2022-06-06
    图片 viewpager Android
  • Android ViewPager实现图片轮播效果
    在app中图片的轮播显示可以说是非常常见的实现效果了,其实现原理不过是利用ViewPager,然后利用handler每隔一定的时间将ViewPager的currentItem设...
    99+
    2022-06-06
    图片 viewpager 轮播 Android
  • JavaScript怎么实现流动图片切换效果
    这篇文章主要介绍“JavaScript怎么实现流动图片切换效果”,在日常操作中,相信很多人在JavaScript怎么实现流动图片切换效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大...
    99+
    2022-10-19
  • CSS3如何实现图片模糊切换效果
    这篇文章将为大家详细讲解有关CSS3如何实现图片模糊切换效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。  <!DOCTYPE html> &nb...
    99+
    2022-10-19
  • jQuery如何实现图片切换动画效果
    这篇文章主要为大家展示了“jQuery如何实现图片切换动画效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现图片切换动画效果”这篇文章吧。效...
    99+
    2022-10-19
  • 原生javascript实现图片轮播切换效果
    本文实例为大家分享了javascript实现图片轮播切换效果的具体代码,供大家参考,具体内容如下 效果如下: 代码部分: <!DOCTYPE html> <htm...
    99+
    2022-11-13
  • Android开发中ViewPager实现多页面切换效果
    ViewPager用于实现多页面的切换效果,该类存在于Google的兼容包里面,所以在引用时记得在BuilldPath中加入“Android-support-v4.jar” 首...
    99+
    2022-06-06
    viewpager android开发 Android
  • Android中TabLayout结合ViewPager实现页面切换效果
    先看看效果,如图: 1.因为TabLayout是Android Design Support Library官方库的一个控件,所以使用TabLayout时候需要先添加对该库的...
    99+
    2022-06-06
    tablayout viewpager Android
  • Unity Shader实现动态过场切换图片效果
    本文实例为大家分享了Unity Shader实现动态过场切换图片的具体代码,供大家参考,具体内容如下 一、简单介绍 Shader Language的发展方向是设计出在便携性方面可以和...
    99+
    2022-11-12
  • Android ViewPager加载图片效果
    目前项目中需要用到ViewPager加载图片,现在在此记录一下。 首先先看布局文件:activity_main.xml <?xml version="1.0"...
    99+
    2022-06-06
    图片 viewpager Android
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作