Android仿探探卡片拖拽,android-card-slide-panel

有图有真相

模仿探探首页的卡片滑动效果:

capture4.jpg

不得不说,探探的 ui 效果真的很赞。在着手这个 project 之前,我没有参考过 github 上其它类似的开源项目。所以,如果这个 project 重复造了轮子,请不要打我。

在这个仓库竣工之时,有一个小伙伴发了我另一个开源工程,颇有相似之处。我下载了源码,导入了 studio,apk 跑起来的时候,发现它存在一些问题:卡片飞到两侧,如果动画没有结束,则不允许下一轮拖动。这对强迫症的用户来说,应该是很不爽的。

然而,探探却克服了所有这些问题。或许,这个问题只有积淀过这些知识点的人才能琢磨的透吧。我确实思考了很久,想到了一个还不错的方案。

无耻一点

如果我能不要脸一些,我会说这个项目有以下优点:

快。真的流畅,滑动的手速再快也赶不上代码刷新 view 的速度快。

高效。仅仅四个卡片 view 轻松搞定任意多的数据。

灵活。自定义 ViewGroup 对卡片 view 的高度实现了自适应。

细节。卡片之间联动的视觉效果,是像素级的精确。

不信,你下载下来 look look。

使用方法

1. 在 xml 文件中引入 CardSlidePanel

android:id="@+id/image_slide_panel"

android:layout_width="match_parent"

android:layout_height="match_parent"

card:bottomMarginTop="38dp"

card:itemMarginTop="10dp"

card:yOffsetStep="13dp" />

2. 左右滑动监听

cardSwitchListener = new CardSlidePanel.CardSwitchListener() {

@Override

public void onShow(int index) {

Log.d("Card", "正在显示-" + dataList.get(index).userName);

}

@Override

public void onCardVanish(int index, int type) {

Log.d("Card", "正在消失-" + dataList.get(index).userName + " 消失 type=" + type);

}

};

slidePanel.setCardSwitchListener(cardSwitchListener);

3. 绑定 Adapter

slidePanel.setAdapter(new CardAdapter() {

@Override

public int getLayoutId() {

// layout 文件

return R.layout.card_item;

}

@Override

public int getCount() {

// 卡片个数

return dataList.size();

}

@Override

public Rect obtainDraggableArea(View view) {

// 可滑动区域定制,仅调用一次

return new Rect(....)

}

@Override

public void bindView(View view, int index) {

// 数据绑定,参看 demo

viewHolder.bindData(dataList.get(index));

}

});

4. 数据更新

// appendDataList

adapter.notifyDataSetChanged();

Demo 安装包

apk download (就在 thisProj 工程之中)

License

Copyright 2016, xmuSistone

Licensed under the Apache License, Version 2.0 (the "License");

you may not use this file except in compliance with the License.

You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software

distributed under the License is distributed on an "AS IS" BASIS,

WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

See the License for the specific language governing permissions and

limitations under the License.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当一个View超出屏幕时,你可以使用ScrollView或者HorizontalScrollView来解决这个问题。 如果你想拖动一个ImageView,并且希望它不会超出屏幕,你可以使用以下代码: ```java imageView.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: { // 手指按下时记录位置 lastX = event.getRawX(); lastY = event.getRawY(); break; } case MotionEvent.ACTION_MOVE: { // 移动的距离 float dx = event.getRawX() - lastX; float dy = event.getRawY() - lastY; // 获取imageView的参数 RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) v.getLayoutParams(); // 移动imageView lp.leftMargin += dx; lp.topMargin += dy; // 确定imageView不会超出屏幕 int screenWidth = getResources().getDisplayMetrics().widthPixels; int screenHeight = getResources().getDisplayMetrics().heightPixels; if (lp.leftMargin < 0) { lp.leftMargin = 0; } else if (lp.leftMargin + v.getWidth() > screenWidth) { lp.leftMargin = screenWidth - v.getWidth(); } if (lp.topMargin < 0) { lp.topMargin = 0; } else if (lp.topMargin + v.getHeight() > screenHeight) { lp.topMargin = screenHeight - v.getHeight(); } // 重新设置imageView的参数 v.setLayoutParams(lp); // 更新位置记录 lastX = event.getRawX(); lastY = event.getRawY(); break; } case MotionEvent.ACTION_UP: { // 手指抬起时不需要做任何事情 break; } } return true; } }); ``` 这个代码片段会允许你拖动ImageView,但是它不会被拖动超出屏幕。如果ImageView被拖动到了屏幕边缘,它会停在那里并且无法继续拖动。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值