第4章：软件也要拼脸蛋，UI开发的点点滴滴（笔记）

4.1 该如何编写程序界面
	
	ConstraintLayout:全新的布局
	
4.2 常用控件的使用方法

	4.2.1 TextView
	
	4.2.2 Button
	
	4.2.3 EditText
	
	4.2.4 ImageView
	
	4.2.5 ProgressBar
			
			# 进度条
			
			
			# 可见与不可见切换
		    if (progressBar.visibility == View.VISIBLE){
                progressBar.visibility = View.GONE
            }else{
                progressBar.visibility = View.VISIBLE
            }
			
			# 条形进度条
			progressBar.progress = progressBar.progress + 10
			
	4.2.6 AlertDialog
	
			AlertDialog.Builder(this).apply {
			setTitle("this is Dialog")
			setMessage("Something important.")
            setCancelable(false)
			setPositiveButton("OK"){
				dialog, which->
			}
			setNegativeButton("Cancel"){
				dialog,which->
			}
			show()
            }

4.3 详解3种基本布局

	4.3.1 LinearLayout
	
	4.3.2 RelativeLayout
	
	4.3.3 FrameLayout
	

4.4 系统控件不够用，创建自定义控件

4.4.1 引入布局

	https://blog.csdn.net/julicliy/article/details/127342207?spm=1001.2014.3001.5502
	

4.5 最常用和最难用的控件：ListView

4.5.1 ListView的简单用法

	for (i in 1 until 20){
		fruitList_str.add("str$i")
	}

	val adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, fruitList_str)
	listView.adapter = adapter

	listView.setOnItemClickListener { parent, view, position, id ->
		val fruit = fruitList_str[position]
		Toast.makeText(this, fruit, Toast.LENGTH_SHORT).show()
	}
	
4.5.2 定制ListView的界面
	默认在build.grade添加以下依赖：
	apply plugin: 'com.android.application'
	apply plugin: 'kotlin-android'
	apply plugin: 'kotlin-android-extensions'

	第一步：新建fruit_item.xml布局
	
	

    

    

	
	
	第二步：创建Fruit类	
	class Fruit(val name:String, val imageId: Int)
	
	第三步：创建适配器类，FruitAdapter类

	class FruitAdapter(activity: Activity, val resourceId: Int, data: List) : ArrayAdapter(activity, resourceId, data) {

		override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
			val view: View
			val viewHolder: ViewHolder
			if (convertView == null) {
				view = LayoutInflater.from(context).inflate(resourceId, parent, false)
				val fruitImage: ImageView = view.findViewById(R.id.fruitImage)
				val fruitName: TextView = view.findViewById(R.id.fruitName)
				viewHolder = ViewHolder(fruitImage, fruitName)
				view.tag = viewHolder
			} else {
				view = convertView
				viewHolder = view.tag as ViewHolder
			}

			val fruit = getItem(position) // 获取当前项的Fruit实例
			if (fruit != null) {
				viewHolder.fruitImage.setImageResource(fruit.imageId)
				viewHolder.fruitName.text = fruit.name
			}
			return view
		}

		inner class ViewHolder(val fruitImage: ImageView, val fruitName: TextView)

	}
	
	第四步：在MainActivity，修改代码如下：	

    private val fruitList = ArrayList()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        initFruits() // 初始化水果数据
        val adapter = FruitAdapter(this, R.layout.fruit_item, fruitLi+qq++```	-*-st)
        listView.adapter = adapter
        listView.setOn+---------+ItemClickListener { parent, view, position, id ->

        }
        listView.setOnItemClickListener { _, _, position, _ ->
            val fruit = fruitList[position]
            Toast.makeText(this, fruit.name, Toast.LENGTH_SHORT).show()
        }
    }

    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.5.3 提升ListView的运行效率

	以上为提升后的代码
	
4.5.4 ListView的点击事件
	
	以上为实现后的代码
	
	
4.6 更加强大的滚动控件：RecyclerView
	
	(图片资源，自己可以替换)
	
	第一步：创建一个Fruit类。
	class Fruit(val name:String, val imageId: Int)
	
	第二步：layout创建一个fruit_item.xml文件。
	
	

    

    

	
	
	第三步：创建一个FruitAdapter类。
	import android.view.View
	import android.view.ViewGroup
	import android.widget.ImageView
	import android.widget.TextView
	import androidx.recyclerview.widget.RecyclerView
	import android.view.LayoutInflater
	import android.widget.Toast

	class FruitAdapter(val fruitList: List) : RecyclerView.Adapter() {

    inner class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val fruitImage: ImageView = view.findViewById(R.id.fruitImage)
        val fruitName: TextView = view.findViewById(R.id.fruitName)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.fruit_item, parent, false)
        val viewHolder = ViewHolder(view)
        viewHolder.itemView.setOnClickListener {
            val position = viewHolder.adapterPosition
            val fruit = fruitList[position]
            Toast.makeText(parent.context, "you clicked view ${fruit.name}", Toast.LENGTH_SHORT).show()
        }
        viewHolder.fruitImage.setOnClickListener {
            val position = viewHolder.adapterPosition
            val fruit = fruitList[position]
            Toast.makeText(parent.context, "you clicked image ${fruit.name}", Toast.LENGTH_SHORT).show()
        }
        return viewHolder
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val fruit = fruitList[position]
        holder.fruitImage.setImageResource(fruit.imageId)
        holder.fruitName.text = fruit.name
    }

    override fun getItemCount() = fruitList.size

	}
	
	
	第四步：主Activity中修改成如下代码。

	import androidx.appcompat.app.AppCompatActivity
	import android.os.Bundle
	import androidx.recyclerview.widget.LinearLayoutManager
	import androidx.recyclerview.widget.StaggeredGridLayoutManager
	import kotlinx.android.synthetic.main.activity_main.*
	import java.util.*
	import kotlin.collections.ArrayList

	class MainActivity : AppCompatActivity() {

    private val fruitList = ArrayList()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        initFruits() // 初始化水果数据
        val layoutManager = StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL)
        recyclerView.layoutManager = layoutManager
        val adapter = FruitAdapter(fruitList)
        recyclerView.adapter = adapter
    }

    private fun initFruits() {
        repeat(2) {
            fruitList.add(Fruit(getRandomLengthName("Apple"), R.drawable.apple_pic))
            fruitList.add(Fruit(getRandomLengthName("Banana"), R.drawable.banana_pic))
            fruitList.add(Fruit(getRandomLengthName("Orange"), R.drawable.orange_pic))
            fruitList.add(Fruit(getRandomLengthName("Watermelon"), R.drawable.watermelon_pic))
            fruitList.add(Fruit(getRandomLengthName("Pear"), R.drawable.pear_pic))
            fruitList.add(Fruit(getRandomLengthName("Grape"), R.drawable.grape_pic))
            fruitList.add(Fruit(getRandomLengthName("Pineapple"), R.drawable.pineapple_pic))
            fruitList.add(Fruit(getRandomLengthName("Strawberry"), R.drawable.strawberry_pic))
            fruitList.add(Fruit(getRandomLengthName("Cherry"), R.drawable.cherry_pic))
            fruitList.add(Fruit(getRandomLengthName("Mango"), R.drawable.mango_pic))
        }
    }

    private fun getRandomLengthName(name: String): String {
        val length = Random().nextInt(20) + 1
        val builder = StringBuilder()
        for (i in 0 until length) {
            builder.append(name)
        }
        return builder.toString()
    }
	}

	
	

4.6.2 实现横向滚动和瀑布流布局

	调线性布局的方式，和主Activity的这行代码。
	val layoutManager = StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL)


4.6.3 RecyclerView的点击事件

	在FruitAdapter的类当中，onCreateViewHolder内部类中。
	
4.7 编写界面的最佳实践

4.7.1 制作9-Patch图片

4.7.2 编写精美的聊天界面

	具体看www.ituring.com.cn/book/2744网站，下载好，在第4章的项目，
	
	个人见解：就是一个RecyclerView控件的灵活运用。按不同的项，使用不同的布局