1.UI
- UI - User Interface - 用户界面 - 系统与用户信息交换的媒介
- 软件设计 = 编码设计 + UI设计
- Android UI = 布局 + 控件
2.布局layout
- View:微件。用户可交互内容。常见的有TextView(文本框)、Button(按钮)等。
- ViewGroup:布局。不可见容器。常见的有LinearLayout(线条布局)、ConstraintLayout(约束布局)等。
- 布局与微件的视图层次结构示意图:(跟文件夹与文件差不多)
- 布局的声明方式:
文件 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),并在(...)部分设置了它的样式。
接下来需要实例化这个View。在文件MainActivity.java中:
ConstraintLayout constraintLayout = new ConstraintLayout(this); TextView view = new TextView(this); view.setText("Hello World"); constraintLayout.addView(view);
- 注意:
- 每个布局文件有且只有一个根元素。并且必须是View或ViewGroup。
- 根元素下可以添加子元素控件,逐步定义布局视图层次结构。
- 声明布局后要以.xml形式保存在res/layout/目录下。
- 例:
<?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>
- 加载XML资源:将每个xml布局编译成View资源。在Activity.onCreate()回调内,通过setContentView()。并以R.layout.*layout_file_name*形式向应用传递布局资源的引用,加载应用代码中的布局资源。
-
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }
3.属性
<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.布局参数
- 布局参数LayoutParams:给视图设定在布局中的位置和大小。
- 设置方式:
- 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);
- 获取布局位置
- 视图:getLeft(),getTop()获取视图的坐标位置(相对于其父视图);getWidth(),getHeight()获取视图的尺寸。
- 相对测量单位:
- wrap_content:指示视图将其大小调整为内容所需的尺寸(内容多大视图多大)
- match_parent:指示视图尽可能采用父视图组所允许的最大尺寸(父视图允许多大就多大)
-
<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 | 内右边距 |
标签:layout,px,布局,视图,详解,UI,Android,TextView From: https://www.cnblogs.com/lysboke/p/17248520.html