Android界面设计(初学）

一、实现一个登陆页面及操作

1. 创建一个名为MyUIDesign工程，实现一个登陆界面，登陆后进入一个水果列表界面，具体内容如下。
2. 首先实现一个app登陆页面的设计，包括的内容有：

• 采用Empty Activity新建一个名为LoginActivity的活动，而布局文件命名为login_layout.xml；
• 在AndroiManifest.xml中，将LoginActivity设置为应用启动默认启动的Activity；
• 在布局文件login_layout.xml，采用LinearLayout布局进行设计，包含TextView、EditText、Button控件，布局如图所示（tips：分成三个子LinearLayout进行布局）；
• 多个TextView宽度相同，比如说设置为60dp（根据自己的想法进行适当调整）；
• 多个EditText自动拉伸占满屏幕宽度，文字对齐，输入框对齐，能够适配不同的屏幕宽度（tips：采用layout_weight属性进行设置）；

    3. 针对第 2 点内容的布局进行优化，最终实现的效果如下图所示：

  （ 1 ） 所有的文字大小均改成 24sp ；

  （ 2 ） 前两个子 LinearLayout 的高度设置成 80dp ，添加 gravity 属性为 bottom ，左侧的

    TextView 添加 layout_marginLeft 属性，右侧的 EditText 控件添加 layout_marginRight

     属性；

  （ 3 ） 按钮所在的子 LinearLayout 添加 gravity 属性为 center ，两个按钮控件添加

    layout_margin 属性，比如说给定 10dp 。

  代码：

l ogin_layout.xml

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
2
android:layout_marginBottom="10dp">
<TextView
android:layout_width="60dp"
android:layout_height="wrap_content"
android:text="用户名"
android:textSize="16dp"/>
<EditText
android:id="@+id/usernameEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="请输入用户名"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="16dp">
<TextView
android:layout_width="60dp"
android:layout_height="wrap_content"
android:text="密 码"
android:textSize="16dp"/>
<EditText
android:id="@+id/pwdEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="请输入密码"
android:inputType="textPassword"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/loginBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="登录"/>
<Button
android:id="@+id/registerBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="注册"/>
</LinearLayout>

改进后：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- 子 LinearLayout 1：包含用户名的 TextView -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:orientation="horizontal"
android:gravity="bottom">
4
<TextView
android:layout_width="60dp"
android:layout_height="match_parent"
android:textSize="24sp"
android:text="用户名:"
android:gravity="bottom"
android:layout_marginLeft="10dp"/>
<EditText
android:id="@+id/username_edit_text"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="24sp"
android:hint="请输入用户名"
android:inputType="text"
android:layout_marginRight="10dp"/>
</LinearLayout>
<!-- 子 LinearLayout 2：包含密码的 TextView -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:orientation="horizontal"
android:gravity="bottom">
<TextView
android:layout_width="80dp"
android:layout_height="match_parent"
android:textSize="24sp"
android:text="密码:"
android:gravity="bottom"
android:layout_marginLeft="10dp"/>
<EditText
android:id="@+id/password_edit_text"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="24sp"
android:hint="请输入密码"
android:inputType="textPassword"
android:layout_marginRight="10dp"/>
</LinearLayout>
5
<!-- 子 LinearLayout 3：包含登录按钮 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<Button
android:id="@+id/loginBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="登录"
android:textSize="24sp"
android:layout_margin="10dp"/>
<Button
android:id="@+id/registerBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="注册"
android:textSize="24sp"
android:layout_margin="10dp"/>
</LinearLayout>

4. admin 账户成功登陆功能

（ 1 ） 在布局文件 login_layout 中对两个 EditText 和登陆 Button 控件给定 id 属性；

（ 2 ） 在 LoginActivity 代码中，实现登陆 Button 的点击监听。

（ 3 ） 点击登陆 Button ，当输入的帐户为 “admin” ，密码为 “123456” 时，则判定成功登陆，

并跳转到 MainActivity ，

（ 4 ） 点击登陆 Button ，当输入帐户不为 “admin” 或密码不为 “123456” 时，则判定登陆失

败，此时采用 AlertDialog 提醒 “ 用户名或者密码输入错误 ” 。

代码：

login_layout.xml

LoginActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.login_layout)
val loginBtn=findViewById<Button>(R.id.loginBtn)
// 获取 username_edit_text 和 password_edit_text
val usernameEditText = findViewById<EditText>(R.id.username_edit_text)
val passwordEditText = findViewById<EditText>(R.id.password_edit_text)
// 设置登录按钮点击事件
loginBtn.setOnClickListener {
// 获取用户名和密码
val username = usernameEditText.text.toString().trim()
val password = passwordEditText.text.toString().trim()
// 检查用户名和密码是否为 admin 和 123456
if (username == "admin" && password == "123456") {
// 登录成功，跳转到 MainActivity
val intent = Intent(this@LoginActivity, MainActivity::class.java)
startActivity(intent)
finish() // 结束当前活动，防止按返回键回到登录界面
} else {
// 登录失败，显示提示对话框
showLoginFailedDialog()
}
}
}
// 显示登录失败的提示对话框
private fun showLoginFailedDialog() {
AlertDialog.Builder(this)
8
.setMessage("用户名或者密码输入错误")
.setTitle("登录失败")
.setPositiveButton("OK", null)
.create()
.show()
}

虚拟机显示

当输入不正确的用户信息

输入匹配的用户信息 ; 则跳转

二、采用ViewBinding 实现一个 RecyclerView

1. 在 app/build.gradle 中添加 recyclerview 依赖，并打开 viewBinding ，如下：

（ 1 ） 在 app/build.gradle 中添加依赖：

其中版本号 1.x.0 将根据会自动更新。

（ 2 ） 在 app/build.gradle 中 打 开 viewBinding 功 能 ， 在 android 字 段 下 将

viewBinding 设置为 true ，如下：

（ 3 ） 然后点击同步 Sync ，同步项目。

2. 在 layout 目录下创建一个 fruit_item.xml

（ 1 ） 设置为 LinearLayout ，宽度为 match_parent ，高度为 80dp ， layout_margin 设为

5dp ；

（ 2 ） 插入 ImageView ， id 为 fruitImage ，宽和高均为 40dp ， layout_gravity 为

center_vertical ， marginLeft 为 10dp ；

（ 3 ） 插入 TextView ， id 为 fruitName ，宽和高均为 wrap_content ， layout_gravity

为 center_vertical ， marginLeft 为 10dp 。

代码：

fruit_item.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_margin="5dp">
<ImageView
android:id="@+id/fruitImage"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="10dp"
android:src="@drawable/fruit_pic"/>
<TextView
android:id="@+id/fruitName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="10dp"
android:textColor="@android:color/black"
android:textSize="16sp"
android:text="fruitName"/>
</LinearLayout>

3. 修改 MainActivity 代码（ MainActivity 类）

（ 1 ） 新增一个私有 val 变量 fruitList ，类型为 ArrayList<Fruit> ；

（ 2 ） 新增一个私有 var 变量 binding ，设置为稍后初始化，绑定为 ActivityMainBinding ，

用于调用 activity_main.xml 对应的 Binding 类；

（ 3 ） 在 onCreate() 中，将 ActivityMainBinding 传入 binding ，然后用 binding.root

来设置 ContentView

（ 4 ） 新建一个私有方法 initFruits() ，新增 fruitList 的列项，将水果名以及对应的图

片添加进去；

（ 5 ） 回到 onCreate() 中，使用 initFruits() 方法进行 fruitList 的初始化；

（ 6 ） 创建一个 layoutManager ，传入 binding.recyclerView.layoutManager 中；

（ 7 ） 创建一个 adapter ，传入 binding.recyclerView.adapter 中。

class MainActivity : AppCompatActivity() {

private val fruitList = ArrayList<Fruit>()

private lateinit var binding: ActivityMainBinding

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

binding = ActivityMainBinding.inflate(layoutInflater)

setContentView(binding.root)

initFruits()

val layoutManager = LinearLayoutManager(this)

// 线性横 / 纵向滚动布局

binding.recyclerView.layoutManager = layoutManager

val adapter = FruitAdapter(fruitList)

binding.recyclerView.adapter = adapter

}

private fun initFruits() {

repeat(2) {

fruitList.add(Fruit("Apple", R.drawable.apple_pic))

fruitList.add(Fruit("Banana", R.drawable.banana_pic))

fruitList.add(Fruit("Orange", R.drawable.orange_pic))

fruitList.add(Fruit("Watermelon", R.drawable.watermelon_pic))

fruitList.add(Fruit("Pear", R.drawable.pear_pic)) fruitList.add(Fruit("Grape", R.drawable.grape_pic))

fruitList.add(Fruit("Pineapple", R.drawable.pineapple_pic))

fruitList.add(Fruit("Strawberry", R.drawable.strawberry_pic))

fruitList.add(Fruit("Cherry", R.drawable.cherry_pic))

fruitList.add(Fruit("Mango", R.drawable.mango_pic))

}

}

}

4. 实现点击事件

（ 1 ） 在 FruitAdapter  onCreateViewHolder 中，打开 viewHolder 中的控件监听事件，

即 viewHolder.itemView.setOnClickListener{…} ；

（ 2 ） 在 监 听 事 件 中 ， 即 {…} 中 ， 取 得 点 击 位 置 ， val position = viewHolder.

bindingAdapterPosition

（ 3 ） 在监听事件中，实现 Toast 功能（课本 3.2.4 节），注意判断位置是否为空。

viewHolder.itemView.setOnClickListener {

val position = viewHolder.bindingAdapterPosition

if (position != RecyclerView.NO_POSITION) {

val fruit = fruitList[position]

Toast.makeText(parent.context, "you clicked view ${fruit.name}",

Toast.LENGTH_SHORT)

.show()

} else {

Toast.makeText(parent.context, "NO_POSITION",

Toast.LENGTH_SHORT).show()

}

}

LoginActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.login_layout)
val loginBtn=findViewById<Button>(R.id.loginBtn)
// 获取 username_edit_text 和 password_edit_text
val usernameEditText = findViewById<EditText>(R.id.username_edit_text)
val passwordEditText = findViewById<EditText>(R.id.password_edit_text)
// 设置登录按钮点击事件
loginBtn.setOnClickListener {
// 获取用户名和密码
val username = usernameEditText.text.toString().trim()
13
14
val password = passwordEditText.text.toString().trim()
// 检查用户名和密码是否为 admin 和 123456
if (username == "admin" && password == "123456") {
// 登录成功，跳转到 MainActivity
val intent = Intent(this@LoginActivity, MainActivity::class.java)
startActivity(intent)
finish() // 结束当前活动，防止按返回键回到登录界面
} else {
// 登录失败，显示提示对话框
showLoginFailedDialog()
}
}
}
// 显示登录失败的提示对话框
private fun showLoginFailedDialog() {
AlertDialog.Builder(this)
.setMessage("用户名或者密码输入错误")
.setTitle("登录失败")
.setPositiveButton("OK", null)
.create()
.show()
}
MainActivity.kt
private val fruitList = ArrayList<Fruit>()
private lateinit var binding: ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
initFruits()
val layoutManager = LinearLayoutManager(this) // 线性横/纵向滚动布局
binding.recyclerView.layoutManager = layoutManager
val adapter = FruitAdapter(fruitList)
binding.recyclerView.adapter = adapter
}
private fun initFruits() {
15
repeat(1) {
fruitList.add(Fruit("Apple", R.drawable.apple_pic))
fruitList.add(Fruit("Watermelon", R.drawable.watermelon_pic))
fruitList.add(Fruit("Pear", R.drawable.pear_pic))
// fruitList.add(Fruit("Grape", R.drawable.grape_pic))
// fruitList.add(Fruit("Pineapple", R.drawable.pineapple_pic))
// fruitList.add(Fruit("Strawberry", R.drawable.strawberry_pic))
// fruitList.add(Fruit("Cherry", R.drawable.cherry_pic))
// fruitList.add(Fruit("Mango", R.drawable.mango_pic))
}
}

Fruit.kt

FruitAdapter.kt

class FruitAdapter(private val fruitList: List<Fruit>) :
RecyclerView.Adapter<FruitAdapter.ViewHolder>() {
private lateinit var binding: FruitItemBinding
inner class ViewHolder(binding: FruitItemBinding) : RecyclerView.ViewHolder(binding.root) {
val fruitImage: ImageView = binding.fruitImage
val fruitName: TextView = binding.fruitName
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
val binding = FruitItemBinding.inflate(LayoutInflater.from(parent.context),
parent, false)
val viewHolder = ViewHolder(binding)
return viewHolder
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
val fruit = fruitList[position]
holder.fruitImage.setImageResource(fruit.imageId)
holder.fruitName.text = fruit.name
holder.itemView.setOnClickListener {
val position = holder.adapterPosition
if (position != RecyclerView.NO_POSITION) {
val fruit = fruitList[position]
Toast.makeText(holder.itemView.context, "you clicked view ${fruit.name}",
Toast.LENGTH_SHORT)
.show()
} else {
Toast.makeText(holder.itemView.context, "NO_POSITION",
Toast.LENGTH_SHORT).show()
}
}
}
override fun getItemCount() = fruitList.size
}

运行效果：这里我只传了三个图片