滑动Listview让底部bar隐藏,是一个很棒的交互设计。
向上滑动的时候你的视觉区域在屏幕的下半部分,这个时候把底部的bar隐藏掉,可以让可视区域增加。
向下滑动的时候你的视觉区域在屏幕的上半部分,这个时候把底部bar显示出来,这样就不至于让软件的功能性缺失。
实现这个交互所需知识:1.Android 动画基础;2.滑动监听、
知道上面两个知识点,就能很轻松的完成这个功能。
滑动监听代码:
mListView.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
View view2 = findViewById(R.id.bottom_bar);
// bar 向上的动画
Animation up = AnimationUtils.loadAnimation(MainActivity.this,
R.anim.actionbar_up);
// bar 向下的动画
Animation dowm = AnimationUtils.loadAnimation(MainActivity.this,
R.anim.actionbar_down);
// 记录点击时 y 的坐标
int y = (int) event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// 第一次点击是 ACTION_DOWN 事件,把值保存起来
mMotionY = y;
break;
case MotionEvent.ACTION_MOVE:
// 当你滑动屏幕时是 ACTION_MOVE 事件,在这里做逻辑处理
// (y - mMotionY) 的正负就代表了 向上和向下
if ((y - mMotionY) > 0) {
if (view2.getVisibility() == View.GONE) {
view2.startAnimation(up);
view2.setVisibility(View.VISIBLE);
}
} else {
if (view2.getVisibility() == View.VISIBLE) {
view2.startAnimation(dowm);
view2.setVisibility(View.GONE);
}
}
mMotionY = y;
break;
}
return false;
}
});
动画效果代码:
Y轴向上滑动:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="300"
android:fromYDelta="100.0%"
android:toYDelta="0.0" />
</set>
Y轴向下滑动:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="300"
android:fromYDelta="0.0"
android:toYDelta="100.0%" />
</set>
Over 搞定!把你的程序也加上这样的设计吧~~~