当前位置:主页 > android教程 > ViewPager图片切换效果

ViewPager实现图片切换效果

发布:2023-03-05 11:30:01 59


本站精选了一篇相关的编程文章,网友申思佳根据主题投稿了本篇教程内容,涉及到ViewPager、图片切换、ViewPager图片切换效果相关内容,已被559网友关注,相关难点技巧可以阅读下方的电子资料。

ViewPager图片切换效果

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

xml布局:


        
        

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;

/**
 * ViewPager显示图片
 */
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);
    }

    /**
     * 设置小圆点布局
     * @param position
     */
    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;
        }
    }


}

小圆点样式:



    
    

Glide依赖:

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

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


参考资料

相关文章

  • 使用ViewPager2实现简易轮播图效果

    发布:2023-03-04

    这篇文章主要为大家详细介绍了使用ViewPager2实现简易轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • 基于Viewpager2实现登录注册引导页面

    发布:2023-03-05

    这篇文章主要为大家详细介绍了基于Viewpager2实现登录注册引导页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • jQuery图片切换插件jquery.cycle.js实例效果

    发布:2020-02-10

    Cycle供了非常好的功能来帮助大家更简单的使用插件的幻灯功能,下面是它的一个非常不错的示例,大家可以学习下


  • Android开发之ViewPager实现滑动切换页面

    发布:2023-03-10

    这篇文章主要为大家详细介绍了Android开发之ViewPager实现滑动切换页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • Android性能优化之ViewPagers + Fragment缓存优化

    发布:2023-03-04

    这篇文章主要介绍了Android性能优化之ViewPagers+Fragment缓存优化,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下


  • TabLayout+ViewPager2的简单使用详解

    发布:2023-03-05

    这篇文章主要为大家详细介绍了TabLayout+ViewPager2的简单使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • ViewPager实现轮播图引导页

    发布:2023-03-05

    这篇文章主要为大家详细介绍了ViewPager实现轮播图引导页,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • 一个实用的图片切换支持点击切换和自动轮播

    发布:2022-06-28

    给大家整理了关于jquery的教程,这篇文章主要介绍了一个实用的图片切换支持点击切换和自动轮播,经测试效果相当不错,需要的朋友可以参考下


网友讨论