Bit by bit of UI development
1, Usage of common controls
1,TextView
For example:
<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:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/text_view"
android:text="This is TextView"></TextView>
</LinearLayout>
Some properties of TextView:
- 1. android:id: defines a unique identifier for the current control
- 2,android:layout_width: Specifies the width of the control
- 3,android:layout_height: Specifies the height of the control
- 4. android:text: Specifies the text content displayed in TextView
- 5. android:textSize: Specifies the size of text. In android, the font size uses sp as the unit.
- 6. android:textColor: Specifies the color of text
- 7. android:gravity specifies the alignment of text
Although the text content in TextView is displayed, it is in the upper left corner, because the text in TextView is aligned in the upper left corner by default.
Use android:gravity to specify the text alignment. The optional values are top, bottom, left, right and center. You can use "|" to specify multiple values at the same time.
<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:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/text_view"
android:gravity="center"
android:text="This is TextView"></TextView>
</LinearLayout>
Button
Button is an important control used by programs to interact with users. Properties are similar to TextView, and can be displayed in activity_ main. Add a button in XML as follows:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button"></TextView>
</LinearLayout>
Although the text set in the layout file is Button, the final display is "Button", which is because the system will automatically convert all English letters in the Button to uppercase. However, you can configure to disable this default property and modify android:textAllCaps = "false" in the Button
android:textAllCaps="false"
You can register a listener for Button click events.
public class MainActivity extends AppCompatActivity{
@Override
protected void onCreate(Bundle savedInstanceState){
super.onCreate(saveInstanceState);
setContentView(R.layout.activity_main);
Button button = (Button)findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View v){
//Add logic here
}
});
}
}
When the button is clicked, the onClick() method in the listener is executed.
You can also register by implementing the interface below.
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
@Override
protected void onCreate(Bundle savedInstanceState){
super.onCreate(saveInstanceState);
setContentView(R.layout.activity_main);
Button button = (Button)findViewById(R.id.button);
button.setOnClickListener(this);
}
@Override
public void onClick(View v){
switch(v.getId()){
case R.id.button:
//Add logic here
break;
default:
break;
}
}
}
EditText
Some properties:
- android:hit: prompt content in the input box. Once entered, the prompt content disappears
- andorid:maxLines: Specifies the maximum number of lines of EditText.
Program and user interaction is another important control.
Modify activity_ main. Code in XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="@+id/edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
Generally, some suggestive text is displayed in the input box. Once the user enters anything, these text prompts will disappear. You can set it through the android:hint property.
Use the click button to get the content entered in EditText
package com.example.uiwidgettest;
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;
public class MainActivity extends AppCompatActivity implements View.OnClickListener
{
private EditText editText;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button = (Button)findViewById(R.id.button);
editText = (EditText)findViewById(R.id.edit_text);
button.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.button:
//getText method gets the input content
String inputText = editText.getText().toString();
Toast.makeText(MainActivity.this, inputText, Toast.LENGTH_SHORT).show();
break;
default:
break;
}
}
}
ImageView (a control that displays pictures on the page, and the pictures are prevented from being in the directory starting with drawable under res)
Pictures are usually placed in the directory starting with drawable. At present, there is an empty drawable directory in the project, but no specific resolution is specified. Therefore, it is generally not used to place pictures. Create a drawable xhdpi directory under the res directory.
In activity_ main. Add tags to XML:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/image_view"
android:src="@drawable/img_1" />
package com.example.uiwidgettest;
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;
public class MainActivity extends AppCompatActivity implements View.OnClickListener
{
private EditText editText;
private ImageView imageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button = (Button)findViewById(R.id.button);
editText = (EditText)findViewById(R.id.edit_text);
imageView = (ImageView)findViewById(R.id.image_view);
button.setOnClickListener(this);
}
//Click the IMG that the event will display through the button_ 1. The picture is modified to img_2 pictures
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.button:
imageView.setImageResource(R.drawable.img_2);
break;
default:
break;
}
}
}
ProgressBar (progress bar, indicating that the program is loading some data)
It is used to display a progress bar on the page, indicating that our program is loading some data.
Common properties
Value of android:visibility property:
- 1. Visible: visible to the control
- 2. Invisible: the control is invisible, but still occupies the original position and size. It can be understood as the transparent state of control programming
- 3. gone: the control is invisible and does not take up any screen space.
It can be specified as a horizontal progress bar through the style attribute (if the style of arrow rotation is not set)
The android:max attribute is used to set a maximum value for the progress bar.
How to make the progress bar disappear after loading? (visible property of Android control. All Android controls have this property. android:visibility)
In activity_ main. Add tags to XML.
<!--The progress bar style is horizontal progress bar, and the maximum value is 100-->
<ProgressBar
android:id="@+id/progress_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleHorizontal"
android:max="100"
/>
We can set the visibility of the control through code, using the setVisibility() method, which can be passed into view VISIBLE,View.INVISIBLE and view gone
package com.example.uiwidgettest;
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.ProgressBar;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity implements View.OnClickListener
{
private EditText editText;
private ImageView imageView;
private ProgressBar progressBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button = (Button)findViewById(R.id.button);
editText = (EditText)findViewById(R.id.edit_text);
imageView = (ImageView)findViewById(R.id.image_view);
progressBar = (ProgressBar)findViewById(R.id.progress_bar);
button.setOnClickListener(this);
}
//Click the event button to set the progress bar. If the progress bar is visible, it will be hidden, otherwise it will be displayed.
//It can be seen from the xml that the progress bar is modified to the horizontal progress bar style, and each click will increase the value of the progress bar by 10
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.button:
int progress = progressBar.getProgress();
progress = progress+10;
progreeBar.setProgress(progress);
if(progressBar.getVisibility() == View.GONE) {
progressBar.setVisibility(View.VISIBLE);
}else {
progressBar.setVisibility(View.GONE);
}
break;
default:
break;
}
}
}