学习|Android侧滑框架SmartSwipe使用

Vaccae

发布于 2019-12-20 15:43:57

9700

发布于 2019-12-20 15:43:57

文章被收录于专栏：微卡智享

Android侧滑框架

前两天看到一篇文章介绍了一些开源框架，其中无意间看到了这个SmartSwipe的侧滑框架，根据上面的介绍及演示的动态效果，使用起来确实很不错，于是自己做了个Demo后，发现效果确实不错。

SmartSwipe简价

微卡智享

这里我贴上原作者的博客地址：https://qibilly.com/SmartSwipe-tutorial/

SmartSwipe这个侧滑框架确实像他介绍的一样，侧滑手势在Android App应用得非常广泛，常见的使用场景包括：滑动抽屉、侧滑删除、侧滑返回、下拉刷新以及侧滑封面等。而SmartSwipe可以实现上面所有的这样的需求，并且使用起来非常的简单，很多操作效果用一行代码即可实现。

实现效果

代码实现

微卡智享

我们新建一个Android的项目SmartSwipe，在build.gradle中加入SmartSwipe的引用。

    api 'com.billy.android:smart-swipe:1.0.8'
    api 'com.billy.android:smart-swipe-support:1.0.0'

然后在主窗体的布局文件中加入11个TextView，还有一个RelativeLayout

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mainlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="3dp"
        android:gravity="center"
        android:id="@+id/tv1"
        android:textSize="10pt"
        android:text="微" />

    <TextView
        android:layout_marginTop="3dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tv2"
        android:gravity="center"
        android:textSize="10pt"
        android:text="卡" />

    <TextView
        android:layout_marginTop="3dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tv3"
        android:gravity="center"
        android:textSize="10pt"
        android:text="智" />

    <TextView
        android:layout_marginTop="3dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tv4"
        android:gravity="center"
        android:textSize="10pt"
        android:text="享" />

    <TextView
        android:layout_marginTop="3dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tv5"
        android:gravity="center"
        android:textSize="10pt"
        android:text="," />

    <TextView
        android:layout_marginTop="3dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tv6"
        android:gravity="center"
        android:textSize="10pt"
        android:text="做" />

    <TextView
        android:layout_marginTop="3dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tv7"
        android:gravity="center"
        android:textSize="10pt"
        android:text="更" />

    <TextView
        android:layout_marginTop="3dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tv8"
        android:gravity="center"
        android:textSize="10pt"
        android:text="好" />

    <TextView
        android:layout_marginTop="3dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tv9"
        android:gravity="center"
        android:textSize="10pt"
        android:text="的" />

    <TextView
        android:layout_marginTop="3dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tv10"
        android:gravity="center"
        android:textSize="10pt"
        android:text="自" />

    <TextView
        android:layout_marginTop="3dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tv11"
        android:gravity="center"
        android:textSize="10pt"
        android:text="已" />

    <RelativeLayout
        android:id="@+id/childlayout"
        android:background="@color/colorPrimaryDark"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tvshow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="10pt"
            android:layout_centerInParent="true"
            android:text="我是第二个layout" />
    </RelativeLayout>

</LinearLayout>

效果如下

然后再建一个新的Activity，后做为打开的新窗体，到时候关闭返回用

activity_test.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorBlack"
    tools:context=".TestActivity">
    
    <TextView
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/colorWhite"
        android:textSize="15pt"
        android:text="我是测试TextActivity" />

</RelativeLayout>

效果如下

接下来我们就看看几个比较不错的效果

仿MIUI的弹性拉伸效果

//仿MIUI的弹性拉伸效果：
        //侧滑时表现为弹性拉伸效果，结束后自动恢复
        SmartSwipe.wrap(tv2).addConsumer(StretchConsumer())
            .enableHorizontal() //工作方向：横向

滑动抽屉联动效果

//增加滑动抽屉联动效果
        SmartSwipe.wrap(tv3).addConsumer(SlidingConsumer())
            .setHorizontalDrawerView(childlayout)

贝塞尔曲线效果

//侧滑透明效果，使用贝塞尔曲线效果
        var str4 = tv4.text.toString()
        SmartSwipe.wrap(tv4).addConsumer(BezierBackConsumer())
            .enableHorizontal()
            .addListener(object : SimpleSwipeListener() {
                override fun onSwipeOpened(
                    wrapper: SmartSwipeWrapper?,
                    consumer: SwipeConsumer?,
                    direction: Int
                ) {
                    var directionstr = ""
                    when (direction) {
                        1 -> directionstr = "右"
                        2 -> directionstr = "左"
                        8 -> directionstr = "上"
                        4 -> directionstr = "下"
                        else -> directionstr = "无"
                    }
                    tv4.text = str4 + directionstr

                }
            })

上面addListener是增加了滑动的监听事件，可以看到我们在滑动后根据滑动的方向在原来的文本中显示了出来

开门效果

//实现开门效果
        SmartSwipe.wrap(tv6).addConsumer(DoorConsumer())
            .enableHorizontal()
            .addListener(object : SimpleSwipeListener() {
                override fun onSwipeOpened(
                    wrapper: SmartSwipeWrapper?,
                    consumer: SwipeConsumer?,
                    direction: Int
                ) {
                    tv6.text = tv6.text.toString() + "Vaccae"
                }
            })

百叶窗返回效果

这里我们用滑动方式打开新的Test的那个Activity，然后在TestActivity中也加入滑动效果用于关闭时使用。

mainactivity.kt代码

//Activity百叶窗返回效果
        SmartSwipe.wrap(tv7).addConsumer(ShuttersConsumer())
            .enableHorizontal()
            .addListener(object : SimpleSwipeListener() {
                override fun onSwipeOpened(
                    wrapper: SmartSwipeWrapper?,
                    consumer: SwipeConsumer?,
                    direction: Int
                ) {
                    var intent = Intent(applicationContext, TestActivity::class.java)
                    intent.putExtra("type", 0)
                    startActivity(intent)
                }
            })

testactivity.kt代码

SmartSwipe.wrap(this).addConsumer(ActivitySlidingBackConsumer(this))
                //设置联动系数
                .setRelativeMoveFactor(1.0f)
                //设置返回方向，这是所有方向
                .enableAllDirections()

开门返回效果

mainactivity.kt代码

//Activity开门返回效果
        SmartSwipe.wrap(tv8).addConsumer(StretchConsumer())
            .enableHorizontal()
            .addListener(object : SimpleSwipeListener() {
                override fun onSwipeOpened(
                    wrapper: SmartSwipeWrapper?,
                    consumer: SwipeConsumer?,
                    direction: Int
                ) {
                    var intent = Intent(applicationContext, TestActivity::class.java)
                    intent.putExtra("type", 1)
                    startActivity(intent)
                }
            })

testactivity.kt代码

SmartSwipe.wrap(this).addConsumer(ActivityDoorBackConsumer(this))
                .enableAllDirections()

下拉框刷新

我们这里只列出最后一个TextView的效果吧，同一个TextView可以同时加载两种不同方式的下拉，在下面动图中也可以看到，上下划的刷新和左右划的刷新，两个刷新用的是不同的效果，不过不仔细看也不太明显。

//下拉框刷新
        //xxxMode第二个参数为false，表示工作方向为纵向：下拉刷新&上拉加载更多
        //如果第二个参数设置为true，则表示工作方向为横向：右拉刷新&左拉加载更多
        var refcount11 = 0;
        var str11 = tv11.text.toString()
        SmartSwipeRefresh.scaleMode(tv11, false).dataLoader = object :
            SmartSwipeRefresh.SmartSwipeRefreshDataLoader {
            override fun onLoadMore(ssr: SmartSwipeRefresh?) {
                refcount11--
                tv11.text = str11 + refcount11
                ssr?.finished(true)
            }

            override fun onRefresh(ssr: SmartSwipeRefresh?) {
                ssr?.finished(true)
                refcount11++
                tv11.text = str11 + refcount11

            }
        }

        //下拉框刷新
        //xxxMode第二个参数为false，表示工作方向为纵向：下拉刷新&上拉加载更多
        //如果第二个参数设置为true，则表示工作方向为横向：右拉刷新&左拉加载更多
        SmartSwipeRefresh.translateMode(tv11, true).dataLoader = object :
            SmartSwipeRefresh.SmartSwipeRefreshDataLoader {
            override fun onLoadMore(ssr: SmartSwipeRefresh?) {
                refcount11--
                tv11.text = str11 + refcount11
                ssr?.finished(true)
            }

            override fun onRefresh(ssr: SmartSwipeRefresh?) {
                ssr?.finished(true)
                refcount11++
                tv11.text = str11 + refcount11

            }
        }