基线(Baseline)的含义以及在Android中的使用

来源:互联网 发布:红珠实验软件 编辑:程序博客网 时间:2024/03/29 02:20

基线的含义  

 首先说一下基线的含义(具体参考:http://zh.wikipedia.org/wiki/%E5%9F%BA%E7%B7%9A):

        字体排印学中,基线英语:Baseline)指的是多数字母排列的基准线。如下图所示,大多字母都沿着红色基线排列,唯有“p”向下延伸超过基线,超过的部分称为降部


原则上,多数字体会有以下关于基线的准则:

  • 大写字母位于基线上。最常见的例外是J和Q。
  • 不齐线数字(见阿拉伯数字)位于基线上。
  • 以下不齐线数字有降部:3 4 5 7 9。
  • 以下小写字母有降部:g j p q y。
  • 有着圆形上下区段的字符,如(0 3 6 8 c C G J o O Q),它们比基线略微有所下沉(overshoot)来造成了一种它们坐落于基线以上的光学幻觉,通过比X字高或大写高度略高来制造它们和flat glyphs如(H x X 1 5 7)同样高度的错觉。Peter Karowand的Digital Typefaces中建议,标准的overshoot应当在1.5%左右。

段落中连续行的基线间的垂直距离也被称为行高或Leading(行距),尽管后者也可指基线距离减去字体大小的值。

东亚字体没有基线,每个字符坐落在一个方形盒子中,既无升部也无降部。当它与具有低基线的字体混合使用时,东亚字符应当被调整,使其字符底部在低基线字体的基线和降部高度之间。

   上面的解释看出,原则上汉字是没有基线的,只有字框和字框中心。
但大陆与日本的横排标点都居左下,于是实际上可以分析出一条「汉字基线」:像西文字母坐在基线上一样,汉字和标点符号也都坐在汉字基线上。汉字基线比汉字字面的下边缘要高。


Android中关于基线的属性

1、 android:layout_alignBaseline:
       相对布局(RalativeLayout)中使用,设置当前组件与参照组件的基线对齐,该属性为参照组件的ID。
       如果作为基线的控件的内容为多行,则以第一行作为基线。
       可以参考一篇博文写的例子:http://www.cnblogs.com/loulijun/archive/2012/10/17/2727580.html

2、android:baselineAligned:
      线性布局(LinearLayout)中使用,设置是否允许用户调整它内容的基线。默认为ture,即LinearLayout中的控件的内容是基线对齐的。
     可以参考一篇博文写的例子:http://xiaxveliang.blog.163.com/blog/static/2970803420139126302496/

3、android:baselineAlignedChildIndex:
      线性布局(LinearLayout)中使用,设置LinearLayout中第几个(从0开始计数)子组件作为基线对齐的控件,来和LinearLayout外的基线对齐。
       我们以Android官方的APIDemos中的例子(Views--Layouts--Baseline--Nested Example 1)看一下该属性,布局代码为:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="horizontal"    android:layout_width="match_parent"    android:layout_height="match_parent">    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginRight="3dip"        android:layout_gravity="center_vertical"        android:text="@string/baseline_nested_1_label" />    <!-- We want the middle textview of this vertical linear layout to      be baseline aligned with the others.-->    <LinearLayout            android:orientation="vertical"            android:baselineAlignedChildIndex="1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical">        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/arrow_up_float"/>        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginRight="5dip"            android:text="@string/baseline_nested_1_label" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/arrow_down_float"/>    </LinearLayout>    <!-- We'll point to the linear layout to baseline align by, which      in turn will point to a text view inside of it -->    <LinearLayout        android:orientation="vertical"                android:baselineAlignedChildIndex="1"                android:layout_width="wrap_content"                android:layout_gravity="center_vertical"                android:layout_height="wrap_content">        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/arrow_up_float"/>        <LinearLayout                android:orientation="vertical"                android:baselineAlignedChildIndex="2"                android:layout_width="wrap_content"                android:layout_gravity="center_vertical"                android:layout_height="wrap_content">            <ImageView                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:src="@drawable/arrow_up_float"/>            <ImageView                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:src="@drawable/arrow_up_float"/>            <TextView                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_marginRight="5dip"                    android:text="@string/baseline_nested_1_label"/>        </LinearLayout>    </LinearLayout>    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:textSize="20sp"        android:layout_gravity="center_vertical"        android:text="@string/baseline_nested_1_label" /></LinearLayout>



运行结果:



关于Baseline的属性,可以看一下Android官方的APIDemos中的例子(Views--Layouts--Baseline),里面举了9个例子,可以看一下效果,帮助理解关于Baseline的这些属性。



参考:http://zh.wikipedia.org/wiki/%E5%9F%BA%E7%B7%9A

http://www.zhihu.com/question/22183501/answer/20585814

0 0
原创粉丝点击