Android kotlin ui框架,kotlin--快速实现App框架
前言
加入Adroid开发这个阵营已经快两年了，一直使用Java开发，之前也学过Kotlin，但并没有真正运用于项目实践，Kotlin在实际使用中还是有利有弊的，习惯使用Java开发来说，Java更顺手。最近重温Kotlin，下面的Demo是利用实现App的框架，即所谓底部导航。
效果图
开始
底部导航我们采用ViewPager+Fragment实现，具体看代码。
MainActivity的布局activity_main
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:orientation="vertical">
android:layout_weight="1"
android:id="@+id/vpMain"
android:layout_width="match_parent"
android:layout_height="0dp"/>
android:background="@color/colorWhite"
android:id="@+id/tlMain"
app:tabIndicatorColor="@color/colorWhite"
android:layout_width="match_parent"
android:layout_height="50dp"/>
在布局中我们主要是使用控件ViewPager+TabLayout使用基本框架。所以我们需要在build.gradle添加下面依赖：
implementation 'com.android.support:design:28.0.0'
implementation 'com.android.support:appcompat-v4:28.0.0'
我们注意到在TabLayout中，我们设置tabIndicatorColor与背景一样的颜色，主要是为了在视觉隐藏底部导航栏的指示器。
接下来是MainActivity的实现，ViewPager容量的大小即Fragment的数量大家可根据自己的需求进行定义。
MainActivity的实现
class MainActivity : BaseActivity() {
var fragments: MutableList? = null
//底部要显示的标题
var titles: MutableList? = null
//底部要显示的icon
var icons: MutableList? = null
var adapter: MainAdapter? = null
override fun setResourceId(): Int = R.layout.activity_main
override fun preInitData() {
fragments = mutableListOf(MainFragment(), MainFragment(), MainFragment(), MainFragment())
titles = mutableListOf("首页", "时间轴", "发现", "我的")
icons = mutableListOf(
resources.getString(R.string.home),
resources.getString(R.string.timeline),
resources.getString(R.string.found),
resources.getString(R.string.me)
)
adapter = MainAdapter(this, fragments!!, titles!!, supportFragmentManager)
}
override fun initViews() {
vpMain.adapter = adapter
tlMain.setupWithViewPager(vpMain)
initBottomView()
}
/**
* 初始底部的导航栏视图
*/
private fun initBottomView() {
val iconFont = Typeface.createFromAsset(assets, "tab.ttf")
for ((index) in fragments!!.withIndex()) {
val view = LayoutInflater.from(this).inflate(R.layout.layout_main_tab, null, false)
val tvHome = view.findViewById(R.id.tvIcon)
tvHome.text = icons!![index]
tvHome.typeface = iconFont
val tvText = view.findViewById(R.id.tvText)
tvText.text = titles!![index]
tlMain.getTabAt(index)!!.customView = view
}
}
override fun initListener() {
}
override fun initData() {
}
}
变量fragments用于存储要展示的Fragment，变量titles持有底部导航栏的标题，而icons主要用于持有底部icon，并分别在函数preInitData中进行初始化。在initViews函数初始类型为 MainAdapter的适配器adapter，并设置给了ViewPager,同时将ViewPager与TabLayout相关联。
接下来initBottomView函数，底部导航栏的初始化，也是本篇文章的重点。
安装以往的习惯，我一般会在网上下载八个png的icon，对应四个模块的选中状态和没有选中状态。而这次采用icon-font来实现。
第一步，从网上到icon-font或者UI工程师和对应的ttf文件和字符串。下面推荐一个:
网站 http://iconfont.cn/
教程 http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code
根据提示在string文件中添加
在代码for循环中主要是实行自定义TabLayout的customView视图,以达到我们想要的效果。
tlMain.getTabAt(index)!!.customView = view
layout_main_tab实现
android:layout_width="match_parent"
android:gravity="center"
android:orientation="vertical"
android:layout_height="match_parent">
android:paddingTop="2dp"
android:id="@+id/tvIcon"
android:gravity="center"
android:text=""
android:textColor="@color/tab_text_color"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
android:layout_marginTop="2dp"
android:id="@+id/tvText"
android:gravity="center"
android:text=""
android:textSize="8sp"
android:textColor="@color/tab_text_color"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
通过上面的步骤，基本就可以在半小时内快速实现一个基本的框架。
代码很简单，方便新手入门。不懂可以提问哦~
Demo代码
喜欢就Star哦