Android 常用UI组件

灰太狼 2023-06-23 13:24 19阅读 0赞

> 作者：[Bright Xu][]

### 文章目录 ###

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

## 布局管理器 ##

### 1. 线性布局 LinearLayout ###

*  最常用属性
    
    <table> 
     <thead> 
      <tr> 
       <th>android:id</th> 
       <th>android:layout_margin</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td><strong>android:layout_width</strong></td> 
       <td><strong>android:layout_padding</strong></td> 
      </tr> 
      <tr> 
       <td><strong>android:layout_height</strong></td> 
       <td><strong>android:orientation</strong></td> 
      </tr> 
      <tr> 
       <td><strong>android:background</strong></td> 
       <td></td> 
      </tr> 
     </tbody> 
    </table>
 *  **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 子元素的特有属性，不要混淆了。

[RGB网页颜色在线取色器][RGB]

### 2. 相对布局 RelativeLayout ###

*  最常用属性
    
    <table> 
     <thead> 
      <tr> 
       <th>android:layout_toLeftOf</th> 
       <th>android:layout_toStartOf</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td><strong>android:layout_toRightOf</strong></td> 
       <td><strong>android:layout_toEndOf</strong></td> 
      </tr> 
      <tr> 
       <td><strong>android:layout_alignBottom</strong></td> 
       <td><strong>android:layout_below</strong></td> 
      </tr> 
      <tr> 
       <td><strong>android:layout_alignParentBottom</strong></td> 
       <td>… …</td> 
      </tr> 
     </tbody> 
    </table>
 *  对齐
    
     *  默认靠左上角对齐
        
        下面是将控件与`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);  // 去除锯齿
            }
        }
    
        
            <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
            }
        }
    
        
            <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"/>
 *  跑马灯
    
        
            <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 ##

*  文字大小、颜色
    
        
        <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"/>
 *  自定义背景形状
 *  自定义按压效果
 *  点击事件

[Bright Xu]: https://blog.csdn.net/weixin_44129085
[RGB]: http://link.fobshanghai.com/rgbcolor.htm