Android代码移动布局中心 androidui布局

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"/>

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