[android]so easy实现根据viewpager、edittext、时间使背景动态渐变色效果~


一、前言#

*本文是紧接着上文(奇思妙想之实用类ArgbEvaluator)写的。

在这简单回顾下,上文主要提到了一个叫做ArgbEvaluator的一个类,通过他可以灵活实现一些渐变色效果,虽然好像很少人感兴趣的样子~QAQ

所以,本文主要呈现上文所实现的三种效果,以及一些可能需要注意到的细节以免和我一样的小渣渣犯一样的错误将时间浪费在这些小问题上

小葵子~上代码!

哈哈,头一次我不墨迹是不是很激动

二、代码一:Viewpager滑动背景渐变色效果

效果图:

滑动变色.gif

该效果是建立在viewpager滑动时,使得背景色渐变,于是乎,我们所利用的方法将是viewpageraddOnPageChangeListener()方法,在这里面通过ArgbEvaluator获取到不同位置的渐变色然后设置给所需要的控件。这就只贴

具体代码如下:

  • 麻烦先实现viewpager,以及声明需要渐变的几种颜色,还有就是背景色需要改变的那个控件。要不然特么搞毛线。。。
//这是我三个页面分别用到的背景色
private int colors [] = {Color.RED,Color.BLUE,Color.GREEN};
//这个是喂一曰喂、呸一曰呸、嚼一曰嚼
private ViewPager viewPager;
//我这边是控制外面的这个布局背景色渐变
private LinearLayout main_ll;
  • 然后,咱在addOnPageChangeListener()监听中的onPageScrolled()方法中实现就好了。
//这是我声明的一个结束颜色,这样的话为了控制不管viewpager有几页都能不用写死结束色
 int endColor ;    

@Override            
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {                

        //得到 颜色 估值器
        ArgbEvaluator evaluator = new ArgbEvaluator();                 
        //给布局设置初始颜色
        main_ll.setBackgroundColor(colors[position]);                
        //计算不同页面的结束颜色,最后一张的颜色是第一个颜色,其他的分别加一
        endColor = position == colors.length-1 ? colors[0]:colors[position+1];                
        //根据positionOffset得到渐变色,因为positionOffset本身为0~1之间的小数所以无需多做处理了               
        int evaluate =evaluator.evaluate(positionOffset,colors[position],endColor);               

        //最后设置渐变背景色给布局
        main_ll.setBackgroundColor(evaluate);
   
}
Viewpager的滑动渐变色就实现了~哈哈,上文也提到是借鉴的是这个博客学习的:
http://blog.csdn.net/u011200844/article/details/44458395

接着就是小渣渣我自己脑袋瞎想的一些效果啦~


三、代码二:随着EditText动态变化的背景色渐变

*国际老惯例规矩,效果图:

输入框渐变.gif

  • 简单分析下:

效果图很清楚的表明了就是用户在输入时,其他控件的颜色随着输入长度动态的改变。
所以怎么实现呢?

根据上面所说的,还是用到ArgbEvaluatorevaluate()方法,只不过我们得理解起始和结束的概率。 Viewpager中的起始是当前页面,结束是下一个页面。那么EditText呢?对的,长度,我们很容易就可以想到,长度为‘0’为开始点(当然也不一定是‘0’,只是感觉0好理解),然后给定个长度‘x’为结束点。

知道开始与结束的概率之后…

我特么就知道你已经猜到了!
得到用户当前输入后的长度 / 我们限定的总长度 = 输入所占的百分比。
对的,就是这个百分比,它是一个小数,和 ArgbEvaluatorevaluate()方法中的第一个参数所匹配,我们只需要在EditTextaddTextChangedListener监听中,设置起始点和结束点的颜色就OK了~

好的!完美代码走起~Come baby~

  • 老套路~声明下需要的参数吧。
//定义了下控制颜色变化的长度,我这设了100,好展示。
private String decimalPlaces = "100";
//颜色取值我这就一段的变化,如果多段也还思路不变哈,就自己想办法控制下吧,哈哈,就是这么懒
private int colors[] ={Color.parseColor("#00aaee"),Color.parseColor("#00eeaa")};
//需要用到的控件,第二个是我想控制的背景色
private EditText editText;
private RelativeLayout rl;
  • 然后请在初始化时设置起始颜色
rl.setBackgroundColor(colors[0]);
  • 最后,核心代码贴起来~
@Override
public void afterTextChanged(Editable s) {   
      //得到它的长度 
      int editSize = editText.getText().length();
      //如果长度大于最大值就不变色了 
      if (editSize > Integer.valueOf(decimalPlaces))return;
      //得到 当前所占百分比的渐变值
      float result = (float)editSize/decimalPlaces;

      //颜色估值器
      ArgbEvaluator evaluator = new ArgbEvaluator();
      //得到背景渐变色
      int evaluate = evaluator.evaluate(result,colors[0],colors[1]);   
      rl.setBackgroundColor(evaluate);
}
*哈哈哈~是不是很简单!是不是so easy ~ 太特么简单,都不好意思贴出来了!我真是帅~

帅特么个大头鬼!去你丫的帅,这么写就出问题了!……为什么它喵的和想象中的不一样呀,颜色并没有渐变。

为毛呢?哎我去,逻辑问题?不对呀,逻辑上应该没错的。
最后一顿打印数据发现,float result = (float)editSize/decimalPlaces;这里出了问题,它只有一位小数位,四色五人后就没了渐变的效果了。

天啦噜,怎么办好呢。思索了几种解决方法,遇到了什么除不尽报错,拼接字符串出错什么的,最后得到了一个方法,就是BigDecimal类。估计很多老鸟都在笑话我了,不过渣渣我确实之前很少接触到这个类。

BigDecimal主要用于一些精确的计算。想了解的自己查资料吧,这不是本文重点,嗯哒,不是我懒…

  • 然后修改后的代码。
@Override
public void afterTextChanged(Editable s) {   
      //得到它的长度 
      int editSize = editText.getText().length();
      //如果长度大于最大值就不变色了 
      if (editSize > Integer.valueOf(decimalPlaces))return;
      //得到 当前所占百分比的渐变值
      BigDecimal bigEs= BigDecimal.valueOf(editSize);
      BigDecimal result = bigEs.divide(new BigDecimal(decimalPlaces), 8, RoundingMode.HALF_UP);
      

      //颜色估值器
      ArgbEvaluator evaluator = new ArgbEvaluator();
      //得到背景渐变色
      int evaluate = evaluator.evaluate(result.floatValue(),colors[0],colors[1]);   
      rl.setBackgroundColor(evaluate);
}
*好的EditText的渐变就好啦下面就来贴贴 根据一天中的时间完成渐变吧。握内个草草的QAQ,我感觉我可以分三篇文章写,那样就可以赚好多好多赞和关注了~(>﹏<)。真是蠢了蠢了蠢了……

四、代码三:根据一天中的时间完成渐变效果!

*恩,国际惯例:

时间渐变.gif

咳咳…国际惯例只是国际惯例,你是看不出效果的,那个,原因的话,你看上一篇文章吧。

  • 思路分析:

根据一天中的时间变化背景,为什么会有这个想法呢,主要是在想所谓的夜间模式什么的如果自动化就完美了。即便实现不了,每个时间段有不同的颜色感觉也是蛮爽的嘛~

可是,我们怎么实现呢?这边,我们可能会想到开启个线程,然后,一直判断时间做比较,我就不说麻烦不麻烦吧,感觉上去性能也会差一大截。
那特么怎么搞?

可能我懒,我就查了下android监听时间的变化,嘿还真有,嗯哼,利用自带的一个监听时间的广播

现在时间监听到了,功能怎么实现呢?

逻辑的话和上面的EditText思路一般。想想我们一天24个小时。
如果:
将当前的小时/24 = 一天时间所占百分比。
将当前分钟/60 = 一小时所占百分比。
于是,很自然的就想到了,在这么一个时间段控制变化。

说走咱就走呀~

*首先咱先实现广播的监听吧。

  • 新建一个类继承BroadcastReceiver.实现里面的方法,已经需要用到的参数。
public class TimeChangeReceive extends BroadcastReceiver{
      //这俩颜色纯属个人喜欢…
      private int colors[] ={Color.parseColor("#00aaee"),Color.parseColor("#00eeaa")};
      //需要改变背景色的view,想想我就直接丢这把
      private View mView;
    
      //无参构造函数,不写的话配置文件会报错
      public TimeChangeReceive() {}
      //有参,提供给acitivity传递用到的布局
      public TimeChangeReceive(View view) {    this.mView = view;}
 
      //接受广播方法
      @Override
      public void onReceive(Context context, Intent intent) {
     
            //接收传递过来的监听
            String action = intent.getAction();
           //如果时间改变则监听到时间
           if (Intent.ACTION_TIME_TICK.equals(action)){
                 ……这就等下贴吧。
           }
      }
 }

  • AndroidManifest.xml清单文件配置下广播。
<!-- 注册一个监听时间的广播接收者 -->
<receiver android:name=".myreceiver.TimeChangeReceive">    
       <intent-filter>     
       <action android:name="android.intent.action.TIME_TICK"></action>
       </intent-filter>
</receiver>
  • Activity里注册下广播和初始化背景色,在onDestroy()记得注销广播。
//这个init()方法
public void init(){
      //得到 布局控件    
      time_rl = (RelativeLayout) findViewById(R.id.time_rl);    

      //颜色估值器 
      ArgbEvaluator evaluator = new ArgbEvaluator();
      /**
       *初始化背景颜色,得到当前时间所对应的渐变色,
       *(哦,对了,这里有个timeToFloat的方法等下贴吧,就是一个处理时间)  
       *颜色还是那俩颜色。
       */  
      int bgColor =evaluator.evaluate(
                                      TimeUtils.timeToFloat(Calendar.getInstance()),            
                                      colors[0], colors[1]);
      //设置背景 
      time_rl.setBackgroundColor(bgColor);    

       //new 一个 时间改变广播
       timeChangeReceive = new TimeChangeReceive(time_rl);  
       //广播过滤器  
       IntentFilter filter = new IntentFilter(Intent.ACTION_TIME_TICK);            
       //注册广播   
       registerReceiver(timeChangeReceive,filter);
 }

    //别忘了注销
   @Override
   protected void onDestroy() {   
       //取消监听  
       unregisterReceiver(timeChangeReceive);  
       super.onDestroy();
    }
  • 上面一段代码中提到的那啥啥啥玩意来着。TimeUtils.timeToFloat()方法。
//一个 通过将时间的分钟 转化为 0~1 的小数方法
 public static float timeToFloat(Calendar calendar){   
     //之前好像忘了说 divide是除法 
     BigDecimal time =new BigDecimal(calendar.get(Calendar.MINUTE))
                          .divide(new BigDecimal(60), 8, RoundingMode.HALF_UP); 

      return time.floatValue();
}
  • 最后欢呼声,呐喊声小伙伴们得掌声响起来吧最后一段代码!终于特么的要写完了QAQ,回到之前的广播的接收方法里面。
@Override
public void onReceive(Context context, Intent intent) {    
        //接收传递过来的监听  
       String action = intent.getAction();    
       //如果时间改变则监听到时间    
       if (Intent.ACTION_TIME_TICK.equals(action)){  
       //颜色估值器 
       ArgbEvaluator evaluator = new ArgbEvaluator();
             int bgColor =evaluator.evaluate(TimeUtils.timeToFloat(Calendar.getInstance()), colors[0], colors[1]);        
        mView.setBackgroundColor(bgColor); 
       }

}

*本文终~~~##

等了半天这三个字了吧哈哈哈

尾语

路人葵:愿能帮到有需要的朋友~希望我能和大家伙们共同进步,有想法可以多交流哈~~
喜欢就点个赞和关注吧~
有意见就评论里喷吧~
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容