我是编程探索家阿源。大家如果想继续跟着学做一款APP(安卓+苹果双版本)，请关注西瓜视频或者头条号：编程探索家。

先看一下我们这个系列教程需要做出来的APP效果：

1、 打开Android Studio，创建一个新工程"Create New Project"，选择带有底部导航的模板"Bottom Navigation Activity"，然后点击"Next"

2、 输入工程的信息，Name代表名称(后面可自行修改)，Package name代表包名(每个APP的包名都是唯一的，这个确认了以后不可以修改)，Save location是项目保存的目录，Language开发语言选择Kotlin，其他保留默认点击"Finish"完成创建

3、手机进入开发者模式后，通过数据线连接电脑，点击"Run app"按钮运行到手机看看效果

4、通过模板运行的APP跟设计图差别还是很大的，需要一步一步调整，本次先调整首页的Tabbar和Navigation

5、先设置好中文名称备用，一般APP里面固定的文字建议大家在res->values->strings.xml里面统一设置

6、然后在res->menu->bottom_nav_menu.xml文件下对应修改Tabbar的配置

7、然后到res->navigation->mobile_navigation.xml文件下为每个Tabbar按钮都添加对应的Fragment声明

8、然后添加每个界面对应的类文件，比较简单的方法是，到工程目录把自动生成的类文件夹复制3个，分别命名为"friends"，"news"，"mine"，再修改里面的文件名和类名即可

9、然后修改复制的文件夹里面的类名称，这里我以"friends"为例说明。在res->navigation->mobile_navigation.xml里面，friends对应的Fragment定义的android:name="com.imcoder.communication.ui.friends.FriendsFragment"，FriendsFragment就是friends对应的类文件的名称，此外文件夹下还有一个Model文件DashboardViewModel.kt，我们按照这个规则将其修改为FriendsViewModel.kt备用。其他的news和mine大家按照同样方法操作。

10、修改了文件名称后，还需要对应修改文件里面的内容才会生效。以friends为例，在Android Studio打开目录java->com.imcoder.communicationapp->ui->friends，注意com.imcoder.communicationapp这个跟你们在开始定义的包名有关，每个人都不一样。

A、 先修改FriendsFragment.kt文件，主要修改类名DashboardFragment到FriendsFragment

B、 修改引用的Model类名称，DashboardViewMode => FriendsViewModel，dashboardViewModel => friendsViewModel

C、 修改界面对应的布局文件名称，fragment_dashboard => fragment_friends，R.id.text_dashboard是类里面的一个局部变量，不修改也没问题

D、 我在写文档的时候漏了，FriendsFragment.kt和FriendsViewModel.kt的第一行内容需要修改为正确的文件目录com.imcoder.communication.ui.friends

D、然后修改FriendsViewModel.kt文件，只需要修改类名即可DashboardViewModel => FriendsViewModel

按照同样的方法，把news，mine文件夹里面的都修改过来

11、然后为每个界面添加布局文件，在res->navigation->mobile_navigation.xml文件里面可以看到每个Tabbar对应的Fragment定义的布局文件

到res->layout目录下，对fragment_dashboard.xml复制三份，分别命名为fragment_friends.xml，fragment_news.xml，fragment_mine.xml，然后我以fragment_friends.xml为例进行修改

修改tools:context=".ui.friends.FriendsFragment"，这个的意思是当前的布局文件关联的类是ui/friends/FriendsFragment，应该创建有类然后再有布局文件，这样一一对应关系；如果你修改了FriendsFragment里面的文本ID，这里也需要对应修改，看图就明白了

12、修改每个Tabbar对应的图标，图标一类的文件建议大家放在res->drawable文件夹下，用"@drawable/图片名称"这样的方式访问，注意图标应该是.png格式的

13、现在把我们添加的Tabbar都要在工程的入口com/imcoder/communicationapp/ MainActivity.kt进行声明

14、编译看一下现在的效果(下面这张是gif动图，只是word文档好像不可以动，大家可以另存到电脑查看)

看到现在底部Tabbar跟设计图还是有区别：1、每个Tabbar的图片没有状态的切换；2、Tabbar名称的文字如果没选中就没有显示了；3、Tabbar名字文字的颜色也不可以切换。接下来就解决这些问题。

15、在res->drawable文件夹下新建4个文件(名字没有要求，你们自己定)tabbar_home.xml、tabbar_friends.xml、tabbar_news.xml、tabbar_mine.xml，这4个文件是Tabbar按钮的4个图标选择器，我以tabbar_home.xml为例操作

其余3个也是这样的操作，然后到res->menu->bottom_nav_menu.xml文件修改每个Tabbar item的android:icon

16、然后需要修改Tabbar的背景颜色跟设计图一致，每个Tabbar名称即使没选中也要显示，还有Tabbar名称的状态颜色

先在res->values->colors.xml文件里面增加3个颜色值，我这里命名为tabbarBgcolor(#EEEEEE，这是Tabbar的背景颜色)，tabbarOn(#3F7CF1，这是Tabbar在选中时文字的颜色)，tabbarOff(#373737，这是Tabbar没选中时文字的颜色)

然后在res->drawable目录下新增tabbar_txt_color.xml(文件名你随意)，这个文件的作用是声明在不同状态下的颜色选择

然后修改res->layout->activity_main.xml布局文件里面的BottomNavigationView，增加几个属性android:background="@color/tabbarBgcolor"(设置Tabbar的背景颜色)，app:labelVisibilityMode="labeled"(设置在没选中时也要显示Tabbar名称)，app:itemTextColor="@drawable/tabbar_txt_color"(设置Tabbar切换状态时文字的颜色)

修改以后再编译看看效果

可以看到已经跟设计图的一致了，Tabbar上的小圆点会在以后讲到相关内容的时候介绍。接下来修改头部的statusBar(状态栏)和actionBar(动作栏)

17、先修改statusBar为灰底黑字，先在res->values->colors.xml文件里面增加一个色值actionbarBgcolor(#F9F9F9，这是statusBar的背景颜色)

然后在res->values->themes->themes.xml文件增加一个属性声明android:statusBarColor="@color/actionbarBgcolor"

然后在com/imcoder/communicationapp/ MainActivity.kt里面添加一个函数changeStatusColor(setDark: Boolean)，这个函数的作用是修改StatusBar的文字颜色，setDark参数如果是true，意思是文字颜色为白色，否则就是黑色

修改好了编译看看效果

18、接下来把actionBar的样式也修改成设计图的一样，这里我会使用Toolbar来代替原来的Navigation实现(Navigation实在是…..留给你们自己体会)

先把res->values->themes->themes.xml里面的主题修改成noActionBar，意思是把原来默认的actionBar去掉；然后把com/imcoder/communicationapp/MainActivity.kt里面的setupActionBarWithNavController函数(这个函数的作用是根据当前的动作设置actionBar的标题)调用注释掉。

到这里如果大家重新编译就会发现，原来自带的ActionBar已经没有了。

现在添加ToolBar代替原来的ActionBar，在res->layout->activity_main.xml文件里，把整个界面给actionBar预留的高度android:paddingTop="?attr/actionBarSize"删掉，然后添加Toolbar到布局上来。

现在重新编译看下效果

基本的效果已经出来了，本期视频先介绍到这里。大家如果想继续跟着学做一款APP(安卓+苹果双版本)，请关注西瓜视频或者头条号：编程探索家。

没基础没关系，上面的教程你看需要基础吗~

每期视频结束请大家把操作的结果截图发在评论区，有问题可以留言或者私信给我。每期视频的源代码和教程文档请在腾讯工蜂代码仓库(https://git.code.tencent.com/Imcoder/studio.git)下载，代码仓库使用的教程请看我的视频《我家的猫和我为你讲解：Git是什么？为什么要使用代码仓库？》

下期视频内容：使用Toolbar动态设置界面标题以及右上角的工具栏