云社区 博客 博客详情

Android快速入门之常用控件的使用

CSDN 发表于 2020-12-18 00:43:24 2020-12-18
0
0

【摘要】 Android中提供了大量的UI组件,合理的使用这些组件可以轻松的写出不错的界面,这些是Android学习的基础。 TextView与EditText TextView是界面中最常见的控件,也是很多其他控件的父类,例如Button、EditText等。它是一种用于显示字符串的控件,同时它不能被编辑。 TextView: 重要属性: android:layout...

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等)

测试代码:


<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>

   
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

运行结果:
在这里插入图片描述

EditText

EditText是一个具有编辑功能的TextView,是用来输入和编辑字符串的控件,它具有TextView的属性,并且还具有一些自己的属性,比如:

  • android:hint Text为空时显示的文本提示信息,可通过textColorHint设置信息颜色
  • android:inputType 设置文本类型,用于帮助输入法显示合适的键盘类型

案例:


<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>

      
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

运行结果:
在这里插入图片描述

TextView主要用来显示字符串信息,可用setText()方法更改内容,EditText用来让用户输入内容的控件

Button

Button继承TextView,它的功能就是提供按钮,这个按钮可以供用户点击,当用户对按钮进行操作时,会触发相应的事件,如点击、触摸等。

相关属性:

  • android:clickable 取值true或者false,设置是否允许点击
  • android:background 通过资源文件设置背景颜色
  • android:onClick 设置按钮的监听器,点击按钮调用对应的方法,方法格式 public void XXXX(View v)
  • 使用drawableXXX属性,可以将图片与按钮结合,使用paddingXXX即可调整其位置

案例代码:


<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>

   
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

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" />

  
 
  • 1
  • 2
  • 3
  • 4
  • 5

ImageButton的background属性指定的并不是一张图片,而是位于drawable文件夹下的一个名为img_btn_status.xml的选择其文件:


<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>

   
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 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>

    
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48

运行结果:
在这里插入图片描述

RadioButton、CheckBox和ToggleButton

RadioButton单选按钮,配合RadioGroup使用,表示一组单选按钮,可以为RadioGroup设置OnCheckedChangeListener事件监听,用来监听单选按钮的变化

CheckBox多选按钮,可以设置OnCheckedChangeListener事件监听

相关代码:


<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>

      
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110

主界面代码:

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()); } } }); }
}

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72

运行结果:
在这里插入图片描述

ToggleButton 状态开关按钮,常用于表示开-关场景中,可以设置setOnClickListener事件监听

测试代码:


<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>

   
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

主程序代码:

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); } } }); }
}

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

运行结果:
在这里插入图片描述

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,监听评分变化

测试代码:


<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>

   
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

运行结果:
在这里插入图片描述

文章来源: blog.csdn.net,作者:龙源IT,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/Lzy410992/article/details/111213606

登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

上一篇:hive数据倾斜

下一篇:技术文档:PXE自动化部署装机

评论 (0)


登录后可评论,请 登录注册

评论