*本篇文章已授权微信公众号 guolin_blog （郭霖）独家发布
1、最终效果
有木有发现还是很小清新的感觉
2、看整体效果这是一个scrollView，滑动时每个子view都有一个或多个动画效果，但是如果我们直接给每个子view加上动画去实现这个需求就太low了，而且也不利于扩展，所以这里将会设计一套框架，使别人能很方便的使用我们定义的控件。
3、首先看看我们是怎么使用自己设计的这个控件的
<scrollviewgroup.lly.com.scrollviewgroup.lib.DiscrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:discrollve="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<scrollviewgroup.lly.com.scrollviewgroup.lib.DiscrollViewContent
android:layout_width="match_parent"
android:layout_height="match_parent">
...
<ImageView
android:layout_width="300dp"
android:layout_height="180dp"
android:layout_gravity="center"
discrollve:discrollve_alpha="true"
discrollve:discrollve_translation="fromLeft|fromBottom"
android:src="@drawable/cheese1" />
...
</scrollviewgroup.lly.com.scrollviewgroup.lib.DiscrollViewContent>
</scrollviewgroup.lly.com.scrollviewgroup.lib.DiscrollView>看discrollve:discrollve_alpha="true"
discrollve:discrollve_translation="fromLeft|fromBottom"
这里我们给系统控件加上自定义属性，这样当别人用我们的控件，简直不要太爽。
不过大家有没有发现这是系统控件哎，你就这么随随便便的给它加个属性，它认识么 不报错你就谢天谢地了 还让它工作，想的美。
带着这个疑惑，我们先来看看系统的ViewGroup.java类是怎么做的。
一般我们在代码中给布局动态添加子控件的时候都会用到addView这个方法
这里我们就跟踪这个方法，最后发现他们会调用到ViewGroup的addview方法
public void addView(View child, int index) {
LayoutParams params = child.getLayoutParams();
if (params == null) {
params = generateDefaultLayoutParams();
if (params == null) {
throw new IllegalArgumentException("generateDefaultLayoutParams() cannot return null");
}
}
addView(child, index, params);
}有没有发现这里这里最后的params是怎么来的 不就是子控件的params么。
而addView(child, index, params); 最后会调用addViewInner
下面我们看下addViewInner是怎么做的
private void addViewInner(View child, int index, LayoutParams params,
boolean preventRequestLayout) {
...
if (!checkLayoutParams(params)) {
params = generateLayoutParams(params);
}
if (preventRequestLayout) {
child.mLayoutParams = params;
} else {
child.setLayoutParams(params);
}
...
addInArray(child, index);
// tell our children
if (preventRequestLayout) {
child.assignParent(this);
} else {
child.mParent = this;
}
...
onViewAdded(child);
...
}代码还是比较多的，只关注对我们有用的片段
首先它会调用checkLayoutParams(params)
protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
return p != null;
}如果不等于空就会调用就调用generateLayoutParams
protected LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) {
return p;
}继续执行
if (preventRequestLayout) {
child.mLayoutParams = params;
} else {
child.setLayoutParams(params);
}看到上面的checkLayoutParams和generateLayoutParams方法都比较简单而且是protected的 所以应该是给子类实现的，我们看一个viewgroup的子类 LinearLayout是怎么做的
@Override
protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
return p instanceof LinearLayout.LayoutParams;
}
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new LinearLayout.LayoutParams(getContext(), attrs);
}看到这里就在想我们是不是也可以这么做呢，那当然是可以的 系统都可以了还有什么问题，
接下来我们的大波代码来袭了
public class DiscrollViewContent extends LinearLayout {
public DiscrollViewContent(Context context) {
super(context);
setOrientation(VERTICAL);
}
public DiscrollViewContent(Context context, AttributeSet attrs) {
super(context, attrs);
setOrientation(VERTICAL);
}
public DiscrollViewContent(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setOrientation(VERTICAL);
}
/**
* 重写addView
* @param child
* @param index
* @param params
*/
@Override
public void addView(View child, int index, ViewGroup.LayoutParams params) {
super.addView(asDiscrollvable(child,(MyLayoutParams)params), index, params);
}
private View asDiscrollvable(View child, MyLayoutParams params) {
if(!isDiscrollvable(params)){
return child;
}
DiscrollvableView discrollvableChild = new DiscrollvableView(getContext());
discrollvableChild.setDiscrollveAlpha(params.mDiscrollveAlpha);
discrollvableChild.setDiscrollveTranslation(params.mDiscrollveTranslation);
discrollvableChild.setDiscrollveScaleX(params.mDiscrollveScaleX);
discrollvableChild.setDiscrollveScaleY(params.mDiscrollveScaleY);
discrollvableChild.setDiscrollveThreshold(params.mDiscrollveThreshold);
discrollvableChild.setDiscrollveFromBgColor(params.mDiscrollveFromBgColor);
discrollvableChild.setDiscrollveToBgColor(params.mDiscrollveToBgColor);
discrollvableChild.addView(child);
return discrollvableChild;
}
/**
* 判断是否是我们定义的LayoutParams
* @param lp
* @return
*/
private boolean isDiscrollvable(MyLayoutParams lp) {
return lp.mDiscrollveAlpha ||
lp.mDiscrollveTranslation != -1 ||
lp.mDiscrollveScaleX ||
lp.mDiscrollveScaleY ||
(lp.mDiscrollveFromBgColor != -1 && lp.mDiscrollveToBgColor != -1);
}
/**
* 重写checkLayoutParams
* @param p
* @return
*/
@Override
protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
return p instanceof MyLayoutParams;
}
/**
* 重写generateDefaultLayoutParams
* @return
*/
@Override
protected LinearLayout.LayoutParams generateDefaultLayoutParams() {
return new MyLayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
}
/**
* 重写generateLayoutParams
* @param attrs
* @return
*/
@Override
public LinearLayout.LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MyLayoutParams(getContext(), attrs);
}
/**
* 重写generateLayoutParams
* @param p
* @return
*/
@Override
protected LinearLayout.LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) {
return new MyLayoutParams(p.width, p.height);
}
/**
* 自定义LinearLayout.LayoutParams
*/
class MyLayoutParams extends LinearLayout.LayoutParams {
private int mDiscrollveFromBgColor;
private int mDiscrollveToBgColor;
private float mDiscrollveThreshold;
public boolean mDiscrollveAlpha;
public boolean mDiscrollveScaleX;
public boolean mDiscrollveScaleY;
private int mDiscrollveTranslation;
public MyLayoutParams(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.DiscrollView_LayoutParams);
try {
mDiscrollveAlpha = a.getBoolean(R.styleable.DiscrollView_LayoutParams_discrollve_alpha, false);
mDiscrollveScaleX = a.getBoolean(R.styleable.DiscrollView_LayoutParams_discrollve_scaleX, false);
mDiscrollveScaleY = a.getBoolean(R.styleable.DiscrollView_LayoutParams_discrollve_scaleY, false);
mDiscrollveTranslation = a.getInt(R.styleable.DiscrollView_LayoutParams_discrollve_translation, -1);
mDiscrollveThreshold = a.getFloat(R.styleable.DiscrollView_LayoutParams_discrollve_threshold, 0.0f);
mDiscrollveFromBgColor = a.getColor(R.styleable.DiscrollView_LayoutParams_discrollve_fromBgColor, -1);
mDiscrollveToBgColor = a.getColor(R.styleable.DiscrollView_LayoutParams_discrollve_toBgColor, -1);
} finally {
a.recycle();
}
}
public MyLayoutParams(int width, int height) {
super(width, height);
}
}
}上面这大段代码主要就做了我们上面分析的系统空间
首先继承LinearLayout，
重写了addView，generateLayoutParams，checkLayoutParams
并自定义了一个MyLayoutParams继承自LinearLayout.LayoutParams
在addview的时候我们首先对child进行下处理，判断子view中是否有我们定义属性，没有的话，就用它自己，有的话，我们在外层包一个FrameLayout，让他执行动画，他的子view也将跟着执行。
好了 框架的设计部分完成了，
下面就是动画的实现了
首先看我们的scrollView是怎么做的
public class DiscrollView extends ScrollView {
private DiscrollViewContent mContent;
public DiscrollView(Context context) {
super(context);
}
public DiscrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public DiscrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
setupFirstView();
}
@Override
protected void onFinishInflate() {
super.onFinishInflate();
if(getChildCount() != 1) {
throw new IllegalStateException("Discrollview must host one child.");
}
View content = getChildAt(0);
if(!(content instanceof DiscrollViewContent)) {
throw new IllegalStateException("Discrollview must host a DiscrollViewContent.");
}
mContent = (DiscrollViewContent) content;
if(mContent.getChildCount() < 2) {
throw new IllegalStateException("Discrollview must have at least 2 children.");
}
}
private void setupFirstView() {
View first = mContent.getChildAt(0);
if(first!=null){
first.getLayoutParams().height = getHeight();
}
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
onScrollChanged(t);
}
private void onScrollChanged(int top) {
int scrollViewHeight = getHeight();
int scrollViewBottom = getAbsoluteBottom();
int scrollViewHalfHeight = scrollViewHeight / 2;
for(int index = 1;index<mContent.getChildCount();index++){
View child = mContent.getChildAt(index);
if(!(child instanceof DiscrollVable)){
continue;
}
DiscrollVable discrollvable = (DiscrollVable) child;
int discrollvableTop = child.getTop();
int discrollvableHeight = child.getHeight();
int discrollvableAbsoluteTop = discrollvableTop - top;
//这个view的下半部分
if(scrollViewBottom - child.getBottom() < discrollvableHeight+scrollViewHalfHeight){
//子view显示的时候执行
if(discrollvableAbsoluteTop <= scrollViewHeight){
int visibleGap = scrollViewHeight - discrollvableAbsoluteTop;
discrollvable.onDiscrollve(clamp(visibleGap / (float)discrollvableHeight,0.0f,1.0f));
}else {
//子view还没显示的时候
discrollvable.onResetDiscrollve();
}
}else{
if(discrollvableAbsoluteTop <= scrollViewHalfHeight){
int visibleGap = scrollViewHalfHeight - discrollvableAbsoluteTop;
discrollvable.onDiscrollve(clamp(visibleGap / (float)discrollvableHeight,0.0f,1.0f));
}else{
discrollvable.onResetDiscrollve();
}
}
}
}
private float clamp(float value, float max, float min) {
return Math.max(Math.min(value,min),max);
}
public int getAbsoluteBottom() {
View last = getChildAt(getChildCount()-1);
if(last == null){
return 0;
}
return last.getBottom();
}
}主要就是在滑动的时候 把滑动的百分比传给接口 ，具体由接口的实现类来执行
而实现接口的类就是我们上面的那个FrameLayout。
@Override
public void onDiscrollve(float ratio) {
if(ratio >= mDiscrollveThreshold) {
ratio = withThreshold(ratio);
float ratioInverse = 1 - ratio;
if(mDiscrollveAlpha) {
setAlpha(ratio);
}
if(isDiscrollveTranslationFrom(TRANSLATION_FROM_BOTTOM)) {
setTranslationY(mHeight * ratioInverse);
}
if(isDiscrollveTranslationFrom(TRANSLATION_FROM_TOP)) {
setTranslationY(-mHeight * ratioInverse);
}
if(isDiscrollveTranslationFrom(TRANSLATION_FROM_LEFT)) {
setTranslationX(-mWidth * ratioInverse);
}
if(isDiscrollveTranslationFrom(TRANSLATION_FROM_RIGHT)) {
setTranslationX(mWidth * ratioInverse);
}
if(mDiscrollveScaleX) {
setScaleX(ratio);
}
if(mDiscrollveScaleY) {
setScaleY(ratio);
}
if(mDiscrollveFromBgColor != -1 && mDiscrollveToBgColor != -1) {
setBackgroundColor((Integer) sArgbEvaluator.evaluate(ratio, mDiscrollveFromBgColor, mDiscrollveToBgColor));
}
}
}
@Override
public void onResetDiscrollve() {
if(mDiscrollveAlpha) {
setAlpha(0.0f);
}
if(isDiscrollveTranslationFrom(TRANSLATION_FROM_BOTTOM)) {
setTranslationY(mHeight);
}
if(isDiscrollveTranslationFrom(TRANSLATION_FROM_TOP)) {
setTranslationY(-mHeight);
}
if(isDiscrollveTranslationFrom(TRANSLATION_FROM_LEFT)) {
setTranslationX(-mWidth);
}
if(isDiscrollveTranslationFrom(TRANSLATION_FROM_RIGHT)) {
setTranslationX(mWidth);
}
if(mDiscrollveScaleX) {
setScaleX(0.0f);
}
if(mDiscrollveScaleY) {
setScaleY(0.0f);
}
if(mDiscrollveFromBgColor != -1 && mDiscrollveToBgColor != -1) {
setBackgroundColor(mDiscrollveFromBgColor);
}
}代码贴的太多了 底部将给出源码
可以看出 每个类都不是很大，当用户要用的时候只要 在xml中引用我们的控件，就可以实现这个效果，而且他要别的效果的话同样只要在xml中配置就好。