• 粗谈Android中的对齐


    在谈这个之前先啰嗦几个概念。

    基线:书写英语单词时为了规范书写会设有四条线,从上至下第三条就是基线。基线对齐主要是为了两个控件中显示的英文单词的基线对齐,如下所示:

      

    Start:在看API的时候经常会有Start对齐,End对齐,Start对齐主要是为了能够在不同的textDirection(文本排列方向)的时候更好的对齐的一种方式,在textDirection为LTR(从左到右)时Start对齐就等于左对齐,当textDirection为RTL(从右到左)时Start对齐就等于右对齐。End同理。

    文本对齐

      通过gravity来实现view的文本对齐方式.先看下官方解释。

      android:gravity:Specifies how to align the text by the view's x- and/or y-axis when the text is smaller than the view.

    Must be one or more (separated by '|') of the following constant values.

      意思是说,当文本比view小的时候指定如何通过view的x、y轴线去对齐。这个属性的值必须是下面给出的一个或多个,如果是多个则用'|'隔开。

      可以用的属性有:topbottomleftrightcenter_verticalfill_verticalcenter_horizontalfill_horizontalcenterfillclip_verticalclip_horizontalstartend

      这些属性中就谈两类,其他的类似,一个是上下左右这种基本类型的,还有一种是组合的,比如左下角,这是为:left|bottom。

      左对齐:

      

    1 <TextView
    2         android:layout_width="100dip"
    3         android:layout_height="60dip"
    4         android:layout_marginTop="10dip"
    5         android:background="#ffff33"
    6         android:gravity="left"
    7         android:text="left" 
    8 />

      左下角:

    1  <TextView
    2         android:layout_width="100dip"
    3         android:layout_height="60dip"
    4         android:layout_marginTop="10dip"
    5         android:background="#ffff33"
    6         android:gravity="left|bottom"
    7         android:text="leftbottom"
    8  />

      效果图如下所示:

      

    LinearLayout对齐

      gravity:Specifies how an object should position its content, on both the X and Y axes, within its own bounds.

    Must be one or more (separated by '|') of the following constant values.

        意思是,规定了一个对象以什么样的方式根据x、y轴去摆放自己的内容。这个属性的值必须是下面给出的一个或多个,如果是多个则用'|'隔开。

        可以用的属性有:topbottomleftrightcenter_verticalfill_verticalcenter_horizontalfill_horizontalcenterfillclip_verticalclip_horizontalstartend。

        同样,这些属性中就谈两类,其他的类似,一个是上下左右这种基本类型的,还有一种是组合的,比如左上角,这是为:left|bottom。

       居右对齐:

      

     1 <LinearLayout
     2         android:layout_width="match_parent"
     3         android:background="#0000ff"
     4         android:layout_height="0dip"
     5         android:gravity="right"
     6         android:layout_weight="1" >
     7         
     8         <Button 
     9             android:layout_height="wrap_content"
    10             android:layout_width="wrap_content"
    11             android:text="right"
    12             />
    13         
    14 </LinearLayout>

      居左下角对齐:

     1 <LinearLayout
     2         android:layout_width="match_parent"
     3         android:background="#ffff33"
     4         android:layout_height="0dip"
     5         android:layout_marginTop="10dip"
     6         android:gravity="left|bottom"
     7         android:layout_weight="1" >
     8         
     9          <Button 
    10             android:layout_height="wrap_content"
    11             android:layout_width="wrap_content"
    12             android:text="left_bottom"
    13             />
    14 </LinearLayout>

      效果图如下:

      

    RelativeLayout对象

      RelativeLayout主要用到相对位置的对齐,主要属性有以下几种

      

    layout_above

    该布局文件的底部设置到指定ID的对象的上方
    layout_below

    layout_alignBaseline

    该布局文件的基线与指定ID的对象的基线对齐

    layout_alignBottom

    将该布局文件的底部域指定的ID的对象的底部对齐
     

    layout_alignLeft


    layout_alignRight
    layout_alignTop

    layout_alignStart

    该布局文件的开始(左边)与指定ID对象的开始(左边)位置对齐

    layout_alignEnd

    该布局文件的结束(右边)与指定ID对象的结束(右边)位置对齐

    layout_toLeftOf

    该布局文件的右边放到指定ID对象的左边
    类似:
    layout_toStartOf

    layout_toRightOf

    该布局文件的左边放到指定ID对象的右边

    layout_centerHorizontal

    如果设置为true,则将该布局文件中的自对象设置为水平居中
    layout_centerInParent
    layout_centerVertical

    layout_alignParentLeft

    如果设置为true,则将该布局文件的左边与其父对象的左边对齐
    layout_alignParentRight
    layout_alignParentStart
    layout_alignParentTop

    layout_alignParentEnd

    layout_alignParentBottom

       拿出两个例子来简单说明下,一个是将一个button放到另一个button右边,另外一个是将一个button放到另一个button的右下角

      右边:

      

     1  <RelativeLayout
     2         android:layout_width="match_parent"
     3         android:layout_height="wrap_content" >
     4 
     5         <Button
     6             android:id="@+id/btnStand"
     7             android:layout_width="wrap_content"
     8             android:layout_height="wrap_content"
     9             android:text="标准物1" />
    10 
    11         <Button
    12             android:layout_width="100dip"
    13             android:layout_height="wrap_content"
    14             android:layout_toRightOf="@id/btnStand"
    15             android:text="right->标准物1" />
    16  </RelativeLayout>

      右下角:

     1 <RelativeLayout
     2         android:layout_width="match_parent"
     3         android:layout_height="wrap_content" >
     4 
     5         <Button
     6             android:id="@+id/btnStand2"
     7             android:layout_width="wrap_content"
     8             android:layout_height="wrap_content"
     9             android:text="标准物2" />
    10 
    11         <Button
    12             android:layout_width="100dip"
    13             android:layout_height="wrap_content"
    14             android:layout_below="@id/btnStand2"
    15             android:layout_toRightOf="@id/btnStand2"
    16             android:text="right_bottom->标准物2" />
    17 </RelativeLayout>

      效果图如下所示:

    后记:

      这次谈的内容比较粗,仅作抛砖引玉用。

    原文连接:http://www.cnblogs.com/luoaz/p/3719767.html

    Demo下载地址:https://github.com/xiaoai-opensource/alignDemo

  • 相关阅读:
    操作元素
    CSS3 制作网格动画效果
    网页边栏过渡动画
    超炫的 CSS3 页面切换动画效果
    多种鼠标悬停效果
    各种 SVG 制作单选和多选框动画
    全屏遮罩层效果(10种)
    FancyBox – 经典 Lightbox 效果插件
    CSS3 & SVG 制作钟表
    20种新颖的按钮风格和效果【附源码】
  • 原文地址:https://www.cnblogs.com/luoaz/p/3719767.html
Copyright © 2020-2023  润新知