仿底部工具栏上滑消失下滑出现
先看效果图吧!
这个效果图确实不错,设计思想也很好。所以呢?我们肯定是要拿来主义了。这个页面来自携程的app,具体的效果可以去查看下。
实现思路
类似这种效果,我考虑了好几种方式。最后是采用RelativeLayout作为父布局,底部的工具栏放到底部,然后监听ScrollView或ListView的滑动事件,然后隐藏或显示底部工具栏,配以动画即可。
看我们的布局文件:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ListView
android:id="@+id/listView"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
<RadioGroup
android:id="@+id/radioGroup"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#CC000000"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<RadioButton
android:layout_height="match_parent"
android:button="@null"
android:layout_width="0dp"
android:layout_weight="1"
android:drawableTop="@drawable/common_icon_hybrid_unfavorite"
android:text="我的收藏"
android:textSize="14sp"
android:gravity="center_horizontal"
android:textColor="#FFFFFF"
android:drawablePadding="2dp"/>
<RadioButton
android:layout_height="match_parent"
android:button="@null"
android:layout_width="0dp"
android:layout_weight="1"
android:drawableTop="@drawable/common_icon_hybrid_unfavorite"
android:text="浏览历史"
android:textSize="14sp"
android:gravity="center_horizontal"
android:textColor="#FFFFFF"
android:drawablePadding="2dp"/>
<RadioButton
android:layout_height="match_parent"
android:button="@null"
android:layout_width="0dp"
android:layout_weight="1"
android:drawableTop="@drawable/common_icon_hybrid_unfavorite"
android:text="我的订单"
android:textSize="14sp"
android:gravity="center_horizontal"
android:textColor="#FFFFFF"
android:drawablePadding="2dp"/>
<RadioButton
android:layout_height="match_parent"
android:button="@null"
android:layout_width="0dp"
android:layout_weight="1"
android:drawableTop="@drawable/common_icon_hybrid_unfavorite"
android:text="个人中心"
android:textSize="14sp"
android:gravity="center_horizontal"
android:textColor="#FFFFFF"
android:drawablePadding="2dp"/>
</RadioGroup>
</RelativeLayout>
监听ListView的滑动事件,在这里,我们使用GestureDetector进行判断使用。
@Override
public void setOnClickListener() {
listView.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch(event.getAction()){
case MotionEvent.ACTION_DOWN:
break;
case MotionEvent.ACTION_MOVE:
mGestureDetector.onTouchEvent(event);
break;
case MotionEvent.ACTION_UP:
break;
}
return false;
}
});
}
private GestureDetector mGestureDetector = new GestureDetector(getApplication(), new GestureDetector.OnGestureListener() {
@Override
public boolean onSingleTapUp(MotionEvent e) {
return false;
}
@Override
public void onShowPress(MotionEvent e) {
}
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
float distanceY) {
if(Math.abs(distanceY) > 10)return false;
if(distanceY > 0){
if(radioGroup.getVisibility() == View.GONE)return false;
radioGroup.startAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.bottom_out));
radioGroup.setVisibility(View.GONE);
}else if(distanceY < 0){
if(radioGroup.getVisibility() == View.VISIBLE)return false;
radioGroup.setVisibility(View.VISIBLE);
radioGroup.startAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.bottom_in));
}
return false;
}
@Override
public void onLongPress(MotionEvent e) {
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
return false;
}
@Override
public boolean onDown(MotionEvent e) {
return false;
}
});
通过滑动进行判断,这里有个问题就是“第一次轻轻滑动的时候,出现的distanceY的值比较大,第一次的值就是按下的位置,所以暂时没想到很好的方法,只是通过一个值进行限定。有更好解决方案的欢迎留言。”
看下效果图:
下载地址
作者:mr_dsw 欢迎转载,与人分享是进步的源泉!
转载请保留地址:http://blog.csdn.net/mr_dsw