一、前言#
*本文是紧接着上文(奇思妙想之实用类ArgbEvaluator)写的。
在这简单回顾下,上文主要提到了一个叫做
ArgbEvaluator
的一个类,通过他可以灵活实现一些渐变色效果,虽然好像很少人感兴趣的样子~QAQ
所以,本文主要呈现上文所实现的三种效果,以及一些可能需要注意到的细节以免和我一样的小渣渣犯一样的错误将时间浪费在这些小问题上
小葵子~上代码!
喳哈哈,头一次我不墨迹是不是很激动
二、代码一:Viewpager滑动背景渐变色效果
效果图:
该效果是建立在
viewpager
滑动时,使得背景色渐变,于是乎,我们所利用的方法将是viewpager
的addOnPageChangeListener()
方法,在这里面通过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动态变化的背景色渐变
*国际老惯例规矩,效果图:
-
简单分析下:
效果图很清楚的表明了就是用户在输入时,其他控件的颜色随着输入长度动态的改变。
所以怎么实现呢?根据上面所说的,还是用到
ArgbEvaluator
的evaluate()
方法,只不过我们得理解起始和结束的概率。Viewpager
中的起始是当前页面,结束是下一个页面。那么EditText
呢?对的,长度,我们很容易就可以想到,长度为‘0’为开始点(当然也不一定是‘0’,只是感觉0好理解),然后给定个长度‘x’为结束点。
知道开始与结束的概率之后…
我特么就知道你已经猜到了!
得到用户当前输入后的长度 / 我们限定的总长度 = 输入所占的百分比。
对的,就是这个百分比,它是一个小数,和ArgbEvaluator
的evaluate()
方法中的第一个参数所匹配,我们只需要在EditText
的addTextChangedListener
监听中,设置起始点和结束点的颜色就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,我感觉我可以分三篇文章写,那样就可以赚好多好多赞和关注了~(>﹏<)。真是蠢了蠢了蠢了……
四、代码三:根据一天中的时间完成渐变效果!
*恩,国际惯例:
咳咳…国际惯例只是国际惯例,你是看不出效果的,那个,原因的话,你看上一篇文章吧。
-
思路分析:
根据一天中的时间变化背景,为什么会有这个想法呢,主要是在想所谓的夜间模式什么的如果自动化就完美了。即便实现不了,每个时间段有不同的颜色感觉也是蛮爽的嘛~
可是,我们怎么实现呢?这边,我们可能会想到开启个线程,然后,一直判断时间做比较,我就不说麻烦不麻烦吧,感觉上去性能也会差一大截。
那特么怎么搞?
可能我懒,我就查了下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);
}
}
*本文终~~~##
等了半天这三个字了吧哈哈哈
尾语
路人葵:愿能帮到有需要的朋友~希望我能和大家伙们共同进步,有想法可以多交流哈~~
喜欢就点个赞和关注吧~
有意见就评论里喷吧~