界面编程与视图View

1.界面编程与视图View

1.1 用户界面        

Android提供了大量功能丰富的UI组件，只要按照一定的规律把这些UI组件组合起来，就可以开发出优秀的图形用户界面。Android应用的大部分组件都放在android.widget包及子包、android.view包及其子包当中。所有的UI组件都继承了View类， View类有一个很重要的子类ViewGroup类。开发者可以对View和ViewGroup进行组合，来完成应用程序界面设计。

1.1.1 View    

View是Android中图形界面的基类，提供了可视化界面的展示。Android的图形界面可分为三层：底层是Activity；Activity上面是Window；Window上面是View。     任何一个View对象都继承android.view.View类。它是一个存储有屏幕上特定的一个矩形布局和内容属性的数据结构。作为一个基类，View类为Widget服务， Widget则是一组用于绘制交互屏幕元素的完全实现子类。

1.1.2 ViewGroup         

View分为View和ViewGroup。View是基本的控件；

ViewGroup是布局控件。             

ViewGroup是一个android.view. ViewGroup类的对象。它的功能是装载和管理一组下层的View和其他的ViewGroup，作为一个基类， ViewGroup为Layout服务。

2、布局管理器

长度单位 dip: device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关，一般我们为了支持WVGA、HVGA和QVGA 推荐使用这个，不依赖像素。

px: pixels(像素). 不同设备显示效果相同，一般我们HVGA代表320x480像素，这个用的比较多。

 pt: point，是一个标准的长度单位，1pt＝1/72英寸，用于印刷业，非常简单易用；

sp: scaled pixels(放大像素). 主要用于字体显示best for textsize。

Android支持下列所有单位：

px（像素）：屏幕上的点。

 in（英寸）：长度单位。

mm（毫米）：长度单位。

pt（磅）：1/72英寸。

dp（与密度无关的像素）：一种基于屏幕密度的抽象单位。在每英寸160点的显示器上，1dp = 1px。

dip：与dp相同，多用于 android/ophone示例中。

sp（与刻度无关的像素）：与dp类似，但是可以根据用户的字体大小首选项进行缩放。

       Android最大的优点就是代码（java）和布局（xml）分离。        Layout就是负责管理控件在屏幕的位置的类，下面是android SDK已经内置的简单几种布局模型：

1、LinearLayout（线性布局）

2、RelativeLayout（相对布局）

3、ConstraintLayout（约束布局）

4、TableLayout（表格布局）

5、FrameLayout（框架布局）

6、AbsoluteLayout(绝对布局)

2.1 LinearLayout 线性布局          

线性布局由LinearLayout类来代表，将容器里的组件一个挨一个的进行排列起来。 Android 的线性布局不会换行，即当组件一个挨一个地排列到头之后，剩下的组件将不会被显示出来。LinearLayout在布局中纵向或者横向排列(系统自动生成的默认排版) 。

XML属性	方法	说明
android：orientation	setOrientation(int)	线性布局的朝向，纵向vertical或横向horizontal
android：gravity	setGravity(int)	设置布局管理器内的组件的对齐方式，支持：top/bottom/left/right/center_vertical/fill_vertical/center_horizontal/center等

2.1 线性布局 组件常用属性

 android:id  —— 为控件指定相应的ID

 android:text —— 指定控件当中显示的文字，需要注意的是，这里尽量  使用strings.xml文件当中的字符串  

android:gravity —— 指定控件的基本位置，比如说居中，居右等位置  

android:textSize —— 指定控件当中字体的大小

 android:background —— 指定该控件所使用的背景色,RGB命名法

 android:width —— 指定控件的宽度  

android:height —— 指定控件的高度

 android:padding —— 指定控件的内边距，也就是说控件当中的内容  

android:singleLine —— 如果设置为真的话，则将控件的内容在同一行 当中进行显示

android:layout_weight:占据相对屏幕的大小。

2.2 RelativeLayout相对布局        

相对布局（RelativeLayout），在容器内部的子元素们可以使用彼此之间的相对位置或者和容器间的相对位置来进行定位。             注意，不能在RelativeLayout容器本身和他的子元素之间产生循环依赖，比如说，不能将RelativeLayout的高设置成为WRAP_CONTENT的时候将子元素的高设置成为 ALIGN_PARENT_BOTTOM。

XML属性	相关方法	说明
android：ignoreGravity	setIgnoreGravity(int)	设置该布局容器内哪个子元素会不受Gravity的影响.
android：gravity	setGravity(int)	设置该布局容器内部各子组件的对齐方式

 2.2.1 相对布局属性

android:layout_alignParentBottom 如果该值为true，则将该控件的底部和父控件的底部对齐 android:layout_alignParentLeft 如果该值为true，则将该控件的左 边与父控件的左边对齐 android:layout_alignParentRight 如果该值为true，则将该控件的 右边与父控件的右边对齐

android:layout_alignParentTop 如果该值为true，则将控件的顶部 与父控件的顶部对齐 android:layout_centerHorizontal 如果值为真，该控件将被至于水 平方向的中央 android:layout_centerInParent 如果值为真，该控件将被至于父控件水平方向和垂直方向的中央 android:layout_centerVertical 如果值为真，该控件将被至于垂直方向的中央

2.2.1 相对布局属性

android:layout_above 将该控件的底部至于给定ID的控件之上

android:layout_below 将该控件的顶部至于给定ID的控件之下

android:layout_toLeftOf 将该控件位于给定ID的控件的左边

android:layout_toRightOf 将该控件位于给定ID的控件的右边

android:layout_alignBottom 将该控件的底部边缘与给定ID控件的底部边 缘对齐

android:layout_alignLeft 将该控件的左边缘与给定ID控件的左边缘对齐

android:layout_alignRight 将该控件的右边缘与给定ID控件的右边缘对齐

android:layout_alignTop 将给定控件的顶部边缘与给定ID控件的顶部对 齐

ConstraintLayout（约束布局）

ConstraintLayout（约束布局）在 Android Studio 中也作为了默认布局，能够减少布局的层级并改善布局性能。 ConstraintLayout 能够灵活地定位和调整View的位置和大小， 组件通过与父组件或其他组件约束关系来确定位置及大小，与相对布局类似。与不同的是，ConstraintLayout非常适合使用可视化的方式来编写界面。

为ConstraintLayout布局中组件增加约束关系。每个控件的约束都分为垂直和水平两类，一共可以在四个方向上给控件添加约束 。图中Button的上下左右各有一个圆圈，这圆圈就是用来添加约束的，我们可以将约束添加到ConstraintLayout，也可以将约束添加到另一个控件。

自动添加约束 自动添加约束的方式主要有两种，一种叫Autoconnect，一种叫Inference。 使用Autoconnect，首先需要在工具栏中将这个功能启用，默认情况下Autoconnect是不启用的。

 

2.3 TableLayout 表格布局

TableLayout是比较常用的布局，采用行和列的形式来管理UI组件。并不需要明确声明行和列，而是通过添加TableRow、其他组件来控制表格的行数和列数。 每次向TableLayout中添加TableRow，该TableRow 就是一个表格行，TableRow也是容器，也可以向其中添 组件，每添加一个子组件该表格就增加一列。 如果直接向TableLayout中添加组件，那么该组件直接占一行。 在表格布局中，列的宽度由该列中最宽的那个单元格决定。整个表格布局的宽度取决于父容器的宽度。

2.3.2 表格布局 组件常用属性    

android:collapseColumns:隐藏指定的列,多个列号用逗号隔开。  

  android:shrinkColumns:收缩指定的列以适合屏幕，不会挤出屏幕

   android:stretchColumns:尽量把指定的列填充空白部分  

 android:layout_column:控件在TableRow中所处的列  

 android:layout_span:该控件所跨越的列数

2.4 FrameLayout框架布局 框架布局容器为每一个加入其中的组件创建一个空白的区域（称 为一帧），所有每个子组件占据一帧，这些帧都会根据gravity自 动对齐。

XML属性	相关方法	说明
android:foregroud	setForegroud(Drawable)	设置帧布局的前景图像
android：foregroudGravity	set ForegroudGravity(int)	定义绘制前景图像的gravity属性

2.5 AbsoluteLayout绝对布局        

绝对定位AbsoluteLayout，又可以叫做坐标布局，可以直接指定子元素的绝对位置，这种布局简单直接，直观性强，但是由于手机屏幕尺寸差别比较大，使用绝对定位的适应性会比较差。        

 使用绝对布局时，每个子组件都要可指定如下两个XML属性。

android:layout_x:指定该子组件的X坐标。

android:layout_y:指定该子组件的X坐标。

2.5.2 AbsoluteLayout绝对布局 指明子元素确切的屏幕(X,Y)坐标 (0,0)是左上角，下移或右移时，坐标值增加 允许元素重叠(但是不推荐) 注意： 一般建议不使用AbsoluteLayout 除非你有很好的理由来使用它 因为它相当严格并且在不同的设备显示中不能很好地工作

 

3 Android界面编程的三种方式： 完全在XML布局文件中进行界面设计 完全在Java程序代码中进行界面设计 通过XML布局文件和Java程序代码混合设计 

3.1完全在XML布局文件中进行界面设计        

 在Android应用的res/layout目录下定义一个文件名任意的XML布局文件之后，Java代码通过如下方法在Activity中显示该视图：       setContentView(R.layout.<资源文件名字>);        

当在布局文件中添加多个UI组件时，UI组件通过android:id属性设置，如：          android:id=“@+id/<组件ID>”          该属性属性值代表该组件的唯一标识。可通过以下方法在Java代码中访问该UI组件：         findViewById(R.id.<android.id属性值>)；  

3.2完全在Java程序代码中进行界面设计      Android允许开发者像开发Swing应用一样，完全在java代码中控制UI界面。

例2，代码如下：       

public class CodeView extends Activity {
	// 当第一次创建该Activity时回调该方法
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		// 创建一个线性布局管理器
		LinearLayout layout = new LinearLayout(this);
		// 设置该Activity显示layout
		super.setContentView(layout);	
// 设置该Activity显示layout
		super.setContentView(layout);
		layout.setOrientation(LinearLayout.VERTICAL);
		// 创建一个TextView
		final TextView show = new TextView(this);
		// 创建一个按钮
		Button bn = new Button(this);
		bn.setText(R.string.ok);
		bn.setLayoutParams(new ViewGroup.LayoutParams(
				ViewGroup.LayoutParams.WRAP_CONTENT,
				ViewGroup.LayoutParams.WRAP_CONTENT));
		// 向Layout容器中添加TextView
		layout.addView(show);
		// 向Layout容器中添加按钮
		layout.addView(bn);
		// 为按钮绑定一个事件监听器
		bn.setOnClickListener(new OnClickListener() {
		public void onClick(View v) {
				show.setText("Hello , Android , " + new java.util.Date()); } }); } }	

 3.3通过XML布局文件和Java程序代码混合设计        

当混合使用XML布局文件和代码来控制UI界面时，习惯上把变化小、行为比较固定的组件放在XML布局管理中，而把那些变化较多、行为控制比较复杂的组件交给Java代码来管理。