美文网首页
Android 约束布局(ConstraintLayout)1.

Android 约束布局(ConstraintLayout)1.

作者: 最爱平角裤 | 来源:发表于2018-07-27 14:16 被阅读37次
    1. 圆形定位(Circular Positioning)
    • 可以设置的属性有:
      layout_constraintCircle:引用另一个控件的 id。
      layout_constraintCircleRadius:到另一个控件中心的距离。
      layout_constraintCircleAngle:控件的角度(顺时针,0 - 360 度)。
    • 试用范围:有角度关联的两个控件,常见的左上角,右上角等

      实际中: image.png
    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginLeft="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="24dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:src="@drawable/ic_launcher_background" />
    
        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintCircle="@id/imageView" 
            app:layout_constraintCircleAngle="45"
            app:layout_constraintCircleRadius="40dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@android:drawable/ic_delete" />
    </android.support.constraint.ConstraintLayout>
    
    1. 比例 (layout_constraintDimensionRatio)
      一个方向上的大小为0dp,另一个方向可指定为明确的dp值也可以使用wrap_content
      实际中:GridLayoutManger里,一方固定,另一方保持比例大小


      image.png
      <FrameLayout
            android:id="@+id/imageView5"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@color/colorPrimary"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintDimensionRatio="1:1.3"     //宽高比
            app:layout_constraintEnd_toStartOf="@+id/guideline"
            app:layout_constraintStart_toStartOf="parent" />
    

    双方都是0dp时,可以指定w或者h。
    默认为h 宽:高、 w 高:宽

    最开始用的是自定义View来约束比例

    3、百分比布局 : layout_constraintWidth_percent 和 layout_constraintHeight_percent


    image.png
    <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <TextView
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            android:background="@color/colorAccent"
            app:layout_constraintWidth_percent="0.5"
            app:layout_constraintHeight_percent="0.3"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
    
    </android.support.constraint.ConstraintLayout>
    
    • 结合百分比和比例基本能解决大部分适配需求,一个方向根据百分确定大小,另一方根据按比例约束
    1. 屏障(Barrier)。在约束布局中,可以使用属性constraint_referenced_ids属性来引用多个带约束的组件,从而将它们看作一个整体,Barrier 的介入可以完成很多其他布局不能完成的功能

    Barrier可以避免多余的嵌套达到效果:例子

    类似于Guideline,但比它更灵活,边界由控件动态确定!

    1. Group 的作用就是控制一组控件的可见性。其可使用到的属性为:
        <android.support.constraint.Group
            android:id="@+id/group"
            android:visibility="gone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:constraint_referenced_ids="textView7,textView8" />
    
    1. 其他:Placeholder、Enforcing constraints

    相关文章

      网友评论

          本文标题:Android 约束布局(ConstraintLayout)1.

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