kotlin--快速實現App框架

摘要： 前言 加入Adroid開發這個陣營已經快兩年了，一直使用Java開發，之前也學過Kotlin，但並沒有真正運用於專案實踐，Kotlin在實際使用中還是有利有弊的，習慣使用Java開發來說，Java更順手。最近重溫Kotlin，下面的Demo是利用實現App的框架，即所謂底部導航。 ...

前言

加入Adroid開發這個陣營已經快兩年了，一直使用Java開發，之前也學過Kotlin，但並沒有真正運用於專案實踐，Kotlin在實際使用中還是有利有弊的，習慣使用Java開發來說，Java更順手。最近重溫Kotlin，下面的Demo是利用實現App的框架，即所謂底部導航。

開始

底部導航我們採用 ViewPager + Fragment 實現，具體看程式碼。

MainActivity 的佈局 activity_main

<?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"
android:layout_width="match_parent" android:layout_height="match_parent"

android:orientation="vertical">

<android.support.v4.view.ViewPager
android:layout_weight="1"
android:id="@+id/vpMain"
android:layout_width="match_parent"
android:layout_height="0dp"/>


<android.support.design.widget.TabLayout
android:background="@color/colorWhite"
android:id="@+id/tlMain"
app:tabIndicatorColor="@color/colorWhite"
android:layout_width="match_parent"
android:layout_height="50dp"/>

</LinearLayout>

在佈局中我們主要是使用控制元件 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<BaseFragment>? = null

//底部要顯示的標題
var titles: MutableList<String>? = null

//底部要顯示的icon
var icons: MutableList<String>? = 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<TextView>(R.id.tvIcon)

tvHome.text = icons!![index]

tvHome.typeface = iconFont

val tvText = view.findViewById<TextView>(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 檔案和字串。下面推薦一個:

網站 ofollow,noindex">http://iconfont.cn/

教程 http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code

根據提示在string檔案中新增

<string name="home"></string>
<string name="found"></string>
<string name="me"></string>
<string name="timeline"></string>

在程式碼for迴圈中主要是實行自定義TabLayout的customView檢視,以達到我們想要的效果。

tlMain.getTabAt(index)!!.customView = view

layout_main_tab 實現

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:gravity="center"
android:orientation="vertical"
android:layout_height="match_parent">

<TextView
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"/>

<TextView
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"/>

</LinearLayout>

通過上面的步驟，基本就可以在半小時內快速實現一個基本的框架。

程式碼很簡單，方便新手入門。不懂可以提問哦~

Demo程式碼< [email protected] :zhangwenshuan/App.git>

喜歡就Star哦