Android開發(fā)者常見的UI組件總結(jié)大全

更新時間：2024年04月25日 11:17:51 作者：YUFENGSHI.LJ

Android開發(fā)中UI組件是構(gòu)建用戶界面的基本元素,下面這篇文章主要給大家介紹了關(guān)于Android開發(fā)者常見的UI組件總結(jié)的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

TextView 文本視圖

設(shè)置字體大小：android:textSize="20sp" 用sp
設(shè)置顏色：android:textColor="#00ffff"
設(shè)置倍距(行距)：android:lineSpacingMultiplier="2"
設(shè)置具體行距：android:lineSpacingExtra="15sp" 與倍距只可取其一
過長文本的處理方式：
1.在外面添加滾動條，注意，一個滾動條里面只能添加一個子控件
2.省略過長部分，取消換行部分
省略過長部分：
1.android:singleLine="true" 后面加省略號 android:ellipsize="middle" 設(shè)置省略號的位置
2.android:lines="1" 設(shè)置單行后面加句號

 <TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:textSize="20sp"
    android:textColor="#00ffff"
    android:lineSpacingMultiplier="2"
    android:text="@string/long_text"/>

eg:跑馬燈

跑馬燈,一個頁面只有一個跑馬燈生效，因為它需要獲取焦點
    android:ellipsize="marquee" 設(shè)置跑馬燈形式
    android:focusable="true" 設(shè)置可以獲取焦點
    android:focusableInTouchMode="true" 設(shè)置在觸摸時獲取焦點
    android:marqueeRepeatLimit="marquee_forever" 設(shè)置跑馬燈時長

<TextView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:textSize="20sp"
   android:textColor="#00ffff"
   android:singleLine="true"
   android:ellipsize="marquee"
   android:focusable="true"
   android:focusableInTouchMode="true"
   android:marqueeRepeatLimit="marquee_forever"
   android:text="@string/long_text"/>

string類中定義的長文本

<string name="long_text"> 洞穴昏暗潮濕，被植物發(fā)出的微弱熒光照亮。
　　石壁上纏繞著藤蔓，墨綠，深紫，濃黑，像大團的、糾纏的蛇。
　　一只黑色的飛蟲跌跌撞撞闖入，它長著六只堅硬的翅膀，有三個口器。
　　下一秒，糾纏的藤蔓間忽然出現(xiàn)一個巨大的深紫色膨起，它迅速裂開，像張開了一張嘴，在下一刻瞬間合攏，將飛蟲吞入腹中。
　　藤蔓群緩緩蠕動起來，膨起的那部分逐漸回收，恢復(fù)到原本的狀態(tài)。
　　洞穴里響起仿佛翅膀扇動的聲音，一滴粘液拖曳著半透明的細絲從洞穴頂端落下來，啪嗒一聲落進地面黏膩的苔蘚里，它們細微地蠕動起來，這滴閃光的粘液很快被吸收殆盡，在地面消失了蹤影。
　　角落——被綠色真菌發(fā)出的熒光照亮的角落。巖石與土壤的縫隙里，白色像潮水一樣涌出來，覆蓋了大片的區(qū)域，是雪白的菌絲。它生長，蔓延，伸出數(shù)以億計的觸角，最后向著中央蠕動而去，合攏，聚集，拉長，一個形體出現(xiàn)。一只腳踏上厚重軟膩的苔蘚，苔蘚陷下去吞沒了它，只露出雪白的腳踝。
　　安折看自己的腳踝——屬于人類的肢體，由骨架、肌肉和血管支撐起來的肢體，關(guān)節(jié)可以活動，但因骨骼的限制并不靈活。角質(zhì)層構(gòu)成指甲，圓潤透明，是退化的產(chǎn)物，來自獸類鋒利的爪尖。
　　他抬起腿，邁出一步，先前因被踩而凹陷的苔蘚濕涼且富有彈性，在他離開后重新聚攏起來，像豎立的蚯蚓。
　　這一次，他腳下踩到了別的東西，是一具人類骨骼的手臂。
　　昏暗中，安折望向那具骷髏。
    </string>

ImageView

android:adjustViewBounds：設(shè)置ImageView是否調(diào)整自己的邊界來保持所顯示圖片的長寬比。
android:maxHeight：設(shè)置ImageView的最大高度。
android:maxWidth：設(shè)置ImageView的最大寬度。
android:scaleType：設(shè)置所顯示的圖片如何縮放或移動以適應(yīng)ImageView的大小。

•matrix：使用matrix方式進行縮放。
•fitXY：橫向、縱向獨立縮放，以適應(yīng)該ImageView。
•fitStart:保持縱橫比縮放圖片，并且將圖片放在ImageView的左上角。
•fitCenter：保持縱橫比縮放圖片，縮放完成后將圖片放在ImageView的中央。
•fitEnd：保持縱橫比縮放圖片，縮放完成后將圖片放在ImageView的右下角。
•center：把圖片放在ImageView的中央，但是不進行任何縮放。
•centerCrop：保持縱橫比縮放圖片，以使圖片能完全覆蓋ImageView。
•centerInside：保持縱橫比縮放圖片，以使得ImageView能完全顯示該圖片。

android:src：設(shè)置ImageView所顯示的Drawable對象的ID。

ImageButton

ImageButton繼承與ImageView；

Button可以顯示圖片也可以顯示文本，而ImageButton只能顯示圖片；

ImageButton中的圖片可以按比例縮放；

Button只能設(shè)置一張圖片，而ImageButton可以設(shè)置前景和背景兩張圖片重疊的效果

EditView

<EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="20dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        android:inputType="number"
        android:maxLength="12"
        android:hint="賬號"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="20dp"
        android:gravity="center_horizontal"
        android:background="@color/design_default_color_secondary"
        android:inputType="textPassword"
        android:hint="密碼"/>

Button

CheckBox 多選按鈕

CheckBox繼承CompoundButton，是多選按鈕。
android:checked設(shè)置按鈕是否選中。

setOnCheckedChangeListener(OnCheckedChangeListener)來對多選按鈕進行監(jiān)聽。
boolean isChecked() 判斷當(dāng)前按鈕是否選中
void.setChecked(boolean checked) 設(shè)置按鈕是否勾選

 CheckBox checkBox = findViewById(R.id.checkBox1);

        // 設(shè)置選中狀態(tài)
        checkBox.setChecked(false);

        // checkBox.isChecked() 獲取選中狀態(tài)
        boolean isChecked = checkBox.isChecked();

        Log.e("isChecked","當(dāng)前復(fù)選框選中狀態(tài)："+isChecked);

        // 監(jiān)聽狀態(tài)變化 setOnCheckedChangeListener() 方法
        checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                Log.e("isChecked","當(dāng)前復(fù)選框選中狀態(tài)："+isChecked);
            }
        });

RadioButton 單選按鈕

單選控件和 RadioGroup 一起使用，在一個 RadioGroup 中只能選中一個

android:checkedButton指定初始選項。

RadioGroup 添加監(jiān)聽器：setOnCheckedChangeListener（OnCheckedChangeListener）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".RadioButtonActivity">
   
    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:background="@color/cardview_shadow_start_color">
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="111"/>

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="222"/>

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="333"/>

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="444"/>
    </RadioGroup>

</LinearLayout>

radioGroup = findViewById(R.id.radioGroupId);
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            // checkedId 是選中的 RadioButton 的id
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                // 找到選中的 RadioButton
                RadioButton radioButton = findViewById(checkedId);
                Toast.makeText(RadioButtonActivity.this, "當(dāng)前選中的單選項："+radioButton.getText(), Toast.LENGTH_SHORT).show();
            }
        });

ToggleButton 開關(guān)觸發(fā)器

<ToggleButton
        android:id="@+id/toggleButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textOff="關(guān)閉了"
        android:textOn="打開了"
        android:checked="true"
        android:text="ToggleButton" />

SeekBar 滑動條

android:max=“255” （最大的滑動值，從0開始）

android:progress=“255”（初始時滑動條的位置）

<SeekBar
    android:id="@+id/seekBar"
    android:max="100"
    android:progress="30"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

public class RadioButtonActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_radio_button);
       
        SeekBar seekBar = findViewById(R.id.seekBar);
        // 設(shè)置最大值
        seekBar.setMax(50);
        // 設(shè)置當(dāng)前進度
        seekBar.setProgress(40);
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            // 進度改變時（過程中）的回調(diào)方法
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                Log.e("seekBar change","當(dāng)前seekBar的進度："+progress);

            }

            // 開始時回調(diào)的方法
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                Log.e("seekBar開始了","當(dāng)前seekBar的進度："+seekBar.getProgress());

            }

            // 結(jié)束時回調(diào)的方法
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                Log.e("seekBar結(jié)束了","當(dāng)前seekBar的進度："+seekBar.getProgress());
            }
        });
    }
}

ProgressBar 進度條

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ProgressBarActivyty">
    <!--
    ProgressBar 的默認形式是轉(zhuǎn)圈圈
    style="?android:attr/progressBarStyleHorizontal" style 設(shè)置風(fēng)格
    android:max="100"  進度條的最大值
    android:indeterminate="true" 永恒滾動
    android:progress="10" 已完成進度
    -->
    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <ProgressBar
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:progress="10"
        android:max="100"
        style="?android:attr/progressBarStyleHorizontal"/>
    <ProgressBar
        android:id="@+id/progress"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:progress="10"
        android:max="100"
        android:indeterminate="true"
        style="?android:attr/progressBarStyleHorizontal"/>
    <ProgressBar
        android:id="@+id/progress1"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:max="100"
        style="?android:attr/progressBarStyleHorizontal"/>

</LinearLayout>

public class ProgressBarActivyty extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_progress_bar);
        ProgressBar progressBar1 = findViewById(R.id.progress1);
        // 設(shè)置progressBar進度
        // progressBar1.setProgress(80);
        // 通過代碼控制進度--- 利用線程
        // 但是在Android 4.0 之后不能在線程中直接操縱控件，會崩潰。progressBar是一個特例
        new Thread(){
            public void run(){
                for (int i = 1; i <= 100 ; i++) {
                    progressBar1.setProgress(i);
                    try {
                        // 休眠一下
                        Thread.sleep(30);
                    } catch (InterruptedException e) {
                        throw new RuntimeException(e);
                    }
                }
            }
        }.start();
    }
}

共有屬性

margin: 外邊距，控件的外部邊緣距離其父容器邊緣的距離
padding: 內(nèi)邊距，控件內(nèi)部的控件距離它邊緣的邊距
gravity:控件內(nèi)部的控件相對于它的位置
layout_gravity:控件本身相對于父容器的位置
visibility: 可見狀態(tài) gone(不可見也不保留位置) visible(可見) invisible(不可見但保留位置)