Android 常用UI组件-蒲公英云

作者：Bright Xu

文章目录

- 布局管理器
- - 1. 线性布局 LinearLayout
  - 1. 相对布局 RelativeLayout
- TextView
- Button

布局管理器

1. 线性布局 LinearLayout

最常用属性

android:id android:layout_margin

android:layout_width android:layout_padding

android:layout_height android:orientation

android:background
android:id

创建id
```
android:id="@+id/ll_1"
```
宽度和高度(android:layout_width android:layout_height)
- match_parent
```
android:layout_width="match_parent"
android:layout_height="match_parent"
```
  匹配父控件，表示让当前控件的大小和父布局的大小一样，也就是由父布局来决定当前控件的大小
- wrap_content
```
android:layout_width="wrap_content"
android:layout_height="wrap_content"
```
  表示让当前的控件大小能够刚好包含里面的内容，也就是由控件内容决定当前控件的大小
- 固定宽度和高度
```
android:layout_width="200dp"
android:layout_height="200dp"
```
  - 单位通常使用dp，字体单位通常使用sp
android:orientation 布局方向
- vertical 竖直方向
```
android:orientation="vertical"
```
- horizontal 水平方向
```
android:orientation="horizontal"
```
- 默认水平方向
android:background 背景颜色
```
android:background="#ff0033"
```
android:layout_padding 内边距
- android:paddingTop
- android:paddingLeft
- android:paddingBottom
- android:paddingRight
android:layout_margin 外边距
- android:layout_marginTop
- android:layout_marginLeft
- android:layout_marginBottom
- android:layout_marginRight
android:layout_weight
- 设置权重
```
android:layout_weight="1"
```
  把剩余内容按权重平分
layout_gravity
- 内部元素对齐方式
- layout_gravity 是LinearLayout 子元素的特有属性。对于layout_gravity，该属性用于设置控件相对于容器的对齐方式，可选项有：top、bottom、left、right、center_vertical、fill_vertical 、 center、fill等等。
- 这些可选项中不是适用于每一种布局。在垂直线性布局中，android:gravity为bottom不起作用；而水平线性布局中，android:gravity为right不起作用。本属性是android:layout_gravity属性，与 android:gravity 属同。android:gravity是LinearLayout的特有属性。android:layout_gravity是LinearLayout 子元素的特有属性，不要混淆了。

android:id	android:layout_margin
android:layout_width	android:layout_padding
android:layout_height	android:orientation
android:background

RGB网页颜色在线取色器

2. 相对布局 RelativeLayout

最常用属性

android:layout_toLeftOf	android:layout_toStartOf
android:layout_toRightOf	android:layout_toEndOf
android:layout_alignBottom	android:layout_below
android:layout_alignParentBottom	… …

对齐
- 默认靠左上角对齐
  
  下面是将控件与view_2控件的下边缘对齐
```
android:layout_below="@id/view_2"
```
- android:layout_alignParentBottom 靠父控件下边缘对齐
```
android:layout_alignParentBottom="true"
```
- android:layout_alignParentRight 靠父控件右边缘对齐
```
android:layout_alignParentRight="true"
```

TextView

文字大小、颜色

android:text="@string/tv_text1"
android:textColor="#f00"
android:textSize="24sp"

显示不下时，使用…

android:layout_width="100dp"
android:maxLines="1"
android:ellipsize="end"

文字+icon
```
android:drawableRight="@drawable/tuanzi04"
```
在文字的右边放置了一个图片tuanzi04.png

中划线

// com.bright.helloworld.TextViewActivity.java
package com.bright.helloworld;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Paint;
import android.os.Bundle;
import android.widget.TextView;
public class TextViewActivity extends AppCompatActivity { 
    private TextView mTv4;
    @Override
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_view);
        mTv4 = findViewById(R.id.tv_4);
        mTv4.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FLAG);  // 中划线
        mTv4.getPaint().setAntiAlias(true);  // 去除锯齿
    }
}
<!-- layout/activity_text_view.xml -->
    <TextView android:id="@+id/tv_4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="你好，世界！！！" android:textColor="#f00" android:textSize="24sp" android:layout_marginTop="10dp"/>

下划线

方式1：

// com.bright.helloworld.TextViewActivity.java
package com.bright.helloworld;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Paint;
import android.os.Bundle;
import android.widget.TextView;
public class TextViewActivity extends AppCompatActivity { 
    private TextView mTv5;
    @Override
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_view);
        mTv5 = findViewById(R.id.tv_5);
        mTv5.getPaint().setFlags(Paint.UNDERLINE_TEXT_FLAG);  // 下划线
    }
}

方式2：

// com.bright.helloworld.TextViewActivity.java
package com.bright.helloworld;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Paint;
import android.os.Bundle;
import android.widget.TextView;
public class TextViewActivity extends AppCompatActivity { 
    private TextView mTv6;
    @Override
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_view);
        mTv6 = findViewById(R.id.tv_6);
        mTv6.setText(Html.fromHtml("<u>你好，世界！！！</u>"));  // 下划线2
    }
}
<!-- layout/activity_text_view.xml -->
    <TextView android:id="@+id/tv_6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" android:textColor="#f00" android:textSize="24sp" android:layout_marginTop="10dp"/>

跑马灯

<!-- layout/activity_text_view.xml -->
    <TextView android:id="@+id/tv_7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="你好，世界！！！你好，世界！！！你好，世界！！！你好，世界！！！你好，世界！！！你好，世界！！！你好，世界！！！你好，世界！！！" android:textColor="#f00" android:textSize="24sp" android:layout_marginTop="10dp" android:singleLine="true" android:ellipsize="marquee" android:marqueeRepeatLimit="marquee_forever" android:focusable="true" android:focusableInTouchMode="true"/>

Button

文字大小、颜色

<!-- layout/activity_button.xml -->
<Button android:id="@+id/btn_1" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="按钮1" android:textSize="20sp" android:textColor="#eee" android:background="#999"/>