好久没写博客了，今天决定写一篇简单的功能实现热热手
这是我2018年10月份在京东app录制的他们的分类界面，今天主要就是实现这样的一个分类的界面
整理思路
首先整理思路啊。整体界面的实现方式可能很多，但是需要尽可能的用简单的方式，比如左边的分类界面和右边的一起看的话，好像用tablayout+viewpager也可以实现？虽然说他们都是垂直的，我们平时使用的是水平的，但是应该要实现的话也不是问题。
那这篇文章主要讲解的是稍微简单一点的，使用recyclerview+viewpager实现这个界面。
首先新建工程 导入基本的包
implementation 'com.android.support:recyclerview-v7:27.1.1'
在确定了界面的布局思路之后，首先看下我们的布局文件
首页布局
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#ffffff"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/follow_category_rv"
android:layout_width="63dp"
android:layout_height="match_parent"
android:layout_marginLeft="3dp"
android:layout_marginTop="3dp">
</android.support.v7.widget.RecyclerView>
<android.support.v4.view.ViewPager
android:id="@+id/follow_fragment_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
很简单啊，左边一个recyclerview
右边一个viewpager
接下来看下我们的逻辑代码
首页代码
首先这里要说下，左边的分类很多情况下是通过接口得到数据后，在创建的，所以这里我们使用一些假数据
private var mAdapter: CategoryRecyclerAdapter? = null
private var mPagerAdapter: FragmentPagerAdapter? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
//模拟假数据 真是开发中可能是通过接口得到
var list = mutableListOf<String>()
for (i in 1..10) {
list.add("test$i")
}
showCategory(list)
}
private fun showCategory(list: List<String>) {
//给左边的recyclerView设置数据和adapter
mAdapter = CategoryRecyclerAdapter()
follow_category_rv.adapter = mAdapter
follow_category_rv.layoutManager = LinearLayoutManager(this)
mAdapter?.setData(list)
//给右边的viewpager设置adapter
mPagerAdapter = FragmentPagerAdapter(supportFragmentManager, list)
follow_fragment_viewpager.adapter = mPagerAdapter
//recyclerView的item点击事件
mAdapter?.listener = { _, position ->
follow_fragment_viewpager.currentItem = position
}
}
好久没用MK写博客了，为什么代码模块都是红色的。。
看下上面的代码 很简单，我也加了一些注释
关于一些adapter的代码 我会在文末给链接。
先来看看效果
啊看起来还不错啊，但是viewpager是左右滑动的。而且左右滑动viewpager左边的分类也会变，这样好像有点奇怪。
我们接下来开始优化一下
首先来一个viewpager切换动画。
viwepager切换动画代码
/**
* introduce：这里写介绍
* createBy：sunwentao
* email：wentao.sun@yintech.cn
* time: 9/10/18
*/
class DefaultTransformer : ViewPager.PageTransformer {
override fun transformPage(view: View, position: Float) {
var alpha = 0f
if (position in 0.0..1.0) {
alpha = 1 - position
} else if (-1 < position && position < 0) {
alpha = position + 1
}
view.alpha = alpha
view.translationX = view.width * -position
val yPosition = position * view.height
view.translationY = yPosition
}
}
给我们的viewpager设置上看看效果
follow_fragment_viewpager.setPageTransformer(true, DefaultTransformer())
看起来还不错啊
但是响应viewpager的滑动事件还是左右，现在的gif图我是操作的左边的分类，右边的viewpager响应，如果反过来，viewpager切换还是需要左右滑动，这当然还是不行的。
ps: 有的人不需要viewpager能手动切换，只需要点击点击分类切换
上下滑动的viewpager
/**
* introduce：这里写介绍
* createBy：sunwentao
* email：wentao.sun@yintech.cn
* time: 9/10/18
*/
class VerticalViewPager : ViewPager {
private var noScroll = false
constructor(context: Context) : super(context) {}
constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {}
private fun swapTouchEvent(event: MotionEvent): MotionEvent {
val width = width.toFloat()
val height = height.toFloat()
event.setLocation(event.y / height * width, event.x / width * height)
return event
}
override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
return super.onInterceptTouchEvent(swapTouchEvent(MotionEvent.obtain(event)))
}
override fun onTouchEvent(ev: MotionEvent): Boolean {
return if (noScroll)
false
else
super.onTouchEvent(swapTouchEvent(MotionEvent.obtain(ev)))
}
//如果你想要你的viewpager不要响应滑动 设置这个为true 同时注释掉onInterceptTouchEvent方法
fun setNoScroll(noScroll: Boolean) {
this.noScroll = noScroll
}
}
首先看下代码这是我在网上找到的一个别人的实现方式，通过重写viewpager的这些方法，你就能得到如下的一个上下的viewpager。同时我在里面加了一个方法setNoScroll，注意看注释。这个是用来操作viewpager不响应滑动事件用的
到这里 好像差不多结束了
最后还是提一嘴
如果你的右侧的fragment是带有上拉加载更多的网我建议
有俩种实现方法
1，简单的实现就是静止viewpager滑动，只能通过左边的分类来控制。这样右边fragment中的操作是完全没问题的，
2，还有一种，就是你重写recyclerview 内部处理好滑动冲突，这样也是能响应上拉加载更多这个事件的
到这里差不多就没了 下面的是链接代码
分多的大佬直接csdn下载
没分的github下载
我真是他miao的考虑周到啊
csdn：https://download.csdn.net/download/qq_15527709/10721472
github：https://github.com/BigSweet/recycler_viewpager
