1.UI

UI - User Interface - User Interface - the medium of information exchange between the system and the user
Software design = coding design + UI design
Android UI = layout + controls

2. layout layout

View: Widget. User-interactive content. The common ones are TextView (text box), Button (button) and so on.
ViewGroup: layout. No container is visible. The common ones are LinearLayout (line layout), ConstraintLayout (constraint layout), etc.
Schematic diagram of the view hierarchy of layouts and widgets: (similar to folders and files)

The way the layout is declared:

　　　　In the file activity_main.xml:

<?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="300dp"
        android:layout_height="300dp"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

<TextView
　　　　...
         /> 代表了创建一个微件View - 文本框(TextView)，并在(...)部分设置了它的样式。

　　Next you need to instantiate the View. In the file MainActivity.java:

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

Notice:

　　Each layout file has one and only one root element. And must be View or ViewGroup.
　　Sub-element controls can be added under the root element to gradually define the layout view hierarchy.
　　After the layout is declared, it should be saved in the res/layout/ directory in the form of .xml.

example:

<?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>

Load XML resources: compile each xml layout into View resources. Inside the Activity.onCreate() callback, pass setContentView(). And pass the reference of the layout resource to the application in the form of R.layout.*layout_file_name*, and load the layout resource in the application code.

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

3. Properties

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello,I am a TextView"
        android:textSize="24sp"/>
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮"/>

4.ID

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello,I am a TextView"
        android:textSize="24sp"/>

//通过ID值创建视图对象实例
TextView textView = (TextView) findViewById(R.id.tv);

5. Layout parameters

Layout parameters LayoutParams: Set the position and size of the view in the layout.

Setting method:

　　xml：

    <TextView
        android:id="@+id/tv"
        android:layout_width="100dp"    //宽
        android:layout_height="200dp"    //高
        android:layout_marginLeft="10dp"    //左边距
        android:layout_marginTop="20dp"    //上边距
        android:text="Hello,I am a TextView"
        android:textSize="24sp"/>

java：

        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);

Get layout position
- 　　View: getLeft(), getTop() get the coordinate position of the view (relative to its parent view); getWidth(), getHeight() get the size of the view.

Relative unit of measure:
- 　　wrap_content: Instructs the view to adjust its size to the size required by the content (how big is the content and how big is the view)
- 　　match_parent: Instructs the view to adopt the maximum size allowed by the parent view group as much as possible (as much as the parent view allows)
- ```
    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="20dp"
        android:text="Hello,I am a TextView"
        android:textSize="24sp"/>
```

注意：在Android编程中描述尺寸大小尽量用dp，或wrap_content、match_parent而非px。

　　px：像素，1px指屏幕上一个物理像素点。
　　dp：设备无关像素。与像素密度有关。

密度类型	代表的分辨率 (px)	屏幕密度 (dpi)	换算 (px/dp)	比例
低密度(ldpi)	240x320	120	1dp=0.75px	3
中密度(mdpi)	320x480	160	1dp=1px	4
高密度(hdpi)	480x800	240	1dp=1.5px	6
超高密度(xhdpi)	720x1280	320	1dp=2px	8
超超高密度 (xxhdpi)	1080x1920	480	1dp=3px	12

6.内边距与外边距

<?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>

外边距		内边距
layout_margin	外边距	padding	内边距
layout_marginTop	外上边距	paddingTop	内上边距
layout_marginBottom	外下边距	paddingBottom	内下边距
layout_marginLeft	外左边距	paddingLeft	内左边距
layout_marginRight	外右边距	paddingRight	内右边距

Android Development - Detailed Android UI and Layout

1.UI

2. layout layout

3. Properties

4.ID

5. Layout parameters

6.内边距与外边距

Guess you like