Android 左右滑动消除卡片效果的自定义控件
2016-10-28 本文已影响2182人
sirai
效果图 .gif
这个效果 应该是模仿 国外 Tinder 的可以左右滑动,不过 咱们中国的探探app 貌似也是这个样子,之前下载过 记得当时 玩了完效果,反正是国外的人写的 ,看看我们应用的基础步骤:
- moudle build.gradle 文件需要compile
compile 'com.daprlabs.aaron:swipedeck:2.0.6'
- activity_main布局文件里引用
xmlns:swipedeck="http://schemas.android.com/apk/res-auto"
<com.daprlabs.aaron.swipedeck.SwipeDeck
android:id="@+id/swipe_deck"
android:layout_width="match_parent"
android:layout_height="650dp"
android:layout_gravity="center"
android:paddingLeft="50dp"
android:paddingRight="50dp"
android:paddingTop="96dp"
swipedeck:max_visible="3"
swipedeck:render_above="false"
swipedeck:card_spacing="15dp"
swipedeck:preview_layout="@layout/test_card2"/>
- MainActivity
cardStack.setCallback(new SwipeDeck.SwipeDeckCallback(){})实现接口方法
void cardSwipedLeft(long itemId);//向左
void cardSwipedRight(long itemId);//向右
boolean isDragEnabled(long itemId);//是否可以拖动视图
cardStack.unSwipeCard();// 封装好的添加数据,根据自己的需求用:
public class MainActivity extends AppCompatActivity {
private static final String TAG = "MainActivity";
private SwipeDeck cardStack;
private Context context = this;
private SwipeDeckAdapter adapter;
private ArrayList<String> testData;
private CheckBox dragCheckbox;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
cardStack = (SwipeDeck) findViewById(R.id.swipe_deck);
dragCheckbox = (CheckBox) findViewById(R.id.checkbox_drag);
testData = new ArrayList<>();
for (int i = 0; i < 10; i++) {
testData.add(String.valueOf(i));
}
adapter = new SwipeDeckAdapter(testData, this);
if(cardStack != null){
cardStack.setAdapter(adapter);
}
cardStack.setCallback(new SwipeDeck.SwipeDeckCallback() {
@Override
public void cardSwipedLeft(long stableId) {
Log.i("MainActivity", "card was swiped left, position in adapter: " + stableId);
}
@Override
public void cardSwipedRight(long stableId) {
Log.i("MainActivity", "card was swiped right, position in adapter: " + stableId);
}
@Override
public boolean isDragEnabled(long itemId) {
return dragCheckbox.isChecked();
}
});
cardStack.setLeftImage(R.id.left_image);
cardStack.setRightImage(R.id.right_image);
Button btn = (Button) findViewById(R.id.button_left);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
cardStack.swipeTopCardLeft(500);
}
});
Button btn2 = (Button) findViewById(R.id.button_right);
btn2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
cardStack.swipeTopCardRight(180);
}
});
Button btn3 = (Button) findViewById(R.id.button_center);
btn3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// testData.add("a sample string.");
// adapter.notifyDataSetChanged();
cardStack.unSwipeCard();
}
});
}
}
- adapter 正常的使用 布局文件 也很随便的写 没什么特别的要求
public class SwipeDeckAdapter extends BaseAdapter {
private List<String> data;
private Context context;
public SwipeDeckAdapter(List<String> data, Context context) {
this.data = data;
this.context = context;
}
@Override
public int getCount() {
return data.size();
}
@Override
public Object getItem(int position) {
return data.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
View v = convertView;
if (v == null) {
LayoutInflater inflater = getLayoutInflater();
// normally use a viewholder
v = inflater.inflate(R.layout.test_card2, parent, false);
}
//((TextView) v.findViewById(R.id.textView2)).setText(data.get(position));
ImageView imageView = (ImageView) v.findViewById(R.id.offer_image);
Picasso.with(context).load(R.drawable.food).fit().centerCrop().into(imageView);
TextView textView = (TextView) v.findViewById(R.id.sample_text);
String item = (String)getItem(position);
textView.setText(item);
v.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.i("Layer type: ", Integer.toString(v.getLayerType()));
Log.i("Hardware Accel type:", Integer.toString(View.LAYER_TYPE_HARDWARE));
}
});
return v;
}
}