Control

TextView

• android:id Defines a for the current control Unique identifier
• android:layout_width and android:layout_height Specifies the width and height of the control ,Android All controls in have these two genera sex , Optional values are 3 Kind of :match_parent、wrap_content And fixed value .match_parent Indicates that the current The size of the parent control is the same as the size of the parent control , That is, the parent layout determines the size of the current control .wrap_content surface Show that the size of the current control can just contain the contents , That is to say, the content of the control determines the size of the current control . solid Fixed value means to assign a fixed size to the control , The unit is generally dp, This is a size unit independent of screen density , It can ensure that the display effect on mobile phones with different resolutions is as consistent as possible , Such as 50 dp Is a valid fixed value .
• TextView The text in is aligned at the top left corner by default ,android:gravity=“center”, Use android:gravity To specify the text alignment , Optional values are top、bottom、start、 end、center etc. , It can be used “|” To specify multiple values at the same time , What we specify here is "center", The effect is equal to On "center_vertical|center_horizontal", Indicates that the text is centered vertically and horizontally .
• android:textColor="#00ff00" and android:textSize=“24sp”
  adopt android:textColor Property to specify the color of the text , adopt android:textSize Properties can be specified Size of text . The text size should use sp As a unit , When the user changes the text size in the system , application The text size in the program will also change .

<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:text="This is TextView"/>
</LinearLayout>

Button

• Android By default, the system will convert all English letters on the button to uppercase , Can be in XML Add **android:textAllCaps=“false”** This attribute , In this way, the system will retain the original text content you specified
• Monitoring events

button.setOnClickListener {
    
//  Add logic here  
}

EditText

Use android:hint Property specifies a suggestive text

<EditText android:id="@+id/editText" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Type something here" />

Use a combination of EditText And Button To complete some functions , For example, by clicking the button to get EditText Lose What's in it .
call EditText Of getText() Method to get the input , Call again toString() Method to convert the content to a string

override fun onClick(v: View?) {
    
        when (v?.id) {
    
            R.id.button -> {
    
                val inputText = editText.text.toString()
                Toast.makeText(this, inputText, Toast.LENGTH_SHORT).show()
} }
}

ImageView

Pictures are usually placed in drawable At the beginning of the catalog , And with a specific resolution .
Now most mainstream mobile phone screen resolution is xxhdpi

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

ProgressBar

ProgressBar Used to display a progress bar on the interface , Indicates that our program is loading some data .

<ProgressBar android:id="@+id/progressBar" android:layout_width="match_parent" android:layout_height="wrap_content" />

Android Control's visible properties . be-all Android Control has this property , Can pass android:visibility Make a designation , Optional values are 3 Kind of :visible、invisible and gone.visible Indicates that the control is visible , This value is the default value , Don't specify android:visibility when , Controls are all visible . invisible Indicates that the control is not visible , But it still occupies the original position and size , It can be understood that the control becomes transparent Status quo .gone It means that the control is not only invisible , And no more screen space . It uses setVisibility() Method , Allow incoming View.VISIBLE、 View.INVISIBLE and View.GONE this 3 Seed value .

override fun onClick(v: View?) {
    
	when (v?.id) {
    
		R.id.button -> {
    
			if (progressBar.visibility == View.VISIBLE) {
    
				progressBar.visibility = View.GONE
            } else {
    
                progressBar.visibility = View.VISIBLE
            }
		} 
	}
}

AlertDialog

AlertDialog Generally used to prompt some very important content or warning information
stay apply Function to set the title of the dialog box 、 Content 、 Can I use Back Key to close the dialog box and other properties , continue with To call setPositiveButton() Method to set the click event of the OK button for the dialog box , call setNegativeButton() Method to set the click event of the Cancel button , Last call show() Method displays the dialog box Just come out .

AlertDialog.Builder(this).apply {
    
	setTitle("This is Dialog")
	setMessage("Something important.")
    setCancelable(false)
    setPositiveButton("OK") {
     dialog, which ->
    }
    setNegativeButton("Cancel") {
     dialog, which ->
    }
    show()

Layout

LinearLayout（ Use layout_weight Achieve the effect of width self adaptation ）

• Linear layout , It's a very common layout . As its name describes , This cloth The Bureau will arrange the controls it contains in a linear direction
• android:layout_gravity Used to specify the location of the control in the layout Alignment mode

<EditText android:id="@+id/input_message" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:hint="Type something" />
<Button android:id="@+id/send" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Send" />

take EditText and Button The width of is specified as 0 dp, In this way, the text edit box and button can Show it ? Never mind , Because we used android:layout_weight attribute , At this point, the width of the control is It should no longer be android:layout_width Come to decide , This is designated as 0 dp It's a relatively standard way of writing . And then in EditText and Button Will be in the android:layout_weight The value of the property is specified as 1, This means EditText and Button The width will be split horizontally . The system will put LinearLayout Under all controls specified by layout_weight Value addition , Get a total value , Then the proportion of the size of each control is the proportion of the control layout_weight Value divided by the total value just calculated . So as If you want to EditText Occupying the width of the screen 3/5,Button Occupying the width of the screen 2/5, Only need to EditText Of layout_ weight Change to 3,Button Of layout_weight Change to 2 That's all right. .

	<EditText android:id="@+id/input_message" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:hint="Type something" />
    <Button android:id="@+id/send" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Send" />

Only... Is specified EditText Of android:layout_weight attribute , And will Button The width of the has been changed back wrap_content. This means Button The width of is still in accordance with wrap_content To calculate , and EditText Will fill up All the remaining space on the screen . The interface written in this way , Not only can it adapt to various screens , And it looks more comfortable .

RelativeLayout（ Very common layout ）

	<Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:text="Button 1" />
    <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:text="Button 2" />
    <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/button4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:text="Button 4" />
    <Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:text="Button 5" />

We let Button 1 Align with the upper left corner of the parent layout Qi ,Button 2 Align with the upper right corner of the parent layout ,Button 3 centered ,Button 4 Align with the lower left corner of the parent layout , Button 5 Align with the lower right corner of the parent layout . although android:layout_alignParentLeft、 android:layout_alignParentTop、android:layout_alignParentRight、 android:layout_alignParentBottom、android:layout_centerInParent These genera We've never had sex before , But their names have fully explained their role

	<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_toLeftOf="@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_toRightOf="@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_toLeftOf="@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_toRightOf="@id/button3" android:text="Button 5" />

android:layout_above Attributes can make One control is above the other , You need to specify a relative control for this property id References to , Here we fill in @id/button3, Indicates that the control is placed in Button 3 On top of . Other properties are similar ,android: layout_below Means to have one control below another ,android:layout_toLeftOf Express Place one control to the left of another ,android:layout_toRightOf Indicates that one control is placed in another The right side of a control . Be careful , When a control references another control's id when , The control must be defined after the reference control Noodles , Otherwise, there will be no id The situation of .

RelativeLayout There is another set of properties that are positioned relative to the control ,android:layout_alignLeft To align the left edge of one control with the left edge of another control ,android:layout_alignRight Express Align the right edge of one control with the right edge of another . Besides , also android:layout_alignTop and android:layout_alignBottom

Custom control

introduce

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" >
    <include layout="@layout/title" />
</LinearLayout>

Hide the original

	override fun onCreate(savedInstanceState: Bundle?) {
    
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        supportActionBar?.hide()
}