仿path首页滑动效果

xuela_net

浏览: 499772 次

最近访客更多访客>>

u012363178

liexusong001

13931799482

bluesun_cn

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1052)

社区版块

存档分类

2013-08 ( 5)
2013-07 ( 243)
2013-06 ( 185)
更多存档...

最近在研究path的首页滑动效果，发现啪啪也已经实现了这个效果，自己网上找了代码，又自己试试，发现如果是用两个ImageView 做的话，可以实现，但是用listView的话，滑动就会出问题，现在把代码粘贴如下，望各位指点迷津：

主界面的xml:

<com.example.testpathscroll.MyScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/ll"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >

</com.example.testpathscroll.MyScrollView>

其中主要代码就是第一个Linear中的两个ImageView;

自定义的MyScrollView：

public class MyScrollView extends ScrollView {
public static interface OnPositionChangedListener {
public void onPositionChanged(int position);

public void onScollPositionChanged(View scrollBarPanel, int top);
}

private OnPositionChangedListener mPositionChangedListener;
static int k = 50;
ImageView iv1;
ImageView iv2;
int left, top;
// 记录初始的位置
int m_top;
float startX, startY;
float currentX, currentY;

int rootW, rootH;
private boolean isCount = false;// 是否开始计算

int iv1H;
int iv2H;
// 记录下面布局的上高度，就是上面图片的下边
int t;
Scroller scroller;
int myHeight, myHeight2;
int myWidth, myWidth2;
// View mClock;
Context mContext;
// 时间
// PopupWindow mPopUp;
// 判断显示还是隐藏
boolean flag = false;
ScrollView mScrollView;
RelativeLayout mRelativel;
int temp;
TranslateAnimation ta=null;
//尝试使用Scroller
Scroller mScroller;
/*sdfsdfsdf*/
private View inner1,inner2;// 孩子
private float y;// 坐标
private Rect normal2 = new Rect();// 矩形空白
private Rect normal1 = new Rect();// 矩形空白

public MyScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
// 第一张图片的高度，这个是需要（可以按照比例来制定，或者使用固定值，按照需要来）
Bitmap bm = BitmapCache.getInstance().getBitmap(R.drawable.bg, context);
myHeight = bm.getHeight();
myWidth = bm.getWidth();
// 第二张图片
Bitmap bm2 = BitmapCache.getInstance().getBitmap(R.drawable.abcd,
context);
myHeight2 = bm2.getHeight();
myWidth2 = bm2.getWidth();
temp=(int) (200*context.getResources().getDisplayMetrics().density);
//
mScroller=new Scroller(context);
//setFocusable(true);
// setDescendantFocusability(FOCUS_AFTER_DESCENDANTS);
// setWillNotDraw(false);
}

public void setOnPositionChangedListener(
OnPositionChangedListener onPositionChangedListener) {
mPositionChangedListener = onPositionChangedListener;
}

// public void openTimeShow() {
// // set position
// mPopUp.showAtLocation(findViewById(R.id.ll), Gravity.CENTER, 0, 0);
// // mPopUp.showAsDropDown(view, 0, 0);
// }
// public void closeTimeShow(){
// mPopUp.dismiss();
// }
/**
* 所有子View被加载后触发
* */
protected void onFinishInflate() {
super.onFinishInflate();
iv1 = (ImageView) findViewById(R.id.iv1);
iv2 = (ImageView) findViewById(R.id.iv);
// mClock=(View) findViewById(R.id.clock);
mScrollView = (ScrollView) findViewById(R.id.ll);
setLongClickable(true);
scroller = new Scroller(getContext(),
new AccelerateDecelerateInterpolator());
// View view=LayoutInflater.from(mContext).inflate(R.id.clock_rl, null);
// mPopUp=new PopupWindow(view, LayoutParams.WRAP_CONTENT,
// LayoutParams.WRAP_CONTENT);
// mPopUp.setFocusable(false);
// mPopUp.setOutsideTouchable(true);
mRelativel = (RelativeLayout) findViewById(R.id.clock_rl);
/*sdfsdf*/
inner1 = iv1;
inner2 = iv2;// 获取其孩子
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
// TODO Auto-generated method stub
super.onLayout(changed, l, t, r, b);
m_top = iv2.getTop();
// 两张图片（两个布局的高度）
iv1H = iv1.getHeight();
iv2H = iv2.getHeight();
Log.i("TAG", iv1H + "---" + iv2H + "---" + m_top);
}

@Override
public boolean onTouchEvent(MotionEvent event) {

int action = event.getAction();
currentX = event.getX();
currentY = event.getY();

switch (action & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN: {
if(ta!=null){
ta.cancel();
ta=null;
}
left = iv2.getLeft();
top = iv2.getTop();
rootW = getWidth();
rootH = getHeight();

// Log.i("TAG", "iv1H高度ACTION_DOWN---"+iv1H);
currentX = event.getX();
currentY = event.getY();
startX = currentX;
startY = currentY;
//Rect2
if (normal2.isEmpty()) {
// 填充矩形，目的：就是告诉this:我现在已经有了，你松开的时候记得要执行回归动画.
normal2.set(inner2.getLeft(), inner2.getTop(),
inner2.getRight(), inner2.getBottom());
}
//Rect1
if (normal1.isEmpty()) {
// 填充矩形，目的：就是告诉this:我现在已经有了，你松开的时候记得要执行回归动画.
normal1.set(inner1.getLeft(), inner1.getTop(),
inner1.getRight(), inner1.getBottom());
}

mPositionChangedListener.onScollPositionChanged(this,
getHeight() / 2);
break;
}
case MotionEvent.ACTION_MOVE:
Log.i("TAG", iv2.getY()+"!!!!!!!!!!!!!!!!!!");
int c_current = (int) currentY;
int l = (int) (left + currentX - startX);
int deltaY=(int) (currentY - startY);
if (!isCount) {
deltaY = 0; // 在这里要归0.
}
// 获取滑动距离
t = (int) (top + deltaY);
// Log.i("TAG", (currentY -
// startY)+"-----currentY - startY----!!!!"+currentY+"!!!!"+startY);
if (deltaY >= 0) {// 向下滑动
if (t > myHeight) {
t = myHeight;
}
// 控制时间条的位置
if (c_current > 854) {
c_current = 854;
}
} else {// 向上滑动
// 854 IS A TEST PX,the Height of screen
if (myHeight2 >= 854) {
if ((myHeight2 - 854) < -t) {
t = 854 - myHeight2;
}
} else {
if (myHeight2 - t < 800) {
t = 854 - myHeight2;
}
}
// 控制位置（800是屏幕的高度）
if (c_current < 0) {
c_current = 0;
}
}

mPositionChangedListener.onPositionChanged((int) currentY);
mPositionChangedListener.onScollPositionChanged(this,
(int) (startY - currentY));
//iv2.layout(left, t, left + iv2.getWidth(), t + iv2.getHeight());
inner2.layout(left, t, left + iv2.getWidth(), t + iv2.getHeight());
inner1.layout(0, 0, iv1.getWidth(), t);
isCount = true;
break;
case MotionEvent.ACTION_UP:
// closeTimeShow();
if (t <= temp) {// m_top
} else {
//System.out.println(temp+"------------"+t);
//animation(iv2, 0, 0, 0, temp - t);
//animation(iv1, 0, 0, 0, -temp/2);
if (isNeedAnimation()) {
animation();
isCount = false;
}

// 更新结束后，使用动画控制偏移过程, 3s内到位
// //mScroller.startScroll(0, 0, 0, temp,3000);
// // 重绘控件
// invalidate();
// iv2.layout(left, temp, left + iv2.getWidth(), temp + iv2.getHeight());
//iv1.layout(0, 0, iv1.getWidth(), temp);
}

break;
case MotionEvent.ACTION_CANCEL:
break;
case MotionEvent.ACTION_POINTER_DOWN:
break;
case MotionEvent.ACTION_POINTER_UP:
break;
}
return true;
}
/***
* 是否需要开启动画
*
* 如果矩形不为空，返回true，否则返回false.
*
*
* @return
*/
public boolean isNeedAnimation() {
return !normal2.isEmpty()&&!normal1.isEmpty();
}
/***
* 开启动画移动
*/
public void animation() {
// 开启移动动画
System.out.println(inner2.getTop()+"----inner2.getTop()----"+normal2.top+"---normal.top-----");
TranslateAnimation ta = new TranslateAnimation(0, 0, inner2.getTop()-normal2.top,
0);
ta.setDuration(300);
// TranslateAnimation ta1=new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 1f, Animation.RELATIVE_TO_PARENT, 1f, Animation.RELATIVE_TO_PARENT, 1f, Animation.RELATIVE_TO_PARENT, 0.5f);
// ta1.setDuration(500);
// ScaleAnimation sa=new ScaleAnimation(1.0f, 1.0f, 1.5f, 1.0f,
// Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 1.0f);
// sa.setDuration(300);
MyAnimation ma=new MyAnimation();
inner2.startAnimation(ta);
inner1.startAnimation(ma);
// 设置回到正常的布局位置
inner2.layout(normal2.left, normal2.top, normal2.right, normal2.bottom);
inner1.layout(normal1.left, normal1.top, normal1.right, normal1.bottom);

// 清空矩形
normal1.setEmpty();
normal2.setEmpty();

}
@Override
public void computeScroll() {
if (mScroller.computeScrollOffset()) { // 如果返回true，表示动画还没有结束
// 产生平滑的动画效果，根据当前偏移量，每次滚动一点
scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
// 此时同样也需要刷新View ，否则效果可能有误差
postInvalidate();
} else { //如果返回false，表示startScroll完成
}
}

public void animation(View view, float fromx, float tox, float fromY,
float toy) {
// 开启移动动画
ta = new TranslateAnimation(0, 0, fromY, toy);
ta.setInterpolator(new AccelerateDecelerateInterpolator());
ta.setDuration(500);
ta.setFillAfter(true);
//if(view.getId()==iv2.getId()){
ta.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
//返回初始位置

iv2.layout(left, temp, left + iv2.getWidth(), temp + iv2.getHeight());
iv1.layout(0, 0, iv1.getWidth(), temp);
//view.clearAnimation();
//postInvalidate();
//Log.i("TAG", "iv1.getY() + iv2.getY()"+iv1.getY()+"----" + iv2.getY()+"---"+temp);
}
});
//}
view.startAnimation(ta);
// 设置回到正常的布局位置
}
}

这段代码就是处理下拉，反弹效果的。

主界面java文件：

public class MainActivity extends Activity implements OnPositionChangedListener{// implements OnTouchListener, OnPositionChangedListener

MyScrollView ll;
FrameLayout clockLayout;
private ExtendedListView dataListView;
private boolean areButtonsShowing;

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ll = (MyScrollView) findViewById(R.id.ll);
clockLayout = (FrameLayout)findViewById(R.id.clock);
ll.setOnPositionChangedListener(this);
}
private float[] computMinAndHour(int currentMinute, int currentHour) {
float minuteRadian = 6f * currentMinute;

float hourRadian = 360f / 12f * currentHour;

float[] rtn = new float[2];
rtn[0] = minuteRadian;
rtn[1] = hourRadian;
return rtn;
}
private float[] lastTime = {
0f, 0f
};
private RotateAnimation[] computeAni(int min, int hour) {

RotateAnimation[] rtnAni = new RotateAnimation[2];
float[] timef = computMinAndHour(min, hour);
// AnimationSet as = new AnimationSet(true);
// 创建RotateAnimation对象
// 0--图片从哪开始旋转
// 360--图片旋转多少度
// Animation.RELATIVE_TO_PARENT, 0f,// 定义图片旋转X轴的类型和坐标
// Animation.RELATIVE_TO_PARENT, 0f);// 定义图片旋转Y轴的类型和坐标
RotateAnimation ra = new RotateAnimation(lastTime[0], timef[0], Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
ra.setFillAfter(true);
ra.setFillBefore(true);
// 设置动画的执行时间
ra.setDuration(800);
// 将RotateAnimation对象添加到AnimationSet
// as.addAnimation(ra);
// 将动画使用到ImageView
rtnAni[0] = ra;

lastTime[0] = timef[0];

// AnimationSet as2 = new AnimationSet(true);
// 创建RotateAnimation对象
// 0--图片从哪开始旋转
// 360--图片旋转多少度
// Animation.RELATIVE_TO_PARENT, 0f,// 定义图片旋转X轴的类型和坐标
// Animation.RELATIVE_TO_PARENT, 0f);// 定义图片旋转Y轴的类型和坐标
RotateAnimation ra2 = new RotateAnimation(lastTime[1], timef[1], Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);

// 设置动画的执行时间
ra2.setFillAfter(true);
ra2.setFillBefore(true);
ra2.setDuration(800);
// 将RotateAnimation对象添加到AnimationSet
// as2.addAnimation(ra2);
// 将动画使用到ImageView
rtnAni[1] = ra2;
lastTime[1] = timef[1];
return rtnAni;
}

@Override
public void onPositionChanged(int position) {
TextView datestr = ((TextView) findViewById(R.id.clock_digital_date));
datestr.setText("上午");

int hour = Calendar.getInstance().getTime().getHours()+position;
String tmpstr = "";
if (hour > 12) {
hour = hour - 12;
datestr.setText("下午");
tmpstr += " ";
} else if (0 < hour && hour < 10) {

tmpstr += " ";
}
tmpstr += hour + ":" + Calendar.getInstance().getTime().getMinutes();
((TextView) findViewById(R.id.clock_digital_time)).setText(tmpstr);
RotateAnimation[] tmp = computeAni(Calendar.getInstance().getTime().getMinutes(),hour);

ImageView minView = (ImageView) findViewById(R.id.clock_face_minute);
minView.startAnimation(tmp[0]);

ImageView hourView = (ImageView) findViewById(R.id.clock_face_hour);
hourView.setImageResource(R.drawable.clock_hour_rotatable);
hourView.startAnimation(tmp[1]);

}
@Override
public void onScollPositionChanged(View scrollBarPanel, int top) {
MarginLayoutParams layoutParams = (MarginLayoutParams)clockLayout.getLayoutParams();
layoutParams.setMargins(0, top, 0, 0);
clockLayout.setLayoutParams(layoutParams);
}
}

上面的效果经过测试还可以达到要求。但是实际项目中用到的可能是listview，而不是ImageView，这就会产生点击事件传递的问题。

希望有经验的大侠给点指点~小弟不胜感激！

文件下载地址：http://download.csdn.net/detail/ansionnal/5213545

分享到：