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

理解LinearLayout的baselineAligned属性

   相信大家对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。

  

  看,差别明显,这样就很好的理解了baselineAligned的作用了。其实,这个并不难,但我觉得不管难不难,只要不明白,就应该多思考,想想为什么。

 

转载于:https://www.cnblogs.com/H-BolinBlog/p/5376532.html

<?xml version="1.0" encoding="utf-8"?> <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:orientation="vertical" xmlns:app="http://schemas.android.com/apk/res-auto" tools:context=".PresetFragment"> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="420dp" android:layout_marginEnd="16dp" android:layout_marginStart="16dp" android:layout_marginTop="6dp"> <ImageView android:id="@+id/back" android:layout_width="24dp" android:layout_height="24dp" android:src="@drawable/auto_close" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintStart_toEndOf="@+id/back" android:text="Edit Preset" android:textSize="20sp" android:textColor="@color/black" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="@+id/back" android:layout_marginStart="5dp"/> <ImageView android:id="@+id/done" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent" android:src="@drawable/auto_ok"/> <androidx.cardview.widget.CardView android:id="@+id/button_group" android:layout_width="250dp" android:layout_height="35dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toBottomOf="@+id/done" android:layout_marginTop="20dp" app:cardCornerRadius="17dp" android:backgroundTint="#F7F7F7"> <!-- 使用 LinearLayout 来水平排列两个按钮 --> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:baselineAligned="false"> <!-- 防止 baseline 对齐干扰 --> <com.google.android.material.button.MaterialButton android:id="@+id/white_light" android:layout_width="0dp" android:layout_weight="1" android:layout_height="35dp" android:backgroundTint="@color/blue" android:text="White Light" android:textColor="@color/white" android:gravity="center" android:paddingTop="0dp" android:paddingBottom="0dp" app:cornerRadius="17dp" android:textSize="12sp" /> <com.google.android.material.button.MaterialButton android:id="@+id/color_light" android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent" android:backgroundTint="@android:color/transparent" android:textColor="@color/gray_99999" android:text="Color Light" android:textSize="12sp" /> </LinearLayout> </androidx.cardview.widget.CardView> <TextView android:id="@+id/temperature_text" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/button_group" android:text="Color Temperature" android:textColor="@color/gray_99999" android:layout_marginTop="20dp"/> <com.example.tapobulb.view.ColorPickerView android:id="@+id/colorPickerView" android:layout_width="250dp" android:layout_height="250dp" android:src="@drawable/color_select" app:layout_constraintTop_toBottomOf="@+id/temperature_text" android:layout_marginTop="40dp" android:visibility="visible" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"/> <ImageView android:id="@+id/color_select" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/color_select" app:layout_constraintTop_toBottomOf="@+id/temperature_text" android:layout_marginTop="38dp" android:visibility="gone" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"/> <TextView android:id="@+id/color_temperature" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toBottomOf="@+id/button_group" android:text="2700K" android:textColor="@color/gray333" android:layout_marginTop="20dp"/> <TextView android:id="@+id/color_value" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toBottomOf="@+id/button_group" android:visibility="visible" android:text="xxxx" android:textColor="@color/gray333" android:layout_marginTop="20dp"/> <TextView android:id="@+id/warm" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/color_temperature" android:text="Warm" android:textColor="@color/gray_99999" android:textSize="14sp" android:layout_marginTop="24dp"/> <com.example.tapobulb.view.DashedLineView android:id="@+id/line1" android:layout_width="wrap_content" android:layout_height="9dp" android:background="@drawable/dashed_line" app:layout_constraintStart_toEndOf="@id/warm" app:layout_constraintTop_toBottomOf="@+id/color_temperature" android:layout_marginStart="20dp" android:layout_marginTop="26dp"/> <TextView android:id="@+id/recommend" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/warm" android:text="Recommend" android:textColor="@color/gray_99999" android:layout_marginTop="46dp"/> <com.example.tapobulb.view.DashedLineView android:id="@+id/line2" android:layout_width="wrap_content" android:layout_height="9dp" android:background="@drawable/dashed_line" app:layout_constraintStart_toEndOf="@id/recommend" app:layout_constraintTop_toBottomOf="@+id/warm" android:layout_marginStart="20dp" android:layout_marginTop="48dp"/> <TextView android:id="@+id/white" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/recommend" android:text="White" android:textColor="@color/gray_99999" android:layout_marginTop="46dp"/> <com.example.tapobulb.view.DashedLineView android:id="@+id/line3" android:layout_width="wrap_content" android:layout_height="9dp" android:background="@drawable/dashed_line" app:layout_constraintStart_toEndOf="@id/white" app:layout_constraintTop_toBottomOf="@+id/recommend" android:layout_marginStart="20dp" android:layout_marginTop="48dp"/> <TextView android:id="@+id/daylight" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/white" android:text="Daylight" android:textColor="@color/gray_99999" android:layout_marginTop="46dp"/> <com.example.tapobulb.view.DashedLineView android:id="@+id/line4" android:layout_width="wrap_content" android:layout_height="9dp" android:background="@drawable/dashed_line" app:layout_constraintStart_toEndOf="@id/daylight" app:layout_constraintTop_toBottomOf="@+id/white" android:layout_marginStart="20dp" android:layout_marginTop="48dp"/> <TextView android:id="@+id/cool" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/daylight" android:text="Cool" android:textColor="@color/gray_99999" android:layout_marginTop="46dp"/> <com.example.tapobulb.view.DashedLineView android:id="@+id/line5" android:layout_width="wrap_content" android:layout_height="9dp" android:background="@drawable/dashed_line" app:layout_constraintStart_toEndOf="@id/cool" app:layout_constraintTop_toBottomOf="@+id/daylight" android:layout_marginStart="20dp" android:layout_marginTop="48dp"/> <ImageView android:id="@+id/color_bar" android:layout_width="60dp" android:layout_height="238dp" android:src="@drawable/color_bar" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toBottomOf="@id/color_temperature" android:layout_marginTop="46dp"/> <FrameLayout android:id="@+id/temperature_select" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/temperature_rectangle" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toBottomOf="@id/color_temperature" android:layout_marginTop="50dp"/> <View android:layout_width="match_parent" app:layout_constraintTop_toBottomOf="@+id/color_temperature" android:layout_marginTop="100dp" android:layout_height="10dp"/> <androidx.constraintlayout.widget.Group android:id="@+id/white_group" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="gone" app:constraint_referenced_ids="color_bar,color_temperature,temperature_select,temperature_select,warm,line1,recommend,line2,white,line3,daylight,line4,cool,line5"/> </androidx.constraintlayout.widget.ConstraintLayout> <View android:layout_width="match_parent" android:layout_height="10dp" android:background="@color/bg_gray" android:layout_marginTop="20dp"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/daylight" android:text="Light" android:textSize="18sp" android:layout_marginStart="16dp" android:textColor="@color/gray_99999" android:layout_weight="1" android:layout_marginTop="46dp"/> <TextView android:id="@+id/light_percent" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/daylight" android:text="64%" android:textSize="18sp" android:layout_marginStart="16dp" android:textColor="@color/gray333" android:layout_marginEnd="16dp" android:layout_marginTop="46dp"/> </LinearLayout> <SeekBar android:id="@+id/seekBar" android:layout_marginTop="20dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginEnd="16dp" android:progressDrawable="@drawable/custom_seekbar_progress" android:thumb="@drawable/seekbar_icon_resized" android:splitTrack="false" android:minHeight="4dp" android:maxHeight="4dp" android:max="100" android:progress="50" /> <View android:layout_width="match_parent" android:layout_height="30dp"/> </LinearLayout>这是我的布局,应该修改哪里li
最新发布
08-26
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值