Android Studio 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 模拟器 运行项目的时候要使用                      一、点击Device Manger 在右上角标题  二、点击那个 + 号 三、选择模拟器，一般我选择的是 Pixel 模拟器（这个看个人习惯） 四、点击下一步 ，这个一定要选择 UpsideDownCake，最后点击 Finish

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

准备开始构建项目

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

                        @color/white        @color/black    

                                                                                                               

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

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

查看res/drawable路径 查看res/drawable路径

                

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

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

                4、现在开始设置底部导航栏的跳转，

找到 res/navigation/mobile_navigation.xml  文件修改

                 5、找到 MainActivity 进行修改

package com.example.wechatimport android.os.Bundleimport com.google.android.material.bottomnavigation.BottomNavigationViewimport androidx.appcompat.app.AppCompatActivityimport androidx.navigation.findNavControllerimport androidx.navigation.ui.AppBarConfigurationimport androidx.navigation.ui.setupActionBarWithNavControllerimport androidx.navigation.ui.setupWithNavControllerimport com.example.wechat.databinding.ActivityMainBindingclass 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

这似乎有点粗糙，那么接下来继续完善

（也就是把咖啡上别人的拉花，换成自己的拉花，内核没有什么大的改动）
        主要都是 更改名字 为项目后面 操作流畅 打下基础

        1、找到 res/values/string.xml 文件修改

    WeChat    WeChat    Friend    Search    Self

        2、修改 res/layout 文件夹下的文件

                一、首先新建一个xml文件在 res/layout 目录下 fragment_self.xml

                二、然后编写 fragment_self.xml   

        3、修改 ui 文件

 

                一、修改self文件夹下文件名称（主要操作改名）如图

这时候运行一下项目看看是否改名成功，项目运行成功接着往下做

        一般情况下这个Rename Variables只有一个选项直接勾选就可以，只不过因为我们是复制UI下同个文件夹，导致它判断出多个情况

        你可以根据这个顺序更改文件名:

                home - > weichat

                dashboard -> friend

                notifiction - > search

                二、同理将ui下的另外三个文件夹都给改了名字

                三、更改文件中的代码                        

----------------------------------------------------------------------------friendFragment文件::----------------------------------------------------------------------------package com.example.wechat.ui.friendimport android.os.Bundleimport android.view.LayoutInflaterimport android.view.Viewimport android.view.ViewGroupimport android.widget.TextViewimport androidx.fragment.app.Fragmentimport androidx.lifecycle.ViewModelProviderimport com.example.wechat.databinding.FragmentFriendBindingclass friendFragment : Fragment() {    private var _binding: FragmentFriendBinding? = null    // This property is only valid between onCreateView and    // onDestroyView.    private val binding get() = _binding!!    override fun onCreateView(        inflater: LayoutInflater,        container: ViewGroup?,        savedInstanceState: Bundle?    ): View {        val friendViewModel =            ViewModelProvider(this).get(friendViewModel::class.java)        _binding = FragmentFriendBinding.inflate(inflater, container, false)        val root: View = binding.root        val textView: TextView = binding.textFriend        friendViewModel.text.observe(viewLifecycleOwner) {            textView.text = it        }        return root    }    override fun onDestroyView() {        super.onDestroyView()        _binding = null    }}----------------------------------------------------------------------------friendViewModel文件::----------------------------------------------------------------------------package com.example.wechat.ui.friendimport androidx.lifecycle.LiveDataimport androidx.lifecycle.MutableLiveDataimport androidx.lifecycle.ViewModelclass friendViewModel : ViewModel() {    private val _text = MutableLiveData().apply {        value = "This is Friend Fragment"    }    val text: LiveData = _text}---------------------------------------------------------------------------searchFragment文件::---------------------------------------------------------------------------package com.example.wechat.ui.searchimport android.os.Bundleimport android.view.LayoutInflaterimport android.view.Viewimport android.view.ViewGroupimport android.widget.TextViewimport androidx.fragment.app.Fragmentimport androidx.lifecycle.ViewModelProviderimport com.example.wechat.databinding.FragmentSearchBindingclass searchFragment : Fragment() {    private var _binding: FragmentSearchBinding? = null    // This property is only valid between onCreateView and    // onDestroyView.    private val binding get() = _binding!!    override fun onCreateView(        inflater: LayoutInflater,        container: ViewGroup?,        savedInstanceState: Bundle?    ): View {        val searchViewModel =            ViewModelProvider(this).get(searchViewModel::class.java)        _binding = FragmentSearchBinding.inflate(inflater, container, false)        val root: View = binding.root        val textView: TextView = binding.textSearch        searchViewModel.text.observe(viewLifecycleOwner) {            textView.text = it        }        return root    }    override fun onDestroyView() {        super.onDestroyView()        _binding = null    }}---------------------------------------------------------------------------searchViewModel文件::---------------------------------------------------------------------------package com.example.wechat.ui.searchimport androidx.lifecycle.LiveDataimport androidx.lifecycle.MutableLiveDataimport androidx.lifecycle.ViewModelclass searchViewModel : ViewModel() {    private val _text = MutableLiveData().apply {        value = "This is Search Fragment"    }    val text: LiveData = _text}---------------------------------------------------------------------------selfFragment文件::---------------------------------------------------------------------------package com.example.wechat.ui.selfimport android.os.Bundleimport android.view.LayoutInflaterimport android.view.Viewimport android.view.ViewGroupimport android.widget.TextViewimport androidx.fragment.app.Fragmentimport androidx.lifecycle.ViewModelProviderimport com.example.wechat.databinding.FragmentSelfBindingclass selfFragment : Fragment() {    private var _binding: FragmentSelfBinding? = null    // This property is only valid between onCreateView and    // onDestroyView.    private val binding get() = _binding!!    override fun onCreateView(        inflater: LayoutInflater,        container: ViewGroup?,        savedInstanceState: Bundle?    ): View {        val selfViewModel =            ViewModelProvider(this).get(selfViewModel::class.java)        _binding = FragmentSelfBinding.inflate(inflater, container, false)        val root: View = binding.root        val textView: TextView = binding.textSelf        selfViewModel.text.observe(viewLifecycleOwner) {            textView.text = it        }        return root    }    override fun onDestroyView() {        super.onDestroyView()        _binding = null    }}---------------------------------------------------------------------------selfViewModel文件::---------------------------------------------------------------------------package com.example.wechat.ui.selfimport androidx.lifecycle.LiveDataimport androidx.lifecycle.MutableLiveDataimport androidx.lifecycle.ViewModelclass selfViewModel : ViewModel() {    private val _text = MutableLiveData().apply {        value = "This is Self Fragment"    }    val text: LiveData = _text}---------------------------------------------------------------------------wechatFragment文件::---------------------------------------------------------------------------package com.example.wechat.ui.wechatimport android.os.Bundleimport android.view.LayoutInflaterimport android.view.Viewimport android.view.ViewGroupimport android.widget.TextViewimport androidx.fragment.app.Fragmentimport androidx.lifecycle.ViewModelProviderimport com.example.wechat.databinding.FragmentWechatBindingclass wechatFragment : Fragment() {    private var _binding: FragmentWechatBinding? = null    // This property is only valid between onCreateView and    // onDestroyView.    private val binding get() = _binding!!    override fun onCreateView(        inflater: LayoutInflater,        container: ViewGroup?,        savedInstanceState: Bundle?    ): View {        val wechatViewModel =            ViewModelProvider(this).get(wechatViewModel::class.java)        _binding = FragmentWechatBinding.inflate(inflater, container, false)        val root: View = binding.root        val textView: TextView = binding.textWechat        wechatViewModel.text.observe(viewLifecycleOwner) {            textView.text = it        }        return root    }    override fun onDestroyView() {        super.onDestroyView()        _binding = null    }}---------------------------------------------------------------------------wechathViewModel文件::---------------------------------------------------------------------------package com.example.wechat.ui.wechatimport androidx.lifecycle.LiveDataimport androidx.lifecycle.MutableLiveDataimport androidx.lifecycle.ViewModelclass wechatViewModel : ViewModel() {    private val _text = MutableLiveData().apply {        value = "This is Wechat Fragment"    }    val text: LiveData = _text}

        5、更改 res/layout 文件下文件

                一、更改文件名字

修改前

  

        请根据这个顺序更改文件名（不要到后面会混乱的）:

                home - > wechat

                dashboard -> friend

                notifiction - > search

                二、更改文件中的代码

fragment_wechat.xml              android:改成-------        android:-------------------------------------------------------fragment_friend.xml              android:改成-------        android:-------------------------------------------------------fragment_search.xml              android:改成-------        android:

        5、找到 res/navigation/moobile_navigation.xml 文件修改

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