美文网首页android样式主题合集高级UIAndroid项目源码
viewpager实现背景渐变(Android中palette的

viewpager实现背景渐变(Android中palette的

作者: 爱你为你做饭 | 来源:发表于2019-08-20 11:57 被阅读10次

    声明:文章中部分图片和代码来自于参考文章(为了节省时间),对文章作者表示感谢,如不方便可联系删除


    效果展示

    1. palette的介绍及其使用记录

      * palette的介绍

          palette是Android系统提供的一个工具类,使用该类接受一个bitmap,利用其内部封装的算法可以获取到一系列的颜色值或者获取一个颜色列表,通过自定义算法获取到需要的颜色值。系统封装的颜色值包括:
           * Vibrant(充满活力的)
           * Vibrant dark(充满活力的黑)
           * Vibrant light(充满活力的亮)
           * Muted(柔和的)
           * Muted dark(柔和的黑)
           * Muted lighr(柔和的亮)


    颜色图片整理

      * palette的使用

          palette官方api提供了两种使用方式:同步和异步,根据使用场景做出不同的选择(这个操作是比较耗时操作,通常建议异步处理),使用方式如下代码所示:

       // Synchronous
        Palette p = Palette.from(bitmap).generate();
    
        // Asynchronous
         Palette.from(bitmap).generate(new PaletteAsyncListener() {
         public void onGenerated(Palette p) {
            // Use generated instance
         }
         });
    
    
    
        使用的时候引入 
    
        compile 'com.android.support:palette-v7:22.2.0'
    
    
        使采用异步方式进行引用
            Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {   
            @Override
            public void onGenerated(Palette palette) {      
                Palette.Swatch swatch = palette.getMutedSwatch();
          //Palette.Swatch swatch = palette.getVibrantSwatch();
          //Palette.Swatch swatch = palette.getDarkMutedSwatch();
          //Palette.Swatch swatch = palette.getDarkVibrantSwatch();
          //Palette.Swatch swatch = palette.getLightMutedSwatch();
          //Palette.Swatch swatch = palette.getLightVibrantSwatch();
                if (swatch != null) {
                    view.setBackgroundColor(swatch.getRgb());
                } else {
                    Log.e("smallsoho", "swatch为空");
                }
            }
        });
    

    需要注意的是,针对glide图片框架的使用,palette有很多三方集成控件,集成后可以在glide加载的同时使用很方便。

    2. viewpager实现背景渐变效果

      * viewpager的滑动事件监听

    ViewPager viewPager = null;
    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                /**
                 * viewpager页面滚动实时监听回调方法
                 * @param position 页签[0 ~ 3] 当前页面标号,向左滑动上一个页面 向右滑动 下一个页面
                 * @param positionOffset 页百分比偏移[0F ~ 1F]
                 * @param positionOffsetPixels 页像素偏移[0 ~ ViewPager的宽度]
                 */
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
                }
    
                @Override
                public void onPageSelected(int i) {
    
                }
    
                @Override
                public void onPageScrollStateChanged(int i) {
    
                }
            });
    

    如上代码所示:viewpager提供了页面改变监听中可以实时监听滚动,并提供了当前滑动便宜量(页面百分比和整个宽度像素偏移量,通常前一个使用量比较多),通常viewpager的滑动动画和背景切换(涉及到页面切换逻辑)都依赖于这个监听回调

      * viewpager的滑动实现背景渐变

          viewpager实现页面滑动背景渐变还离不开另一个工具类argbevaluator,这个工具类可以接受两个颜色值和一个偏移量(0到1)实现这两个颜色值之间的一个颜色,利用这个特性可以获取两个颜色值之间渐变颜色。实现代码如下:

    mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        /**
         * ViewPager滑动回调方法
         * @param position 页签[0 ~ 3]
         * @param positionOffset 页百分比偏移[0F ~ 1F]
         * @param positionOffsetPixels 页像素偏移[0 ~ ViewPager的宽度]
         */
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            ArgbEvaluator evaluator = new ArgbEvaluator(); // ARGB求值器
            int evaluate = 0x00FFFFFF; // 初始默认颜色(透明白)
            if (position == 0) {
                // 根据positionOffset和第0页~第1页的颜色转换范围取颜色值
                evaluate = (Integer) evaluator.evaluate(positionOffset, 0XFFFF8080, 0XFFFFBC00); 
            }else if(position == 1){
                // 根据positionOffset和第1页~第2页的颜色转换范围取颜色值
                evaluate = (Integer) evaluator.evaluate(positionOffset, 0XFFFFBC00, 0XFF199AFE); 
            } else if(position == 2){
                // 根据positionOffset和第2页~第3页的颜色转换范围取颜色值
                evaluate = (Integer) evaluator.evaluate(positionOffset, 0XFF199AFE, 0XFF00AB96); 
            } else{
                evaluate = 0XFF00AB96; // 最终第3页的颜色
            }
            // 为ViewPager的父容器设置背景色
            ((View)mViewPager.getParent()).setBackgroundColor(evaluate); 
        }
    
        @Override
        public void onPageSelected(int position) {
    
        }
    
        @Override
        public void onPageScrollStateChanged(int state) {
    
        }
    });
    

    文章参考

    palette的使用
    viewpager实现背景渐变
    Picasso图片框架palette三方组件

    相关文章

      网友评论

        本文标题:viewpager实现背景渐变(Android中palette的

        本文链接:https://www.haomeiwen.com/subject/qauusctx.html