实现多楼层,每个楼层多房间,上下拖动切换楼层,左右拖动查看其他房间

FloorObject 楼层类继承于ViewFlipper,上下可以切换楼层,左右可以拉动查看每个楼层内的房间。大伙可以直接把这个类拿去修改一下使用。RoomSmallImage 类现在没写啥东西,只设置了一个背景而已,自己根据实际情况修改。


/****************FloorObject .java********************************************************/

package jtx.FloorAndRoom;


import jtx.theEdge.R;
import android.content.Context;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.animation.AnimationUtils;
import android.widget.HorizontalScrollView;
import android.widget.RelativeLayout;
import android.widget.ViewFlipper;

public class FloorObject extends ViewFlipper{

private int selectedPosition;
private Context mContext;
public FloorObject(Context context) {
super(context);
mContext = context;
getContentView();
    selectedPosition = 0;
}


    /**每个楼层具体内容类,继承于HorizontalScrollView,实现手势接口*/
private class FloorScrollView extends HorizontalScrollView implements OnGestureListener{


    private GestureDetector gestureDetector;
   
public FloorScrollView(Context context) {
super(context);
gestureDetector = new GestureDetector(this);
this.setFadingEdgeLength(0);//设置边缘不模糊,即模糊长度为0
}

public boolean onTouchEvent(MotionEvent event) {
this.gestureDetector.onTouchEvent(event);
    return true;
}


public boolean onDown(MotionEvent arg0) {
return false;
}


public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {


if (e1.getY() - e2.getY() > 100 && Math.abs(velocityY) > 50) {
//向上
selectedPosition = selectedPosition + 1 < 5 ? (selectedPosition + 1) : 0;
getContentView();
FloorObject.this.setInAnimation(AnimationUtils.loadAnimation(mContext,R.anim.push_bottom_in));  
FloorObject.this.setOutAnimation(AnimationUtils.loadAnimation(mContext,R.anim.push_top_out));  
FloorObject.this.showNext();
FloorObject.this.removeViewAt(0);

} else if (e2.getY() - e1.getY() > 100 && Math.abs(velocityY) > 50) {
 //向下
selectedPosition = selectedPosition > 0 ? (selectedPosition - 1) : (5 - 1);
getContentView();
FloorObject.this.setInAnimation(AnimationUtils.loadAnimation(mContext,R.anim.push_top_in));      
FloorObject.this.setOutAnimation(AnimationUtils.loadAnimation(mContext,R.anim.push_bottom_out));  
FloorObject.this.showNext();
FloorObject.this.removeViewAt(0);
}
return true;
}


public void onLongPress(MotionEvent arg0) {
// TODO Auto-generated method stub

}


public boolean onScroll(MotionEvent arg0, MotionEvent arg1, float velocityX,
float velocityY) {
// TODO Auto-generated method stub
if(Math.abs(velocityY) <= 50)
this.scrollBy((int)velocityX,(int)velocityY);
return true;
}


public void onShowPress(MotionEvent arg0) {
// TODO Auto-generated method stub

}


public boolean onSingleTapUp(MotionEvent arg0) {
// TODO Auto-generated method stub
return false;
}
    }
    
    /**加载每个楼层的具体内容*/
    private RelativeLayout getContentView() {


    //添加一个FloorScrollView,继承于HorizontalScrollView 
    FloorScrollView scrollView = new FloorScrollView(mContext);
    LayoutParams lp = new LayoutParams(400, 300);
this.addView(scrollView,lp);

    //在scrollView中添加一个相对布局RelativeLayout
    RelativeLayout rrlContentView = new RelativeLayout(mContext);
lp = new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT);
rrlContentView.setBackgroundColor(0xff000000);
scrollView.addView(rrlContentView,lp);
 

//在 相对布局中添加当前楼层的房间图片
for(int i=0 ;i<10 ;i++)
{
RoomSmallImage roomSmallImage = new RoomSmallImage(mContext,i);
RelativeLayout.LayoutParams rlp = new RelativeLayout.LayoutParams(80,60);
rlp.leftMargin = 20+ 100*i;
rrlContentView.addView(roomSmallImage,rlp);
}
return rrlContentView;
    }

}

/****************RoomSmallImage .java********************************************************/

package jtx.FloorAndRoom;


import android.content.Context;


public class RoomSmallImage extends RoomSmallImageBaseObject{


/**
* 首页中楼层中的房间小图片
* @param context
* @param roomCode 房间码
*/
public RoomSmallImage(Context context,int roomCode) {
super(context);
this.setBackgroundColor(0xff555555);
// TODO Auto-generated constructor stub
}


}

/*********************push_bottom_in.xml***************************************/

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android" >  
    <translate  
        android:duration="750"  
        android:fromYDelta="100%p"  
        android:toYDelta="0" />  
</set> 


 

/*********************push_bottom_out.xml***************************************/

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android" >  
    <translate  
        android:duration="750"  
        android:fromYDelta="0"  
        android:toYDelta="100%p" />  
</set> 


/*********************push_top_in.xml***************************************/

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android" >  
    <translate  
        android:duration="750"  
        android:fromYDelta="-100%p"  
        android:toYDelta="0" />  
</set> 

/*********************push_top_out.xml***************************************/

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android" >  
    <translate  
        android:duration="750"  
        android:fromYDelta="0"  
        android:toYDelta="-100%p" />  
</set> 




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用HTML5的拖放API来实现这个功能。首先,给每个div添加一个`draggable="true"`属性,使其可拖动。然后,监听`dragstart`事件和`dragover`事件,分别对被拖动的元素和目标元素进行处理。 以下是一个示例代码: HTML: ```html <div class="drag-container"> <div class="drag-item" draggable="true"> <input type="text" placeholder="input 1"> <input type="text" placeholder="input 2"> </div> <div class="drag-item" draggable="true"> <input type="text" placeholder="input 1"> <input type="text" placeholder="input 2"> </div> <div class="drag-item" draggable="true"> <input type="text" placeholder="input 1"> <input type="text" placeholder="input 2"> </div> </div> ``` CSS: ```css .drag-container { display: flex; flex-wrap: wrap; justify-content: space-between; } .drag-item { width: calc(33.33% - 10px); margin-bottom: 10px; padding: 10px; background-color: #f5f5f5; border: 1px solid #ddd; box-sizing: border-box; } ``` JavaScript: ```javascript const dragItems = document.querySelectorAll('.drag-item'); let dragItem = null; // 监听dragstart事件,记录被拖动的元素 dragItems.forEach(item => { item.addEventListener('dragstart', e => { dragItem = e.target; setTimeout(() => { e.target.classList.add('hide'); }, 0); }); }); // 监听dragover事件,处理拖动过程中的交换位置 dragItems.forEach(item => { item.addEventListener('dragover', e => { e.preventDefault(); if (dragItem !== null && dragItem !== item) { const dropZone = e.target.closest('.drag-item'); if (dropZone) { const bounding = dropZone.getBoundingClientRect(); const offset = bounding.y + (bounding.height / 2); if (e.clientY - offset > 0) { dropZone.after(dragItem); } else { dropZone.before(dragItem); } } } }); }); // 监听dragend事件,重置被拖动的元素的样式 document.addEventListener('dragend', e => { dragItems.forEach(item => item.classList.remove('hide')); dragItem = null; }); ``` 以上代码实现拖动div和拖动input的区别。如果你想让div中的两个input也可以拖动,可以给它们分别添加`draggable="true"`属性,并在`dragstart`和`dragover`事件中处理它们的位置关系。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值