Android Development Study Notes-03 Use of Basic Controls (TextView, Button, EditText, ImageView, SeekBar)

unit

Quoting the introduction from the rookie tutorial:

• dp(dip): device independent pixels (device independent pixels). Different devices have different display effects, which are related to the device hardware. Generally, we recommend using this to support WVGA, HVGA and QVGA, and do not depend on pixels.
• px: pixels (pixels). Different devices have the same display effect. Generally, our HVGA represents 320x480 pixels, which is used more. pt: point, is a standard unit of length, 1pt=1/72 inch, used in printing industry, very simple and easy to use;
• sp: scaled pixels (enlarged pixels). Mainly used for font display best for textsize.

1. TextView text box

TextView is a text view, which can be used to display some text or simple patterns.

Common attributes & operations:

• text size, color
• show out of range
• text + picture
• strikethrough, underline
• rotation effect

Example:

1. The most basic use

Set content, size, color

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:text="NameisBoy"
    android:textColor="#000000"
    android:textSize="25sp"/>

wrap_content is to set the size of the control according to the content size, and the value of text is the display content

2. Display content exceeds size

Ellipses appear when the displayed content exceeds the width:...

<TextView
    android:layout_width="170dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:maxLines="1"
    android:ellipsize="end"
    android:text="正在学习Android开发"
    android:textColor="#000000"
    android:textSize="20sp"/>

Here the maximum number of lines is limited to 1, otherwise the content will be displayed in a new line when it exceeds the width.

3. Text + pattern display

drawableXXX, XXX is the direction of the pattern, such as up, down, left, and right.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:drawableTop="@drawable/icon"
    android:text="Android图标"
    android:textColor="#000000"
    android:textSize="20sp"/>

4. Strikethrough

Both strikethrough and underline are special settings that need to be set in java code, such as:

Layout code:

<TextView
    android:id="@+id/tv4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:text="删除线"
    android:textColor="#000000"
    android:textSize="20sp"/>

Java code:

public class TextViewActivity extends AppCompatActivity {
    
    
    private TextView mTv4;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_view);
        //删除线
        mTv4 = findViewById(R.id.tv4);
        mTv4.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FLAG);
        mTv4.getPaint().setAntiAlias(true);//消除锯齿
    }
}

By calling setFlagsthe method setting, STRIKE_THRU_TEXT_FLAGit represents the strikethrough. After setting, the content may appear jagged, and setAntiAliasthe jagged can be eliminated by setting.

5. Underline

Similar to strikethrough, except that underscores are used UNDERLINE_TEXT_FLAG.

public class TextViewActivity extends AppCompatActivity {
    
    
    private TextView mTv5;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_view);
        //删除线
        mTv5 = findViewById(R.id.tv5);
        mTv5.getPaint().setFlags(Paint.UNDERLINE_TEXT_FLAG);
        mTv5.getPaint().setAntiAlias(true);//消除锯齿
    }
}    

6. Scroll display

Just like the scrolling display of advertisements in life, the content is continuously scrolling and scrolling.
The point is to set 5 properties: singleLine, ellipsize, marqueeRepeatLimit(number of loops), focusable(get focus),focusableInTouchMode

<TextView
    android:id="@+id/tv6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:text="这是一串滚动的文字这是一串滚动的文字"
    android:textColor="#0000ff"
    android:textSize="20sp"
    android:singleLine="true"
    android:ellipsize="marquee"
    android:marqueeRepeatLimit="marquee_forever"
    android:focusable="true"
    android:focusableInTouchMode="true"/>

singleLine is a deprecated attribute, but it must be set. It is invalid to use other attributes to set single-line display instead of singleLine.

If you still can’t scroll after setting, you need to set the selection in the Java code of the Activity setSelected, such as:

   TextView tv = (TextView) findViewById(R.id.textView);  
   tv.setSelected(true);  

Example effect:
Each of the above examples corresponds to each row:

Two, Button button

Common attributes & operations:

• size, color
• custom background shape
• Custom press effect
• click event

Button is inherited from the TextView control, so many properties are the same operation, focus on different properties and operations.

1. Basic use

<Button
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="按钮1"
    android:textSize="20sp"
    android:layout_gravity="center"/>

2. Customize the background shape

• Create a new shape type xml resource file:

• Write xml code:

• Set Button Background:
  Set backgroundthe property to the resource file you just created.

<Button
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="按钮2"
    android:background="@drawable/gb_btn2"
    android:textSize="20sp"
    android:layout_gravity="center"
    android:layout_marginTop="10dp"/>

Preview effect:

3. Custom pressing shape

It is also created through the xml resource file, but the root element selection selector:

xml code:

Set backgroundproperties:

<Button
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="按钮3"
    android:textSize="20sp"
    android:background="@drawable/bg_btn3"
    android:layout_gravity="center"
    android:layout_marginTop="10dp"/>

Press effect:

4. Click event

Button click event processing involves Java code, and there are two commonly used processing methods:

• use onClickattributes
• use OnClickListenercase

4.1 Using onClickattributes

This method first needs to set onClickthe properties of the button, such as:

<Button
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="按钮2"
    android:background="@drawable/gb_btn2"
    android:textSize="20sp"
    android:layout_gravity="center"
    android:onClick="Btn2_Onclick"
    android:layout_marginTop="10dp"/>

Then implement the bound callback function in the Activity:

effect:

4.2 Use OnClickListenercases

First, you need to set the id for the button in the layout:

<Button
    android:id="@+id/Btn_3"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="按钮3"
    android:textSize="20sp"
    android:background="@drawable/bg_btn3"
    android:layout_gravity="center"
    android:layout_marginTop="10dp"/>

Then write the following code in Activity:

Button mBtn3 = findViewById(R.id.Btn_3);
mBtn3.setOnClickListener(new View.OnClickListener() {
    
    
    @Override
    public void onClick(View v) {
    
    
        Toast.makeText(BtnTest.this,"按钮3被点击了",Toast.LENGTH_SHORT).show();
    }
});

Effect:

Not only the Button control can set the click event, but some other controls can also be set, specifically Baidu.

Three, EditText text edit box

EditText is a text edit box, which is often used to enter information, such as entering account passwords.

Common attributes & operations:

• Text size, content, color...
• Mixed display of pictures and text
• Prompt information, that is, the content displayed when there is no input
• Input text type, usage scenario: set invisible when entering password
• Get the text information entered in the Activity

1. Basic use

<EditText
    android:id="@+id/et_username"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:text="账号"
    android:textSize="24sp"/>

The text here is the actual displayed content, not the prompt message

2. Display prompt information

Set hintthe property, its value is the content of the prompt message:

<EditText
    android:id="@+id/et_username"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:int="账号"
    android:textSize="24sp"/>

3. Display pictures and text

Use drawableXXXproperties to display images, drawablePaddingset image and text spacing:

<EditText
     android:id="@+id/et_username"
     android:layout_width="match_parent"
     android:layout_height="50dp"
     android:hint="账号"
     android:drawableLeft="@drawable/username"
     android:drawablePadding="5dp"
     android:textSize="24sp"/>

4. Enter text type

Set the attribute inputTypeto limit the type of text entered. For example, when the input is non-plain text information such as a password, set it inputTypeto Passwordbe available for *****display.

<EditText
    android:id="@+id/et_password"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:hint="密码"   
    android:inputType="textPassword"
    android:textSize="24sp"
    android:drawableLeft="@drawable/pswd"
    android:drawablePadding="5dp"
    android:layout_below="@+id/et_username"
    android:layout_marginTop="20dp"/>

5. Example of login interface

EditText can also set the background shape. The following example sets rounded corners and strokes.

Layout code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:padding="20dp"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/et_username"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:hint="账号"
        android:background="@drawable/bg_et"
        android:drawableLeft="@drawable/username"
        android:drawablePadding="5dp"
        android:textSize="24sp"/>

    <EditText
        android:id="@+id/et_password"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:hint="密码"
        android:inputType="textPassword"
        android:textSize="24sp"
        android:drawableLeft="@drawable/pswd"
        android:drawablePadding="5dp"
        android:background="@drawable/bg_et"
        android:layout_below="@+id/et_username"
        android:layout_marginTop="20dp"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:text="登录"
        android:layout_below="@id/et_password"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="150dp"/>

</RelativeLayout>

Effect:

When entering the password here, due to the security protection of the mobile phone, the projection screen cannot be displayed.

5. Get the input text

Similar to Button's click event processing method, EditText's text change event is handled through an instance in the Activity TextWatcher.

For example, get the Java code of UserName:

EditText mEtUsername = findViewById(R.id.et_username);
mEtUsername.addTextChangedListener(new TextWatcher() {
    
    
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
    
    
        Log.d("Before-username",s.toString());
    }

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
    
    
        Log.d("username",s.toString());
    }

    @Override
    public void afterTextChanged(Editable s) {
    
    
        Log.d("After-username",s.toString());
    }
});

beforeTextChangedIt is the function to process the text before it is changed, onTextChangedit is the processing function when the text is changed, afterTextChangedit is the processing function after the text is changed, and it is usually used to onTextChangedprocess the text change event.

Use Log to print out the input text. In 6:Logcat, you can see the calling order of these functions:

Four, ImageView image view

Common attributes & operations:

• Image content, background
• Image scaling type
• load web image

1. Image content settings

Use srcthe attribute to set the content of ImageView. backgroundThe attribute is to set the background image or background color, pay attention to the distinction.

<ImageView
    android:layout_width="300dp"
    android:layout_height="150dp"
    android:background="#FF9966"
    android:src="@drawable/img_test"/>

2. Image scaling type

Use scaleTypeattributes to set the zoom type of the picture, common options (from the rookie tutorial):

• fitXY: scale the image horizontally and vertically independently so that the image is fully adapted to the ImageView, but the aspect ratio of the image may change
• fitStart: Keep the aspect ratio to zoom the picture, knowing that the longer side is equal to the programming of the Image, and place the picture in the upper left corner of the ImageView after the zoom is completed
• fitCenter: Same as above, put it in the middle after zooming;
• fitEnd: Same as above, zoomed and placed in the lower right corner;
• center: Keep the size of the original image and display it in the center of the ImageView. When the size of the original image is larger than the size of the ImageView, part of the clipping process is exceeded.
• centerCrop: Keep the aspect ratio to zoom the picture, knowing that the ImageView is completely covered, the picture may not be displayed completely
• centerInside: Keep the aspect ratio to zoom the picture until the ImageView can fully display the picture
• matrix: default value, does not change the size of the original image, draws the original image from the upper left corner of the ImageView, and crops the part of the original image that exceeds the ImageView

Just compare the difference:

3. Load network images

When the picture used is not local on the network, we need to load the picture. Usually, a third-party open source library is used to load network images.

Here, the Glide open source library is used to load network images, and the source code and usage methods are also available on the github repository .

Steps for usage:

• modify gradle
  
• Use the glide library to load images
  After modifying gradle in the previous step and synchronizing it, you can use it to load network images.

Refer to the official usage method:

// For a simple view:
@Override public void onCreate(Bundle savedInstanceState) {
    
    
  ...
  ImageView imageView = (ImageView) findViewById(R.id.my_image_view);

  Glide.with(this).load("http://goo.gl/gEgYUd").into(imageView);
}

// For a simple image list:
@Override public View getView(int position, View recycled, ViewGroup container) {
    
    
  final ImageView myImageView;
  if (recycled == null) {
    
    
    myImageView = (ImageView) inflater.inflate(R.layout.my_image_view, container, false);
  } else {
    
    
    myImageView = (ImageView) recycled;
  }

  String url = myUrls.get(position);

  Glide
    .with(myFragment)
    .load(url)
    .centerCrop()
    .placeholder(R.drawable.loading_spinner)
    .into(myImageView);

  return myImageView;
}

You only need to modify the url link of the picture in the load, such as:

ImageView imageView = (ImageView) findViewById(R.id.iv_1);
Glide.with(this).load("https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png").into(imageView);

• Open the network permission
  The picture is on the network, so the network permission must be opened. AndroidManifest.xmlAdd to the file :

<uses-permission android:name="android.permission.INTERNET"/>

• Effect
  

Five, SeekBar drag bar

SeekBar drag bar, common attributes & operations:

• Drag Range, Height, Length
• Slider style (shape, color, image, etc.)
• The color of the drag bar
• Drag event handling

1. Common attributes & operations

1. The drag range is set by minthe and attribute, which is the current value. After setting, the slider will be at the position of the current value. and set the height of the drag bar, and the length (width) is set with and ;maxprogressminHeightmaxHeightminWidthmaxWidth
2. The slider style can use pictures or xml resource files, and use thumbattribute settings;
3. The color of the drag bar can also use pictures or xml files, use progressDrawablethe settings;

Put an example directly:

<SeekBar
    android:id="@+id/sb_1"
    android:layout_marginTop="100dp"
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:max="100"
    android:progress="50"
    android:maxHeight="8dp"
    android:thumb="@drawable/sb_thumb"
    android:progressDrawable="@drawable/bg_adjust_seek_bar"/>

Effect:

2. Drag event handling

Similar to button and text edit box, use OnSeekBarChangeListenerinstance processing, common format:
there are three processing functions:

• onProgressChanged: Triggered when the progress changes
• onStartTrackingTouch: Triggered when the SeekBar is held down
• onStopTrackingTouch: Triggered when the SeekBar is released

final TextView mTv1 = findViewById(R.id.iv_1);
SeekBar mSb1 = findViewById(R.id.sb_1);
mSb1.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    
    
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
    
    
        Toast.makeText(getApplicationContext(),String.format("当前值:%d",progress),Toast.LENGTH_SHORT).show();
        mTv1.setText("当前值: " + progress + " /100 ");
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
    
    
        Toast.makeText(getApplicationContext(),"按下SeekBar",Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
    
    
        Toast.makeText(getApplicationContext(),"释放SeekBar",Toast.LENGTH_SHORT).show();
    }
});

Effect: