写在前面的话
写代码一直不太喜欢加注解，但是代码的思路很清晰，接下来会对具体实现简单讲解
废话不说，先上效果图：
运行效果图
分析
从效果上看图片的展示具有层次感，在数据结构上更像是stack,所以通过继承FrameLayout来实现（不清楚FrameLayout布局特点的可以先百度下哈），外面是通过继承FrameLayout自定义的TinderStackLayout，它主要作为一个容器，里面的卡片效果也是继承FrameLayout自定义TinderCardView，需要对其onTouch()事件进行监听，设置阀值来判断TinderCardView的移动距离，然后通过设置动画即可实现。
具体实现
TinderCardView实现
1：在布局上最外层使用CardView,里面包含两部分内容，上面ImageView,下面TextView.通过inflate设置内容视图。在最顶层还需要一个ImageView来作为Tips
2：通过变量downX，downY来记录按下时的坐标位置。
3：在移动过程中dX,dY来记录视图移动的坐标，然后重新设置移动后的视图位置，同时还要计算和设置视图的旋转角度以及tips的透明度等。
4：当手指抬起的时候需要判断视图向左或者向右移动的距离是否超过设定的阀值，如果超过了就从父容器TinderCardLayout中移除，否则重置视图位置。
5：在移除视图之后需要判断父容器内子视图的数量，如果仅剩下一个子视图，就通知TinderCardLayout加载更多。
public class TinderCardView extends FrameLayout implements View.OnTouchListener {
private static final int PADDINGVALUE=16;
private static final float CARD_ROTATION_DEGREES = 40.0f;
public static final int DURATIONTIME=300;
private ImageView iv;
private TextView tv_name;
private ImageView iv_tips;
private int padding;
private float downX;
private float downY;
private float newX;
private float newY;
private float dX;
private float dY;
private float rightBoundary;
private float leftBoundary;
private int screenWidth;
private OnLoadMoreListener listener;
public TinderCardView(Context context) {
this(context,null);
}
public TinderCardView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public TinderCardView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
public void init(Context context){
if(!isInEditMode()){
inflate(context,R.layout.cardview,this);
screenWidth=DensityUtil.getScreenWidth(context);
leftBoundary = screenWidth * (1.0f/6.0f);
rightBoundary = screenWidth * (5.0f/6.0f);
iv=(ImageView) findViewById(R.id.iv);
tv_name=(TextView) findViewById(R.id.tv_name);
iv_tips=(ImageView)findViewById(R.id.iv_tips);
padding = DensityUtil.dip2px(context, PADDINGVALUE);
setOnTouchListener(this);
}
}
@Override
public boolean onTouch(final View view, MotionEvent motionEvent) {
TinderStackLayout tinderStackLayout = ((TinderStackLayout) view.getParent());
TinderCardView topCard = (TinderCardView) tinderStackLayout.getChildAt(tinderStackLayout.getChildCount() - 1);
if (topCard.equals(view)) {
switch (motionEvent.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = motionEvent.getX();
downY = motionEvent.getY();
view.clearAnimation();
return true;
case MotionEvent.ACTION_MOVE:
newX = motionEvent.getX();
newY = motionEvent.getY();
dX = newX - downX;
dY = newY - downY;
float posX = view.getX() + dX;
view.setX(view.getX() + dX);
view.setY(view.getY() + dY);
float rotation = (CARD_ROTATION_DEGREES * (posX)) / screenWidth;
int halfCardHeight = (view.getHeight() / 2);
if(downY < halfCardHeight - (2*padding)){
view.setRotation(rotation);
} else {
view.setRotation(-rotation);
}
float alpha = (posX - padding) / (screenWidth * 0.3f);
if(alpha>0){
iv_tips.setAlpha(alpha);
iv_tips.setImageResource(R.drawable.ic_like);
}else{
iv_tips.setAlpha(-alpha);
iv_tips.setImageResource(R.drawable.ic_nope);
}
return true;
case MotionEvent.ACTION_UP:
if(isBeyondLeftBoundary(view)){
removeCard(view, -(screenWidth * 2));
}
else if(isBeyondRightBoundary(view)){
removeCard(view,(screenWidth * 2));
}else{
resetCard(view);
}
return true;
default :
return super.onTouchEvent(motionEvent);
}
}
return super.onTouchEvent(motionEvent);
}
private boolean isBeyondLeftBoundary(View view){
return (view.getX() + (view.getWidth() / 2) < leftBoundary);
}
private boolean isBeyondRightBoundary(View view){
return (view.getX() + (view.getWidth() / 2) > rightBoundary);
}
private void removeCard(final View view, int xPos){
view.animate()
.x(xPos)
.y(0)
.setInterpolator(new AccelerateInterpolator())
.setDuration(DURATIONTIME)
.setListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animator) {
}
@Override
public void onAnimationEnd(Animator animator) {
ViewGroup viewGroup = (ViewGroup) view.getParent();
if(viewGroup != null) {
viewGroup.removeView(view);
}
int count=viewGroup.getChildCount();
if(count==1 && listener!=null){
listener.onLoad();
}
}
@Override
public void onAnimationCancel(Animator animator) {
}
@Override
public void onAnimationRepeat(Animator animator) {
}
});
}
private void resetCard(final View view){
view.animate()
.x(0)
.y(0)
.rotation(0)
.setInterpolator(new OvershootInterpolator())
.setDuration(DURATIONTIME);
iv_tips.setAlpha(0f);
}
public void bind(User u){
if(u==null){
return;
}
if(!TextUtils.isEmpty(u.getAvatarUrl())){
Glide.with(iv.getContext())
.load(u.getAvatarUrl())
.into(iv);
}
if(!TextUtils.isEmpty(u.getName())){
tv_name.setText(u.getName());
}
}
public interface OnLoadMoreListener{
void onLoad();
}
public void setOnLoadMoreListener(OnLoadMoreListener listener){
this.listener=listener;
}
}
TinderStackLayout实现
作为父容器，通过addView()方法添加子视图，设置变量STACK_SIZE来表示父容器内可以展示的子视图数量。
在添加子视图时需要计算和设置子视图的缩放以及显示位置（这样才能达到层级显示效果）
onLoad()方法作为数据的回调，当父容器里面只有一个子视图时，就会调用该方法去加载数据。
public class TinderStackLayout extends FrameLayout implements TinderCardView.OnLoadMoreListener {
private ViewGroup.LayoutParams params = null;
public static final float BASESCALE_X_VALUE = 50.0f;
public static final int BASESCALE_Y_VALUE = 8;
public static final int DURATIONTIME = 300;
private static final int STACK_SIZE = 4;
private int index = 0;
private int scaleY;
private TinderCardView tc;
private List<User> mList;
public TinderStackLayout(Context context) {
this(context, null);
}
public TinderStackLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public TinderStackLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
public void init() {
params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
scaleY = DensityUtil.dip2px(getContext(), BASESCALE_Y_VALUE);
}
private void addCard(TinderCardView view) {
int count = getChildCount();
addView(view, 0, params);
float scaleX = 1 - (count / BASESCALE_X_VALUE);
view.animate()
.x(0)
.y(count * scaleY)
.scaleX(scaleX)
.setInterpolator(new AnticipateOvershootInterpolator())
.setDuration(DURATIONTIME);
}
public void setDatas(List<User> list) {
this.mList = list;
if (mList == null) {
return;
}
for (int i = index; index < i + STACK_SIZE; index++) {
tc = new TinderCardView(getContext());
tc.bind(mList.get(index));
tc.setOnLoadMoreListener(this);
addCard(tc);
}
}
@Override
public void onLoad() {
for (int i = index; index < i + (STACK_SIZE - 1); index++) {
if (index == mList.size()) {
return;
}
tc = new TinderCardView(getContext());
tc.bind(mList.get(index));
tc.setOnLoadMoreListener(this);
addCard(tc);
}
int childCount = getChildCount();
for (int i = childCount - 1; i >= 0; i--) {
TinderCardView tinderCardView = (TinderCardView) getChildAt(i);
if (tinderCardView != null) {
float scaleValue = 1 - ((childCount - 1 - i) / 50.0f);
tinderCardView.animate()
.x(0)
.y((childCount - 1 - i) * scaleY)
.scaleX(scaleValue)
.rotation(0)
.setInterpolator(new AnticipateOvershootInterpolator())
.setDuration(DURATIONTIME);
}
}
}
}
DensityUtil工具类
主要是获取设备的屏幕宽度以及dip与px之间的转化（计算偏移量和缩放比例需要）。
public class DensityUtil {
public static int getScreenWidth(Context context){
WindowManager wm = (WindowManager) context
.getSystemService(Context.WINDOW_SERVICE);
return wm.getDefaultDisplay().getWidth();
}
public static int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
public static int px2dip(Context context, float pxValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (pxValue / scale + 0.5f);
}
}
User实体类
具体的数据模型，封装需要展示的基本信息。
private String name;
private String avatarUrl;
public User(String name, String avatarUrl) {
this.name = name;
this.avatarUrl = avatarUrl;
}
public User() {
}
public String getAvatarUrl() {
return avatarUrl;
}
public void setAvatarUrl(String avatarUrl) {
this.avatarUrl = avatarUrl;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
cardview.xml
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="36dp"
app:cardCornerRadius="5dp"
android:layout_gravity="top">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/iv"
android:layout_width="match_parent"
android:layout_height="320dp"
android:layout_marginBottom="5dp"
android:scaleType="centerCrop"
android:src="@mipmap/ic_launcher"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_vertical"
android:padding="16dp"
android:background="@android:color/white"
android:layout_gravity="bottom">
<TextView
android:id="@+id/tv_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif"
android:text="Mersens"
android:textSize="22sp"/>
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:clipChildren="true">
<ImageView
android:id="@+id/iv_tips"
android:layout_height="62dp"
android:layout_width="62dp"
android:src="@drawable/ic_like"
android:layout_gravity="center"
android:layout_marginBottom="50dp"
android:alpha="0"
/>
</FrameLayout>
</FrameLayout>
</android.support.v7.widget.CardView>
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.mersens.tinderstackview.activity.MainActivity">
<com.mersens.tinderstackview.view.TinderStackLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/tinderStackLayout"
/>
</LinearLayout>
MainActivity
在MainActivity中的数据来源来自于values目录下的arrays.xml(这里就不再具体描述，详见源码)，然后把数据传递给TinderStackLayout进行管理
public class MainActivity extends AppCompatActivity {
private TinderStackLayout tinderStackLayout;
private List<User> mList;
private String names[];
private String avatarUrls[];
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
public void init(){
mList=new ArrayList<User>();
names=getResources().getStringArray(R.array.names);
avatarUrls=getResources().getStringArray(R.array.avatar_urls);
tinderStackLayout=(TinderStackLayout)findViewById(R.id.tinderStackLayout);
for(int i=0;i<names.length;i++){
User user=new User(names[i],avatarUrls[i]);
mList.add(user);
}
tinderStackLayout.setDatas(mList);
}
}
网友评论