Android 常用UI組件

佈局管理器

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

• 自定義背景形狀

• 自定義按壓效果

• 點擊事件