Android使用MvvM+kotlin实现简单WanAndroid

最近在学习mvvm，利用空闲时间写了一个简单版的wanAndroid项目.介绍就不说了，直接上代码.

1.引入：在App——build.gradle目录引入以下代码即可:

dataBinding{

enabled true

}

2.配置gradle.properties

android.useAndroidX=true

android.enableJetifier=true

3.WanAndroid项目主要有首页、知识、导航、项目四个模块，采用MvvM+Kotlin方式

主MainActivity代码如下：

/**

* @作者: njb

* @时间: 2020/1/13 12:51

* @描述: 主界面

open class MainActivity : BaseActivity() {

private val fragmentList: MutableList<Fragment> =

ArrayList()

private val strings =

arrayOf("首页", "知识", "导航", "项目")

override val layoutId: Int

get() = R.layout.activity_main

override fun initView() {

fragmentList.add(HomeFragment())

fragmentList.add(KnowledgeFragment())

fragmentList.add(NavigationFragment())

fragmentList.add(ProjectFragment())

viewPager!!.adapter = object : FragmentStateAdapter(this) {

override fun createFragment(position: Int): Fragment {

return fragmentList[position]

}

override fun getItemCount(): Int {

return fragmentList.size

}

viewPager.offscreenPageLimit = 3

val tabLayoutMediator = TabLayoutMediator(

tab_layout,

viewPager,

TabConfigurationStrategy { tab: TabLayout.Tab, position: Int ->

tab.text = strings[position]

}

)

tabLayoutMediator.attach()

initToolBar()

}

private fun initToolBar() {

setSupportActionBar(toolbar)

supportActionBar!!.setDisplayHomeAsUpEnabled(false)

supportActionBar!!.setHomeButtonEnabled(false)

iv_search.setImageResource(R.drawable.ic_baseline_search_24)

}

override fun addListener() {

iv_search.setOnClickListener(View.OnClickListener {

startActivity(

Intent(

this@MainActivity,

SearchActivity::class.java

)

})

}

4.首页Fragment代码：

/**

* @作者: njb

* @时间: 2020/1/10 18:19

* @描述: 首页

class HomeFragment : Fragment(), CompletedListener {

private var mBinding: ViewDataBinding? = null

private var artListAdapter: ArtListAdapter? = null

private var viewModel: HomeViewModel? = null

private var layoutManager: LinearLayoutManager? = null

private var page: Int = 1

private var viewHead: View? = null

private var banner: Banner? = null

private var bannerModel: List<BannerModel>? = null

private var viewModels:BannerViewModel ? = null

override fun onCreateView(

inflater: LayoutInflater,

container: ViewGroup?,

savedInstanceState: Bundle?

): View? {

mBinding = DataBindingUtil.inflate(inflater, R.layout.fm_home, container, false)

val view = mBinding!!.root

viewHead = LayoutInflater.from(context).inflate(R.layout.item_home_banner, null)

initBanner()

initView(view)

initListener(view)

return mBinding!!.root

}

/**

* 初始化view

private fun initView(view: View) {

artListAdapter = ArtListAdapter(null)

layoutManager = LinearLayoutManager(activity!!)

layoutManager!!.orientation = LinearLayoutManager.VERTICAL

view.rv_home.layoutManager = layoutManager

artListAdapter!!.addHeaderView(viewHead)

view.rv_home.addItemDecoration(DividerDecoration(ContextCompat.getColor(activity!!,R.color.ce7e7e7),2))

view.rv_home.adapter = artListAdapter

viewModel = HomeViewModel(artListAdapter!!, this)

//显示加载动画

viewModel!!.getArtCircleList(page)

}

private fun initBanner() {

banner = viewHead!!.findViewById(R.id.home_banner)

//设置banner样式

banner!!.setBannerStyle(BannerConfig.CIRCLE_INDICATOR)

//设置图片加载器

banner!!.setImageLoader(GlideImageLoader())

//设置banner动画效果

banner!!.setBannerAnimation(Transformer.Default)

//设置自动轮播，默认为true

banner!!.isAutoPlay(true)

//设置轮播时间

banner!!.setDelayTime(3000)

//设置指示器位置（当banner模式中有指示器时）

banner!!.setIndicatorGravity(BannerConfig.CENTER)

//banner设置方法全部调用完毕时最后调用

banner!!.start()

viewModels = BannerViewModel(banner!!,this)

viewModels!!.getBannerList()

}

/**

* 初始化事件

private fun initListener(view: View) {

artListAdapter!!.setOnItemClickListener{

listener,View,position ->

Intent(context, WebViewActivity::class.java).run {

putExtra(AppConstant.WEBVIEW_TITLE_KEY, artListAdapter!!.data[position].title)

putExtra(AppConstant.WEBVIEW_ID_KEY, artListAdapter!!.data[position].id)

putExtra(AppConstant.WEBVIEW_URL_KEY, artListAdapter!!.data[position].link)

startActivity(this, null)

}

view.rf_home.setOnRefreshListener {

page = 1

viewModel!!.getArtCircleList(page)

view.rf_home.finishRefresh(200)

}

view.rf_home.setOnLoadMoreListener {

page++

viewModel!!.getArtCircleList(page)

view.rf_home.finishLoadMore(200)

}

override fun onCompleted() {

}

HomeViewModel

/**

*@作者: njb

*@时间: 2020/1/10 17:55

*@描述:

class HomeViewModel(

private val adapter: ArtListAdapter,

private val completedListener: CompletedListener

) {

private var observer: Observer<BaseModel<ArticleListModel>>? = null

private var repository = HomeRepository()

fun getArtCircleList(page:Int) {

observer = object : Observer<BaseModel<ArticleListModel>> {

override fun onComplete() {

completedListener.onCompleted()

}

override fun onSubscribe(d: Disposable) {

}

override fun onNext(t: BaseModel<ArticleListModel>) {

if (t.errorCode == 0) {

t.data?.let {

if(page == 1){

adapter.setNewData(it.datas)

}else{

adapter.addData(it.datas!!)

}

override fun onError(e: Throwable) {

completedListener.onCompleted()

}

repository.getArcticList(page,

observer as Observer<BaseModel<ArticleListModel>>

)

}

首页请求HomeRespository

/**

*@作者: njb

*@时间: 2020/1/10 18:00

*@描述:

class HomeRepository :BaseRepository(){

fun getArcticList(

page: Int,

observer: Observer<BaseModel<ArticleListModel>>) {

apiServer.articleList(page).subscribeOn(Schedulers.io())

.observeOn(AndroidSchedulers.mainThread())

.subscribe(observer)

}

首页文章列表适配器

/**

*@author: njb

*@date: 2020/2/11 0011 16:47

*@desc: 文章列表适配器

class ArtListAdapter (data:List<ArticleListModel.DatasBean>?):

BaseQuickAdapter<ArticleListModel.DatasBean,BaseViewHolder>(R.layout.item_home,data){

override fun convert(helper: BaseViewHolder, item: ArticleListModel.DatasBean) {

val itemBinding = DataBindingUtil.bind<ItemHomeBinding>(helper.itemView)!!

itemBinding.homebean = item

itemBinding.executePendingBindings()

}

首页布局：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<com.ning.mvvmplayandroid.weight.MyRefreshLayout

android:id="@+id/rf_home"

android:layout_width="match_parent"

android:layout_height="match_parent">

<androidx.recyclerview.widget.RecyclerView

android:id="@+id/rv_home"

android:layout_width="match_parent"

android:layout_height="match_parent" />

</com.ning.mvvmplayandroid.weight.MyRefreshLayout>

</LinearLayout>

</layout>

首页Banner布局加在文章列表头部，Banner广告布局：

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.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">

<com.youth.banner.Banner

android:id="@+id/home_banner"

android:layout_width="match_parent"

android:layout_height="200dp"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

首页文章列表item布局:

<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:tools="http://schemas.android.com/tools"

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto">

<data>

<variable

name="homebean"

type="fule.com.playandroidkotlin.ui.model.ArticleListModel.DatasBean" />

</data>

<androidx.constraintlayout.widget.ConstraintLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:padding="10dp"

tools:ignore="MissingConstraints">

<TextView

android:id="@+id/tv_username"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:layout_constraintLeft_toLeftOf="parent"

android:layout_marginRight="20dp"

android:text="@{homebean.author}"

android:textColor="@color/colorPrimary"

android:textSize="12sp" />

<TextView

android:id="@+id/tv_time"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:layout_constraintEnd_toEndOf="parent"

android:text="@{String.valueOf(homebean.niceDate)}"

android:textColor="@color/colorPrimary"

android:textSize="12sp" />

<androidx.cardview.widget.CardView

android:id="@+id/cv_content"

android:layout_width="100dp"

android:layout_height="80dp"

app:layout_constraintTop_toBottomOf="@+id/tv_username"

android:layout_marginTop="10dp"

android:elevation="0dp"

app:cardCornerRadius="4dp"

app:cardElevation="0dp">

<ImageView

android:id="@+id/iv_content"

android:layout_width="100dp"

android:layout_height="80dp"

android:scaleType="centerCrop"

app:home_image="@{homebean.envelopePic}"/>

</androidx.cardview.widget.CardView>

<TextView

android:id="@+id/tv_content"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_marginStart="12dp"

android:layout_marginTop="10dp"

android:ellipsize="end"

android:gravity="top|start"

android:lineSpacingExtra="2dp"

android:maxLines="2"

android:text="@{homebean.title}"

android:textColor="@color/black"

android:textSize="14sp"

app:layout_constraintLeft_toRightOf="@+id/cv_content"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toBottomOf="@+id/tv_username" />

<TextView

android:id="@+id/tv_type"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="10dp"

android:layout_marginTop="10dp"

android:layout_toRightOf="@+id/cv_content"

android:gravity="center"

android:padding="4dp"

android:text="@{homebean.chapterName}"

android:background="@drawable/shape_article_type_bg"

android:textColor="@color/white"

android:textSize="12sp"

app:layout_constraintLeft_toRightOf="@+id/cv_content"

app:layout_constraintTop_toBottomOf="@+id/tv_content" />

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:layout_constraintTop_toBottomOf="@+id/tv_content"

app:layout_constraintEnd_toEndOf="parent"

android:layout_marginTop="10dp"

app:srcCompat="@drawable/ic_favorite_black_24dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

</layout>

从下图可以看到数据是和视图绑定到一起的，数据发生变化，视图也会改变.其他三个模块的代码都是和首页一样，创建view，绑定视图，请求数据，数据请求成功后直接显示.这里就不写重复赘述了。

5.遇到的问题:

（1）databinding绑定图片和一般的用法不一样，一般的直接设置背景图片就可以，拿到数据后直接用glide显示,这里是和视图绑定的，所以我们得新建一个图片显示的工具类本文暂定ImageUtil,方法必须和布局中的名称一致，否则会报错.

我们在ImageUitl中新建一个显示首页文章列表图片的方法：

@BindingAdapter("image_view")

public static void setImageView(ImageView imageView, String urlString) {

Glide.with(imageView.getContext()).load(urlString).into(imageView);

}

(2)当实体类有一个list我们好处理，但是如果又嵌套一个的话比较麻烦，本博主也是参考网上的方法，找了很多资料才找到这个办法，刚开始一直获取到的第一个数据.

我们这里就以知识模块为例.返回的数据是一个知识体系列表，然后这个体系列表里面又有一个体系文章标题列表

<data>

<variable

name="knowledge"

type="fule.com.playandroidkotlin.ui.model.KnowledgeModel.DataBean" />

<!导入一个list!>

<variable

name="knowList"

type="List<fule.com.playandroidkotlin.ui.model.ChildrenModel>" />

<!表示list的位置!>

<variable

name="index"

type="int" />

</data>

下图中一个表示知识体系列表，一个表示体系列表下的栏目列表

(3)刚开始在fragment布局中layout设置了宽和高会一直报错

图(1)是错误的写法，会一直报错，这是我作为一个初学者啥也不懂踩的坑

图(2)才是正确的写法

6.实现的效果图如下：

7.最后，项目的完整源码地址：https://gitee.com/jackning_admin/MvvmPlayAndroid

当然，这个小demo还有很多问题需要处理，比如登录注册功能，点赞收藏等等，后面有时间会慢慢补上，欢迎各位大佬前来讨论，指出小弟的问题，如有问题，及时提示，我会及时改正.