---
# System prepended metadata

title: android 基本元件使用

---

# android 基本元件使用
### TextView 文字
顯示指定的文字

<font color=#1936C9>**宣告**</font>
``` java=
TextView text;
  ```
#### <font color=#1936C9>**常用的功能**</font>

``` xml=
<TextView
    android:id="@+id/textview01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    android:text="Hello World!"
    android:textSize="16dp"
    android:textColor="#FF0000"
    android:textStyle="bold"
    android:typeface="normal" <!-- 字型 -->
    android:padding="5dp"
    android:background="#CECECE"
    android:gravity="center"

    <!-- drawable樣式在文字的上/下/左/右邊 -->
    android:drawableBottom="@drawable/ic_android_black_24dp"
    
android:drawableLeft="@drawable/ic_android_black_24dp"
    android:drawableTop="@drawable/ic_android_black_24dp"
    android:drawableRight="@drawable/ic_android_black_24dp"
    android:drawablePadding="10dp" />
```
  
 ``` java=
//MainActivity內
TextView text1;
text1 = findViewById(R.id.textview01);

text1.setText("example text"); //文字內容
text1.setTextSize(16); //文字大小
text1.setTextColor(Color.WHITE); //文字顏色
text1.setBackgroundColor(Color.BLACK); //背景顏色
text1.setTypeface(Typeface.SANS_SERIF,Typeface.BOLD); //文字樣式

text1.setPadding(20,20,10,10); //文字和文字框的間距
text1.setWidth(300); //元件寬度
text1.setHeight(100); //元件高度
  ``` 
  
  
### <br>Button 按鈕
提供一個能讓使用者點擊的按鈕。

#### <font color=#1936C9>**宣告**</font>
``` java=
Button btn;
  ```

#### <font color=#1936C9>**常用的功能**</font> 
``` xml=
 <Button
    android:id="@+id/Button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
        
    android:text="button"
    style="@style/CustomButton" <!-- 可以藉由themes.xml來自定義button -->
         
    android:drawableBottom="@drawable/ic_android_black_24dp"
    android:drawableLeft="@drawable/ic_android_black_24dp"
    android:drawableTop="@drawable/ic_android_black_24dp"
    android:drawableRight="@drawable/ic_android_black_24dp"/>
```

``` xml=
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.P2" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="colorPrimary">#B3B3B3</item>
    </style>

    <style name="Theme.P2" parent="Base.Theme.P2" />
    
    <style name="CustomButton" parent="Widget.MaterialComponents.Button">
        <item name="backgroundTint">#FFB7B7</item>
        <item name="cornerRadius">10dp</item>
        <item name="android:textColor">#FF4C4C</item>
        <item name="android:typeface">sans</item>
        <item name="textAllCaps">false</item>
    </style>
</resources>
```


  ``` java=
//MainActivity內
Button;
btn = findViewById(R.id.Button01);

btn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            //點擊後的事件
        }
});
  ```
  
 ### <br>EditText 輸入
提供使用者輸入框輸入內容，再藉由EditText內部工具提出使用者輸入內容等，以達到程式與使用者的交互。

#### <font color=#1936C9>**宣告**</font>
``` java=
EditText et;
  ```

#### <font color=#1936C9>**常用的功能**</font>

``` java=
//layout的EditText內
android:textColor="#878787"  //文字顏色
android:textSize="18dp"      //文字大小
android:inputType="text"     //輸入文字種類(text為文字、number為數字)
android:hint="input"         //提示文字
android:textStyle="bold"     //粗體
android:background="@null"   //隱藏輸入框底線
  ```
  
  ![截圖 2024-12-12 中午12.49.39](https://hackmd.io/_uploads/B1-_iJd4Jx.png)
  
  ``` java=
//MainActivity內
EditText et;
et = findViewById(R.id.EditText01);

String s = text.getText().toString(); //取得輸入的內容
//還有監聽沒用 :P
  ```
  

  <br>
  
  [TextInputLayout](https://ithelp.ithome.com.tw/m/articles/10291617)
  
  [EditText](https://ithelp.ithome.com.tw/m/articles/10261033)