这次跟大家介绍怎么简单的实现类似 QQ 消息 Item 的左右滑动菜单的实现。首先见效果图先:
这就实现了 ListView 或 RecyclerView 加载的 item 的 View 实现侧滑菜单。至于这么实现,很简单就是通过继承 HorizontalScrollView,再判断滑动的距离以滑到对应的 View 或菜单。具体如下:
首先,在 item 的界面布局方面如下:
就是 ScrollListViewItem 包裹着 LinearLayout 里面的三个 View, 分别是左菜单,内容和右菜单对应的 View。最为重点的就是 ScrollListViewItem 这个类,这就是我们继承 HorizontalScrollView 类所自定义的控制菜单滑动的类。
这个类的源码如下:
- public class ScrollListViewItem extends HorizontalScrollView {
- private static int ScreenWidth = 0;
- private static int MenuWidth = 0;
- private static int HalfMenuWidth = 0;
- private boolean operateLeft = false;
- private boolean operateRight = false;
- private boolean once;
- ViewGroup left;
- ViewGroup centre;
- ViewGroup right;
- public ScrollListViewItem(Context context) {
- this(context, null);
- }
- public ScrollListViewItem(Context context, AttributeSet attrs) {
- super(context, attrs, 0);
- }
- public ScrollListViewItem(Context context, AttributeSet attrs, int defStyleAttr) {
- super(context, attrs, defStyleAttr, 0);
- }@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
- if (!once) {
- LinearLayout linearLayout = (LinearLayout) getChildAt(0);
- left = (ViewGroup) linearLayout.getChildAt(0);
- centre = (ViewGroup) linearLayout.getChildAt(1);
- right = (ViewGroup) linearLayout.getChildAt(2);
- ScreenWidth = ScreenUtils.getScreenWidth(getContext());
- MenuWidth = ScreenWidth / 4;
- HalfMenuWidth = MenuWidth / 2;
- left.getLayoutParams().width = MenuWidth;
- centre.getLayoutParams().width = ScreenWidth;
- right.getLayoutParams().width = MenuWidth;
- }
- super.onMeasure(widthMeasureSpec, heightMeasureSpec);
- }@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {
- super.onLayout(changed, l, t, r, b);
- if (changed) {
- this.scrollTo(MenuWidth, 0);
- once = true;
- }
- }@Overridepublic boolean onTouchEvent(MotionEvent ev) {
- switch (ev.getAction()) {
- case MotionEvent.ACTION_UP:
- //在左侧if(operateLeft){if(getScrollX()HalfMenuWidth&&getScrollX()MenuWidth+HalfMenuWidth){//滑到最右this.scrollTo(MenuWidth + MenuWidth, 0);}else if(getScrollX()>HalfMenuWidth&&getScrollX()MenuWidth){operateLeft=false;operateRight=true;}else{operateLeft=true;operateRight=false;}}}
在 onMeasure() 这个自定义 View 的测量方法里,我们首先拿到左菜单,内容,右菜单所对用的 view, 即 left,centre,right 这三个 View, 然后获取屏幕的宽度,动态设定菜单的宽度为屏幕宽度的四分之一,而内容的宽度就是整个屏幕的宽度,即
- left.getLayoutParams().width = MenuWidth;
- centre.getLayoutParams().width = ScreenWidth;
- right.getLayoutParams().width = MenuWidth;
然后我们在 onLayout() 方法里对这三个 View 进行定位,即让他滑到内容的那个 View。
然后回调 onScrollChanged(int l, int t, int oldl, int oldt) 方法,当 l 大于菜单宽度时是右侧,当 l 小于菜单宽度时是右侧。(注: l 是屏幕最右边到整个 View 最右边的距离)
其次就是最重要的 onTouchEvent(MotionEvent ev) 方法了。(注: 是屏幕最右边到整个 View 最右边的距离). 当 operateLeft==true 的时候, 滑动在操作在左侧, 当 getScrollX()this.scrollTo(0, 0);,当 getScrollX()>HalfMenuWidth&&getScrollX()this.scrollTo(MenuWidth, 0);,这两种情况除外都会滑到最后边的菜单,所以 this.scrollTo(MenuWidth * 2, 0);
同样的道理,当 operateRight==true 时,getScrollX()>MenuWidth+HalfMenuWidth 时,即在最右菜单但滑动的距离小于菜单宽度的一半,所以只能恢复原状即 this.scrollTo(MenuWidth + MenuWidth, 0);, 当 getScrollX()>HalfMenuWidth&&getScrollX()
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: http://www.92to.com/bangong/2017/04-17/20572235.html