Android快速入門之常用控制元件的使用-有解無憂

Android中提供了大量的UI組件，合理的使用這些組件可以輕松的寫出不錯的界面，這些是Android學習的基礎，

TextView與EditText

TextView是界面中最常見的控制元件，也是很多其他控制元件的父類，例如Button、EditText等，它是一種用于顯示字串的控制元件，同時它不能被編輯，

TextView：

重要屬性:

android:layout_width 控制元件寬度，可取值fill_parent、match_parent、wrap_content，或者具體的像素值（dp）
android:layout_height 控制元件的高度，可取值fill_parent、match_parent、wrap_content，或者具體的像素值（dp）
android:lines 設定文本行數，設定2行就顯示2行，即使第二行沒有資料
android:text 設定顯示文本的資訊，推薦使用@string/xx的方式
android:textSize 設定字體大小，推薦單位sp
android:gravity 設定文本顯示位置，如設定center，文本將居中顯示
android:drawableLeft 在text的左側輸出一個drawable圖片
android:drawableRight 在text的右側輸出一個drawable圖片
android:autoLink 超鏈接:屬性值（ all: 所有連接有效，如web、phone、email等）

測驗代碼：

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:text="1、我是一個普通的TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:id="@+id/tv_main_1"/>

    <TextView
        android:text="2、我是一個超鏈接TextView,電話：18032580286,\n網頁：http://www.baidu.com"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:id="@+id/tv_main_2"
        android:autoLink="all"/>

    <TextView
        android:text="3、我是一個跑馬燈效果的跑馬燈效果的跑馬燈效果的跑馬燈效果的TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:id="@+id/tv_main_3"
        android:marqueeRepeatLimit="marquee_forever"
        android:ellipsize="marquee"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:singleLine="true"/>


</LinearLayout>

運行結果：
在這里插入圖片描述

EditText

EditText是一個具有編輯功能的TextView，是用來輸入和編輯字串的控制元件，它具有TextView的屬性，并且還具有一些自己的屬性，比如：

android:hint Text為空時顯示的文本提示資訊，可通過textColorHint設定資訊顏色
android:inputType 設定文本型別，用于幫助輸入法顯示合適的鍵盤型別

案例：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="請輸入用戶資訊："
        android:textSize="30dp">
    </TextView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:textSize="30dp"
            android:text="用戶名："/>
        <EditText
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:textSize="20dp"
            android:hint="請輸入用戶名" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:textSize="30dp"
            android:text="密碼："/>
        <EditText
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="3"
            android:textSize="20dp"
            android:hint="請輸入用戶名" />
    </LinearLayout>
</LinearLayout>

運行結果：
在這里插入圖片描述

TextView主要用來顯示字串資訊，可用setText()方法更改內容，EditText用來讓用戶輸入內容的控制元件

Button

Button繼承TextView，它的功能就是提供按鈕，這個按鈕可以供用戶點擊，當用戶對按鈕進行操作時，會觸發相應的事件，如點擊、觸摸等，

相關屬性：

android:clickable 取值true或者false，設定是否允許點擊
android:background 通過資源檔案設定背景顏色
android:onClick 設定按鈕的監聽器，點擊按鈕呼叫對應的方法，方法格式 public void XXXX(View v)
使用drawableXXX屬性，可以將圖片與按鈕結合，使用paddingXXX即可調整其位置

案例代碼：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="30dp"
    android:orientation="vertical">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:background="@color/colorAccent"
        android:drawableLeft="@drawable/ic_launcher_foreground"/>
    
</LinearLayout>

ImageView與ImageButton

ImageView：可以加載各種資源的圖片，用于在頁面中顯示圖片(圖片預覽)，
常用屬性：

android:src 設定View的drawble（可以是顏色，也可以是圖片、但是需要指定大小）
android:scaleType 設定圖片的填充方式，matrix、fitXY、firStart、fitCenter、fitEnd、center…

ImageButton：圖片按鈕，繼承自ImageView，可以在其中顯示一個圖示給用戶看，需要注意，這里Text是無效的，其他功能與Button一樣，

<ImageButton
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:background="@drawable/img_btn_status"
     android:id="@+id/imageButton" />

ImageButton的background屬性指定的并不是一張圖片，而是位于drawable檔案夾下的一個名為img_btn_status.xml的選擇其檔案：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="false" android:drawable="@mipmap/icon_home" />
    <item android:state_focused="true" android:drawable="@mipmap/icon_home" />
    <item android:state_pressed="true" android:drawable="@mipmap/icon_home_light" />

</selector>

執行代碼時，當我們點擊圖片時，圖片就會改變，

測驗代碼：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="30dp"
    android:orientation="vertical">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:background="@color/colorAccent"
        android:drawableLeft="@drawable/ic_launcher_foreground"/>

    <ImageView
        android:id="@+id/image1"
        android:layout_width="fill_parent"
        android:layout_height="300px"
        android:layout_marginTop="30dp"
        android:scaleType="fitCenter"
        android:src="@mipmap/ic_launcher" />
    <ImageView
        android:id="@+id/image2"
        android:layout_width="fill_parent"
        android:layout_height="300px"
        android:scaleType="matrix"
        android:src="@mipmap/ic_launcher" />
    <ImageView
        android:id="@+id/image3"
        android:layout_width="fill_parent"
        android:layout_height="300px"
        android:scaleType="fitXY"
        android:src="@mipmap/ic_launcher" />
        
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/img_btn_status"
            android:id="@+id/imageButton" />

    </LinearLayout>
</LinearLayout>

運行結果：
在這里插入圖片描述

RadioButton、CheckBox和ToggleButton

RadioButton單選按鈕，配合RadioGroup使用，表示一組單選按鈕，可以為RadioGroup設定OnCheckedChangeListener事件監聽，用來監聽單選按鈕的變化

CheckBox多選按鈕，可以設定OnCheckedChangeListener事件監聽

相關代碼：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <TextView
            android:text="你的性別是？"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="25sp"
            android:id="@+id/tv_radio_title" />

        <RadioGroup
            android:id="@+id/radio_sex"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <RadioButton
                android:text="男"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/radioButton_m"
                android:layout_weight="1" />

            <RadioButton
                android:text="女"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/radioButton_f"
                android:layout_weight="1" />

            <RadioButton
                android:text="其他"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/radioButton_o"
                android:layout_weight="1" />
        </RadioGroup>

        <TextView
            android:text="TextView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textSize="25sp"
            android:id="@+id/tv_radio_result" />
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">


        <TextView
            android:text="下列課程中，你喜歡的有哪些？"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="25sp"
            android:id="@+id/tv_cbx_title" />

        <CheckBox
            android:text="Android應用開發"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/cbx_a" />

        <CheckBox
            android:text="軟體測驗基礎"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/cbx_b" />

        <CheckBox
            android:text="面向物件分析與設計"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/cbx_c" />

        <CheckBox
            android:text="Java程式設計"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/cbx_d" />

        <Button
            android:text="提交"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btn_submit" />

        <TextView
            android:text="TextView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:id="@+id/tv_cbx_result" />

    </LinearLayout>

</LinearLayout>

主界面代碼：

public class BasicViewActivity extends Activity{

    private RadioGroup sexChoice;
    private TextView sexResult;

    private CheckBox cbxA,cbxB,cbxC,cbxD;
    private TextView answerResult;
    private Button btnSubmit;
    private List<CheckBox> cbxList = new ArrayList<CheckBox>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.checkbox_radio_layout);
        //獲取頁面上的控制元件
        sexChoice = (RadioGroup) findViewById(R.id.radio_sex);
        sexResult = (TextView) findViewById(R.id.tv_radio_result);

        sexChoice.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                RadioButton choice = (RadioButton) findViewById(sexChoice.getCheckedRadioButtonId());
                sexResult.setText("你選擇的性別是"+choice.getText().toString());
            }
        });

        cbxA = (CheckBox) findViewById(R.id.cbx_a);
        cbxB = (CheckBox) findViewById(R.id.cbx_b);
        cbxC = (CheckBox) findViewById(R.id.cbx_c);
        cbxD = (CheckBox) findViewById(R.id.cbx_d);
        btnSubmit = (Button) findViewById(R.id.btn_submit);
        answerResult = (TextView) findViewById(R.id.tv_cbx_result);

        cbxList.add(cbxA);
        cbxList.add(cbxB);
        cbxList.add(cbxC);
        cbxList.add(cbxD);

        for (final CheckBox cbx:cbxList) {
            cbx.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
                @Override
                public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                    if (isChecked){
                        Toast.makeText(BasicViewActivity.this,cbx.getText().toString()+"已選中",Toast.LENGTH_SHORT).show();
                    }else {
                        Toast.makeText(BasicViewActivity.this,cbx.getText().toString()+"已取消",Toast.LENGTH_SHORT).show();
                    }
                }
            });
        }

        btnSubmit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                StringBuffer sb = new StringBuffer();
                //遍歷集合中的checkBox,判斷是否選擇，獲取選中的文本
                for (CheckBox cbx : cbxList) {
                    if (cbx.isChecked()){
                        sb.append(cbx.getText().toString() + " ");
                    }
                }
                if (sb!=null && "".equals(sb.toString())){
                    Toast.makeText(BasicViewActivity.this, "請至少選擇一個", Toast.LENGTH_SHORT).show();
                }else{
                    answerResult.setText("你的選擇是 "+sb.toString());
                }

            }
        });

    }
}

運行結果：
在這里插入圖片描述

ToggleButton 狀態開關按鈕，常用于表示開-關場景中，可以設定setOnClickListener事件監聽

測驗代碼：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/close"
        android:layout_marginTop="71dp"
        android:id="@+id/img_light_on"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <ToggleButton
        android:text="ToggleButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/img_light_on"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="63dp"
        android:id="@+id/toggleButton" />
</RelativeLayout>

主程式代碼：

public class ToggleButtonActivity extends Activity {

    private ImageView imageView;
    private ToggleButton toggleButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.toggle_button_layout);

        imageView = (ImageView) findViewById(R.id.img_light_on);
        toggleButton = (ToggleButton) findViewById(R.id.toggleButton);
        toggleButton.setTextOn("關燈");
        toggleButton.setTextOff("開燈");
        toggleButton.setChecked(false);

        toggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked){
                    imageView.setImageResource(R.mipmap.open);
                }else {
                    imageView.setImageResource(R.mipmap.close);
                }
            }
        });

    }
}

運行結果：
在這里插入圖片描述

ProgressBar、SeekBar和RatingBar

ProgressBar進度條，默認為圓形進度條（大、中、小）

可以通過設定style屬性更改為水平進度條
style="@android:style/Widget.ProgressBar.Horizontal“
style=“?android:attr/progressBarStyleHorizontal“(等價)
改變進度條的外觀
android:progressDrawable="@drawable/my_bar"
android:indeterminateDrawable="@drawable/progress_image"

SeekBar拖動條，是ProgressBar的擴展，在其基礎上增加了一個可拖動的thumb，用戶可以觸摸thumb并向左或向右拖動，也可以使用方向鍵設定當前的進度等級，max表示拖動條的最大進度，progress表示拖動條的當前進度，可以設定OnSeekBarChangeListener，監聽拖動事件，

RatingBar星級評分條，以五角星來展示進度值，常用于一些游戲及應用的等級評分中，

屬性：
android:numStars表示總級別，總分，星星個數
android:rating表示當前級別，分數，星星個數
android:stepSize表示星星每次變化的步長
通過設定OnRatingBarChangeListener，監聽評分變化

測驗代碼：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <ProgressBar
        android:id="@+id/progressBar1"
        android:layout_marginTop="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        />
    <ProgressBar
        style="?android:attr/progressBarStyleLarge"
        android:id="@+id/progressBar2"
        android:layout_marginTop="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        />

    <SeekBar
        android:id="@+id/seekBar1"
        android:layout_marginTop="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="50"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        />

    <RatingBar
        android:id="@+id/ratingBar"
        android:layout_marginTop="30dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:rating="3"
        />


</LinearLayout>

運行結果：
在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/236125.html

標籤：其他

上一篇：android簡單幾句代碼就能使顏色選擇器改變組件顏色，竟然輕松就能實作換膚功能？

下一篇：Android音樂播放器開發(6)—歌曲播放串列