Friday, 27 February 2015

How can I make the movement of my cardviews smoother?



I am using a framelayout to hold each of my cardviews, and from which I am initiating each movement animation (left to right). But I have noticed that this movement doesn't appear incredibly smooth.


My code is below, what would you suggest to do, so to increase overall smoothness of card movement. Thanks


MyFrameLayout:



public class MyFrameLayout extends FrameLayout {

private static int mWidth = 500;
MyFrameLayout touchFrameLayout;

public MyFrameLayout(Context context) {
super(context);
initialize(context);
}

public MyFrameLayout(Context context, AttributeSet attrs) {
super(context, attrs);
initialize(context);
}

public MyFrameLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initialize(context);
}

private void initialize(Context context) {
setOnTouchListener(mTouchListener);
touchFrameLayout = this;

}

private float mDisplacementX;
// private float mLastMoveX;
private float mDisplacementY;
private float mInitialTx;
private boolean mTracking;
private OnTouchListener mTouchListener = new OnTouchListener() {

@Override
public boolean onTouch(View v, MotionEvent event) {
mWidth = (int) touchFrameLayout.getLayoutParams().width;
switch (event.getActionMasked()) {
case MotionEvent.ACTION_DOWN:

mDisplacementX = event.getRawX();
mDisplacementY = event.getRawY();

mInitialTx = getTranslationX();

return true;

case MotionEvent.ACTION_MOVE:
// get the delta distance in X and Y direction
float deltaX = event.getRawX() - mDisplacementX;
float deltaY = event.getRawY() - mDisplacementY;
// updatePressedState(false);

// set the touch and cancel event
if ((Math.abs(deltaX) > ViewConfiguration.get(getContext())
.getScaledTouchSlop() * 2 && Math.abs(deltaY) < Math
.abs(deltaX) / 2)
|| mTracking) {

mTracking = true;

if (getTranslationX() <= mWidth / 2
&& getTranslationX() >= -(mWidth / 2)) {

setTranslationX(mInitialTx + deltaX);
return true;
}
}

break;

case MotionEvent.ACTION_UP:

if (mTracking) {
mTracking = false;
float currentTranslateX = getTranslationX();

if (currentTranslateX > (mWidth/10)) {
rightSwipe();
} else if (currentTranslateX < -(mWidth*10)) {
leftSwipe();
}

// comment this line if you don't want your frame layout to
// take its original position after releasing the touch
setTranslationX(0);
return true;
} else {
// handle click event
setTranslationX(0);
}
break;
}
return false;
}
};

private void deleteCard() {
...
}


private void rightSwipe() {
Toast.makeText(this.getContext(), "Swipe to the right",
Toast.LENGTH_SHORT).show();
DeleteCard();
}

private void leftSwipe() {
Toast.makeText(this.getContext(), "Swipe to the left",
Toast.LENGTH_SHORT).show();
DeleteCard();
}
}


Xml:



<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://ift.tt/nIICcg"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.example.testing.android.layout.MyFrameLayout
xmlns:android="http://ift.tt/nIICcg"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<android.support.v7.widget.CardView xmlns:android="http://ift.tt/nIICcg"
xmlns:app="http://ift.tt/GEGVYd"
xmlns:card_view="http://ift.tt/GEGVYd"
android:id="@+id/taskViewContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:cardElevation="8dp"
app:cardPreventCornerOverlap="false"
card_view:cardCornerRadius="8dp">

......

</android.support.v7.widget.CardView>
</com.example.testing.android.layout.MyFrameLayout>



</RelativeLayout>

No comments:

Post a Comment