Android Studio Kotlin 简单实现微信主界面UI_android kotlin ui

准备编写环境  Y v Y

        操作系统：

                        windows10/11

        Android Studio 属性 ：

                        文件版本 2023.2.0.0

                        产品版本 2023.2.0.AI-232.10227.8.2321._BUILD_NUMBER_

        JAVA属性：

                         java version "17.0.10" 2024-01-16 LTS
                        Java(TM) SE Runtime Environment (build 17.0.10+11-LTS-240)
                        Java HotSpot(TM) 64-Bit Server VM (build 17.0.10+11-LTS-240, mixed mode, sharing)

Android Studio版本不需要跟我的一样，只要检查好JAVA属性(版本)就ok了        

        win+R，打开CMD命令窗口，输入 java -version 查看java版本是否1.17 版本(或者高过)

开始新建项目

        1、选择新建一个项目 New Project，在 Templates 选择到 Phone and Tablet

        （一般这里不用选择，一进来默认就选定了）

        2、找到并选择 Bottom Navigition Views Activity，然后下一步Next。

                
        3、设置项目属性（具体如下），设置完成之后点击 Finish 就可以

      （在新建过程尽量不要动这个窗口<最小化也行>，可能建项目的过程有些慢）
                如果想省事的直接复制我的代码成功运行，项目名字尽量要跟我的一样 WeChat
         如果你要坚持要自己名字的，那你注意我的代码出现 wechat 时看看需不需要更改

         SDK如果想用低版本的，比如：我想用Android 10，记得在Minimum SDK下更改版本

        4、以下就是整个项目的全貌，我展开的都是需要经常用的到文件

                
        5、创建一个 Android 模拟器 运行项目的时候要使用                     

这样Android 模拟器就新建好了，这个项目也就新建好了

准备开始构建项目

                1、找到 res/values/themes.xml (后缀 后面 有个night不要选择)，然后进行修改，shift+F10 运行一下

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.WeChat" parent="Theme.AppCompat">
        <!-- Primary brand color. -->
        <item name="colorOnPrimary">@color/white</item>
        <item name="colorOnSecondary">@color/black</item>
    </style>
</resources>

                                                                                                               

                2、将自己的图标（就是底部导航栏的图标）放到 res/drawable 文件目录下

        （具体路径查询看下方）这些是我在iconmonstr网站下载  下载格式 .PNG

                

                3、找到 res/menu/bottom_nav_menu.xml 文件 进行修改

                (这时候运行一下，如果模拟器能显示出来界面，导航栏多了个东西，就差不多可以了，不过导航栏却动不了，这个是正常的，因为还没有设置到它)

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
 
    <item
        android:id="@+id/navigation_WeChat"
        android:icon="@drawable/message"
        android:title="微信" />
 
    <item
        android:id="@+id/navigation_Friend"
        android:icon="@drawable/friend"
        android:title="通讯录" />
    <item
        android:id="@+id/navigation_Search"
        android:icon="@drawable/find"
        android:title="发现" />
    <item
        android:id="@+id/navigation_Self"
        android:icon="@drawable/self"
        android:title="我" />
</menu>

                4、现在开始设置底部导航栏的跳转，
找到 res/navigation/mobile_navigation.xml  文件修改

<?xml version="1.0" encoding="utf-8"?>
<navigation 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/mobile_navigation"
    app:startDestination="@+id/navigation_WeChat">
 
    <fragment
        android:id="@+id/navigation_WeChat"
        android:name="com.example.wechat.ui.home.HomeFragment"
        android:label="@string/title_home"
        tools:layout="@layout/fragment_home" />
 
    <fragment
        android:id="@+id/navigation_Friend"
        android:name="com.example.wechat.ui.dashboard.DashboardFragment"
        android:label="@string/title_dashboard"
        tools:layout="@layout/fragment_dashboard" />
 
    <fragment
        android:id="@+id/navigation_Search"
        android:name="com.example.wechat.ui.notifications.NotificationsFragment"
        android:label="@string/title_notifications"
        tools:layout="@layout/fragment_notifications" />
 
    <fragment
        android:id="@+id/navigation_Self"
        android:name="com.example.wechat.ui.home.HomeFragment"
        android:label="@string/title_home"
        tools:layout="@layout/fragment_home" />
</navigation>

                 5、找到 MainActivity 进行修改

package com.example.wechat
 
import android.os.Bundle
import com.google.android.material.bottomnavigation.BottomNavigationView
import androidx.appcompat.app.AppCompatActivity
import androidx.navigation.findNavController
import androidx.navigation.ui.AppBarConfiguration
import androidx.navigation.ui.setupActionBarWithNavController
import androidx.navigation.ui.setupWithNavController
import com.example.wechat.databinding.ActivityMainBinding
 
class MainActivity : AppCompatActivity() {
 
    private lateinit var binding: ActivityMainBinding
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
 
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
 
        val navView: BottomNavigationView = binding.navView
 
        val navController = findNavController(R.id.nav_host_fragment_activity_main)
        // Passing each menu ID as a set of Ids because each
        // menu should be considered as top level destinations.
        val appBarConfiguration = AppBarConfiguration(
            setOf(
                R.id.navigation_WeChat,
                R.id.navigation_Friend,
                R.id.navigation_Search,
                R.id.navigation_Self
            )
        )
        setupActionBarWithNavController(navController, appBarConfiguration)
        navView.setupWithNavController(navController)
    }
}

          修改完成！直接运行项目（running）

恭喜你完成最最简单的微信主界面UI

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/586405