[Android(安卓)Studio]掌握Android(安卓)Studio的五种常见控件和五种常见布局
这边文章是从我的自己撰写掘金博文搬过来的: Android Studio 的五种常见控件和五种常见布局,同时通过这篇文章想比较一下CSDN和掘金网站的分享博文的优缺点以及效果感觉如何(希望大佬们给点建议)…如果文章有什么不足之处,也希望大家多多指点。
一、View和ViewGroup
Android体系中UI的设计采用视图层次的结构。
视图层次: 由View和ViewGroup组成。在创建UI时,开发人员不会真正去创建View或者ViewGroup,而是直接使用Android所提供的具有不同功能的控件,因此通常是看不到View或ViewGroup。
View是Android系统中最基本的组件,同时也是Android所有可视组件的父类,它完成了构建按钮、文本框、时钟等诸多控件的基本功能。此外View还有一个非常重要的子类ViewGroup。
View与ViewGroup的区别:ViewGroup能够容纳多个View作为ViewGroup的子组件,同时View也可以包含ViewGroup作为其子组件,所以View和ViewGroup是相互包容、“你中有我,我中有你”的关系。
wrap_content: 是layout_width和layout_height的属性值之一,表示和自身内容一样的长度。(由内容决定)
match_parent: 是layout_width和layout_height的属性值之一,表示和父组件一样的长度。
fill_parent: 以填充布局单元内尽可能多的空间。
margin属性: 外边距,指当前视图与其他视图间的距离,可以一次性指定上下左右四个外边距值,也可以一次性指定上下左右采用同一个边距值。
android:layout_margin="10dp"android:layout_marginTop="10dp"android:layout_marginBottom="10dp"android:layout_marginLeft="10dp"android:layout_marginRight="10dp"
padding属性: 内边距,指当前视图边距与其内容间的距离。赋值跟margin属性同类型。
android:layout_padding="10dp"android:layout_paddingTop="10dp"android:layout_paddingBottom="10dp"android:layout_paddingLeft="10dp"android:layout_paddingRight="10dp"
visible属性:
android:visiblity="visible"android:visiblity="invisible"android:visiblity="gone"
二、Android的五种常见控件
2.1 文本控件
在Android的体系结构中,TextView和EditView之间是父类和子类的关系。即EditText继承于TextView,因此EditText几乎具备TextView的所有功能,两者之间最大的不同在于:EditText能够支持用户输入,而TextView不能。
2.1.1 TextView
TextView是用于显示文字(字符串)的控件,可在代码中通过设置属性改变文字的大小、颜色、样式等功能。
注意:
颜色值组成(三原色)有三种表示方法1.#RGB:3位16进制整数,如:#f00
2.#RRGGBB:#00ff00
3.#AARRGGBB:#ff0000ff
2.1.2 EditText
EditText是可以进行编辑操作(用于用户输入和编辑文字或字符的控件)的文本框,将用户信息传递给Android程序。还可以为EditText控件设置监听器,用来测试用户输入的内容是否合法。
2.2 按钮控件
2.2.1 Button
Android的体系结构中Button继承于TextView,而ImageButton继承于ImageView。虽然这两个控件继承于不同的控件,但是Button和ImageButton都是用于完成用户的单击按钮时的onClick事件。
Button是按钮,是用于响应用户的一系列点击事件,使程序更加流畅和完整。
点击事件(监听事件)实现方式(三种):
☞ 实现方式一:
先在layout文件中指定onClick属性:Android:onClick=“click”。然后在Activity中实现这个click方法
public void click (View v){ /// 处理按钮监听事件}
☞ 实现方式二:在Activity中添加匿名内部类
Button button = findViewById(R.id.button);button.setOnClickListener(new View.OnClickListener(){ @Override public void OnClick(View v){ /// 处理按钮监听事件 Log.i("匿名内部类方式","button is clicked"); }});
☞ 实现方式三:
public class MainActivity implements View.OnClickListener{ //实现接口抽象方法 public void onClick(View v){ //处理按钮监听事件 }}//在Activity中注册回调接口button.setOnClickListener(this);
2.2.2 RadioButton
RadioButton为单选按钮,它需要与RadioGroup配合使用,提供两个或多个互斥的选项集。(如男、女)
RadioGroup是单选组合框,可容纳多个RadioButton,并把它们组合在一起,实现单选状态。
RadioButton按钮的实现步骤:
1.先在UI布局文件activity——main.xml中的LinearLayout标签中添加如下代码:
<RadioGroup android:id="@+id/radiogroup" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> <RadioButton android:id="@+id/radiobutton1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:text="Male"/> <RadioButton android:id="@+id/radiobutton2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Female"/> </RadioGroup>
然后在MainActivity.java中添加onCreate函数中添加以下代码:
RadioGroup radiogroup = (RadioGroup)findViewById(R.id.radiogroup);radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener(){ public void onCheckedChanged(RadioGroup group,int checkedId){ switch(checkedId){ case R,id.maleradio:editText.setText("男"); break; } case R,id.femaleradio:editText.setText("女"); break; } }}///另外Switch也可以用以下方法表示if(checked==R.id.radiobutton1){ textView.setText("男");}else{ case R,id.maleradio:editText.setText("女"); break; } }
2.2.3 CheckBox
CheckBox即多选按钮,允许用户在一组选项中进行单选和多选。用法与RadioButton类似。
CheckBox按钮的实现步骤:
1.先在UI布局文件activity——main.xml中的LinearLayout标签中添加代码(与radioBox的相似)
2.
注意:响应事件从何而来?(两个来源)
1.由系统提供的,具有特定函数名的响应函数(在OnCreate中进行定义和实现)
2.自定义响应函数名的方法来响应用户事件(放在Activity中作为一个成员函数来使用)
public void CheckboxClicked(View view){ boolean checked = ((Checked)view).isChecked(); case R.id.meat: if(checked){ editText.setText("肉类"); }else{ ... } break; ...}
2.3 图片控件
2.3.1 ImageView
ImageView是视图控件,它继承于View,其功能是在屏幕中显示图像,ImageView类可以从各种来源加载图像(如资源库或网络),并提供缩放、裁剪、着色(渲染)等功能。
///在UI布局文件activity——main.xml中添加<ImageView android:id="@id/imageView1"android:layout_width="match_parent"android:layout_height="wrap_content"tools:srcCompat="@tolls:sample/backgrounds/scenic[0]"///在MainActivity.java中添加onCreate函数中定义ImageView对象ImageView imageView;imageView.setImageResource(R.drawable.ic_launcher_foreground);
2.4 列表控件
2.4.1 ListView
普通列表–ListView在程序中使用频率相对比较高,很多地方都会用到这个控件,其中的内容会以一个列表的形式显示出来,但是在使用ListView时需要一个适配器(应用自带适配器、z自定义适配器)(Adapter)类显示需要的内容。当显示的内容复杂的时候系统的适配器不能满足要求了,这时可以自定义适配器,写一个类继承BaseAdapter。
2.4.2 Spinner
下拉列表–Spinner 控件也是一种列表类型的控件,可以极大地提高用户的体验性。当需要用户选择时,可以提供一个下拉列表将所有可选的项列出来,供用户选择。
2.4.3 ExpandableListView
多级列表ExpandableListView控件提供的是一个多级列表(一般是两级)。
如何实现这个两级列表呢?既然ExpandableListView采用列表的形式,它也是应该有一个适配器,但是它的适配器不是继承BaseAdapter,而是继承它独有的适配器BaseExpandableListView,同时也需要实现其中的几个方法:
BaseExpandableListView中的方法:
方法名称 | 参数 | 说明 |
---|---|---|
getGroudId | int groundPosition | 获取在给定的位置编号 |
getChildId | int groundPosition,int childPosition | 获取给定组的孩子的ID |
getGroudCount | 获取第一级列表的列数 | |
getChildrenCount | int groupPosition | 获取指定组中孩子的数量 |
getGroup | int groupPosition | 获取定组相关的数据 |
getGroupView | int groupPositin,boolean isExpanded,View convertView,ViewGroup parent | 获取一个显示的视图给定组 |
getChild | int groupPosition,int childPosition | 获取与孩子在给定的组相关的数据 |
getChildView | int groupPosition,boolean isLastChild,View convertView,ViewGroup parent | 获取一个视图显示在给定的组的孩子的数据 |
2.5 时间日期控件
2.5.1 AnalogClock(模拟时钟的显示方式)和DigitalClock
这两个控件都是通过获取系统时间展示给用户。AnalogClock是以模拟时钟的形式展示,DigitalClock是以数字时钟 的形式向用户展示。
2.5.2 DatePicker和TimePiker
用户可以通过这两个控件来设置日期和时间,DatePicker(会在Android 4.0中自动产生一个日历的功能)用于选择日期,TimePicker用于选择时间。
三、五种常用的布局
在Android程序中界面是通过布局文件设定的,在每个应用程序创建会默认包含一个主界面布局,该布局位于res/layout目录中。实际开发中每个应用程序都包含多个界面,而程序默认提供的一个主界面布局无法满足需求,因此经常会在程序中添加多个布局。
在Android中有两种方式创建布局:一种是在项目中的layout文件夹中写XML,将各个布局写在XML中;一种是在程序中通过代码去编写,这种方式一般用得比较少。
四种布局常用的单位:
1.px: 像素,即在屏幕中可以显示最小元素单位。
2.pt: 磅数,一磅等于1/72英寸,一般pt作为字体的单位来显示
3.dp(与密度无关的像素,dp与dip相同): 基于屏幕密度的抽象单位。不同设备由不同的显示效果,更具分辨率的不同来去顶控件的尺寸。
4.sp: 可伸缩像素,采用与dp相同的设计理念,推荐设置文字大小时使用。
3.1 线性布局(LinearLayout)
线性布局就是将一些控件排放在一条线上,但是有水平方向和垂直方向两种。水平和垂直方向的控制由属性android:orientation来控制,这个属性有两个值:水平(Vertical)和垂直(Horizaontal),在线性布局中还有一些比较常用的属性,如:android:gravity、android:weight(控件的权值)等。
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:background="#ffffff" > <LinearLayout android:id="@+id/LinearLayout01" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:orientation="horizontal" > <Button android:layout_width="wrap_content" android:layout_height="fill_parent" android:gravity="center_horizontal" android:text="按钮1" android:layout_weight="1.0" /> <Button android:layout_width="wrap_content" android:layout_height="fill_parent" android:gravity="center_horizontal" android:text="按钮2" android:layout_weight="1.0" /> <Button android:layout_width="wrap_content" android:layout_height="fill_parent" android:gravity="center_horizontal" android:text="按钮3" android:layout_weight="1.0" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical"> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="按钮4" android:layout_weight="1.0" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="按钮5" android:layout_weight="1.0" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="按钮6" android:layout_weight="1.0" /> </LinearLayout></LinearLayout>
运行效果效果如下:
3.2 相对布局(RelativelLayout)
线对布局是指按照控件间的相对位置进行布局,也就是说我们可以选一个控件作为参照,其他的控件可以在它的上边、下边、左边及右边等。
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:background="#ffffff" > <TextView android:id="@+id/textView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="AA" android:textColor="#00FF00" android:textSize="22sp" android:layout_marginLeft="20px"/> <TextView android:id="@+id/textRight" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/textView01" android:text="BB" android:textColor="#FF0000" android:textSize="22sp" android:layout_marginLeft="20px"/> <TextView android:id="@+id/text02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/textView01" android:text="CC" android:textColor="#00FFFF" android:textSize="22sp" android:layout_marginLeft="20px"/> <TextView android:id="@+id/textView02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/textRight" android:layout_toRightOf="@id/text02" android:text="DD" android:textColor="#000000" android:textSize="22sp" android:layout_marginLeft="20dip"/></RelativeLayout>
运行结果如下:
BB相对于AA的左边,CC相对于AA的下边边,DD相对于BB的下边且相对于CC的右边
3.3 帧布局(FrameLayout)
帧布局是五大布局中最简单的一个布局,在这个布局中,整个界面被当成一块空白备用区域,所有的子元素都不能被指定放置的位置,它们统统放于这块区域的左上角,并且后面的子元素直接覆盖在前面的子元素上,将前面的子元素部分和全部遮挡。
<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/FrameLayout01" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ffffff" > <TextView android:id="@+id/TextView01" android:layout_width="1000px" android:layout_height="1000px" android:background="#ff0000" android:text="文本框1" android:textColor="#ffffff"/> <TextView android:id="@+id/TextView02" android:layout_width="750px" android:layout_height="750px" android:background="#0000ff" /> <TextView android:id="@+id/TextView03" android:layout_width="500px" android:layout_height="500px" android:background="#00ff00" /></FrameLayout>
运行结果如下:
3.4 表格布局(TableLayout)
表格布局适用于N行N列的布局格式。一个TableLayout由许多TableRow组成,一个TableRow就代表TableLayout中的一行。TableRow的数量决定表格的行数。而表格的列数是由包含最多控件的TableRow决定。
<?xml version="1.0" encoding="utf-8"?><TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ffffff" android:stretchColumns="1" > <TableRow> <TextView android:layout_column = "1" android:padding="3dip" android:textColor="#000000" android:text="open..."/> <TextView android:gravity="right" android:padding="3dip" android:textColor="#000000" android:text="Ctrl_o"/> </TableRow> <View android:layout_height="2dip" android:background="#FF909090"/> <TableRow> <TextView android:layout_column = "1" android:padding="3dip" android:textColor="#000000" android:text="Save..."/> <TextView android:gravity="right" android:padding="3dip" android:textColor="#000000" android:text="Ctrl_s"/> /> </TableRow> <View android:layout_height="2dip" android:background="#FF909090"/> <TableRow> <TextView android:layout_column = "1" android:padding="3dip" android:textColor="#000000" android:text="Save As..."/> <TextView android:gravity="right" android:padding="3dip" android:textColor="#000000" android:text="Ctrl_shift_s"/> </TableRow> <View android:layout_height="2dip" android:background="#FF909090"/> <TableRow> <TextView android:layout_column = "1" android:padding="3dip" android:textColor="#000000" android:text="X"/> <TextView android:gravity="right" android:padding="3dip" android:textColor="#000000" android:text="Import..."/> </TableRow></TableLayout>
运行结果如下:
3.5 绝对布局(AbsoluteLayout)
绝对布局是通过指定x、y坐标来控制每一个控件位置的。
四、参考资料
《从零开始学Android编程》
中国大学慕课网:Android应用开发
中国大学慕课网:Android基础应用开发
更多相关文章
- Android(安卓)实现按钮 跳转到某网页
- Android:dkplayer非全屏时候显示返回按钮
- android 布局适应不同分辨率
- 第3章 UI
- android 仿ios开关控件
- 【Android动态布局】之【ListView动态加载数据】
- Android属性动画(下),InterPolator、ViewPropertyAnimator和布局动
- Android(安卓)修改应用程序字体
- 初识Android的界面UI