zoukankan      html  css  js  c++  java
  • Android 布局 ViewGroup

    布局

    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

     1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     2     android:layout_width="match_parent"
     3     android:background="@android:color/holo_purple"
     4     android:layout_height="match_parent"
     5     android:orientation="vertical" >
     6     <LinearLayout
     7         android:layout_width="match_parent"
     8         android:layout_height="0dp"
     9         android:layout_margin="2dp"
    10         android:orientation="horizontal"
    11         android:layout_weight="1">
    12         <Button 
    13             android:layout_width="0dp"
    14             android:layout_weight="1"
    15             android:layout_height="match_parent"
    16             android:layout_margin="1dp"
    17             android:textStyle="bold"
    18             android:textSize="20sp"
    19             android:text="MC"/>
    20 
    21     </LinearLayout>
    22 </LinearLayout>

    TableLayout 表格布局

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

     1 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
     2     android:layout_width="match_parent"
     3        android:stretchColumns="1"
     4        android:shrinkColumns="0"
     5     android:layout_height="match_parent" >
     6     
     7     <Button android:text="你好"/>
     8     <Button android:text="你好"/>
     9     
    10     <TableRow>
    11         <TextView android:text="用户名:"/>
    12         <EditText
    13             android:hint="6-16个字符"
    14             android:layout_weight="1"/>
    15     </TableRow>
    16     <TableRow>
    17         <TextView android:text="密码:"/>
    18         <EditText
    19             android:hint="6-14个字母" 
    20             android:layout_weight="1"/>
    21     </TableRow>
    22     
    23       <TableRow
    24           >
    25           <!-- 填满整行,还用weight分配宽度 -->
    26           <Button android:text="1"/>
    27           <Button android:text="2"/>
    28           <Button android:text="3" />
    29           <Button android:text="4" />
    30        </TableRow> 
    31        
    32       <TableRow>
    33         <!-- android:layout_span="4" 跨越4列 -->
    34         <!-- <Button android:text="5"
    35             android:layout_span="4" /> -->
    36         <Button android:text="6" />
    37         <Button android:text="7" />
    38         <Button android:text="8" />
    39           
    40       </TableRow>
    41       
    42       <TableRow>
    43        <!--  android:layout_column="1"指定显示在第1列上,后面的组件会跟着走 -->
    44           <!-- <Button android:text="11" 
    45               android:layout_column="1"/> -->
    46           <Button android:text="22" />
    47           <Button android:text="33" />
    48           <Button android:text="44" />
    49        </TableRow>
    50        
    51       
    52       
    53 </TableLayout>

     效果图如下:

     FrameLayout 帧布局 也叫层布局

     1 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     2     android:layout_width="match_parent"
     3     android:layout_height="match_parent"
     4     android:orientation="vertical" >
     5     
     6     <!-- 一般作为容器(碎片的容器) -->
     7     <!-- 特效 -->
     8     <!--FrameLayout中的子元素总是以屏幕的左上角层叠在一起  -->
     9     <Button
    10         android:layout_width="wrap_content"
    11         android:layout_height="wrap_content" 
    12         android:text="aaa"/>
    13     
    14     <TextView android:layout_width="wrap_content"
    15         android:layout_height="wrap_content"
    16         android:text="bbbbb"/>
    17 </FrameLayout>

    效果图如下

    AbsoluteLayout 绝对布局  已过期

    RelativeLayout相对布局

      1 <!-- 默认以左上角为原点 -->
      2 <!-- 4组方法 -->
      3 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      4     android:layout_width="match_parent"
      5     android:layout_height="match_parent" >
      6     
      7 <!-- 1、居中方式  相对于父窗体   三种居中方式-->
      8 <!--   android:layout_centerInParent="true"  布局的正中心 -->
      9 <!-- android:layout_centerVertical="true"  布局的垂直居中 -->
     10 <!-- android:layout_centerHorizontal="true" 布局的水平居中 -->
     11 
     12     <Button 
     13         android:id="@+id/center"
     14         android:layout_width="wrap_content"
     15         android:layout_height="wrap_content"
     16         android:layout_centerInParent="true"
     17         android:text="正中心"/>
     18     
     19     <Button android:layout_width="wrap_content"
     20         android:layout_height="wrap_content"
     21         android:layout_centerVertical="true"
     22         android:text="垂直居中" />
     23     
     24      <Button android:layout_width="wrap_content"
     25         android:layout_height="wrap_content"
     26         android:layout_centerHorizontal="true"
     27         android:text="水平居中" />
     28 
     29 <!--2、与父窗体的对齐方式   在父窗体的左右上下  -->
     30 <!-- android:layout_alignParentLeft="true"  -->
     31 <!-- android:layout_alignParentRight="true" -->
     32 <!-- android:layout_alignParentTop="true" -->
     33 <!-- android:layout_alignParentBottom="true" -->
     34    
     35    <Button android:layout_width="wrap_content"
     36         android:layout_height="wrap_content"
     37         android:layout_alignParentLeft="true"
     38         android:layout_alignParentTop="true"
     39         android:text="左上角"/>
     40 
     41    <Button android:layout_width="wrap_content"
     42         android:layout_height="wrap_content"
     43         android:layout_alignParentRight="true"
     44         android:layout_alignParentTop="true"
     45         android:text="右上角"/>
     46    
     47    <Button android:layout_width="wrap_content"
     48         android:layout_height="wrap_content"
     49         android:layout_alignParentLeft="true"
     50         android:layout_alignParentBottom="true"
     51         android:text="左下角"/>
     52    
     53    <Button android:layout_width="wrap_content"
     54         android:layout_height="wrap_content"
     55         android:layout_alignParentBottom="true"
     56         android:layout_alignParentRight="true"
     57         android:text="右下角"/>
     58 
     59 <!-- 3、相对其他组件的位置 -->
     60 <!-- android:layout_above="@id/center"  在id的上面 -->
     61 <!-- android:layout_below="@id/center" 在id的下面 -->
     62 <!-- android:layout_toLeftOf="@id/center" 在id的左边-->
     63 <!-- android:layout_toRightOf="@id/center" 在id的右边 -->
     64    <Button 
     65        android:id="@+id/top"
     66        android:layout_width="wrap_content"
     67         android:layout_height="wrap_content"
     68         android:layout_above="@id/center"
     69         android:layout_centerHorizontal="true"
     70         android:text="上"/>
     71    
     72    <Button 
     73        android:id="@+id/down"
     74        android:layout_width="wrap_content"
     75         android:layout_height="wrap_content"
     76         android:layout_below="@id/center"
     77         android:layout_centerHorizontal="true"
     78         android:text="下"/>
     79    
     80    <Button 
     81        android:id="@+id/left"
     82        android:layout_width="wrap_content"
     83         android:layout_height="wrap_content"
     84         android:layout_toLeftOf="@id/center"
     85         android:layout_centerVertical="true"
     86         android:text="左"/>
     87    
     88     <Button 
     89         android:id="@+id/right"
     90         android:layout_width="wrap_content"
     91         android:layout_height="wrap_content"
     92         android:layout_toRightOf="@id/center"
     93         android:layout_centerVertical="true"
     94         android:text="右"/>
     95 
     96 <!-- 4、相对于其他组件的对齐方式 -->
     97 <!--android:layout_alignLeft="@id/left" 与id组件左对齐  -->
     98 <!--android:layout_alignRight="@id/right" 与id组件右对齐  -->
     99 <!--android:layout_alignTop="@id/top" 与id组件上对齐  -->
    100 <!--android:layout_alignBottom="@id/down" 与id组件下对齐  -->
    101     <Button android:layout_width="wrap_content"
    102         android:layout_height="wrap_content"
    103         android:layout_above="@id/left"
    104         android:layout_alignLeft="@id/left"
    105         android:layout_alignTop="@id/top"
    106         android:text="A"/>
    107 
    108     <Button android:layout_width="wrap_content"
    109         android:layout_height="wrap_content"
    110         android:layout_above="@id/right"
    111         android:layout_alignRight="@id/right"
    112         android:layout_alignTop="@id/top"
    113         android:text="B"/>
    114     
    115     <Button android:layout_width="wrap_content"
    116         android:layout_height="wrap_content"
    117         android:layout_below="@id/left"
    118         android:layout_alignLeft="@id/left"
    119         android:layout_alignBottom="@id/down"
    120         android:text="C"/>
    121     
    122     <Button android:layout_width="wrap_content"
    123         android:layout_height="wrap_content"
    124         android:layout_below="@id/right"
    125         android:layout_alignRight="@id/right"
    126         android:layout_alignBottom="@id/down"
    127         android:text="D"/>
    128 
    129 </RelativeLayout>

    效果图如下:

    GridLayout网格布局    4.0新增特性

     1 <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
     2     android:layout_width="match_parent"
     3     android:layout_height="match_parent"
     4     android:columnCount="5" > 
     5     <!-- 设置列数 -->
     6     
     7     <Button android:layout_width="wrap_content"
     8         android:layout_height="wrap_content"
     9         android:text="1"/>
    10     
    11     <Button android:layout_width="wrap_content"
    12         android:layout_height="wrap_content"
    13         android:text="2"/>
    14     
    15     <Button android:layout_width="wrap_content"
    16         android:layout_height="wrap_content"
    17         android:text="3"/>
    18     
    19     <Button android:layout_width="wrap_content"
    20         android:layout_height="wrap_content"
    21         android:text="4"/>
    22     
    23     <Button android:layout_width="wrap_content"
    24         android:layout_height="wrap_content"
    25         android:text="5"/>
    26     
    27     <Button android:layout_width="wrap_content"
    28         android:layout_height="wrap_content"
    29         android:text="6"/>
    30     
    31     <Button android:layout_width="wrap_content"
    32         android:layout_height="wrap_content"
    33         android:text="7"/>
    34     
    35     <Button android:layout_width="wrap_content"
    36         android:layout_height="wrap_content"
    37         android:text="8"/>
    38 </GridLayout>

    效果图如下:

  • 相关阅读:
    js实现倒数 —— ‘剩下多少天多少秒’
    CSS单位,em,rem以及元素的宽度和高度
    基于原生JS+node.js+mysql打造的简易前后端分离用户登录系统
    隐藏微信小程序剪贴板提示
    微信小程序实现多选分享
    微信小程序开发过程中出现问题及解答
    Visual Studio Code 使用指南
    openLayers 4 canvas图例绘制,canvas循环添加图片,解决图片闪烁问题
    微信小程序个人/企业开放服务类目一览表
    微信小程序日常开发中常遇到的错误代码
  • 原文地址:https://www.cnblogs.com/Claire6649/p/5910380.html
Copyright © 2011-2022 走看看