学习Kotlin第二篇

记录学习路上的点滴

实现效果

今天突发奇想，想用Kotlin结合Material Design实现出tab切换的效果，效果如下

实现思路

还是用Material Design的新组件来实现，不仅美观而且高效已用，然后结合Kotlin实现。虽然一开始还不知道思路，但是可以从官方给出的demo下手，理清思路。

1	打开android studio->new project->新建MainActivity时选择Bottom Navigation Activity

新建出来build之后，就发现了这么几个类

MainActivity
activity_main.xml
navigation.xml

就这么三个，内容极度舒适。接下来看一下代码

MainActivity

package com.demo.kotlin.demo20190116

import android.os.Bundle
import android.support.design.widget.BottomNavigationView
import android.support.v7.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
        when (item.itemId) {
            R.id.navigation_home -> {
                message.setText(R.string.title_home)
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_dashboard -> {
                message.setText(R.string.title_dashboard)
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_notifications -> {
                message.setText(R.string.title_notifications)
                return@OnNavigationItemSelectedListener true
            }
        }
        false
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
    }
}

activity_main.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginStart="@dimen/activity_horizontal_margin"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:text="@string/title_home"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation" />

</android.support.constraint.ConstraintLayout>

navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />

</menu>

ConstraintLayout

约束布局ConstraintLayout 是一个ViewGroup，可以在Api9以上的Android系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件。从 Android Studio 2.3 起，官方的模板默认使用 ConstraintLayout。ConstraintLayout能够减少布局的层级并改善布局性能，ConstraintLayout 能够灵活地定位和调整子View的大小，子 View 依靠约束关系来确定位置。在一个约束关系中，需要有一个 Source（源）以及一个 Target（目标），Source 的位置依赖于 Target，可以理解为“通过约束关系，Source 与 Target链接在了一起，Source 相对于 Target 的位置便是固定的了。

说了一大堆，还是不太懂，只是把它理解为相对布局的增强版就ok了。- -！

BottomNavigationView

底部导航的实现之一为BottomNavigationView，是design库下的一款控件，其中关键属性为

1	app:menu="@menu/navigation"

需要定义一个menu，用来显示底部Tab的Item。如上面的navigation.xml，这样就可以在页面底部显示出一个Tab，不需要像原来那样自己写LinearLayout，里面嵌套ImageView和TextView了。

OnNavigationItemSelectedListener

现在只是编写好了xml，显示出了BottomNavigationView，但是他还不能滑动，这显然是不行的。所以要在MainActivity中编写Item的事件监听。代码如下

private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
        when (item.itemId) {
            R.id.navigation_home -> {
                message.setText(R.string.title_home)
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_dashboard -> {
                message.setText(R.string.title_dashboard)
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_notifications -> {
                message.setText(R.string.title_notifications)
                return@OnNavigationItemSelectedListener true
            }
        }
        false
    }

继续完善

显然这不是我想追求的，起码每个Item得有一个对应的fragment用来显示。继续完善

step 1 FrameLayout

首先先把原先那个简陋的TextView给替换掉，如下

step 2 然后再定义三个Fragment和其xml文件，如下(第二个，第三个割了。墨迹)

step 3 最后看一下MainActivity，主角登场

首先百度了一下Kotlin中Fragment的添加，替换写法，发现真的好简单。写成函数的形式，即取即用。
然后就是使用了，首先默认显示的是第一个Fragment吧，在页面加载时，就添加好

上面的注解只是为了让编译器不报警告，我有强迫症，在此记录一下，弄明白这个注解的含义
最后重新写一下监听函数，用下面的fragment添加，替换方法很简单