第四章：软件也要拼脸蛋，UI开发的点点滴滴
> 本章实践知识较多，理论知识较少
目录
常用控件的使用方法
这里直接贴上代码
布局代码：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="24sp"
android:textColor="#00ff00"
android:text="This is TextView"/>
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAllCaps="false"
android:text="button"/>
<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="2"
android:hint="想写啥写啥" />
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/img_1"/>
<Button
android:id="@+id/changeImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="换张图片"/>
<Button
android:id="@+id/changeProgressBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="控制进度条"/>
<ProgressBar
android:id="@+id/progessBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleHorizontal"
android:max="100"/>
<Button
android:id="@+id/alert"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="alert"/>
</LinearLayout>
活动代码：
class MainActivity : AppCompatActivity(), View.OnClickListener {
private var imageId = 1
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// 使用函数式API的方式注册监听器
// button.setOnClickListener {
// Toast.makeText(this,textview.text.toString(),Toast.LENGTH_SHORT).show()
// }
button.setOnClickListener(this)
changeImage.setOnClickListener(this)
changeProgressBar.setOnClickListener(this)
alert.setOnClickListener(this)
}
override fun onClick(v: View?) {
when(v?.id){
R.id.button -> {
val str = editText.text.toString()
if (str == ""){
Toast.makeText(this,"输入不得为空",Toast.LENGTH_SHORT).show()
}else{
textview.text = str
editText.text = null
}
// Toast.makeText(this,textview.text.toString(),Toast.LENGTH_SHORT).show()
}
R.id.changeImage -> {
if(imageId==1){
imageId++
imageView.setImageResource(R.drawable.img_2)
}else{
imageId=1
imageView.setImageResource(R.drawable.img_1)
}
}
R.id.changeProgressBar ->{
// if (progessBar.visibility == View.VISIBLE){
// progessBar.visibility = View.GONE
// }else{
// progessBar.visibility = View.VISIBLE
// }
if (progessBar.progress==100){
progessBar.progress=0
}else{
progessBar.progress += 10
}
}
R.id.alert -> {
AlertDialog.Builder(this).apply {
setTitle("我是来警告你的")
setMessage("很重要的事")
setCancelable(false)
setPositiveButton("好的"){
dialog, which ->
}
setNegativeButton("取消"){
dialog, which ->
}
show()
}
}
}
}
}
布局
布局是一种可用于放置很多控件的容器，它可以按照一定的规律调整内部控件的位置，从未编写出精美的界面。
线性布局 LinearLayout
将它所包含的控件在线性方向上依次排列
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
...
</LinearLayout>
相对布局 RelativeLayout
通过相对定位的方式让控件出现在布局的任何位置
可以相当于父布局，也可相对于一同级控件。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Button 3"/>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/button3"
android:layout_toStartOf="@id/button3"
android:text="Button 1"/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/button3"
android:layout_toEndOf="@id/button3"
android:text="Button 2"/>
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/button3"
android:layout_toStartOf="@id/button3"
android:text="Button 4"/>
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/button3"
android:layout_toEndOf="@id/button3"
android:text="Button 5"/>
</RelativeLayout>
帧布局 FrameLayout
所有控件都会默认放在布局左上角
约束布局
见作者的两篇博客：
Android新特性介绍，ConstraintLayout完全解析
ConstraintLayout已经2.0了，你不来了解一下吗？
自定义控件
所有控件都是直接或间接继承自View的，所有的布局都是直接或间接继承自ViewGroup的。View是Android中最基本的一种UI组件，它可以在屏幕上绘制一块矩形区域，并能响应这块区域的各种事件。
引入布局
<include layout="@layout/title"/>
创建自定义控件
新建一个类继承自LinearLayout，之后即可在布局文件中使用该控件。
class TitleLayout(context: Context, attrs:AttributeSet) : LinearLayout(context, attrs){
init {
LayoutInflater.from(context).inflate(R.layout.title, this)
titleBack.setOnClickListener{
//as 用于强制类型转换
val acativity = context as Activity
acativity.finish()
}
titleEdit.setOnClickListener {
Toast.makeText(context,"Edit",Toast.LENGTH_SHORT).show()
}
}
}
ListView
ListView允许用户通过手指上下滑动的方式将屏幕外的数据滚动到屏幕内，同时屏幕上原有的数据会滚出屏幕。
RecycleView
增强版的ListView，不仅可以实现和它同样的效果，还优化了很多不足。
9-Patch 图片
一种被特殊处理过的png图片，能够指定哪些区域可以拉伸，哪些区域不可以。