ole的知识小站

ui开发基础

—

由

wangjm
于

UI开发基础

如何编写程序界面

  • xml中定义LinearLayout等布局
  • ContraintLayout布局，方便在Android中拖动开发

常用控件的使用

只是引导作用。需要学习和工作中不断摸索，通过阅读文档和网上搜索的方式学习更多控件的更多用法。

TextView

线性布局中放置一个TextView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="#00ff00"
        android:textSize="24sp"
        android:text="Hello World!"/>

</LinearLayout>

Button

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        android:text="Button1"
        android:textAllCaps="false"/>

</LinearLayout>

为此Button的点击事件注册一个监听器(函数式API)

package com.example.uicomponent_20230208

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val button1: Button = findViewById(R.id.button1)
        //注册函数式API
        button1.setOnClickListener { v: View -> 
            action()
            action2(v)
        }
    }
    
    fun action() {
        //...
    }
    fun action2(v:View) {
        //...
    }
}

也可以使用实习接口的方式来注册

package com.example.uicomponent_20230208

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button

class MainActivity : AppCompatActivity(), View.OnClickListener {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val button1: Button = findViewById(R.id.button1)
        button1.setOnClickListener(this)
    }

    override fun onClick(v: View?) {
        when(v?.id) {
            R.id.button1 -> {
                //...
            }
            //...
        }
    }
}

EditText

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/editText1"
        android:maxLines="2"
        android:hint="This is hint"/>

</LinearLayout>

例子：

结合使用Button与EditText （ 点按Button后，获取EditText中的内容，并输出一条Toast消息

layout部分

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/editText1"
        android:maxLines="2"
        android:hint="This is hint"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        android:text="Button1"
        android:textAllCaps="false"
        android:textColor="#ff0000"/>

</LinearLayout>

Activity部分

package com.example.uicomponent_20230208

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.EditText
import android.widget.Toast

class MainActivity : AppCompatActivity(), View.OnClickListener {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val button1 = findViewById<Button>(R.id.button1)
        button1.setOnClickListener(this)
    }

    override fun onClick(v: View?) {
        when(v?.id) {
            R.id.button1->{
                val editText1 = findViewById<EditText>(R.id.editText1)
                val text = editText1.text.toString()
                Toast.makeText(this, text, Toast.LENGTH_SHORT).show()
            }
        }
    }


}

ImageView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:src="@drawable/img_1"/>

</LinearLayout>

例子：点击按钮，切换图片：

drawable部分：

drawable文件夹下放置img_1.png,img_2.png,img_3.png （或者webp格式也可以）

layout部分

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:src="@drawable/img_1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        android:text="Button1"
        android:textAllCaps="false"
        android:textColor="#ff0000"/>

</LinearLayout>

activity部分

package com.example.uicomponent_20230208

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.EditText
import android.widget.ImageView
import android.widget.Toast

class MainActivity : AppCompatActivity(), View.OnClickListener {
    //相当于静态变量
    companion object{
        var count = 1
    }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val button1 = findViewById<Button>(R.id.button1)
        button1.setOnClickListener(this)
    }

    override fun onClick(v: View?) {
        when(v?.id) {
            R.id.button1->{
                val imageView1 = findViewById<ImageView>(R.id.imageView1)
                when (++count % 3) {
                    1 ->imageView1.setImageResource(R.drawable.img_1)
                    2 ->imageView1.setImageResource(R.drawable.img_2)
                    0 ->imageView1.setImageResource(R.drawable.img_3)
                }
            }
        }
    }


}

ProgressBar

进度条（转圈圈）

layout部分

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ProgressBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/progressCircular1"
        android:visibility="visible"/>


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        android:text="Button1"
        android:textAllCaps="false"
        android:textColor="#ff0000"/>

</LinearLayout>

activity部分

package com.example.uicomponent_20230208

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.SystemClock
import android.view.View
import android.widget.Button
import android.widget.EditText
import android.widget.ImageView
import android.widget.ProgressBar
import android.widget.Toast

class MainActivity : AppCompatActivity(), View.OnClickListener {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val button1 = findViewById<Button>(R.id.button1)
        button1.setOnClickListener(this)
    }

    override fun onClick(v: View?) {
        when (v?.id) {
            R.id.button1 -> {
                val progressBar1 = findViewById<ProgressBar>(R.id.progressCircular1)
                when (progressBar1.visibility) {
                    View.GONE -> progressBar1.visibility = View.VISIBLE
                    View.VISIBLE -> progressBar1.visibility = View.INVISIBLE
                    View.INVISIBLE -> progressBar1.visibility = View.GONE
                }
            }
        }
    }

}

Android的控件都有个属性：android:visibility. 可以通过修改这个属性的值，控制控件的可见性。android:visibility有三个值VIEW.GONE,VIEW.VISIBLE,VIEW.INVISIBLE，分别表示消失并不占空间，消失但仍占空间（透明），可见。默认是可见。

刚刚是圆形进度条，还可以通过style属性，调整成水平进度条。

进度条（水平进度条）

layout部分

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ProgressBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:id="@+id/progressHorizontal1"
        android:max="100"
        android:visibility="visible"/>


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        android:text="Button1"
        android:textAllCaps="false"
        android:textColor="#ff0000"/>

</LinearLayout>

activity部分

package com.example.uicomponent_20230208

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.SystemClock
import android.view.View
import android.widget.Button
import android.widget.EditText
import android.widget.ImageView
import android.widget.ProgressBar
import android.widget.Toast

class MainActivity : AppCompatActivity(), View.OnClickListener {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val button1 = findViewById<Button>(R.id.button1)
        button1.setOnClickListener(this)
    }

    override fun onClick(v: View?) {
        when (v?.id) {
            R.id.button1 -> {
                val progressBar1 = findViewById<ProgressBar>(R.id.progressHorizontal1)
                progressBar1.progress = progressBar1.progress + 10
            }
        }
    }

}

其中ProgressBar控件的属性style="@style/Widget.AppCompat.ProgressBar.Horizontal"设置其为水平进度条风格。max属性决定其进度最大为100。

或者style属性也可以设置为style="?android:attr/progressBarStyleHorizontal"，试了下效果是一样的。

AlertDialog

AlertDialog可以在当前界面弹出一个对话框，这个对话框是置顶于所有界面元素之上的，能够屏蔽其他空间的交互能力，因此Dialog一般用于提示一些非常重要的内容或者警告信息。比如为了防止用户误删重要内容，在删除前弹出一个确认对话框。

layout部分（实际上不涉及layout,这里只是建个button，用于点击触发弹出AlertDialog）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        android:text="Button1"
        android:textAllCaps="false"
        android:textColor="#ff0000"/>

</LinearLayout>

activity部分

package com.example.uicomponent_20230208

import android.app.AlertDialog
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.SystemClock
import android.view.View
import android.widget.Button
import android.widget.EditText
import android.widget.ImageView
import android.widget.ProgressBar
import android.widget.Toast

class MainActivity : AppCompatActivity(), View.OnClickListener {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val button1 = findViewById<Button>(R.id.button1)
        button1.setOnClickListener(this)
    }

    override fun onClick(v: View?) {
        when (v?.id) {
            R.id.button1 -> {
                AlertDialog.Builder(this).apply {
                    setTitle("This is a Dialog")
                    setMessage("something important")
                    setCancelable(false)
                    setPositiveButton("OK!") {
                        dialog, which ->
                    }
                    setNegativeButton("Cancel!") {
                        dialog, which ->
                    }
                    show()
                }
            }
        }
    }

}

首先通过AlertDialog.Builder构建一个对话框，这里我们使用了Kotlin标准函数中的apply函数。在apply函数中为这个对话框设置标题、内容、可否使用Back键关闭对话框等属性，接下来调用setPositiveButton()方法为对话框设置确定按钮的点击事件，调用setNegativeButton()方法设置取消按钮的点击事件，最后调用show()方法将对话框显示出来就可以了。

评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注