美文网首页
RelavtiveLayout梅花布局,margin与paddi

RelavtiveLayout梅花布局,margin与paddi

作者: 小星star | 来源:发表于2019-01-21 16:47 被阅读7次
  1. 梅花布局:
    首先确定中心位置,其次根据中心位置的上下左右放置图片
    layout_toLeftOf
    layout_toRightOf
    layout_above
    layout_below

    image.png
     <RelativeLayout 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">
    
         <ImageView
             android:id="@+id/img1"
             android:layout_width="80dp"
             android:layout_height="80dp"
             android:layout_centerHorizontal="true"
             android:layout_centerVertical="true"
             android:background="@color/prue"
             tools:srcCompat="@tools:sample/backgrounds/scenic" />
         <ImageView
             android:id="@+id/img2"
             android:layout_width="80dp"
             android:layout_height="80dp"
             android:layout_toLeftOf="@id/img1"
             android:layout_centerVertical="true"
             android:background="@color/prue"
             tools:srcCompat="@tools:sample/backgrounds/scenic" />
         <ImageView
             android:id="@+id/img3"
             android:layout_width="80dp"
             android:layout_height="80dp"
             android:layout_toRightOf="@id/img1"
             android:layout_centerVertical="true"
             android:background="@color/prue"
             tools:srcCompat="@tools:sample/backgrounds/scenic" />
         <ImageView
             android:id="@+id/img4"
             android:layout_width="80dp"
             android:layout_height="80dp"
             android:layout_above="@id/img1"
             android:layout_centerHorizontal="true"
             android:background="@color/prue"
             tools:srcCompat="@tools:sample/backgrounds/scenic" />
         <ImageView
             android:id="@+id/img5"
             android:layout_width="80dp"
             android:layout_height="80dp"
             android:layout_below="@id/img1"
             android:layout_centerHorizontal="true"
             android:background="@color/prue"
             tools:srcCompat="@tools:sample/backgrounds/scenic" />
     </RelativeLayout>
    
  2. margin 与 padding
    margin是“偏移”,组件间的距离
    padding是“填充”,是组件内部的距离(由于填充导致距离)

    image.png
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
    
      <Button
          android:id="@+id/btn1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="按钮一"/>
    
      <Button
          android:id="@+id/btn2"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_toRightOf="@id/btn1"
          android:paddingLeft="100dp"
          android:text="按钮二" />
    
      <Button
          android:id="@+id/btn3"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="按钮三"
          android:layout_alignParentBottom="true"/>
    
      <Button
          android:id="@+id/btn4"
          android:layout_marginLeft="100dp"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="按钮四"
          android:layout_toRightOf="@id/btn3"
          android:layout_alignParentBottom="true"/>
    </RelativeLayout>
    

相关文章

网友评论

      本文标题:RelavtiveLayout梅花布局,margin与paddi

      本文链接:https://www.haomeiwen.com/subject/lbgcjqtx.html