温习Android基础知识——《第一行代码（第三版）》读书笔记 Chapter 4 UI开发

第四章：软件也要拼脸蛋，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图片，能够指定哪些区域可以拉伸，哪些区域不可以。