iT邦幫忙

2022 iThome 鐵人賽

DAY 2
1
Mobile Development

Android studio 30天新手筆記系列 第 2

Day2-Android新手筆記-Button元件基礎教學

  • 分享至 

  • xImage
  •  

Button是Android開發經常被使用的元件,應用場景十分廣泛,無論是跳頁、收尋還是確認等功能都可透過Button元件作為觸發媒介,提供使用者與應用程式之間互動。

Button繼承於TextView,TextView提供了大量的屬性,Button由於是TextView的子類,所以TextView中的屬性皆可在Button上使用。

繼承關係圖
https://ithelp.ithome.com.tw/upload/images/20220713/20150372AOjMHzc9R4.png


元件實作

UI設計

Button靜態建立的常見方法有兩種:

第一種是Design模式下由UI設計頁面左方的Palette選取Button元件直接拉到版面上。如下圖所示:
https://ithelp.ithome.com.tw/upload/images/20220713/20150372q2At5cunpJ.png
第二種是Code模式下由XML建立Button元件。如下所示:

<Button
        android:id="@+id/button3"
        android:layout_width="206dp"
        android:layout_height="88dp"
        android:text="Button"
        tools:layout_editor_absoluteX="104dp"
        tools:layout_editor_absoluteY="259dp" />

Button動態建立方法:

        LinearLayout linearLayout =findViewById(R.id.linearLayout);
        Button button = new Button(this);

        //設置Button屬性
        button.setText("這是按鈕");

        //參數1為寬度的設置,參數2為高度的設置
        LinearLayout.LayoutParams layoutParams = new
            LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.WRAP_CONTENT);
        button.setLayoutParams(layoutParams);

        //調用addView(),將button加入linearLayout布局中
        linearLayout.addView(button);

動態建立成果:
https://ithelp.ithome.com.tw/upload/images/20220713/20150372D0JcZMqKmW.png


Button點擊事件

簡易設定Button點擊事件的主要方法有兩種:
 1.UI介面綁定OnClick屬性
 2.Button的OnClickListener監聽事件

第一種「UI介面綁定OnClick屬性」,先於Activity裡建立方法,後於UI介面將方法與Button元件綁定,流程如下:

先於Activity裡建立方法buttonOnClickTest():

    public class MainActivity extends AppCompatActivity {
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
        }
        public void buttonOnClickTest(View view){
            //加入點擊要觸發的事件
        }
    }

後於Button元件找到OnClick與方法buttonOnClickTest()綁定:

可於右側Attributes中尋找OnClick屬性
https://ithelp.ithome.com.tw/upload/images/20220713/20150372tXJDHolbI9.png

也可於Code模式,添加 android:onClick="buttonOnClickTest"

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:onClick="buttonOnClickTest"
        android:text="Button" />

第二種「Button的OnClickListener監聽事件」,於Activity裡建立監聽事件,如下:

    public class MainActivity extends AppCompatActivity {
        Button button;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            
            //將Button元件與button綁定
            button = findViewById(R.id.button);
            
            //button的點擊監聽事件
            button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    //加入點擊要觸發的事件
                }
            });
        }
    }

下一篇將介紹Button的樣式修改


上一篇
Day1-Android新手筆記-前言
下一篇
Day3-Android新手筆記-Button客製化樣式教學
系列文
Android studio 30天新手筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言