OAmbre / WanAndroid_Gank

MVVM架构的真Material Design版玩Android客户端

WanAndroid_GanK

玩Android大家都很熟悉了，是鸿洋大佬的一个开源知识网站，目前基于玩Android开源API的各种版本APP也多是如牛毛。

那么经过一段时间的潜心修炼，今天给大家带来了一个从未有过的船新版本。

下载安装包体验点击这里

蓝奏云

或者扫描二维码

设计

这次的UI整体是根据Google官方的设计，参照Material Design的风格整粗来的，应该能给大家带来耳目一新的感觉。

下面我们先来看看效果图

底部导航栏的展开动画

滑动收藏文章

技术

技术方面采用的是Kotlin语言实现，整体架构为MVVM。

Model

Model包含本地和网络数据仓库，本地数据使用ROOM交互，网络数据使用Retrofit配合协程调用接口

class WanHomeRepository : BaseWanRepository() {

    suspend fun getBanners(): WanResult<List<Banner>> {
        return readyCall(
            call = {
                call(WanClient.service.getBanner())
            }, errorMessage = NETWORK_ERROR
        )
    }

    suspend fun getArticlesList(page: Int): WanResult<ArticleList> {
        return readyCall(
            call = {
                call(WanClient.service.getHomeArticles(page))
            }, errorMessage = NETWORK_ERROR
        )
    }
}

ViewModel

ViewModel持有Model层，在协程的作用域内与Model进行交互

class WanHomeViewModel(
    private val wanHomeRepository: WanHomeRepository
) : ViewModel() {

    val mArticles = MutableLiveData<List<Article>>()
    val mBanners = MutableLiveData<List<Banner>>()

    fun getBanners() = viewModelScope.launch {
        val data = wanHomeRepository.getBanners()
        if (data is WanResult.Success)
            mBanners.value = data.data
    }

    fun getArticles(page: Int) = viewModelScope.launch {
        val articleList = wanHomeRepository.getArticlesList(page)
        if (articleList is WanResult.Success)
            mArticles.value = articleList.data.datas
    }
}

View

View层即为我们熟悉的Activity和Fragment，通过注入的方式持有ViewModel，调用ViewModel的方法获取数据之后再通过LiveData通知界面进行刷新。

class WanHomeFragment : BaseFragment(R.layout.fragment_wan_home) {

    private val binding by viewBinding(FragmentWanHomeBinding::bind)
    private val viewModel: WanHomeViewModel by viewModel()

	...

    override fun initData() {
        viewModel.getBanners()
        binding.refreshLayout.autoRefresh()
    }

    override fun startObserve() = viewModel.run {
        mBanners.observe(this@WanHomeFragment, Observer { setBanner(it) })
        mArticles.observe(this@WanHomeFragment, Observer { mAdapter.addAll(it) })
    }
}

更多实现请clone查看~

欢迎各位看官老爷star鼓励~