使用 MVC 模式，实现简单登录功能 (Kotlin)

先放效果图：

    

第一张是登录页面效果图。用户输入登录名和密码，经过后台的非空验证和固定值验证，跳转到首页

第二张是首页效果图。用户点击 “update” 显示用户名和密码

这里的用户名和密码是后台设置的固定值，整体的登录逻辑特别简单，就是想通过登录来练手，学习mvc模式。

首先，创建相应的模型、视图和控制器类。

1. Model (User.kt)

   data class User(var username: String, var password: String)
   

2. View (LoginActivity.kt)

   class LoginActivity : AppCompatActivity() {private lateinit var binding: ActivityLoginBindingprivate val loginController = LoginController()override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)binding = ActivityLoginBinding.inflate(layoutInflater)setContentView(binding.root)//初始化initData()}fun initData() {binding.loginBtnLogin.setOnClickListener {val userName = binding.loginEtName.text.toString()val passwd = binding.loginEtPwd.text.toString()if (loginController.validateCredentials(userName, passwd)) {Toast.makeText(this, "登录成功~", Toast.LENGTH_SHORT).show()val intent = Intent(this, MainActivity::class.java).apply {putExtra("input_text", userName)putExtra("input_pwd",passwd)}startActivity(intent)finish()} else {Toast.makeText(this, "登录失败~", Toast.LENGTH_SHORT).show()}}}
   }

3. Controller (LoginController.kt)

   class LoginController {companion object {const val FIXED_USERNAME = "admin"const val FIXED_PASSWORD = "123123"}fun validateCredentials(username: String, password: String): Boolean {val isNotEmpty = username.isNotEmpty() && password.isNotEmpty()//验证用户名和密码是否为空val isFixedValue = username == FIXED_USERNAME && password == FIXED_PASSWORD//验证用户名和密码是否为固定值return isNotEmpty && isFixedValue}
   }

4. 布局文件 (activity_login.xml)

   <?xml version="1.0" encoding="utf-8"?>
   <androidx.constraintlayout.widget.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:layout_width="match_parent"android:layout_height="match_parent"tools:context=".LoginActivity"><ImageViewandroid:id="@+id/login_imv"android:layout_width="88dp"android:layout_height="88dp"android:layout_marginTop="100dp"android:src="@drawable/login_logo"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent" /><EditTextandroid:id="@+id/login_et_name"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:hint="请输入账号"android:minWidth="200dp"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toBottomOf="@+id/login_imv" /><EditTextandroid:id="@+id/login_et_pwd"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:hint="请输入密码"android:inputType="textPassword"android:minWidth="200dp"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toBottomOf="@+id/login_et_name" /><Buttonandroid:id="@+id/login_btn_login"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="登录"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toBottomOf="@+id/login_et_pwd" /></androidx.constraintlayout.widget.ConstraintLayout>

   在 EditText 控件中，如果你想要在用户输入密码时隐藏内容，你可以使用 android:inputType="textPassword" 属性。这会让输入的内容以点或星号的形式显示，而不是实际输入的字符。

5. 下面简单写一下MainActivity.java 页面

   class MainActivity : AppCompatActivity() {private lateinit var binding: ActivityMainBindingprivate lateinit var user: Useroverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)binding = ActivityMainBinding.inflate(layoutInflater)setContentView(binding.root)initData()}fun initData() {//初始化模型user = User("嘎嘎嘎", "gagaga")//设置按钮点击事件binding.btnUpdate.setOnClickListener {//更新模型user.name = intent.getStringExtra("input_text").toString()user.password = intent.getStringExtra("input_pwd").toString()//更新视图updateView()}}fun updateView() {binding.tvName.text = user.namebinding.tvEmail.text = user.password}
   }

6. activity_main.xml

   <?xml version="1.0" encoding="utf-8"?>
   <androidx.constraintlayout.widget.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:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"android:orientation="vertical"><TextViewandroid:id="@+id/tv_name"android:layout_width="wrap_content"android:layout_height="wrap_content"app:layout_constraintTop_toTopOf="parent"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"/><TextViewandroid:id="@+id/tv_email"android:layout_width="wrap_content"android:layout_height="wrap_content"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toBottomOf="@+id/tv_name" /><Buttonandroid:id="@+id/btn_update"android:layout_width="wrap_content"android:layout_height="wrap_content"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toBottomOf="@+id/tv_email"android:text="Update" /></androidx.constraintlayout.widget.ConstraintLayout>

   以上代码实现了一个简单的 MVC 模式的登录页面。用户在登录页面输入用户名和密码，然后通过 LoginController 进行验证。如果验证成功，用户将被重定向到主页面。如果验证失败，则会显示错误提示。效果如图：

7. 

8. 注意：我的代码里面没有使用R.id.…… 而是用 ViewBinding 代替，主页有文章介绍了ViewBinding 感兴趣的小伙伴可以去主页看看。

9. 下一篇文章，我们讲述：《ImageView控件怎么设置圆角和圆形》