随手指拖动而变色的ScrollView

参考

关于view的概述

效果描述

在一个可以上下滚动的scrollview，当某一个新View出现时，随着它出现高度的增加而不断改变背影色。如下：



最下面一个view会随着手指的移动由红色逐渐变成蓝色。

原理

在ScrollView滑动的过程中，会不断地调用onScrollChanged()，从而可以判断出某个显示的百分比，由该百分比计算出当前应该显示的背影色。简单点说，我们只需要自定义一个ScrollView，重写其中的onScrollChanged()即可。

代码

public class CustomLinearLayout extends ScrollView{
private ArgbEvaluator mEvaluator;
private ViewGroup mContainer;
public CustomLinearLayout(Context context) {
super(context);
}

public CustomLinearLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}

public CustomLinearLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}

@Override
protected void onFinishInflate() {//在这里获取ScrollView下的子View
super.onFinishInflate();
mContainer = (ViewGroup)getChildAt(0);
mEvaluator = new ArgbEvaluator();
}

@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
for(int x= 0;x<mContainer.getChildCount();x++) {
View child = mContainer.getChildAt(x);
if (child.getTop() <= t + getHeight() && child.getBottom() >= t + getHeight()) {
float fraction = (t + getHeight() - child.getTop()) / (float) child.getHeight();
child.setBackgroundColor((Integer) mEvaluator.evaluate(fraction, Color.RED, Color.BLUE));
}else{
child.setBackgroundColor(Color.BLUE);
}
}
}
private void log(String content){
Log.e("TAG",content);
}
}

在onScrollChanged()中，会不断地判断当前的View的背影是否应该进行变化。

设置背景色时，是通过ArgbEvaluator()进行计算的，这是系统提供的一个工具类，在属性动画中常用到。

与LayoutParams结合

与LayoutParams结合后，可以将上面的动画直接在子View中配置，就像相对布局的子view可以配置centerInParent属性一样。由于需要配置给子view，所以需要定义一个ViewGroup，用作ScrollView的子View；并且在该ViewGroup中自定义LayoutParams，保证它的子View关联的LayoutParams中有自定义的属性。
首先自定义LayoutParams的属性：

<resources>
<declare-styleable name="MyLinearLayout_LayoutParams">
<attr name="layout_animator">
<flag name="translate" value="0x2" />
<flag name="alpha" value="0x1"/>
</attr>
</declare-styleable>
</resources>

上面自定义属性时使用flag标签，因为这些属性在使用时可以通过"|"进行连接。在自定义控件中获取这些属性

//本类继承于LinearLayout，构造方法略
@Override
public LinearLayout.LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MyLayoutParams(getContext(), attrs);
}

public static class MyLayoutParams extends LinearLayout.LayoutParams{
int animatorType;
public static final int TYPE_ALPHA = 0x1;
public static final int TYPE_TRANSLATE = 0x2;
public MyLayoutParams(Context c,AttributeSet set){
super(c,set);
//加载对应的LayoutParams参数
TypedArray array = c.obtainStyledAttributes(set, R.styleable.MyLinearLayout_LayoutParams);
for(int x = 0;x<array.getIndexCount();x++){
int index = array.getIndex(x);
switch (index){
case R.styleable.MyLinearLayout_LayoutParams_layout_animator:
animatorType = array.getInt(R.styleable.MyLinearLayout_LayoutParams_layout_animator,0);
break;
}
}
array.recycle();
}
}

这样，一个含有自定义LayoutParams的自定义控件就完成了。在xml布局时，该控件的所有子View都可以使用自定义的layout_animator属性。
在将ScrllView中的onScrollChanged修改如下：

@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
for (int x = 0; x < mContainer.getChildCount(); x++) {
View child = mContainer.getChildAt(x);//mContainer便是上面自定义的LinearLayout
//获取mContainer的各个子View的LayoutParames，并强转成自定义的MyLayoutParams，因为只
//有MyLayoutParams中才有自定义的layout_animator属性
MyLayoutParams params = (MyLayoutParams) child.getLayoutParams();
if (child.getTop() <= t + getHeight() && child.getBottom() >= t + getHeight()) {
float fraction = (t + getHeight() - child.getTop()) / (float) child.getHeight();
//判断有没有该声明该类型的动画，如果有就进行相应的操作
if ((params.animatorType & MyLayoutParams.TYPE_ALPHA) == MyLayoutParams.TYPE_ALPHA) {
child.setBackgroundColor((Integer) mEvaluator.evaluate(fraction, Color.RED, Color.BLUE));
}
if ((params.animatorType & MyLayoutParams.TYPE_TRANSLATE) == MyLayoutParams.TYPE_TRANSLATE) {
child.setTranslationX((fraction - 1) * child.getRight());
}
} else {
child.setBackgroundColor(Color.BLUE);
}
}
}

如此一套自定义的效果便完成了。使用如下：

<ImageView
demo:layout_animator="translate|alpha"
android:layout_width="wrap_content"
android:src="@mipmap/ic_launcher"
android:layout_height="100dp" />
<ImageView
demo:layout_animator="translate"
android:layout_width="wrap_content"
android:src="@mipmap/ic_launcher"
android:layout_height="100dp" />
<ImageView
android:layout_width="wrap_content"
android:src="@mipmap/ic_launcher"
android:layout_height="100dp" />
<ImageView
demo:layout_animator="alpha"
android:layout_width="wrap_content"
android:src="@mipmap/ic_launcher"
android:layout_height="100dp" />
<ImageView
android:layout_width="wrap_content"
android:src="@mipmap/ic_launcher"
android:layout_height="100dp" />
</com.example.hufeng.demo.MyLinearLayout>
</com.example.hufeng.demo.CustomLinearLayout>

布局中前面一部分被省略了。