Android 常用UI组件

作者：Bright Xu

布局管理器

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 子元素的特有属性，不要混淆了。

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

• 自定义背景形状

• 自定义按压效果

• 点击事件