目录
1.View类 VS ViewGroup类
- 视图(View) :相当于窗户玻璃
- 视图组(ViewGroup):相当于窗户框架
- 视图和视图组的层次关系:
- ViewGroup 类是 View 类的子类,ViewGroup类是一个抽象类,开发中通常使用其子类:
- ViewGroup.LayoutParams类(注意s)
- ViewGroup.MarginLayoutParams类
- 一个 activity活动 就是一个单独的窗口
- View类 位于 android.view包,其子类位于 android.widget包
- 设计 UI 界面(User Interface):
-
2.Android 布局类型
2.1 相对布局 RelativeLayout
- 相对布局管理器:视图相对于相邻视图或父视图定位:
- 布局属性:
- Alt+?:这是 ADT里的 快捷提示,比如输入id/la等就会自动联想
- id:每个组件的 id值是唯一的,不可以重名,会在 R文件中显示组件被分配的内存地址
- +id:如果 R文件中没有给此组件分配地址,将自动分配地址,若分配了,则不重新分配
- R文件未显示对应组件名地址分配 解决方案:尝试保存,就会自动更新了
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" // 相对布局 RelativeLayout... <Button android:id="@+id/button1" // 该组件的名字 android:layout_width="wrap_content" // wrap_content:表示和自身一样的长度 android:layout_height="match_parent" // match_parent:表示和父组件一样的长度 android:layout_centerInParent="true" // centerInParent:确定组件在父组件中的位置 android:text="Button1" /> // 该组件上显示的文字 <Button android:id="@+id/button2" android:layout_above="@id/button1" // layout_above:该组件位于某组件的上方 android:layout_alignLeft="@id/button1" // layout_alignLeft:和某组件左边对齐 android:text="Button2" /> <Button android:id="@+id/button3" android:layout_toRightOf="@id/button1" // layout_toRightOf:连接在某组件右边界上 android:layout_alignTop="@id/button1" // layout_alignTop:和某组件上边对齐 android:text="Button3" />
- 相对布局布局属性总结:
2.2 线性布局 LinearLayout
- 线性布局管理器:
- 线性布局中,每一行只能放置一个组件,若组件排到窗体的边缘,后边的组件不被显示
- 布局属性:
<LinearLayout .... android:orientation="vertical" //垂直线性布局管理 ..... > <TextView android:id="@+id/red" android:textColor="#ffffff" // 文字大小单位:sp android:textStyle="bold" // 文字样式:加粗 android:gravity="center" // 文字排列方式:居中 android:background="#aa0000" // 背景 android:layout_weight="1"/> // layout_weight:组件占剩余部分的权重
2.3 框架(帧)布局 FrameLayout
- 框架(帧)布局管理器:显示层叠的内容,实现拖动的动画
- 前景图片:其他图片无法覆盖,永远显示在最上面
- 将图片文件粘贴放在res下的 中等画质文件夹 drawable-xx ,图片命名仅允许小写英文
<FrameLayout // 帧布局管理器:显示层叠的内容,实现拖动的动画 android:foreground="@drawable/android" // android:foreground:前景图片的引用 注意@drawable android:foregroundGravity="bottom|right" // android:foregroundGravity:前景图片相对位置 ...... > <!-- 将图片文件粘贴放在res下的中等画质文件夹 drawable-xx 中,图片命名仅允许小写英文 --> <ImageView // ImageView:表示插入其他图片 android:id="@+id/yun" android:layout_width="160dp" //图片长宽单位dp android:layout_height="160dp" android:src="@drawable/yun" /> // 图片路径
2.4 表格布局 TableLayout
- 表格布局管理器:只有行的概念,没有列的概念
- TableRow:表示一行,里面可以有多个组件,比如按钮,若仅有一个组件,则该组件占据一整行
- 布局属性:
<TableLayout // TableLayout:表格布局管理器,只有行的概念,没有列的概念 ....... android:collapseColumns="1" // android:collapseColumns="1":隐藏第几列,1表示第二列 android:shrinkColumns="2" // android:shrinkColumns="2":收缩第几行,2表示第三行 android:stretchColumns="0" // android:collapseColumns="1":隐藏第几列,1表示第二列 tools:context=".MainActivity" > <TableRow > // TableRow:表示一行,里面可以有多个组件,比如按钮,若仅有一个组件,则占据一整行 <Button android:id="@+id/button1" .... android:text="按钮1" /> <Button android:id="@+id/button2" .... android:text="按钮2" /> </TableRow> <TableRow> ......
2.5 绝对布局 AbsoluteLayout
- 绝对布局管理器:通过指定视图在布局上的准确位置来定位视图(已经不再使用)
2.6 网格布局 GridLayout
- 网格布局和表格布局的区别:
- 表格布局管理器只能跨列,网格布局管理器可以跨列和跨行
- 表格布局管理器:当一行沾满后,超出容器的组件不会换行,而网格布局管理器可以
- 网格布局管理器是后期添加的,因此 要求 Android SDK版本最小为14
- SDK更改:在系统配置文件 AndroidMainfest.xml 中修改:<uses-sdk android:minSdkVersion="14" />
- 布局属性:
<GridLayout // 网格布局管理器:GridLayout 最低sdk版本应为14 android:rowCount="3" // android:rowCount="3" 最多有几行 android:columnCount="4" // android:columnCount="4" 最多有几列 android:orientation="horizontal" // 默认组件水平排列 ... > <Button android:id="@+id/button2" android:layout_row="1" // 第二行 android:layout_column="2" // 第三列 android:layout_columnSpan="2" // android:layout_columnSpan="2":同时占有几列 --> android:text="BUTTON2" /> <Button
3.嵌套布局
- 嵌套布局 是许多种安卓提供的布局组合在一起,不是布局:
- 嵌套布局中,根布局管理器(只有一个根)必须包含 xmlns属性 ,不是根布局管理器就不可以有 xmlns属性
- 不能嵌套太深,否则影响性能
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" ... > <!-- 根布局管理器的唯一标准:拥有xmlns属性,嵌套的子布局管理器不可以有xmlns属性 --> <!-- ADT嵌套最多两层,否则会影响性能 --> <TextView .../> <LinearLayout //注意!此处没有xmlns属性! android:layout_width="match_parent" ... > <TextView ... /> </LinearLayout> </LinearLayout>
4.视图
- Android 应用程序中的可视化组件称为视图(View)
- android.view 程序包的 View类是 Android 应用 UI 的基础构建块
- View 类是所有小部件的父类,View类的子类一般都位于android.widget包中
- View类 部分属性:
4.1 文本视图 TextView
- android:text 文本内容:可以在 values文件夹中的 strings.xml文件中进行修改
- 字体大小size 的单位是sp,距离的单位是dp
- EditText类 是TextView类的子类
<LinearLayout ... android:orientation="vertical" > <TextView // 文本视图 android:id="@+id/textView" android:textSize="44sp" // 字体大小单位sp 距离单位dp android:typeface="sans" // 文本类型 android:textStyle="bold|italic" // 字体不同风格用 | 分隔 android:gravity="right" android:singleLine="false" // 字体很多时显示一行 .../> <EditText // 文本编辑视图 android:id="@+id/editText" android:hint="请输入密码" // hint:提示输入信息文字 android:inputType="textPassword" android:drawableLeft="@drawable/password" // 插入密码图标 android:lines="4" // 最多同时显示行数 /> </LinearLayout>
- EditText类的属性:
4.2 按钮 Button
- Button类 是TextView类的子类,按钮类组件通常作为点击按钮,被事件监听器监听
- ImageButton类 是ImageView类的子类
- Botton按钮 和 ImageButton按钮 异同:
- 相同点:单击时都可以触发 onClick事件
- 不同点:ImageButton没有 android.text属性,图片文字不可以编辑,且要设置 android.src属性
- 缺失R文件报错解决方法:project-clear清空项目 重命名图片名字,不允许出现大写字母
- 重命名:点击图片选择最左边的 proview修改名字,会让图片相关联的图片名全部修改
- 快速补全:ctrl+1
// activity_main.xml 布局文件 // 在 src-MainActivity.java 中配置点击按钮事件监听 <Button android:id="@+id/button" android:text="点我" /> <ImageButton android:id="@+id/imageButton" android:src="@drawable/image_button" android:background="#0000" // 虚化边框,去除背景 /> <ToggleButton // 动态开关 android:id="@+id/toggleButton" android:textOn="开灯" // texton:打开显示的内容 android:textOff="关灯" // textoff:关闭显示的内容 android:checked="true" /> <RadioGroup // 单选按钮组:如果不设置这个会变成三个按钮选中后不可取消 android:id="@+id/radioGroup" android:orientation="horizontal" android:checkedButton="@+id/radioButton3" // 默认第三个按钮被选中 <RadioButton // 如果只有这么一个按钮a,那么只可以选中,选中后不可以取消 android:id="@+id/radioButton1" android:text="选项A"/> <RadioButton android:id="@+id/radioButton2" android:text="选项B"/> <RadioButton android:id="@+id/radioButton3" android:text="选项C"/> </RadioGroup> <CheckBox // 复选按钮 选中后可以取消 android:id="@+id/checkBox" android:checked="true" // 默认被选中 android:text="记住密码"/>
// MainActivity.java 活动文件 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button button= (Button) findViewById(R.id.button); // 根据 组件id 获取组件对象 button.setOnClickListener(new View.OnClickListener() { // 设置组件事件监听 @Override public void onClick(View v) { //弹出显示框 显示内容 最长显示时间 长4s短2.5s 要显示show() Toast.makeText(MainActivity.this, "不要点我", Toast.LENGTH_LONG).show(); }});}
4.3 列表视图 Spinner ListView
- Spinner:下拉视图,需要设置数组数值
- 在 values文件夹中,右键新建 other-valuesXMLfile,命名arrays,不可以随便起名
- Listview:列表直接显示视图 ,动态添加 ,在 MainActivity.java 中写 Java代码
- 填充 Spinner组件(下拉视图)两种方式:
- 通过 .xml布局文件 属性添加 数组静态填充资源:
- 通过 Java代码 使用 适配器(Adapter)动态填充
// activity_main.xml <!-- 使用string arrays --> <Spinner android:id="@+id/spinner" android:entries="@array/hobby" /> <ListView // 列表直接显示视图 动态添加 在mainactivity中写java代码 android:id="@+id/listView" .../> // 方法一:通过 .xml布局文件 属性添加数组静态填充资源 // values-arrays.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string-array name="hobby"> <item >篮球</item> <item >足球</item> <item >排球</item> <item >网球</item> </string-array> </resources> // 方法二:用 Java代码 使用适配器动态填充 //1:创建 String数组:存储数据 String[] hobby = new String[]{"全部","电影","电视","游戏"}; //2:创建 Adapter适配器 ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, hobby); //3:获取 listView组件 ListView listView = (ListView) findViewById(R.id.listView); //4:将适配器 加载到 listView组件中 listView.setAdapter(adapter);
4.4 图片视图 ImageView
- ImageView组件用于显示图像
- ImageView组件可以从其他资源(drawables目录,因特网,内容提供者)加载图像.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ... > <ImageView android:id="@+id/iamgeView1" android:layout_width="wrap_content" // 自定义宽度 android:src="@drawable/cat" android:tint="#77FF0000" // 给组件染色 android:adjustViewBounds="true" // 宽高自适应 android:maxWidth="120dp" // 当 width 设置为自定义宽度时,最大宽度才会有效果 android:maxHeight="120dp" // 注意距离单位是dp 字体大小单位是sp android:scaleType="fitXY" // 隐藏x、y方向的边框背景 /> <ImageView ... /> </LinearLayout>
4.5 网页视图 WebView
- 使用 WebView的步骤:
- 布局文件:activity_main.mxl 设置 webview标签
- 活动文件:MainActivity.java 调用 loadUrl()方法 加载所需要的URL
- 系统配置文件:AndroidMainfest.xml 设置权限(重要)
<!-- 布局文件 activity_main.mxl 设置webview标签--> <WebView android:id="@+id/webView" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <!-- java代码 MainActivity.java 调用 loadUrl方法加载所需要的URL --> WebView webView = (WebView) findViewById(R.id.webView); // 获取 webview组件 webView.loadUrl("https://www.baidu.com"); // 获取组件后仍然不能访问,需要在系统配置文件中设置权限 } <!-- 系统文件 AndroidMainfest.xml 设置权限 --> <uses-permission android:name="android.permission.INTERNET"/> // 设置权限,使得web组件正常运行
- 效果:会跳转到百度
4.6 滚动视图 ScrollView
- 滚动视图是一种框架布局,只支持垂直滚动
- 视图内仅允许一个组件,如果想包含多个组件,要用布局进行包裹
- 一定要将包裹视图设置一个方向:垂直或水平,设置在包裹视图的方向 和 滚动视图方向应该一样
- <ScrollView>:垂直滚动视图
- <HorizontalScrollView>:水平滚动视图
<!-- HorizontalScrollView:水平滚动视图 --> <HorizontalScrollView android:id="@+id/scrollView" android:layout_width="wrap_content"> <!-- 添加新视图的原因:Scrollview仅允许有一个组件,textview有两个,所以需要包裹起来 --> <!-- 一定要将包裹视图设置一个方向:垂直或水平,设置在包裹视图和滚动视图应该一样 --> <LinearLayout android:orientation="horizontal"> <TextView.../> <TextView.../> </LinearLayout> </HorizontalScrollView>