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>

运行结果：