首页 > 代码库 > android中baselineAligned和baselineAlignedChildIndex

android中baselineAligned和baselineAlignedChildIndex

    相信大家对LinearLayout已经相当熟悉,但你们是否了解它的属性baselineAligned呢?

    Android官方文档是这么描述的:

     技术分享

     那到底这个属性是做什么用的呢?

         baselineAligned:基准线对齐。

     首先要解释什么是基准线,这个在中文中不常见,但在以字母为书写语言的其他国家非常常见。

     技术分享

      如上图所示,红线就是基线(baseline),是不是很熟悉,这不就是我们经常写英文的四条线中的第三条吗。

     技术分享

     那baselineAligned是做什么用的呢?根据官方文档,baselineAligned默认设置为true,当设置为false时,

      布局文件和它的孩子的基准线不对齐。

      让我们通过一个例子来看看效果怎样的。

     

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2     xmlns:tools="http://schemas.android.com/tools" 3     android:layout_width="match_parent" 4     android:layout_height="wrap_content" 5     android:baselineAligned="false" 6     android:orientation="horizontal"> 7  8     <TextView 9         android:layout_width="wrap_content"10         android:layout_height="wrap_content"11         android:layout_marginRight="5dip"12         android:text="TextView:p" />13     <TextView 14         android:layout_width="wrap_content"15         android:layout_height="wrap_content"16         android:layout_marginRight="5dip"17         android:textSize="30sp"18         android:text="LargeTextView:p"19         />20 </LinearLayout>

 这是将baselineAligned值设置为false时,也就是不对齐。看看运行效果:

  技术分享

  把baselineAligned值改为true。

  技术分享

差别很明显,一看就明白区别了。

android:layout_baselinealignedChildIndex属性 指当前layout是 以哪个view的基准线与其他的View进行对齐。这个属性只对Button、TextView、EditView有效且下标从0开始。大家看一段代码和效果图:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
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:text="abcdg" />

<!-- 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">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="http://www.mamicode.com/@drawable/test"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dip"
android:text="abcdg" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="http://www.mamicode.com/@drawable/test"/>
</LinearLayout>


<!-- We want the third index textview of this vertical linear layout to
be baseline aligned with the others.-->
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:baselineAlignedChildIndex="2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="http://www.mamicode.com/@drawable/test"/>

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="http://www.mamicode.com/@drawable/test"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dip"
android:text="abcdg" />
</LinearLayout>


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="abcdg" />


</LinearLayout>

效果

 

技术分享

注意,用了baselineAlignedChildIndex就不要用类似android:layout_gravity="center_vertical"这种定位的代码了,因为会冲突,就不会出现我们想要的效果了。

参考:Android 布局学习之——LinearLayout属性baselineAligned的作用及baseline

android中baselineAligned和baselineAlignedChildIndex