精华内容
下载资源
问答
  • Android Layout 布局属性全解

    万次阅读 多人点赞 2018-05-30 16:17:34
    Layout 布局属性全解 Android有基本Layout:FrameLayout,LinearLayout,TableLayout,RelativeLayout,AbsoluteLayout。android开发者谷歌文档http://android.xsoftlab.net/reference/android/view/ViewGrou...
    写的挺全,mark一下 
    

    Android  Layout 布局属性全解


    Android有基本Layout:FrameLayout,LinearLayout,TableLayout,RelativeLayout,AbsoluteLayout。
    android开发者谷歌文档http://android.xsoftlab.net/reference/android/view/ViewGroup.html
    FrameLayout
    1. <FrameLayout   
    2. android:layout_width=“” //取值范围”match_parent”、”wrap_content”、”XXdp”  布局整体宽度  
    3. android:layout_height=“”//取值范围”match_parent”、”wrap_content”、”XXdp”  布局整体高度  
    4. android:layout_weight=“”//取值示例”1.0”  布局所占比重  
    5. android:layout_gravity=“” //取值范围”center”、”top”、”bottom”、”left”、”right”、”right|bottom” 布局位置  
    6. android:layout_margin=“” //取值示例”0dp” 距离父控件四个方向距离  
    7. android:layout_marginLeft=“” //取值示例”0dp” 距离父控件左间距  
    8. android:layout_marginTop=“” //取值示例”0dp” 距离父控件上间距  
    9. android:layout_marginRight=“” //取值示例”0dp” 距离父控件右间距  
    10. android:layout_marginBottom=“” //取值示例”0dp” 距离父控件下间距  
    11. android:layout_marginStart=“” //取值示例”-50dp” “50dp”  控件离父控件开始的位置的距离(前者不显示前50dp)  
    12. android:layout_marginEnd=“”   //取值示例”-50dp” “50dp”  控件离父控件结束的位置的距离(前者不显示后50dp)  
    13. android:addStatesFromChildren=“” //取值范围”true” 、”false” viewgroup的drawable属性是否把它的子类的drawable的state包含进来。测试中linearlayout如果不包含该属性(false),当子widget被点击时不会出现被选中的状态。也就是子类的state不会被传递给父类了  
    14. android:descendantFocusability=“” //见下  
    15. android:splitMotionEvents=“”  //取值范围”true” “false” 定义布局是否传递touch事件到子布局  
    16. android:layoutMode=“” //取值范围 “clipBounds” “opticalBounds”  见下  
    17. android:id=“”   
    18. android:tag=“” //listView中区别Item非常有用的Tag标签(key-value)  
    19. android:scrollX=“” //The initial horizontal scroll offset, in pixels. [dimension]最初的水平滚动的偏移,以像素为单位。  
    20. android:scrollY=“” //The initial virtual scroll offset, in pixels. [dimension]最初的竖直滚动的偏移,以像素为单位。  
    21. android:background=“”   
    22. android:padding=“” //取值示例”0dp” 控件内容(文本图片子控件等)距离控件四个方向边界的距离  
    23. android:paddingLeft=“”   
    24. android:paddingTop=“”   
    25. android:paddingRight=“”   
    26. android:paddingBottom=“”   
    27. android:paddingStart=“” //见下  文字对齐方式详解  
    28. android:paddingEnd=“” //见下  文字对齐方式详解  
    29. android:foreground=“” //设置布局的前景图,前景图不会被子元素覆盖  
    30. android:foregroundGravity=“” //设置布局前景图的位置  
    31. android:foregroundInsidePadding=“” //  
    32. android:focusable=“” //取值”true” “false”  能否获得焦点(按键)  
    33. android:focusableInTouchMode=“” //取值”true” “false”  是否可以通过touch获取到焦点(android:focusable 为先决条件)  
    34. android:fitsSystemWindows=“” //取值”true” “false”  设置布局调整时是否考虑系统窗口(如状态栏)  
    35. android:fadeScrollbars=“” //取值”true” “false” 滚动条自动隐藏  
    36. android:fadingEdge=“”  //设置拉滚动条时 ,边框渐变的方向。none(边框颜色不变),horizontal(水平方向颜色变淡),vertical(垂直方向颜色变淡)。  
    37. android:fadingEdgeLength=“” //滚动条渐变长度  
    38. android:filterTouchesWhenObscured=“” //取值范围  “true” “false”所在窗口被其它可见窗口遮住时,是否过滤触摸事件  
    39. android:visibility=“” //取值范围 “gone” “visible” “invisible”(虽不可见,但占据布局位置)  
    40. android:scrollbars=“”//取值范围 “none” “horizontal” “vertical” 设置滚动条  
    41. android:scrollbarStyle=“” //outsideInset :  该ScrollBar显示在视图(view)的边缘,增加了view的padding. 如果可能的话,该ScrollBar仅仅覆盖这个view的背景.                                  insideInset :该ScrollBar显示在padding区域里面,增加了控件的padding区域,该ScrollBar不会和视图的内容重叠.                                                    outsideOverlay :  该ScrollBar显示在视图(view)的边缘,不增加view的padding,该ScrollBar将被半透明覆盖                                                         insideOverlay : 该ScrollBar显示在内容区域里面,不会增加了控件的padding区域,该ScrollBar以半透明的样式覆盖在视图(view)的内容                      
    42. android:isScrollContainer=“”  //取值范围 “true”“false” 设置当前View是否为滚动容器(是否可以为输入法腾出空间而隐藏)  
    43. android:scrollbarFadeDuration=“” //褪色时间  
    44. android:scrollbarDefaultDelayBeforeFade=“” //设置滚动条N毫秒后开始淡化,以毫秒为单位。  
    45. android:scrollbarSize=“” //设置滚动条大小  
    46. android:scrollbarThumbHorizontal=“@drawable” //设置水平滚动条的drawable  
    47. android:scrollbarThumbVertical=“@drawable” //设置垂直滚动条的drawable.  
    48. android:scrollbarTrackHorizontal=“@drawable”//设置水平滚动条背景(轨迹)的色drawable  
    49. android:scrollbarTrackVertical=“@deawable” //设置垂直滚动条背景(轨迹)的drawable注意直接  
    50. android:scrollbarAlwaysDrawHorizontalTrack=“true/false” //设置水平滚动条是否含有轨道  
    51. android:scrollbarAlwaysDrawVerticalTrack=“true/false”  // 设置垂直滚动条是否含有轨道  
    52. android:requiresFadingEdge=“none/horizontal/vertical” //定义褪色时滚动边缘  
    53. android:nextFocusLeft=“@+id/” //Up键按下之后,哪一个控件获得焦点(被选中)  
    54. android:nextFocusRight=“@+id/”   
    55. android:nextFocusUp=“@+id/”   
    56. android:nextFocusDown=“@+id/”   
    57. android:nextFocusForward=“@+id/”   
    58. android:clickable=“true/false”   
    59. android:longClickable=“true/false”   
    60. android:saveEnabled=“true/false” //设置是否在窗口冻结时(如旋转屏幕)保存View的数据  
    61. android:drawingCacheQuality=“auto|low|hight” //设置绘图缓存质量   
    62. android:keepScreenOn=“true/false” //View在可见的情况下是否保持唤醒状态  
    63. android:duplicateParentState=“true/false”  如果设置此属性,将直接从父容器中获取绘图状态(光标,按下等)。 注意根据目前测试情况仅仅是获取绘图状态,而没有获取事件,也就是你点一下LinearLayout时Button有被点击的效果,但是不执行点击事件。  
    64. android:minHeight=“”   
    65. android:minWidth=“”   
    66. android:soundEffectsEnabled=“true/false” // 设置点击或触摸时是否有声音效果  
    67. android:hapticFeedbackEnabled=“true/false” // 实现单击某个视图,系统提供一个触力反馈(震动一下)  
    68. android:contentDescription=“@string/”        //图片不可见时的文字描述(盲人)   
    69. android:onClick=“”   
    70. android:overScrollMode=“ifContentScrolls/always/never” //滚动到边界时的效果   
    71. android:alpha=“0.1” //透明度  
    72. android:translationX=“” //X轴的偏移距离  
    73. android:translationY=“”   
    74. android:transformPivotX=“” //从某点的X轴偏移距离  
    75. android:transformPivotY=“”   
    76. android:rotation=“”  //旋转  
    77. android:rotationX=“”   
    78. android:rotationY=“”   
    79. android:scaleX=“” //设置X轴缩放比例  
    80. android:scaleY=“”   
    81. android:verticalScrollbarPosition=“defaultPosition/left/right”  //设置垂直滚动条的位置  
    82. android:layerType=“none/hardware/software” //绘图是否开启硬件加速  
    83. android:layoutDirection=“” //定义布局图纸的方向  
    84. android:textDirection=“”  //  
    85. android:textAlignment=“inherit/…..”   //文字对齐方式  
    86. android:importantForAccessibility=“noHideDescendants/….”    //设置可达性的重要行  
    87. android:accessibilityLiveRegion=“”   
    88. android:labelFor=“”   //添加标签  
    89. android:measureAllChildren=“”  //见下  
    90. android:animateLayoutChanges=“true”   //添加默认布局动画  
    91. android:clipChildren=“” //见下  
    92. android:clipToPadding=“” //见下转载  
    93. android:layoutAnimation=“” //设置layout动画  
    94. android:animationCache=“”  
    95. android:persistentDrawingCache=“” android:alwaysDrawnWithCache=“” />   
    <FrameLayout 
    android:layout_width="" //取值范围"match_parent"、"wrap_content"、"XXdp"  布局整体宽度
    android:layout_height=""//取值范围"match_parent"、"wrap_content"、"XXdp"  布局整体高度
    android:layout_weight=""//取值示例"1.0"  布局所占比重
    android:layout_gravity="" //取值范围"center"、"top"、"bottom"、"left"、"right"、"right|bottom" 布局位置
    android:layout_margin="" //取值示例"0dp" 距离父控件四个方向距离
    android:layout_marginLeft="" //取值示例"0dp" 距离父控件左间距
    android:layout_marginTop="" //取值示例"0dp" 距离父控件上间距
    android:layout_marginRight="" //取值示例"0dp" 距离父控件右间距
    android:layout_marginBottom="" //取值示例"0dp" 距离父控件下间距
    android:layout_marginStart="" //取值示例"-50dp" "50dp"  控件离父控件开始的位置的距离(前者不显示前50dp)
    android:layout_marginEnd=""   //取值示例"-50dp" "50dp"  控件离父控件结束的位置的距离(前者不显示后50dp)
    android:addStatesFromChildren="" //取值范围"true" 、"false" viewgroup的drawable属性是否把它的子类的drawable的state包含进来。测试中linearlayout如果不包含该属性(false),当子widget被点击时不会出现被选中的状态。也就是子类的state不会被传递给父类了
    android:descendantFocusability="" //见下
    android:splitMotionEvents=""  //取值范围"true" "false" 定义布局是否传递touch事件到子布局
    android:layoutMode="" //取值范围 "clipBounds" "opticalBounds"  见下
    android:id="" 
    android:tag="" //listView中区别Item非常有用的Tag标签(key-value)
    android:scrollX="" //The initial horizontal scroll offset, in pixels. [dimension]最初的水平滚动的偏移,以像素为单位。
    android:scrollY="" //The initial virtual scroll offset, in pixels. [dimension]最初的竖直滚动的偏移,以像素为单位。
    android:background="" 
    android:padding="" //取值示例"0dp" 控件内容(文本图片子控件等)距离控件四个方向边界的距离
    android:paddingLeft="" 
    android:paddingTop="" 
    android:paddingRight="" 
    android:paddingBottom="" 
    android:paddingStart="" //见下  文字对齐方式详解
    android:paddingEnd="" //见下  文字对齐方式详解
    android:foreground="" //设置布局的前景图,前景图不会被子元素覆盖
    android:foregroundGravity="" //设置布局前景图的位置
    android:foregroundInsidePadding="" //
    android:focusable="" //取值"true" "false"  能否获得焦点(按键)
    android:focusableInTouchMode="" //取值"true" "false"  是否可以通过touch获取到焦点(android:focusable 为先决条件)
    android:fitsSystemWindows="" //取值"true" "false"  设置布局调整时是否考虑系统窗口(如状态栏)
    android:fadeScrollbars="" //取值"true" "false" 滚动条自动隐藏
    android:fadingEdge=""  //设置拉滚动条时 ,边框渐变的方向。none(边框颜色不变),horizontal(水平方向颜色变淡),vertical(垂直方向颜色变淡)。
    android:fadingEdgeLength="" //滚动条渐变长度
    android:filterTouchesWhenObscured="" //取值范围  "true" "false"所在窗口被其它可见窗口遮住时,是否过滤触摸事件
    android:visibility="" //取值范围 "gone" "visible" "invisible"(虽不可见,但占据布局位置)
    android:scrollbars=""//取值范围 "none" "horizontal" "vertical" 设置滚动条
    android:scrollbarStyle="" //outsideInset :  该ScrollBar显示在视图(view)的边缘,增加了view的padding. 如果可能的话,该ScrollBar仅仅覆盖这个view的背景.                                  insideInset :该ScrollBar显示在padding区域里面,增加了控件的padding区域,该ScrollBar不会和视图的内容重叠.                                                    outsideOverlay :  该ScrollBar显示在视图(view)的边缘,不增加view的padding,该ScrollBar将被半透明覆盖                                                         insideOverlay : 该ScrollBar显示在内容区域里面,不会增加了控件的padding区域,该ScrollBar以半透明的样式覆盖在视图(view)的内容                    
    android:isScrollContainer=""  //取值范围 "true""false" 设置当前View是否为滚动容器(是否可以为输入法腾出空间而隐藏)
    android:scrollbarFadeDuration="" //褪色时间
    android:scrollbarDefaultDelayBeforeFade="" //设置滚动条N毫秒后开始淡化,以毫秒为单位。
    android:scrollbarSize="" //设置滚动条大小
    android:scrollbarThumbHorizontal="@drawable" //设置水平滚动条的drawable
    android:scrollbarThumbVertical="@drawable" //设置垂直滚动条的drawable.
    android:scrollbarTrackHorizontal="@drawable"//设置水平滚动条背景(轨迹)的色drawable
    android:scrollbarTrackVertical="@deawable" //设置垂直滚动条背景(轨迹)的drawable注意直接
    android:scrollbarAlwaysDrawHorizontalTrack="true/false" //设置水平滚动条是否含有轨道
    android:scrollbarAlwaysDrawVerticalTrack="true/false"  // 设置垂直滚动条是否含有轨道
    android:requiresFadingEdge="none/horizontal/vertical" //定义褪色时滚动边缘
    android:nextFocusLeft="@+id/" //Up键按下之后,哪一个控件获得焦点(被选中)
    android:nextFocusRight="@+id/" 
    android:nextFocusUp="@+id/" 
    android:nextFocusDown="@+id/" 
    android:nextFocusForward="@+id/" 
    android:clickable="true/false" 
    android:longClickable="true/false" 
    android:saveEnabled="true/false" //设置是否在窗口冻结时(如旋转屏幕)保存View的数据
    android:drawingCacheQuality="auto|low|hight" //设置绘图缓存质量 
    android:keepScreenOn="true/false" //View在可见的情况下是否保持唤醒状态
    android:duplicateParentState="true/false"  如果设置此属性,将直接从父容器中获取绘图状态(光标,按下等)。 注意根据目前测试情况仅仅是获取绘图状态,而没有获取事件,也就是你点一下LinearLayout时Button有被点击的效果,但是不执行点击事件。
    android:minHeight="" 
    android:minWidth="" 
    android:soundEffectsEnabled="true/false" // 设置点击或触摸时是否有声音效果
    android:hapticFeedbackEnabled="true/false" // 实现单击某个视图,系统提供一个触力反馈(震动一下)
    android:contentDescription="@string/"        //图片不可见时的文字描述(盲人) 
    android:onClick="" 
    android:overScrollMode="ifContentScrolls/always/never" //滚动到边界时的效果 
    android:alpha="0.1" //透明度
    android:translationX="" //X轴的偏移距离
    android:translationY="" 
    android:transformPivotX="" //从某点的X轴偏移距离
    android:transformPivotY="" 
    android:rotation=""  //旋转
    android:rotationX="" 
    android:rotationY="" 
    android:scaleX="" //设置X轴缩放比例
    android:scaleY="" 
    android:verticalScrollbarPosition="defaultPosition/left/right"  //设置垂直滚动条的位置
    android:layerType="none/hardware/software" //绘图是否开启硬件加速
    android:layoutDirection="" //定义布局图纸的方向
    android:textDirection=""  //
    android:textAlignment="inherit/....."   //文字对齐方式
    android:importantForAccessibility="noHideDescendants/...."    //设置可达性的重要行
    android:accessibilityLiveRegion="" 
    android:labelFor=""   //添加标签
    android:measureAllChildren=""  //见下
    android:animateLayoutChanges="true"   //添加默认布局动画
    android:clipChildren="" //见下
    android:clipToPadding="" //见下转载
    android:layoutAnimation="" //设置layout动画
    android:animationCache=""
    android:persistentDrawingCache="" android:alwaysDrawnWithCache="" /> 
    

    android:descendantFocusability


    开发中很常见的一个问题,项目中的listview不仅仅是简单的文字,常常需要自己定义listview,自己的Adapter去继承BaseAdapter,在adapter中按照需求进行编写,问题就出现了,可能会发生点击每一个item的时候没有反应,无法获取的焦点。原因多半是由于在你自己定义的Item中存在诸如ImageButton,Button,CheckBox等子控件(也可以说是Button或者Checkable的子类控件),此时这些子控件会将焦点获取到,所以常常当点击item时变化的是子控件,item本身的点击没有响应。

        这时候就可以使用descendantFocusability来解决啦,API描述如下:

    android:descendantFocusability

    Defines the relationship between the ViewGroup and its descendants when looking for a View to take focus.

    Must be one of the following constant values.

     

    该属性是当一个为view获取焦点时,定义viewGroup和其子控件两者之间的关系。

    属性的值有三种:

            beforeDescendants:viewgroup会优先其子类控件而获取到焦点

            afterDescendants:viewgroup只有当其子类控件不需要获取焦点时才获取焦点

            blocksDescendants:viewgroup会覆盖子类控件而直接获得焦点

     

    通常我们用到的是第三种,即在Item布局的根布局加上android:descendantFocusability=”blocksDescendants”的属性就好了

    android:layoutMode

    Defines the layout mode of this ViewGroup.

    Must be one of the following constant values.

    Constant Value Description
    clipBounds 0 Use the children’s clip bounds when laying out this container.铺设这种容器时,使用子控件剪辑边界。
    opticalBounds 1 Use the children’s optical bounds when laying out this container.铺设这种容器时,使用子控件光纤边界界。

    This corresponds to the global attribute resource symbol layoutMode.

    android:paddingstart

    Android 4.1(Jelly Bean)  在 TextView  EditText 元素里对“双向文字顺序”提供了有限的功能支持,允许应用程序在编辑和显示字符的时候,能够同时支持从左到右(LTR)以及从右到左(RTL)的排列格式。Android 4.2目前已经对“从右到左”的文字排列顺序给予了原生级别的全面支持,包括提供了一个布局镜面工具,使得开发者把能够将优质的用户体验带给每一位用户,不管该用户的书写顺序是从左到右,还是从右到左。

    Android 4.2保证了该新特性不会影响到目前已经存在程序,如果之前的程序代码不修改,其应用的外观将维持现状。如果你想要修改程序,那么仅仅需要很小的改动,应用就可以自动地被“镜面反射”,这样就能轻易地将系统语言设置为从右到左的书写格式(阿拉伯语,希伯来语和波斯语都采用这种格式)。例如,下面的截图就展示了上述的设置效果:

    从左到右的布局方式从左到右的布局方式

     

    从右到左的布局方式从右到左的布局方式

     

    要实现RTL(从右到左)的布局镜面反射,仅仅需要遵循下列步骤就可以做到:

    1. 在你的应用程序声明文件(manifest)里声明开启RTL mirroring的支持。具体做法是:在manifest.xml声明文件的<application>元素中,添加 android:supportsRtl=”true”

    2. 修改应用程序中所有的“left/right”布局属性,改为对应的”start/end”布局

    1)如果你的应用程序是针对Android 4.2目标平台(应用的targetSdkVersion或者minSdkVersion是17或者更高), 那么你就应当用“start”和“end”替换原来的“left”和“right”。例如,android:paddingLeft应当被替换为android:paddingStart。

    2)  如果你想让你的应用程序与Android 4.2之前的版本保持兼容(也就是与targetSdkVersion或者minSdkVersion为16或者更早的版本),那么你应当既加上“start”和“end”,又加上“left”和“right”。例如,你应当同时写上:adnroid:paddingLeft和android:paddingStart。

     

    为了更精确地控制应用程序在UI上的文字书写顺序(从左到右,或者从右到左),Android 4.2 引入了如下的API:

    android:layoutDirection —该属性设置组件的布局排列方向

    android:textDirection — 该属性设置组件的文字排列方向

    android:textAlignment — 该属性设置文字的对齐方式

    getLayoutDirectionFromLocale() —该方法用于获取指定地区的惯用布局方式

    在使用从右到左的排列方式时,你甚至创建自定义的布局方式,可绘制对象,以及其他资源。仅仅是简单地使用资源匹配器“ldrtl”对你的资源进行一下标识,你就可以把资源定义为“从右到左方向的资源”。在调试和优化从右到左的布局方面,HierarchyViewer目前支持对start/end属性,布局方向,文字方向,文字对齐方式等所有信息的层次化显示。

    那么现在是时候为所有的用户开发优美的Android应用程序了,无论用户的文字语言习惯是从左到右,还是从右到左。我们非常期待看到这些优美应用的产生!

    android:foreground


    1. android:foreground  设置布局的前景图,前景图不会被子元素覆盖
    2. android:foregroundGravity 设置布局前景图的位置

    对于FrameLayout.LayoutParams,这里仅有android:layout_gravity属性,可以查看前面文章
    http://isux.tencent.com/learn-android-from-zero-session3.html

    我们可以实践一下:
    新建一个Android项目,然后在layout文件夹找到布局xml文件并写入以下布局
    QQ图片20140704105256

    运行效果如下:
    QQ截图20140704105354


    android:measureAllChildren

    viewFlipper中的item如何动态设置高度?

    例如:

    <ViewFlipper
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom">
    
    <include layout="@layout/layoutone"/>
    
    <include layout="@layout/layouttwo"/>
    
    <include layout="@layout/layoutthree"/>
    
    </ViewFlipper>

    假如想做成一个layoutone是50dp,layouttwo是50dp,layoutthree是80dp高度的话,你会发现在子布局中设置高度后,ViewFlipper切换时总是以子view中高度最大的值为其高度值,也就是80dp。但是又不想让layoutone和layouttwo太高,开始的时候想通过LayoutParams动态设置吧,可惜不行(把viewflipper单独出来才行),然后找到需要设置android:measureAllChildren=”false”,或者代码调用setMeasureAllChildren(false);即可,因为默认情况下measureAllChildren=true。设置后各个view的高度就不同了。该属性也适合FrameLayout等。

    原因:参见FrameLayout#onMeasure(int, int)的源码,android:measureAllChildren=”true”时,将所有children加入到mMeasureAllChildren的链表中,然后再重新measure下。

    android:clipChildren

    效果图

    看到这个图时你可以先想想如果是你,你怎么实现这个效果。马上想到用RelativeLayout?NO,NO,NO,,,

     

    二、实现代码

    复制代码
    <? xml version=”1.0” encoding=”utf-8” ?>
    < LinearLayout  xmlns:android =”http://schemas.android.com/apk/res/android”
        android:layout_width =”match_parent”
        android:layout_height =”match_parent”
        android:clipChildren =”false”
        android:orientation =”vertical”   >

         < android.support.v4.view.ViewPager
             android:id =”@+id/view_pager”
            android:layout_width =”match_parent”
            android:layout_height =”0dip”
            android:layout_weight =”1.0”   />

         < LinearLayout
             android:layout_width =”match_parent”
            android:layout_height =”48dip”
            android:background =”#B0C4DE”
            android:orientation =”horizontal”   >

             < ImageView
                 android:layout_width =”0dip”
                android:layout_height =”fill_parent”
                android:layout_weight =”1.0”
                android:scaleType =”fitCenter”
                android:src =”@drawable/ic_launcher”   />

             < ImageView
                 android:layout_width =”0dip”
                android:layout_height =”fill_parent”
                android:layout_weight =”1.0”
                android:scaleType =”fitCenter”
                android:src =”@drawable/ic_launcher”   />

             < ImageView
                  android:layout_width =”0dip”
                android:layout_height =”64dip”
                android:layout_gravity =”bottom”
                android:layout_weight =”1.0”
                android:scaleType =”fitCenter”
                android:src =”@drawable/ic_launcher”   />

             < ImageView
                 android:layout_width =”0dip”
                android:layout_height =”fill_parent”
                android:layout_weight =”1.0”
                android:scaleType =”fitCenter”
                android:src =”@drawable/ic_launcher”   />

             < ImageView
                 android:layout_width =”0dip”
                android:layout_height =”fill_parent”
                android:layout_weight =”1.0”
                android:scaleType =”fitCenter”
                android:src =”@drawable/ic_launcher”   />
         </ LinearLayout >

    </ LinearLayout >
    复制代码

      代码说明:

    1、只需在根节点设置android:clipChildren为false即可,默认为true

    2、可以通过android:layout_gravity控制超出的部分如何显示。

    3、android:clipChildren的意思:是否限制子View在其范围内

     

    翻文档找到下面介绍



    android:clipChildren setClipChildren(boolean)        Defines whether a child is limited to draw inside of its bounds or not. 
    android:clipToPadding setClipToPadding(boolean)Defines whether the ViewGroup will clip its drawing surface so as to exclude the padding area. 

    2. clipToPadding用来定义ViewGroup是否允许在padding中绘制。默认情况下,cliptopadding被设置为ture, 也就是把padding中的值都进行裁切了。1.clipChild用来定义他的子控件是否要在他应有的边界内进行绘制。 默认情况下,clipChild被设置为true。 也就是不允许进行扩展绘制。

    还有该功能是android第一个版本就已经提供的方法。 所有可以跨任意android版本使用。

     

    这两个属性联合起来能干什么呢? 哈, 用来做一些类似于心形放大等点击特效非常合适啊。    不用去更改布局, 只需加入这两个属相,并引入动画效果就完成了。

    按照上面的思路,做个demo吧。

    先看看最后的效果吧, 点击第三个机器人就会播放一个变大的效果(类似于心变大的效果)

    废话不多说,上关键代码:

      1.  布局代码(核心)

        主要看设的两个关键属性android:clipChildren和android:clipToPadding均为false。  这就让点击第三个小人时,可以跨边界进行绘制,并且允许其在padding区域内绘制。

    复制代码
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context=".MainActivity"
        android:clipChildren="false" 
        android:clipToPadding="false">
    
        <ImageView
            android:id="@+id/img1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />
    
        <ImageView
            android:id="@+id/img2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />
    
        <ImageView
            android:id="@+id/img3"
            android:onClick="AA"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@android:color/black"
            android:src="@drawable/ic_launcher" />
    
        <ImageView
            android:id="@+id/img4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />
    
        <ImageView
            android:id="@+id/img5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />
    
        <ImageView
            android:id="@+id/img6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />
    
    </LinearLayout>
    
    复制代码

     2. 其他辅助代码,如动画和act等内容

    复制代码
    <?xml version="1.0" encoding="utf-8"?>
    <scale
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="3.0"
        android:toYScale="3.0"
        android:duration="2000"
           android:pivotX="50%"
           android:pivotY="50%"
        >
    </scale>
    复制代码

     

    复制代码
    package com.example.clipchildren;
    
    import android.os.Bundle;
    import android.app.Activity;
    import android.view.Menu;
    import android.view.View;
    import android.view.animation.Animation;
    import android.view.animation.AnimationUtils;
    import android.widget.ImageView;
    import android.widget.Toast;
    
    public class MainActivity extends Activity {
    
        //只对第三个小人做放大动作
        ImageView image3 =null;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            image3 = (ImageView) findViewById(R.id.img3);
        }
    
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            // Inflate the menu; this adds items to the action bar if it is present.
            getMenuInflater().inflate(R.menu.main, menu);
            return true;
        }
    
        public void AA(View view) {
            Toast.makeText(this, "aa", Toast.LENGTH_SHORT).show();
            Animation an = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.anims);
            image3.startAnimation(an);
        }
    
    }
    复制代码

     3. 除了这种应用,网上还有其他人对这两个属性的妙用:

      用viewPaper来实现一个Gallery效果:http://www.iteye.com/topic/1129898






    展开全文
  • jquery.layout 布局插件精简版,对依赖ui.core和拖拽进行精简
  • vue、Layout 布局Layout 属性、vue Layout 全部布局、vue Layout 全部属性

    设计规则

    协助进行页面级整体布局。

    尺寸

    一级导航项偏左靠近 logo 放置,辅助菜单偏右放置。

    • 顶部导航(大部分系统):一级导航高度 64px,二级导航 48px
    • 顶部导航(展示类页面):一级导航高度 80px,二级导航 56px
    • 顶部导航高度的范围计算公式为:48+8n
    • 侧边导航宽度的范围计算公式:200+8n

    交互

    • 一级导航和末级的导航需要在可视化的层面被强调出来;
    • 当前项应该在呈现上优先级最高;
    • 当导航收起的时候,当前项的样式自动赋予给它的上一个层级;
    • 左侧导航栏的收放交互同时支持手风琴和全展开的样式,根据业务的要求进行适当的选择。

    视觉

    导航样式上需要根据信息层级合理的选择样式:

    • 大色块强调

    建议用于底色为深色系时,当前页面父级的导航项。

    • 高亮火柴棍

    当导航栏底色为浅色系时使用,可用于当前页面对应导航项,建议尽量在导航路径的最终项使用。

    • 字体高亮变色

    从可视化层面,字体高亮的视觉强化力度低于大色块,通常在当前项的上一级使用。

    • 字体放大

    12px14px 是导航的标准字号,14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。

    组件概述

    Layout:布局容器,其下可嵌套 Header Sider Content FooterLayout 本身,可以放在任何父容器中。
    Header:顶部布局,自带默认样式,其下可嵌套任何元素,只能放在 Layout 中。
    Sider:侧边栏,自带默认样式及基本功能,其下可嵌套任何元素,只能放在 Layout 中。
    Content:内容部分,自带默认样式,其下可嵌套任何元素,只能放在 Layout中。
    Footer:底部布局,自带默认样式,其下可嵌套任何元素,只能放在 Layout中。

    代码演示

    1.基本结构

    在这里插入图片描述
    典型的页面布局。

    <template>
      <div id="components-layout-demo-basic">
        <a-layout>
          <a-layout-header>Header</a-layout-header>
          <a-layout-content>Content</a-layout-content>
          <a-layout-footer>Footer</a-layout-footer>
        </a-layout>
    
        <a-layout>
          <a-layout-header>Header</a-layout-header>
          <a-layout>
            <a-layout-sider>Sider</a-layout-sider>
            <a-layout-content>Content</a-layout-content>
          </a-layout>
          <a-layout-footer>Footer</a-layout-footer>
        </a-layout>
    
        <a-layout>
          <a-layout-header>Header</a-layout-header>
          <a-layout>
            <a-layout-content>Content</a-layout-content>
            <a-layout-sider>Sider</a-layout-sider>
          </a-layout>
          <a-layout-footer>Footer</a-layout-footer>
        </a-layout>
    
        <a-layout>
          <a-layout-sider>Sider</a-layout-sider>
          <a-layout>
            <a-layout-header>Header</a-layout-header>
            <a-layout-content>Content</a-layout-content>
            <a-layout-footer>Footer</a-layout-footer>
          </a-layout>
        </a-layout>
      </div>
    </template>
    <style>
    #components-layout-demo-basic {
      text-align: center;
    }
    #components-layout-demo-basic .ant-layout-header,
    #components-layout-demo-basic .ant-layout-footer {
      background: #7dbcea;
      color: #fff;
    }
    #components-layout-demo-basic .ant-layout-footer {
      line-height: 1.5;
    }
    #components-layout-demo-basic .ant-layout-sider {
      background: #3ba0e9;
      color: #fff;
      line-height: 120px;
    }
    #components-layout-demo-basic .ant-layout-content {
      background: rgba(16, 142, 233, 1);
      color: #fff;
      min-height: 120px;
      line-height: 120px;
    }
    #components-layout-demo-basic > .ant-layout {
      margin-bottom: 48px;
    }
    #components-layout-demo-basic > .ant-layout:last-child {
      margin: 0;
    }
    </style>
    

    2.自定义触发器

    在这里插入图片描述
    要使用自定义触发器,可以设置 :trigger="null" 来隐藏默认设定。

    <template>
      <a-layout id="components-layout-demo-custom-trigger">
        <a-layout-sider
          :trigger="null"
          collapsible
          v-model="collapsed"
        >
          <div class="logo" />
          <a-menu theme="dark" mode="inline" :defaultSelectedKeys="['1']">
            <a-menu-item key="1">
              <a-icon type="user" />
              <span>nav 1</span>
            </a-menu-item>
            <a-menu-item key="2">
              <a-icon type="video-camera" />
              <span>nav 2</span>
            </a-menu-item>
            <a-menu-item key="3">
              <a-icon type="upload" />
              <span>nav 3</span>
            </a-menu-item>
          </a-menu>
        </a-layout-sider>
        <a-layout>
          <a-layout-header style="background: #fff; padding: 0">
            <a-icon
              class="trigger"
              :type="collapsed ? 'menu-unfold' : 'menu-fold'"
              @click="()=> collapsed = !collapsed"
            />
          </a-layout-header>
          <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
            Content
          </a-layout-content>
        </a-layout>
      </a-layout>
    </template>
    <script>
    export default {
      data(){
        return {
          collapsed: false,
        }
      },
    }
    </script>
    <style>
    #components-layout-demo-custom-trigger .trigger {
      font-size: 18px;
      line-height: 64px;
      padding: 0 24px;
      cursor: pointer;
      transition: color .3s;
    }
    
    #components-layout-demo-custom-trigger .trigger:hover {
      color: #1890ff;
    }
    
    #components-layout-demo-custom-trigger .logo {
      height: 32px;
      background: rgba(255,255,255,.2);
      margin: 16px;
    }
    </style>
    

    3.顶部-侧边布局-通栏

    在这里插入图片描述
    同样拥有顶部导航及侧边栏,区别是两边未留边距,多用于应用型的网站。

    <template>
      <a-layout id="components-layout-demo-top-side-2">
        <a-layout-header class="header">
          <div class="logo" />
          <a-menu
            theme="dark"
            mode="horizontal"
            :defaultSelectedKeys="['2']"
            :style="{ lineHeight: '64px' }"
          >
            <a-menu-item key="1">nav 1</a-menu-item>
            <a-menu-item key="2">nav 2</a-menu-item>
            <a-menu-item key="3">nav 3</a-menu-item>
          </a-menu>
        </a-layout-header>
        <a-layout>
          <a-layout-sider width="200" style="background: #fff">
            <a-menu
              mode="inline"
              :defaultSelectedKeys="['1']"
              :defaultOpenKeys="['sub1']"
              :style="{ height: '100%', borderRight: 0 }"
            >
              <a-sub-menu key="sub1">
                <span slot="title"><a-icon type="user" />subnav 1</span>
                <a-menu-item key="1">option1</a-menu-item>
                <a-menu-item key="2">option2</a-menu-item>
                <a-menu-item key="3">option3</a-menu-item>
                <a-menu-item key="4">option4</a-menu-item>
              </a-sub-menu>
              <a-sub-menu key="sub2">
                <span slot="title"><a-icon type="laptop" />subnav 2</span>
                <a-menu-item key="5">option5</a-menu-item>
                <a-menu-item key="6">option6</a-menu-item>
                <a-menu-item key="7">option7</a-menu-item>
                <a-menu-item key="8">option8</a-menu-item>
              </a-sub-menu>
              <a-sub-menu key="sub3">
                <span slot="title"><a-icon type="notification" />subnav 3</span>
                <a-menu-item key="9">option9</a-menu-item>
                <a-menu-item key="10">option10</a-menu-item>
                <a-menu-item key="11">option11</a-menu-item>
                <a-menu-item key="12">option12</a-menu-item>
              </a-sub-menu>
            </a-menu>
          </a-layout-sider>
          <a-layout style="padding: 0 24px 24px">
            <a-breadcrumb style="margin: 16px 0">
              <a-breadcrumb-item>Home</a-breadcrumb-item>
              <a-breadcrumb-item>List</a-breadcrumb-item>
              <a-breadcrumb-item>App</a-breadcrumb-item>
            </a-breadcrumb>
            <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
              Content
            </a-layout-content>
          </a-layout>
        </a-layout>
      </a-layout>
    </template>
    <script>
    export default {
      data () {
        return {
          collapsed: false,
        }
      },
    }
    </script>
    
    <style>
    #components-layout-demo-top-side-2 .logo {
      width: 120px;
      height: 31px;
      background: rgba(255,255,255,.2);
      margin: 16px 28px 16px 0;
      float: left;
    }
    </style>
    

    4.顶部-侧边布局

    在这里插入图片描述
    拥有顶部导航及侧边栏的页面,多用于展示类网站。

    <template>
      <a-layout id="components-layout-demo-top-side">
        <a-layout-header class="header">
          <div class="logo" />
          <a-menu
            theme="dark"
            mode="horizontal"
            :defaultSelectedKeys="['2']"
            :style="{ lineHeight: '64px' }"
          >
            <a-menu-item key="1">nav 1</a-menu-item>
            <a-menu-item key="2">nav 2</a-menu-item>
            <a-menu-item key="3">nav 3</a-menu-item>
          </a-menu>
        </a-layout-header>
        <a-layout-content style="padding: 0 50px">
          <a-breadcrumb style="margin: 16px 0">
            <a-breadcrumb-item>Home</a-breadcrumb-item>
            <a-breadcrumb-item>List</a-breadcrumb-item>
            <a-breadcrumb-item>App</a-breadcrumb-item>
          </a-breadcrumb>
          <a-layout style="padding: 24px 0; background: #fff">
            <a-layout-sider width="200" style="background: #fff">
              <a-menu
                mode="inline"
                :defaultSelectedKeys="['1']"
                :defaultOpenKeys="['sub1']"
                style="height: 100%"
              >
                <a-sub-menu key="sub1">
                  <span slot="title"><a-icon type="user" />subnav 1</span>
                  <a-menu-item key="1">option1</a-menu-item>
                  <a-menu-item key="2">option2</a-menu-item>
                  <a-menu-item key="3">option3</a-menu-item>
                  <a-menu-item key="4">option4</a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub2">
                  <span slot="title"><a-icon type="laptop" />subnav 2</span>
                  <a-menu-item key="5">option5</a-menu-item>
                  <a-menu-item key="6">option6</a-menu-item>
                  <a-menu-item key="7">option7</a-menu-item>
                  <a-menu-item key="8">option8</a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub3">
                  <span slot="title"><a-icon type="notification" />subnav 3</span>
                  <a-menu-item key="9">option9</a-menu-item>
                  <a-menu-item key="10">option10</a-menu-item>
                  <a-menu-item key="11">option11</a-menu-item>
                  <a-menu-item key="12">option12</a-menu-item>
                </a-sub-menu>
              </a-menu>
            </a-layout-sider>
            <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
              Content
            </a-layout-content>
          </a-layout>
        </a-layout-content>
        <a-layout-footer style="text-align: center">
          Ant Design ©2018 Created by Ant UED
        </a-layout-footer>
      </a-layout>
    </template>
    
    <style>
    #components-layout-demo-top-side .logo {
      width: 120px;
      height: 31px;
      background: rgba(255,255,255,.2);
      margin: 16px 28px 16px 0;
      float: left;
    }
    </style>
    

    5.上中下布局

    在这里插入图片描述
    最基本的『上-中-下』布局。
    一般主导航放置于页面的顶端,从左自右依次为:logo、一级导航项、辅助菜单(用户、设置、通知等)。通常将内容放在固定尺寸(例如:1200px)内,整个页面排版稳定,不受用户终端显示器影响;上下级的结构符合用户上下浏览的习惯,也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率,但在纵向空间上会有一些牺牲。此外,由于导航栏水平空间的限制,不适合那些一级导航项很多的信息结构。

    <template>
      <a-layout id="components-layout-demo-top" class="layout">
        <a-layout-header>
          <div class="logo" />
          <a-menu
            theme="dark"
            mode="horizontal"
            :defaultSelectedKeys="['2']"
            :style="{ lineHeight: '64px' }"
          >
            <a-menu-item key="1">nav 1</a-menu-item>
            <a-menu-item key="2">nav 2</a-menu-item>
            <a-menu-item key="3">nav 3</a-menu-item>
          </a-menu>
        </a-layout-header>
        <a-layout-content style="padding: 0 50px">
          <a-breadcrumb style="margin: 16px 0">
            <a-breadcrumb-item>Home</a-breadcrumb-item>
            <a-breadcrumb-item>List</a-breadcrumb-item>
            <a-breadcrumb-item>App</a-breadcrumb-item>
          </a-breadcrumb>
          <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">Content</div>
        </a-layout-content>
        <a-layout-footer style="text-align: center">
          Ant Design ©2018 Created by Ant UED
        </a-layout-footer>
      </a-layout>
    </template>
    <style>
    #components-layout-demo-top .logo {
      width: 120px;
      height: 31px;
      background: rgba(255,255,255,.2);
      margin: 16px 24px 16px 0;
      float: left;
    }
    </style>
    

    6.响应式布局

    在这里插入图片描述
    Layout.Sider 支持响应式布局。

    说明:配置 breakpoint 属性即生效,视窗宽度小于 breakpoint 时 Sider 缩小为 collapsedWidth 宽度,若将 collapsedWidth 设置为零,会出现特殊 trigger。

    <template>
      <a-layout id="components-layout-demo-responsive">
        <a-layout-sider
          breakpoint="lg"
          collapsedWidth="0"
          @collapse="onCollapse"
          @breakpoint="onBreakpoint"
        >
          <div class="logo" />
          <a-menu theme="dark" mode="inline" :defaultSelectedKeys="['4']">
            <a-menu-item key="1">
              <a-icon type="user" />
              <span class="nav-text">nav 1</span>
            </a-menu-item>
            <a-menu-item key="2">
              <a-icon type="video-camera" />
              <span class="nav-text">nav 2</span>
            </a-menu-item>
            <a-menu-item key="3">
              <a-icon type="upload" />
              <span class="nav-text">nav 3</span>
            </a-menu-item>
            <a-menu-item key="4">
              <a-icon type="user" />
              <span class="nav-text">nav 4</span>
            </a-menu-item>
          </a-menu>
        </a-layout-sider>
        <a-layout>
          <a-layout-header :style="{ background: '#fff', padding: 0 }" />
          <a-layout-content :style="{ margin: '24px 16px 0' }">
            <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
              content
            </div>
          </a-layout-content>
          <a-layout-footer style="textAlign: center">
            Ant Design ©2018 Created by Ant UED
          </a-layout-footer>
        </a-layout>
      </a-layout>
    </template>
    <script>
    export default {
      methods: {
        onCollapse(collapsed, type) {
          console.log(collapsed, type);
        },
        onBreakpoint(broken) {
          console.log(broken);
        }
      }
    }
    </script>
    
    <style>
    #components-layout-demo-responsive .logo {
      height: 32px;
      background: rgba(255,255,255,.2);
      margin: 16px;
    }
    </style>
    

    7.固定侧边栏

    在这里插入图片描述
    当内容较长时,使用固定侧边栏可以提供更好的体验。

    <template>
      <a-layout id="components-layout-demo-fixed-sider">
        <a-layout-sider :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
          <div class="logo"></div>
          <a-menu theme="dark" mode="inline" :defaultSelectedKeys="['4']">
            <a-menu-item key="1">
              <a-icon type="user" />
              <span class="nav-text">nav 1</span>
            </a-menu-item>
            <a-menu-item key="2">
              <a-icon type="video-camera" />
              <span class="nav-text">nav 2</span>
            </a-menu-item>
            <a-menu-item key="3">
              <a-icon type="upload" />
              <span class="nav-text">nav 3</span>
            </a-menu-item>
            <a-menu-item key="4">
              <a-icon type="bar-chart" />
              <span class="nav-text">nav 4</span>
            </a-menu-item>
            <a-menu-item key="5">
              <a-icon type="cloud-o" />
              <span class="nav-text">nav 5</span>
            </a-menu-item>
            <a-menu-item key="6">
              <a-icon type="appstore-o" />
              <span class="nav-text">nav 6</span>
            </a-menu-item>
            <a-menu-item key="7">
              <a-icon type="team" />
              <span class="nav-text">nav 7</span>
            </a-menu-item>
            <a-menu-item key="8">
              <a-icon type="shop" />
              <span class="nav-text">nav 8</span>
            </a-menu-item>
          </a-menu>
        </a-layout-sider>
        <a-layout :style="{ marginLeft: '200px' }">
          <a-layout-header :style="{ background: '#fff', padding: 0 }" />
          <a-layout-content :style="{ margin: '24px 16px 0', overflow: 'initial' }">
            <div :style="{ padding: '24px', background: '#fff', textAlign: 'center' }">
              ...
              <br />
              Really
              <br />...<br />...<br />...<br />
              long
              <br />...<br />...<br />...<br />...<br />...<br />...
              <br />...<br />...<br />...<br />...<br />...<br />...
              <br />...<br />...<br />...<br />...<br />...<br />...
              <br />...<br />...<br />...<br />...<br />...<br />...
              <br />...<br />...<br />...<br />...<br />...<br />...
              <br />...<br />...<br />...<br />...<br />...<br />...
              <br />...<br />...<br />...<br />...<br />...<br />
              content
            </div>
          </a-layout-content>
          <a-layout-footer :style="{ textAlign: 'center' }">
            Ant Design ©2018 Created by Ant UED
          </a-layout-footer>
        </a-layout>
      </a-layout>
    </template>
    <style>
    #components-layout-demo-fixed-sider .logo {
      height: 32px;
      background: rgba(255,255,255,.2);
      margin: 16px;
    }
    </style>
    

    8.固定头部

    在这里插入图片描述
    一般用于固定顶部导航,方便页面切换。

    <template>
      <a-layout id="components-layout-demo-fixed">
        <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
          <div class="logo" />
          <a-menu
            theme="dark"
            mode="horizontal"
            :defaultSelectedKeys="['2']"
            :style="{ lineHeight: '64px' }"
          >
            <a-menu-item key="1">nav 1</a-menu-item>
            <a-menu-item key="2">nav 2</a-menu-item>
            <a-menu-item key="3">nav 3</a-menu-item>
          </a-menu>
        </a-layout-header>
        <a-layout-content :style="{ padding: '0 50px', marginTop: '64px' }">
          <a-breadcrumb :style="{ margin: '16px 0' }">
            <a-breadcrumb-item>Home</a-breadcrumb-item>
            <a-breadcrumb-item>List</a-breadcrumb-item>
            <a-breadcrumb-item>App</a-breadcrumb-item>
          </a-breadcrumb>
          <div :style="{ background: '#fff', padding: '24px', minHeight: '380px' }">Content</div>
        </a-layout-content>
        <a-layout-footer :style="{ textAlign: 'center' }">
          Ant Design ©2018 Created by Ant UED
        </a-layout-footer>
      </a-layout>
    </template>
    <style>
    #components-layout-demo-fixed .logo {
      width: 120px;
      height: 31px;
      background: rgba(255,255,255,.2);
      margin: 16px 24px 16px 0;
      float: left;
    }
    </style>
    

    9.侧边布局

    在这里插入图片描述
    侧边两列式布局。页面横向空间有限时,侧边导航可收起。
    侧边导航在页面布局上采用的是左右的结构,一般主导航放置于页面的左侧固定位置,辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应,能提高横向空间的使用率,但是整个页面排版不稳定。侧边导航的模式层级扩展性强,一、二、三级导航项目可以更为顺畅且具关联性的被展示,同时侧边导航可以固定,使得用户在操作和浏览中可以快速的定位和切换当前位置,有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。

    API

    <Layout>
      <Header>header</Header>
      <Layout>
        <Sider>left sidebar</Sider>
        <Content>main content</Content>
        <Sider>right sidebar</Sider>
      </Layout>
      <Footer>footer</Footer>
    </Layout>
    

    Layout 布局容器

    参数说明类型默认值
    class容器 classstring-
    style指定样式object-
    hasSider表示子元素里有 Sider,一般不用指定。可用于服务端渲染时避免样式闪动boolean-

    Layout.Header Layout.Footer Layout.Content API 与 Layout 相同

    Layout.Sider 侧边栏

    参数说明类型默认值
    breakpoint触发响应式布局的断点Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' }-
    class容器 classstring-
    collapsed(v-model)当前收起状态boolean-
    collapsedWidth收缩宽度,设置为 0 会出现特殊 triggernumber80
    collapsible是否可收起booleanfalse
    defaultCollapsed是否默认收起booleanfalse
    reverseArrow翻转折叠提示箭头的方向,当 Sider 在右边时可以使用booleanfalse
    style指定样式object|string-
    theme主题颜色string: light darkdark
    trigger自定义 trigger,设置为 null 时隐藏 triggerstring|slot-
    width宽度number|string200

    事件

    事件名称说明回调参数
    collapse展开-收起时的回调函数,有点击 trigger 以及响应式反馈两种方式可以触发(collapsed, type) => {}
    breakpoint触发响应式布局断点时的回调(broken) => {}

    breakpoint width

    {
    xs: ‘480px’,
    sm: ‘576px’,
    md: ‘768px’,
    lg: ‘992px’,
    xl: ‘1200px’,
    xxl: ‘1600px’,
    }

    展开全文
  • layout布局

    千次阅读 2018-09-19 10:34:04
    就是把界面中的控件按照某种规律摆放...布局的基本属性 取值范围 { //效果是一样的 fill_parent//过时 match_parent//不过时 } 固定值 { dp 控件大小 sp 文字大小 } padding 内补丁 margin 外补丁 android:gravity和...

    就是把界面中的控件按照某种规律摆放到指定的位置

    1. 布局的二种实现
      代码
      xml配置文件:res/layout目录下
      注:也可以同时使用xml和代码

    2. 布局的基本属性
      取值范围
      { //效果是一样的
      fill_parent//过时
      match_parent//不过时
      }

      固定值
      {
      dp 控件大小
      sp 文字大小
      }

      padding 内补丁
      margin 外补丁

      android:gravity和android:layout_gravity
      用一个TextView、文字、背景查看效果最方便
      android:gravity:控件内部的元素
      android:layout_gravity:控件所在父元素的位置
      但父元素的水平和垂直设置的优先度更高

    3. 常见布局
      线性布局(重点) LinearLayout
      表格布局(几乎不用)
      帧布局

      绝对布局
      相对布局 RelativeLayout
      网格布局
      RTL(几乎不用)

    4. 案例1:padding内补丁、margin外补丁的区别,以及与内容
      match_parent/fill_parent
      padding/margin
      background
      wrap_content

    5. 案例2:线性布局(重点)
      orientation=“vertical|horizontal”
      android:gravity:控件内部的元素(对内有效)

    6. 案例3:android:gravity和android:layout_gravity的区别
      7.1 android:gravity:控件内部的元素(对内有效)
      android:layout_gravity:控件所在父元素的位置(对外生效)
      7.2 特殊情况
      父元素的android:orientation=“vertical”,layout_gravity 水平设置的相关属性有效
      父元素的android:orientation=“horizontal”,layout_gravity 垂直设置的相关属性有效

    7. 案例4:LinearLayout布局中Layout_weight属性的作用
      8.1 首先声明只有在Linearlayout中,layout_weight属性才有效。
      8.2 它是用来指定(剩余空闲空间)的分割比例,而非按比例分配整个空间。
      8.3 另外android:layout_weight会引起争议,是因为在设置该属性的同时,
      设置android:layout_width为wrap_content和match_parent会造成两种截然相反的效果。
      8.4 如果想用layout_weight平均分配空间,正确方式是将layout_width(或layout_height)设置为0dp,
      再通过layout_weight按比例分配空间
      注:关键点在于搞清楚什么是剩余空闲空间

    8. 案例5:帧布局(就好象一张张卡片堆叠上去,后面会盖出前面的)
      FrameLayout
      注:帧布局有点类似于awt的CardLayout都是把组件一个一个叠加到一起,
      但CardLayout能将下面的组件移上来,但FrameLayout没有提供此功能

      ImageView
      src
      scaleType=“fitXY” XY方向拉伸

      android:scaleType=“fitXY”
      android:src="@drawable/img18"

    展开全文
  • Android自定义Layout布局

    2013-12-18 20:36:05
    android提供的五种布局有时候不能满足实际项目的需要,所以需要自定义布局。这是一个自定义Layout布局
  • ConstraintLayout的练习布局文件layout,里面有十几种常用的布局文件,讲解ConstraintLayout的属性已经使用
  • element-ui layout布局

    千次阅读 2021-01-16 22:24:23
    今天在新建的vue中需要用到el组件的布局,但是侧边栏总会占一行,需要展示的页面会在侧边栏的下边,如下图: 而且,侧边栏菜单的样式也没有。li标签还有原始的小点,如下: (其实在这里就该意识到是css的问题) ...

    今天在新建的vue中需要用到el组件的布局,但是侧边栏总会占一行,需要展示的页面会在侧边栏的下边,如下图:
    在这里插入图片描述
    而且,侧边栏菜单的样式也没有。li标签还有原始的小点,如下:
    在这里插入图片描述
    (其实在这里就该意识到是css的问题)
    然后我新建的一个空项目,复制element官网上的例子,安装element-ui依赖:

    npm install --save element-ui 
    

    在main.js中:

    import Element from 'element-ui'
    Vue.use(Element)
    

    但是还是出现下面的奇怪情况:
    在这里插入图片描述
    原来还需要在main.js中引入css:

    import 'element-ui/lib/theme-chalk/index.css';
    

    然后布局就正常了:
    在这里插入图片描述
    然后在我的项目中也引入css,布局也正常了:
    在这里插入图片描述
    el-button的样式也随之显示出来了。。。

    展开全文
  • java layout基本布局

    2017-03-05 15:35:35
    android app 界面开发,几种基本的java layout布局,基本例子供参考
  • 如何让一个控件在另一个控件下面,直接操作下面代码: <LinearLayout android:id="@+id/ly_dialogPersonCode_Title" android:layout_width="match_parent" android:layout_height... android:layout_marginT...
  • elementUI--layout 布局

    2019-05-28 14:50:22
    1. 基础布局:通过col组件的:span属性调整layout布局,分为24栏 el-col 的span默认为24栏 <el-row> <el-col :span="24"></el-col> </el-row> 2. 分栏间隔:通过row组件的:gutter属性...
  • PADS Layout 布局经验

    千次阅读 2020-09-25 14:55:06
    通常条件,所有元件均放在顶层,只有在顶层元件过密时,才能将一些高度有限并且发热量小的器件如贴片电阻... PADS layout设置按下’u‘’m‘设置单位为mil,按下GD25 G25设置网格大小,移动元器件方便对准按照各个功能.
  • 添加QDialog的Layout布局属性操作

    千次阅读 2017-06-29 11:08:18
    对应的属性页也没有“Layout属性栏。 下面,通过简单的操作,就可以设置QDialog的默认布局。具体操作如下: 一、普通文本编辑器打开布局文件.ui 二、添加“layout”标签 例:以垂直布局为例: 找到 name=...
  • 1、layout布局24列 <el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> </el-row> <el-row> <el-col :span="12"><div ...
  • element-ui 布局铺满整个空间方法
  • Qt layout布局

    千次阅读 2018-09-25 20:25:36
    Qt中关于布局有多个类,适用于不同的场景。 QBoxLayout【QHBoxLayout , QVBoxLayout】, QFormLayout, QGridLayout, and QStackedLayout,均派生自QLayout。 二 常用函数 1、设置左上右下的空白 ...
  • antd-layout布局

    万次阅读 2019-02-19 16:59:40
    nz-layout布局容器,其下可嵌套 nz-headernz-sider nz-content nz-footer 或 nz-layout 本身,可以放在任何父容器中。 nz-header:顶部布局,自带默认样式,其下可嵌套任何元素,只能放在 nz-layout 中。 nz-sider...
  • Layout 布局 用法: <el-row> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple-light"&...
  • 【Ant Design Vue】之layout布局

    千次阅读 2021-03-11 17:47:01
    文章目录基本布局 基本布局
  • android layout布局属性

    万次阅读 2014-01-13 11:13:22
    参考:...   第一类:属性值 true或者 false  android:layout_centerHrizontal 水平居中  android:layout_centerVertical 垂直居中  android:layout_c
  • iview-layout布局

    千次阅读 2018-06-28 17:08:00
    Layout布局容器,其下可嵌套HeaderSiderContentFooter或Layout本身,可以放在任何父容器中。 Header:顶部布局,自带默认样式,其下可嵌套任何元素,只能放在Layout中。 Sider:侧边栏,自带默认样式及基本功能...
  • 放入Layout中进行排布的View的XML属性: 几种Layout中Item所共有的XML属性:  (1)layout_width  (2)layout_height  注: (1)和(2)用来确定放入Layout中的View的宽度和高度:它们的可能取值为fill_parent,wr
  • elementUI 学习- Layout布局 与UI 设定

    千次阅读 2018-08-22 15:35:45
    通过Col组件的:span属性调整Layout布局,分为24栏。 el-row&gt; &lt;el-col :span="24"&gt;&lt;div class="grid-content bg-purple-dark"&gt;&lt;/div&gt;&...
  • vue 之配置路由 和 layout布局

    千次阅读 2020-10-11 14:47:42
    目录配置路由router/index.jslayout/index.js 配置路由 router/index.js 基础的路由配置 还有登录权限的配置 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [{...
  • Vue Layout布局

    2020-08-04 09:47:45
    Layout 布局 * * *Row AttributesCol Attributes * * *
  • android layout布局分析与优化 android layout布局分析与优化
  • 创建layout文件并布局 这里使用的是element-ui提供的布局,经典的header,aside,main形式布局(具体要什么样的自己设置,这里例举其中一种形式) 这里最重要的是,在el-main,放一个router-view router-view的...
  • layoutit 可视化布局

    2018-09-03 11:26:52
    layoutit 可视化布局 bootStrap3在线编辑器源码 离线中文版
  • Android studio layout布局1

    2018-10-21 18:45:18
    什么是布局 就是把界面中的控件按照某种规律摆放...布局的基本属性 设置背景颜色 android:background="@color/green" 设置内间距 android:padding=“50dp” 设置外间距 android:layout_margin=“50dp” ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 466,955
精华内容 186,782
关键字:

layout布局