Android 布局 ViewGroup

2023-02-25 21:10:34

布局

res/layout

命名规则(全部小写)

activity_

fragment_

item_

基础组件

com.android.widget包下

父类View

view：屏幕上一块矩阵区域

能在xml中设置的都是view，除了特殊标签。

引用使用@符号

　　1、background:@drawable引用图片 @android:color引用颜色

　　2、android:clickable可以响应点击事件

　　3、android:id 每一个组件都可以设置一个在当前xml中唯一的id号，使用@+id/来创建一个R文件中的id号，用来在java代码或xml中引用

　　4、android:padding自己与自己的内部之间的距离

　　5、android:layout_margin 布局管理器自己与外部之间的距离

　　6、android:visibility是否显示组件，visible显示，inVisible不显示但是占位，gone不显示也不占位

TextView文本框

　　用来显示文本String

所有的组件都包含有的属性

　　android：表明属于android标准属性

　　使用android标准命名空间

　　　　xmlns:android="http://schemas.android.com/apk/res/android

　　前面加layout的所有属性，都属于布局

　　所有组件都必须加上的（TableLayout除外）

　　　　layout_width 宽度

　　　　layout_height 高度

　　　　match_parent 常量与父布局相同大小，如果在根布局上，表明全屏，fill_arent过期和match_parent一样

　　　　wrap_content 常量根据内容来确定组件的大小

TextView独有的属性

　　text 显示文本信息

　　drawableTop在四边设置一张图片

　　android:gravity 对齐

　　singleLine 单行模式

　　textColor 设置文本显示的颜色

　　textSize 设置文本大小，单位：sp 跟随用户手机字体的首选项进行调整

　　textStyle 设置文本显示样式，粗体和斜体多个常量可以使用|连接

Button 与TextView相同

跑马灯

1、必须内容大于宽度

2、必须单行

3、设置焦点

　　android:ellipsize="marquee"

　　android:focusable="true"

　　android:focusableInTouchMode="true"

　　android:singleLine="true"　　　

View一般用于划线

　　<View

　　　　android:layout_width="match_parent"

　　　　android:layout_height="1px"

　　　　android:background="@android:color/black"　/>

LinearLayout线性布局

　　一行或者一列只有一个元素

　　超过一个组件或者给了id必须设置方向orientation属性

　　vertical垂直一行只有一个组件

　　horizontal水平一列只有一个组件

　　布局可以嵌套布局

　　layout_gravity线性布局特有属性：水平时只能设置上下，垂直时只能设置水平

　　layout_weight设置按权重来调整组件大小，设置为0dp

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

     android:layout_width="match_parent"

     android:background="@android:color/holo_purple"

     android:layout_height="match_parent"

     android:orientation="vertical" >

     <LinearLayout

         android:layout_width="match_parent"

         android:layout_height="0dp"

         android:layout_margin="2dp"

         android:orientation="horizontal"

         android:layout_weight="1">

         <Button

             android:layout_width="0dp"

             android:layout_weight="1"

             android:layout_height="match_parent"

             android:layout_margin="1dp"

             android:textStyle="bold"

             android:textSize="20sp"

             android:text="MC"/>

     </LinearLayout>

 </LinearLayout>

TableLayout 表格布局

TableLayout 继承于LinearLayout，支持所有LinearLayout属性
添加多个TableRow，每个TableRow占一行，如果不添加TableRow直接添加组件，那么每个组件单独占一行，TableRow也是容器，每添加一个组件，就可以添加一列
唯一一个不需要宽高的组件
initTableLayout()初始化时，setOrientation(VERTICAL);默认设置了方向为垂直方向，所以这里设置方向无意义

 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

     android:layout_width="match_parent"

        android:stretchColumns="1"

        android:shrinkColumns="0"

     android:layout_height="match_parent" >

     <Button android:text="你好"/>

     <Button android:text="你好"/>

     <TableRow>

         <TextView android:text="用户名:"/>

         <EditText

             android:hint="6-16个字符"

             android:layout_weight="1"/>

     </TableRow>

     <TableRow>

         <TextView android:text="密码:"/>

         <EditText

             android:hint="6-14个字母"

             android:layout_weight="1"/>

     </TableRow>

       <TableRow

           >

           <!-- 填满整行，还用weight分配宽度 -->

           <Button android:text="1"/>

           <Button android:text="2"/>

           <Button android:text="3" />

           <Button android:text="4" />

        </TableRow> 

       <TableRow>

         <!-- android:layout_span="4" 跨越4列 -->

         <!-- <Button android:text="5"

             android:layout_span="4" /> -->

         <Button android:text="6" />

         <Button android:text="7" />

         <Button android:text="8" />

       </TableRow>

       <TableRow>

        <!--  android:layout_column="1"指定显示在第1列上，后面的组件会跟着走 -->

           <!-- <Button android:text="11"

               android:layout_column="1"/> -->

           <Button android:text="22" />

           <Button android:text="33" />

           <Button android:text="44" />

        </TableRow>

 </TableLayout>

效果图如下：

FrameLayout 帧布局也叫层布局

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

     android:layout_width="match_parent"

     android:layout_height="match_parent"

     android:orientation="vertical" >

     <!-- 一般作为容器（碎片的容器） -->

     <!-- 特效 -->

     <!--FrameLayout中的子元素总是以屏幕的左上角层叠在一起  -->

     <Button

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:text="aaa"/>

     <TextView android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:text="bbbbb"/>

 </FrameLayout>

效果图如下

AbsoluteLayout 绝对布局已过期

RelativeLayout相对布局

 <!-- 默认以左上角为原点 -->

 <!-- 4组方法 -->

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

     android:layout_width="match_parent"

     android:layout_height="match_parent" >

 <!-- 1、居中方式  相对于父窗体   三种居中方式-->

 <!--   android:layout_centerInParent="true"  布局的正中心 -->

 <!-- android:layout_centerVertical="true"  布局的垂直居中 -->

 <!-- android:layout_centerHorizontal="true" 布局的水平居中 -->

     <Button

         android:id="@+id/center"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_centerInParent="true"

         android:text="正中心"/>

     <Button android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_centerVertical="true"

         android:text="垂直居中" />

      <Button android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_centerHorizontal="true"

         android:text="水平居中" />

 <!--2、与父窗体的对齐方式   在父窗体的左右上下  -->

 <!-- android:layout_alignParentLeft="true"  -->

 <!-- android:layout_alignParentRight="true" -->

 <!-- android:layout_alignParentTop="true" -->

 <!-- android:layout_alignParentBottom="true" -->

    <Button android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_alignParentLeft="true"

         android:layout_alignParentTop="true"

         android:text="左上角"/>

    <Button android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_alignParentRight="true"

         android:layout_alignParentTop="true"

         android:text="右上角"/>

    <Button android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_alignParentLeft="true"

         android:layout_alignParentBottom="true"

         android:text="左下角"/>

    <Button android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_alignParentBottom="true"

         android:layout_alignParentRight="true"

         android:text="右下角"/>

 <!-- 3、相对其他组件的位置 -->

 <!-- android:layout_above="@id/center"  在id的上面 -->

 <!-- android:layout_below="@id/center" 在id的下面 -->

 <!-- android:layout_toLeftOf="@id/center" 在id的左边-->

 <!-- android:layout_toRightOf="@id/center" 在id的右边 -->

    <Button

        android:id="@+id/top"

        android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_above="@id/center"

         android:layout_centerHorizontal="true"

         android:text="上"/>

    <Button

        android:id="@+id/down"

        android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_below="@id/center"

         android:layout_centerHorizontal="true"

         android:text="下"/>

    <Button

        android:id="@+id/left"

        android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_toLeftOf="@id/center"

         android:layout_centerVertical="true"

         android:text="左"/>

     <Button

         android:id="@+id/right"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_toRightOf="@id/center"

         android:layout_centerVertical="true"

         android:text="右"/>

 <!-- 4、相对于其他组件的对齐方式 -->

 <!--android:layout_alignLeft="@id/left" 与id组件左对齐  -->

 <!--android:layout_alignRight="@id/right" 与id组件右对齐  -->

 <!--android:layout_alignTop="@id/top" 与id组件上对齐  -->

 <!--android:layout_alignBottom="@id/down" 与id组件下对齐  -->

     <Button android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_above="@id/left"

         android:layout_alignLeft="@id/left"

         android:layout_alignTop="@id/top"

         android:text="A"/>

     <Button android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_above="@id/right"

         android:layout_alignRight="@id/right"

         android:layout_alignTop="@id/top"

         android:text="B"/>

     <Button android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_below="@id/left"

         android:layout_alignLeft="@id/left"

         android:layout_alignBottom="@id/down"

         android:text="C"/>

     <Button android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_below="@id/right"

         android:layout_alignRight="@id/right"

         android:layout_alignBottom="@id/down"

         android:text="D"/>

 </RelativeLayout>

效果图如下：

GridLayout网格布局 4.0新增特性

 <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"

     android:layout_width="match_parent"

     android:layout_height="match_parent"

     android:columnCount="5" >

     <!-- 设置列数 -->

     <Button android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:text="1"/>

     <Button android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:text="2"/>

     <Button android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:text="3"/>

     <Button android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:text="4"/>

     <Button android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:text="5"/>

     <Button android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:text="6"/>

     <Button android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:text="7"/>

     <Button android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:text="8"/>

 </GridLayout>

效果图如下：

码农公寓

相关文章