• Android UI 开发·界面布局开发·案例分析

    目录

    ​编辑

    1.  线性布局（LinearLayout）

    2.  相对布局（RelativeLayout）

    3.  表格布局（TableLayout）

    4.  帧布局（FrameLayout）

    5.  网格布局（GridLayout）

    6.  绝对布局（AbsoluteLayout）

    补充内容：关于selector状态选择器

    1.  线性布局（LinearLayout）

            LinearLayout线性布局是一种最简单的布局方式，它有垂直和水平两种布局方向，使用“android:orientation="vertical"”属性设置可以指定布局方式为垂直，使用“android:orientation= "horizontal"”属性设置可以指定布局方式为水平。

            下面我们将通过一个案例了解LinearLayout这种布局方式。

    1. "1.0" encoding="utf-8"?>
    3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    4.     xmlns:tools="http://schemas.android.com/tools"
    5.     android:layout_width="match_parent"
    6.     android:layout_height="match_parent"
    7.     android:orientation="vertical" >
    8. 	
    9.     <RelativeLayout
    10.         android:layout_width="match_parent"
    11.         android:layout_height="match_parent"
    12.         android:layout_weight="2"
    13.         android:background="@android:color/white" >
    14.     RelativeLayout>
    15.  
    17.     <RelativeLayout
    18.         android:layout_width="match_parent"
    19.         android:layout_height="match_parent"
    20.         android:layout_weight="1"
    21.         android:background="@android:color/black" >
    22.     RelativeLayout>
    23. LinearLayout>

    LinearLayout有两个非常相似的属性： android:gravity和android:layout_ gravity。

            它们都是用来设置对齐方式的，可选值包括left（左对齐）、right（右对齐）、top（上对齐）、bottom（下对齐）、center（居中）、center_horizontal（水平居中）和center_vertical（垂直居中）等，这些值还可以组合使用，中间用“|”分开。

    android:gravity和android:layout_gravity的区别在于：

    （1）android:gravity：用于设置该View内部内容的对齐方式。

    （2）android:layout_gravity：用于设置该View在其父View中的对齐方式。

    2.  相对布局（RelativeLayout）

            相对布局中的视图组件是按相互之间的相对位置来确定的，并不是线性布局中的必须按行或按列单个显示，在此布局中的子元素里与位置相关的属性将生效。

            例如“android：layout_below”、“android:layout_above”等。注意在指定位置关系时，引用的ID必须在引用之前，先被定义，否则将出现异常。RelativeLayout是Android布局结构中最灵活的一种布局结构，比较适合一些复杂界面的布局。

    1. "1.0" encoding="utf-8"?>
    3. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    4.     xmlns:tools="http://schemas.android.com/tools"
    5.     android:layout_width="match_parent"
    6.     android:layout_height="match_parent" >
    7.  
    8.     
    9.     <EditText
    10.         android:id="@+id/et"
    11.         android:layout_width="120dp"
    12.         android:layout_height="wrap_content"
    13.         android:inputType="text" />
    14.  
    16.     <TextView
    17.         android:id="@+id/tv"
    18.         android:layout_width="wrap_content"
    19.         android:layout_height="wrap_content" 
    20.         android:layout_below="@+id/et"/>
    21.  
    22.     
    23.     <Button
    24.         android:id="@+id/bt_ok"
    25.         android:layout_width="wrap_content"
    26.         android:layout_height="wrap_content"
    27.         android:layout_below="@+id/tv"
    28.         android:layout_toRightOf="@+id/et"
    29.         android:text="确认" />
    31.     <Button
    32.         android:id="@+id/bt_clear"
    33.         android:layout_width="wrap_content"
    34.         android:layout_height="wrap_content"
    35.         android:layout_alignTop="@+id/bt_ok"
    36.         android:layout_toRightOf="@+id/bt_ok"
    37.         android:layout_marginLeft="25dp"
    38.         android:text="清除" />
    39. RelativeLayout>
    1. /* 复写监听器对象的onClick方法，完成点击后的事件处理，参数为被点击的按钮 */
    2. 	@Override
    3. 	public void onClick(View v) {
    4. 		//根据按钮控件的id区分不同按钮的点击
    5. 		switch (v.getId()) {
    6. 		case R.id.bt_ok:
    7. 			//获取界面控件EditText的输入内容
    8. 			String _Text = mEditText.getText().toString();
    9. 			//给界面控件TextView的文本设置为输入内容
    10. 			mTextView.setText(_Text);
    11. 			break;
    12. 		case R.id.bt_clear:
    13. 			//清空界面控件EditText的文本输入内容
    14. 			mEditText.setText("");
    15. 			break;
    16. 		}
    17. 	}
    18. }

    3.  表格布局（TableLayout）

            TableLayout属于行和列形式的管理控件，适用于多行多列的布局格式，每行为一个TableRow对象，也可以是一个View对象。在TableRow中还可以继续添加其他的控件，每添加一个子控件就成为一列。TableLayout不会生成边框。

            表格布局的风格跟HTML中的表格比较接近，只是所采用的标签不同。 是顶级元素，说明采用的是表格布局，定义一个行，而具体控件则定义一个单元格的内容。

    1. "1.0" encoding="utf-8"?>
    3. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    4.     android:layout_width="fill_parent"
    5.     android:layout_height="fill_parent"
    6.     android:stretchColumns="0,1,2,3" >
    7.  
    9.     <TableRow>
    10. 	
    11.         <TextView
    12.             android:gravity="center"
    13.             android:padding="3dip"
    14.             android:text="姓名" />
    15. 		
    16.         <TextView
    17.             android:gravity="center"
    18.             android:padding="3dip"
    19.             android:text="性别" />
    20. 		
    21.         <TextView
    22.             android:gravity="center"
    23.             android:padding="3dip"
    24.             android:text="年龄" />
    26.         <TextView
    27.             android:gravity="center"
    28.             android:padding="3dip"
    29.             android:text="电话" />
    30.     TableRow>
    32.     <TableRow>
    33. 	
    34.         <TextView
    35.             android:gravity="center"
    36.             android:padding="3dip"
    37.             android:text="小明" />
    38. 	
    39.         ......
    40.     TableRow>
    42.     <TableRow>
    43. 	
    44.         <TextView
    45.             android:gravity="center"
    46.             android:padding="3dip"
    47.             android:text="小王" />
    48. 	
    49.          ......
    50.     TableRow>
    51. TableLayout>
    52.

    4.  帧布局（FrameLayout）

            帧布局中的每一个组件都代表一个画面，默认以屏幕左上角作为（0, 0）坐标，按组件定义的先后顺序依次逐屏显示，后面出现的会覆盖前面的画面。用该布局可以实现动画效果。

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <!-- 最外面的布局文件为帧布局 -->
    3. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    4.     android:layout_width="fill_parent"
    5.     android:layout_height=“wrap_content” >
    6. 	<TextView
    7.         android:layout_width="wrap_content"
    8.         android:layout_height="wrap_content"
    9.         android:text="A Text" >
    10.     </TextView>
    11. 	<Button
    12.         android:layout_width="wrap_content"
    13.         android:layout_height="wrap_content"
    14.         android:text="A Button" >
    15.     </Button>
    16. </FrameLayout>

    5.  网格布局（GridLayout）

            GridLayout提供了一种新的布局方式，它可以将子视图放入到一个矩形网格中。GridLayout有以下两个构造函数：

    （1）public GridLayout() 建立一个默认的GridLayout布局；

    （2）public GridLayout(int numColumns,  boolean makeColumnsEqualWidth)

            建立一个GridLayout布局，拥有numColumns列。如果makeColumnsEqualWidth为true，则全部组件将拥有相同的宽度。

            GridLayout中的元素一般不采用layout_width和layout_height来界定大小，而是采用“layout_gravity=" fill_horizontal"”或”fill_vertical”，并配合GridLayout的“android:orientation”属性来定义它里面的视图元素的大小。默认情况下，它里面的元素大小为“wrap_content”。

            GridLayout中的“android:orientation”属性，决定了其中的视图元素的摆放方式，如果为“vertical”，则先摆第一列，然后第二列，以此类推；如果为“horizontal”，则先摆第一行，然后第二行，以此类推。

    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <GridLayout
    3. xmlns:android="http://schemas.android.com/apk/res/android"  
    4.     android:layout_width="wrap_content"  
    5.     android:layout_height="wrap_content"
    6.     android:orientation="horizontal"
    7.     android:rowCount="5"                                                  
    8.     android:columnCount="4">                                             
    9.    	 <Button
    10. 	   android:id="@+id/one"
    11. 	   android:text="1" />
    12. 　　<Button  
    13.         android:id="@+id/two"  
    14.         android:text="2"/>  
    15. 　　<Button  
    16.         android:id="@+id/three"  
    17.         android:text="3"/>  
    18. <Button  
    19.         android:id="@+id/devide"  
    20.         android:text="/"/> 
    21. 	 <Button  
    22.         android:id="@+id/four"  
    23.         android:text="4"/>  
    24. 　　<Button  
    25.         android:id="@+id/five"  
    26.         android:text="5"/>  
    27. 　　<Button  
    28.         android:id="@+id/six"  
    29.         android:text="6"/>  
    30. 　　<Button  
    31.         android:id="@+id/multiply"  
    32.         android:text="×"/>
    33.  <Button  
    34.         android:id="@+id/seven"  
    35.         android:text="7"/>  
    36. 　　<Button  
    37.         android:id="@+id/eight"  
    38.         android:text="8"/>  
    39. 　　<Button  
    40.         android:id="@+id/nine"  
    41.         android:text="9"/>  
    42.     <Button  
    43.         android:id="@+id/minus"  
    44.         android:text="-"/> 
    45.  	<Button  
    46.         android:id="@+id/zero"  
    47.         android:layout_columnSpan="2"  
    48.         android:layout_gravity="fill"  
    49.         android:text="0"/>  
    50.  
    51. <Button  
    52.         android:id="@+id/point"  
    53.         android:text="."/>  
    54.     <Button  
    55.         android:id="@+id/plus"  
    56.         android:layout_rowSpan="2"  
    57.         android:layout_gravity="fill"  
    58.         android:text="+"/>  
    59.     <Button  
    60.         android:id="@+id/equal"  
    61.         android:layout_columnSpan="3"  
    62.         android:layout_gravity="fill"  
    63.         android:text="="/>    
    64. </GridLayout>

    6.  绝对布局（AbsoluteLayout）

            AbsoluteLayout，又可以叫做坐标布局，是直接按照控件的横纵坐标在界面中进行布局。

            绝对布局使用“android:layout_x”属性来确定X坐标，以左上角为顶点。使用“android: layout_y”属性确定Y坐标，以左上角为顶点。在绝对定位中，如果子元素不设置layout_x和layout_y，那么它们的默认值是0，也就是说它会像在FrameLayout一样，这个元素会出现在屏幕的左上角。

    补充内容：关于selector状态选择器

            selector状态选择器一般使用在各种操作状态下，主要体现在字体，背景的切换方面。

            以Xml方式写出状态选择器，然后将写好的selector存在放res - drawable 或 res - color 文件夹下，较为常用。

    状态设置常用类型：

    //设置是否按压状态，一般在true时设置该属性，表示已按压状态，默认为false

    android:state_pressed

    //设置是否选中状态，true表示已选中，false表示未选中

    android:state_selected

    //设置是否勾选状态，主要用于CheckBox和RadioButton，true表示已被勾选，false表示未被勾选

    android:state_checked

    //设置是否获得焦点状态，true表示获得焦点，默认为false，表示未获得焦点

    android:state_focused

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
    3.     <item android:drawable="@drawable/login_btn2" android:state_pressed="true"/>
    4.     <item android:drawable="@drawable/login_btn1"/>
    5. </selector>
    6.  
    7. <selector xmlns:android="http://schemas.android.com/apk/res/android">
    8.     <item android:state_checked="true" android:drawable="@drawable/tb_on" /> <!-- pressed -->
    9.     <item android:drawable="@drawable/tb_off" /> <!-- default/unchecked -->
    10. </selector>

  • 相关阅读:
    ABP应用开发（Step by Step）-上篇
    【Linux进行时】磁盘文件结构
    onnx文件及其结构、正确导出onnx、onnx解析器
    SpringCloud微服务（二）——Eureka服务注册中心
    爬虫抓取网站数据
    习题 --- 双指针算法、离散化
    合约广告平台架构演进实践
    Javascript文件上传
    新技术应用塑造未来景展望
    unity 协程
  • 原文地址：https://blog.csdn.net/MANONGDKY/article/details/134271958