1、整体结构图与效果图

（1）整体结构图

（2）页面效果图

2、引入Kotlin扩展插件

在根目录下的build.gradle添加kotlin-android-extensions插件

plugins {id 'com.android.application'id 'kotlin-android'id 'kotlin-android-extensions'
}

3、创建各页面布局文件

（1）底端导航栏

<?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="wrap_content"android:background="@color/white"android:baselineAligned="false"><LinearLayoutandroid:id="@+id/id_info_tab"android:layout_width="136dp"android:layout_height="200px"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_info_img"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@color/white"android:clickable="false"android:scaleType="fitCenter"app:srcCompat="@drawable/message_selected"/><TextViewandroid:id="@+id/textView2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center_horizontal"android:clickable="false"android:saveEnabled="false"android:text="消息"/></LinearLayout><LinearLayoutandroid:id="@+id/id_contact_tab"android:layout_width="136dp"android:layout_height="200px"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:clickable="false"android:id="@+id/id_contact_img"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@color/white"android:scaleType="fitCenter"app:srcCompat="@drawable/friend_unselected" /><TextViewandroid:clickable="false"android:id="@+id/textView3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center_horizontal"android:saveEnabled="false"android:text="朋友"/></LinearLayout><LinearLayoutandroid:id="@+id/id_my_tab"android:layout_width="136dp"android:layout_height="200px"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:clickable="false"android:id="@+id/id_my_img"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@color/white"android:scaleType="fitCenter"app:srcCompat="@drawable/myinfo_unselected" /><TextViewandroid:clickable="false"android:id="@+id/textView4"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_horizontal"android:saveEnabled="false"android:text="我的" /></LinearLayout>
</LinearLayout>

（2）信息，联系人，个人信息界面

① 信息页面布局：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#F0F8FF"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/white"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="60dp"android:background="#009FCC"android:gravity="center"android:orientation="vertical"><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:gravity="center_horizontal"android:text="消息"android:textColor="#ffffff"android:textFontWeight="30"android:textSize="25dp" /></LinearLayout></RelativeLayout><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/white"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="center"android:gravity="center"android:text="消息界面"/></RelativeLayout></LinearLayout>
</FrameLayout>

② 联系人界面布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#F0F8FF"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/white"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="60dp"android:background="#009FCC"android:gravity="center"android:orientation="vertical"><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:gravity="center_horizontal"android:text="联系人"android:textColor="#ffffff"android:textFontWeight="30"android:textSize="25dp" /></LinearLayout></RelativeLayout><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/white"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="center"android:gravity="center"android:text="联系人界面"/></RelativeLayout></LinearLayout>
</FrameLayout>

③个人信息界面布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#F0F8FF"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/white"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="60dp"android:background="#009FCC"android:gravity="center"android:orientation="vertical"><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:gravity="center_horizontal"android:text="个人信息"android:textColor="#ffffff"android:textFontWeight="30"android:textSize="25dp" /></LinearLayout></RelativeLayout><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/white"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="center"android:gravity="center"android:text="个人信息界面"/></RelativeLayout></LinearLayout>
</FrameLayout>

（3）activity_main.xml界面

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><FrameLayoutandroid:id="@+id/content"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="1" /><include layout = "@layout/bottom_navbar"/></LinearLayout>

4、编写Java文件代码

（1）信息，联系人，个人信息kotlin文件

①message.kt文件

package com.example.we_chattingimport android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroupclass message : Fragment() {override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,savedInstanceState: Bundle?): View? {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.fragment_message, container, false)}}

②contact.kt文件

package com.example.we_chattingimport android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroupclass contact : Fragment() {override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,savedInstanceState: Bundle?): View? {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.fragment_contact, container, false)}
}

③myinfo.kt

package com.example.we_chattingimport android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroupclass myinfo : Fragment() {override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,savedInstanceState: Bundle?): View? {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.fragment_myinfo, container, false)}}

（2）MainActivity.kt文件

package com.example.we_chattingimport android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentTransaction
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity
import android.util.Log;
import android.view.View;
import android.widget.ImageButton;
import android.widget.LinearLayout;class MainActivity : AppCompatActivity(), View.OnClickListener {private val mTab01: Fragment = message()private val mTab02: Fragment = contact()private val mTab03: Fragment = myinfo()private var mTabInfo: LinearLayout? = nullprivate var mTabContact: LinearLayout? = nullprivate var mTabMy: LinearLayout? = nullprivate var mImgInfo: ImageButton? = nullprivate var mImgContact: ImageButton? = nullprivate var mImgMy: ImageButton? = nullprivate var fm: FragmentManager? = nulloverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)if (supportActionBar != null) {supportActionBar!!.hide()}setContentView(R.layout.activity_main)initFragment()initView()initEvent()selectFragment(0)}//添加界面private fun initFragment() {var fm = supportFragmentManagerval transaction: FragmentTransaction = fm.beginTransaction()transaction.add(R.id.content, mTab01)transaction.add(R.id.content, mTab02)transaction.add(R.id.content, mTab03)transaction.commit()}private fun resetImgs() {mImgInfo!!.setImageResource(R.drawable.message_unselected)mImgContact!!.setImageResource(R.drawable.friend_unselected)mImgMy!!.setImageResource(R.drawable.myinfo_unselected)}private fun initView() {mTabInfo = findViewById<View>(R.id.id_info_tab) as LinearLayoutmTabContact = findViewById<View>(R.id.id_contact_tab) as LinearLayoutmTabMy = findViewById<View>(R.id.id_my_tab) as LinearLayoutmImgInfo = findViewById<View>(R.id.id_info_img) as ImageButtonmImgContact = findViewById<View>(R.id.id_contact_img) as ImageButtonmImgMy = findViewById<View>(R.id.id_my_img) as ImageButton}private fun selectFragment(i: Int) {var fm = supportFragmentManagerval transaction: FragmentTransaction = fm.beginTransaction()hideFragment(transaction)when (i) {0 -> {Log.d("setSelect", "1")transaction.show(mTab01)mImgInfo!!.setImageResource(R.drawable.message_selected)}1 -> {transaction.show(mTab02)mImgContact!!.setImageResource(R.drawable.friend_selected)}2 -> {transaction.show(mTab03)mImgMy!!.setImageResource(R.drawable.myinfo_selected)}else -> {}}transaction.commit()}private fun initEvent() {mTabInfo!!.setOnClickListener(this)mTabContact!!.setOnClickListener(this)mTabMy!!.setOnClickListener(this)}private fun hideFragment(transaction: FragmentTransaction) {transaction.hide(mTab01)transaction.hide(mTab02)transaction.hide(mTab03)}override fun onClick(v: View) {Log.d("onClick", "1")resetImgs()when (v.id) {R.id.id_info_tab -> {Log.d("onClick", "2")selectFragment(0)}R.id.id_contact_tab -> selectFragment(1)R.id.id_my_tab -> selectFragment(2)else -> {}}}
}

5、 小提示

（1）创建fragment文件通过下图方法创建，创建完的kotlin文件中可删除多余方法，只留下onCreateView方法
（2）图标的下载可在阿里巴巴矢量图标库下载