Android开发-Android UI与布局详解

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	内右边距