先放效果图:
第一张是登录页面效果图。用户输入登录名和密码,经过后台的非空验证和固定值验证,跳转到首页
第二张是首页效果图。用户点击 “update” 显示用户名和密码
这里的用户名和密码是后台设置的固定值,整体的登录逻辑特别简单,就是想通过登录来练手,学习mvc模式。
首先,创建相应的模型、视图和控制器类。
- Model (User.kt)
data class User(var username: String, var password: String)
- 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()}}} }
- 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} }
- 布局文件 (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"
属性。这会让输入的内容以点或星号的形式显示,而不是实际输入的字符。 -
下面简单写一下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} }
-
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 进行验证。如果验证成功,用户将被重定向到主页面。如果验证失败,则会显示错误提示。效果如图:
-
注意:我的代码里面没有使用R.id.…… 而是用 ViewBinding 代替,主页有文章介绍了ViewBinding 感兴趣的小伙伴可以去主页看看。
-
下一篇文章,我们讲述:《ImageView控件怎么设置圆角和圆形》