学更好的别人，
做更好的自己。
——《微卡智享》
本文长度为3630字，预计阅读8分钟
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
}
}
以上就是SmartSwipe的简单介绍，具体很多细节可以去文章开始的作者博客去看看，下面是我自己的Demo源码，其实也没有什么，就是改为用Kotlin写的，有兴趣的也可以下载看看。
源码地址
https://github.com/Vaccae/SmartSwipeDemo.git
完
扫描二维码
获取更多精彩
微卡智享
「 往期文章 」
扫一扫
1196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
