Android Development-Android UI and Layout

01  Android UI

1.1  UI

• User interface ( User Interface , referred to as UI , also known as user interface) is a medium for interaction and information exchange between the system and users , and it realizes the conversion between the internal form of information and the form acceptable to humans.
• Software design can be divided into two parts: coding design and UI design .

1.2  Android UI

• The Android application interface contains all the content that the user can view and interact with. Android provides a variety of preset UI components , such as structured layout objects and UI controls , you can use these components to build a graphical interface for your application. Android also provides other interface modules for building specialized interfaces such as dialogs, notifications, and menus .
• Android UI is made up of layouts and controls

02 layout

Layout (layout) can define the interface structure in the application (for example, the interface structure of Activity). All elements in a layout are built using a hierarchy of View and ViewGroup objects. Views typically draw content that users can view and interact with . However, ViewGroups are invisible containers that define the layout structure of Views and other ViewGroup objects .

2.1 Structure of layout

An illustration of the view hierarchy defining the layout of the interface:

View objects are often called "widgets" and can be one of many subclasses, such as Button or TextView.

ViewGroup objects are often called "layouts" and can be one of many types that provide other layout structures, such as LinearLayout or ConstraintLayout.

2.2 Declare layout

To declare interface elements in XML , Android provides a concise XML vocabulary for the View class and its subclasses, such as for widgets and layouts.

You can also use Android Studio's Layout Editor and use a drag-and-drop interface to build XML layouts.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

<TextView
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:text="Hello World!" app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Instantiates layout elements at runtime . Your app can create View objects and ViewGroup objects (and manipulate their properties) programmatically.

ConstraintLayout constraintLayout = new ConstraintLayout(this);
TextView view = new TextView(this);
view.setText("Hello World!");
constraintLayout.addView(view);

* Tip : use Layout Inspector to debug layout, you can view the layout created by code

• [Run your app] on a connected device or emulator.
• Click Tools > Layout Inspector.
• In the Choose Process dialog that appears, select the application process to check, then click OK.

2.3 Writing XML

• Leverage Android's XML vocabulary to quickly design UI layouts and the screen elements they contain in the same way you create web pages containing a series of nested elements in HTML
• Every layout file must contain exactly one root element , and that element must be a View object or a ViewGroup object
• Once the root element is defined, additional layout objects or controls can be added as child elements , incrementally building the view hierarchy that defines the layout
• After declaring the layout in XML, save the file with the .xml extension in the res/layout/ directory of the Android project

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <TextView android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, I am a TextView" />
    <Button android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, I am a Button" />
</LinearLayout>
    

<LinearLayout>:视图容器标签

<TextView>：视图标签

<Button>：按钮标签

2.4 Loading XML resources

When compiling the application, the system compiles each XML layout file into a View resource. In the Activity.onCreate() callback, call setContentView() and pass the layout resource reference to the application code in the form of R.layout.*layout_file_name* to load the layout resource in the application code.

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

2.5 Properties

Each View object and ViewGroup object supports its own various XML attributes. Some properties are unique to View objects (for example, TextView supports a textSize property), but any View object that extends this class will also inherit these properties. Some properties are common to all View objects because they are inherited from the View root class (such as the id property). In addition, other properties are considered "layout parameters", that is, properties that describe a View object's specific layout orientation, as defined by that object's parent ViewGroup object.

<TextView
    android:id="@+id/tv" android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:text="Hello World!" 
    android:textSize="24sp"/>
<Button
    android:id="@+id/btn" android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:text="按钮"/>

<TextView 文本视图
    android:id="@+id/tv" android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:text="Hello World!"   展示的文本内容
    android:textSize="24sp"/>     文本的尺寸大小

2.6  ID

Any View object can have an integer ID associated with it , which is used to uniquely identify the View object in the structure tree . This ID is referenced as an integer when the app is compiled , but is usually specified as a string in the id attribute in the layout XML file . This is an XML attribute (defined by the view class) common to all View objects , and you'll be using it a lot.

• The ID syntax inside the XML tag is:

android:id="@+id/tv"

• The @ sign at the beginning of the string indicates that the XML parser should parse and expand the rest of the ID string and identify it as an ID resource. The plus sign (+) indicates that this is a new resource name that must be created and added to our resource (inside the R.java file). The Android framework also provides many other ID resources. When referencing an Android resource ID , the plus sign is not required, but the android package namespace must be added.

android:id="@android:id/empty"

After adding the android package namespace, we will now refer to the ID from the android .R resource class instead of the local resource class.

tips: The difference between @+id and @id :

In fact, @+id is to add an id name in the R.java file . If the same id name already exists before, it will overwrite the previous name. And @id refers to the id resource that directly refers to the existence of the R.java file . If it does not exist, it will compile and report an error.

• Note: The ID string name must be unique in the same layout, and cannot have the same name, and the same name can be used in different layouts;
• Create an instance of our view object by ID value

<TextView
    android:id="@+id/tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    android:textSize="24sp"/>

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

2.7 Layout parameters LayoutParams

• Layout attributes of layout_***

<TextView
    android:layout_width="100dp" android:layout_height="200dp"
    android:layout_marginLeft="10dp" //左边距
    android:layout_marginTop="10dp" //上边距
    android:text="Hello World!" />

• The role of the layout parameter is to set the position and size of our view in the layout
• The ViewGroup class implements a nested class that extends ViewGroup.LayoutParams , which contains properties that set the size and position of the View.

• View hierarchy diagram, with layout parameters associated with each view:

TextView tv = new TextView(this);
LinearLayout linearLayout = new LinearLayout(this);
LinearLayout.LayoutParams layoutParams =(LinearLayout.LayoutParams)tv.getLayoutParams();
layoutParams.leftMargin = 30; //左边距
layoutParams.topMargin = 30;//上边距
layoutParams.width = 100;//宽
layoutParams.height = 200;//高
tv.setLayoutParams(layoutParams);
linearLayout.addView(tv);

•  In general, it is not recommended to specify layout width and height in absolute units such as pixels. A better approach is to use relative   units of measurement, such as density-independent pixels (dp) , wrap_content , or match_parent , as they help ensure that your app displays correctly on device screens of all sizes.

. wrap_content: Instructs your view to resize itself to the dimensions required by the content.

. match_parent: Instructs your view to take as large a size as possible for its parent viewgroup.

2.8 Layout position

• The view can obtain the coordinate position of the view by calling the getLeft() method and the getTop() method, and can also obtain the size of the view through getWidth() and getHeight() . The values ​​returned by these methods are relative to the position of its parent view.

• The units of position and size are pixels ( px )

• The difference between px and dp
  • px means pixel, 1px represents a physical pixel on the screen;
  • Set the px unit for the view, and the size is different under different resolutions.

• • dp (dip) Density independent pixels , device-independent pixels. It is closely related to " pixel density " ; dpi pixel density: the number of pixels contained per inch.
  • Suppose there is a mobile phone with a physical size of 1.5 inches x 2 inches and a screen resolution of 240x320 , then we can calculate the number of pixels per inch on the screen of this mobile phone as 240/1.5=160dpi (horizontal ) or 320/2=160dpi (vertical), 160dpi is the pixel density of this mobile phone, and the unit of pixel density, dpi , is the abbreviation of Dots Per Inch , that is, the number of pixels per inch .    

density type	Representative resolution (px)	screen density (dpi)	conversion (px/dp)	Proportion
Low Density ( ldpi )	240x320	120	1dp=0.75px	3
medium density ( mdpi )	320x480	160	1dp=1px	4
high density ( hdpi )	480x800	240	1dp=1.5px	6
Extra High Density ( xhdpi )	720x1280	320	1dp=2px	8
Ultra Ultra High Density ( xxhdpi )	1080x1920	480	1dp=3px	12

  2.9 Padding and Margins

 

<TextView
    android:id="@+id/tv" android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:text="Hello World!" 
    android:textSize="24sp"/>
<Button
    android:id="@+id/btn" android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:text="按钮"/>

 

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


    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="40dp"
        android:background="#DD001B"
        android:paddingLeft="40dp"
        android:paddingTop="40dp">

        <View
            android:layout_width="180dp"
            android:layout_height="180dp"
            android:background="#139948"/>
    </LinearLayout>

</LinearLayout>