美文网首页Android自定义控件androidAndroid技术知识
Android 左右滑动消除卡片效果的自定义控件

Android 左右滑动消除卡片效果的自定义控件

作者: sirai | 来源:发表于2016-10-28 16:59 被阅读2182次
    效果图 .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;
            }
        }
    

    Android 开源组件和第三方库汇总

    传送门(https://github.com/aaronbond/SwipeDeck2)

    相关文章

      网友评论

        本文标题:Android 左右滑动消除卡片效果的自定义控件

        本文链接:https://www.haomeiwen.com/subject/aoreuttx.html