码迷,mamicode.com
首页 > 移动开发 > 详细

一手遮天 Android - view(布局类): ConstraintLayout 约束布局(基础)

时间:2021-06-02 18:37:30      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:eof   oncreate   ntop   this   into   undle   宽高   port   TBase   

项目地址 https://github.com/webabcd/AndroidDemo
作者 webabcd

一手遮天 Android - view(布局类): ConstraintLayout 约束布局(基础)

示例如下:

/view/layout/ConstraintLayoutDemo1.java

/**
 * ConstraintLayout - 约束布局控件
 */

package com.webabcd.androiddemo.view.layout;

import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.constraintlayout.widget.ConstraintSet;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

import com.webabcd.androiddemo.R;

public class ConstraintLayoutDemo1 extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_layout_constraintlayoutdemo1);

        // 演示如何在 java 中控制 ConstraintLayout 布局,仅代码演示,没有对应的显示效果
        sample();
    }

    private void sample() {
        ConstraintLayout constraintLayout = new ConstraintLayout(this);
        TextView textView1 = new TextView(this);
        int textView1Id = View.generateViewId();
        textView1.setId(textView1Id);
        TextView textView2 = new TextView(this);
        int textView2Id = View.generateViewId();
        textView2.setId(textView2Id);
        constraintLayout.addView(textView1);
        constraintLayout.addView(textView2);

        ConstraintSet constraintSet = new ConstraintSet();
        // 前 4 个参数的意思:约束 textView2 的左侧,使其与位于 textView1 的右侧
        // 第 5 个参数的意思:约束方向上的 margin
        constraintSet.connect(textView2Id, ConstraintSet.LEFT, textView1Id, ConstraintSet.RIGHT, 0);
        // 对应 xml 中的 layout_goneMarginStart
        constraintSet.setGoneMargin(textView2Id, ConstraintSet.START, 1);
        // 对应 xml 中的 layout_constraintCircle, layout_constraintCircleAngle, layout_constraintCircleRadius
        // 约束 textView2 控件,使其位于相对于 textView1 控件的 120 角度和 150 距离(像素值)的位置
        constraintSet.constrainCircle(textView2Id, textView1Id, 120, 150);
        // 对应 xml 中的 layout_constraintDimensionRatio
        constraintSet.setDimensionRatio(textView1Id, "2:1");
        // 对应 xml 中的 layout_constraintHorizontal_bias
        constraintSet.setHorizontalBias(textView1Id, 0.5f);
        // 对应 xml 中的 layout_constraintVertical_bias
        constraintSet.setVerticalBias(textView1Id, 0.5f);
        // 约束 textView2 控件,使其相对于 textView1 控件水平居中
        constraintSet.centerHorizontally(textView2Id, textView1Id);
        // 约束 textView2 控件,使其相对于 textView1 控件垂直居中
        constraintSet.centerVertically(textView2Id, textView1Id);

        constraintSet.applyTo(constraintLayout);
    }
}

/layout/activity_view_layout_constraintlayoutdemo1.xml

<?xml version="1.0" encoding="utf-8"?>
<!--
    ConstraintLayout - 约束布局控件
        用于参照指定控件来定位当前控件,参照控件可以是指定 id 的控件,也可以是固定值“parent”(父容器)

    本例由于演示 ConstraintLayout 的基础
-->
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--
        layout_constraintLeft_toLeftOf - 约束当前控件的左侧,使其与位于指定控件的左侧
        layout_constraintLeft_toRightOf - 约束当前控件的左侧,使其与位于指定控件的右侧
        layout_constraintRight_toLeftOf
        layout_constraintRight_toRightOf
        layout_constraintTop_toTopOf
        layout_constraintTop_toBottomOf
        layout_constraintBottom_toTopOf
        layout_constraintBottom_toBottomOf
        layout_constraintBaseline_toBaselineOf
        layout_constraintStart_toEndOf
        layout_constraintStart_toStartOf
        layout_constraintEnd_toStartOf
        layout_constraintEnd_toEndOf

        layout_goneMarginLeft - 当指定的参照控件的 visibility 为 gone 时,当前控件的 MarginLeft 值
        layout_goneMarginTop
        layout_goneMarginRight
        layout_goneMarginBottom
        layout_goneMarginStart
        layout_goneMarginEnd

        注:上面的 Start 和 End 用于支持从右到左(RTL)的文字排列方式,对于从左到右的文字排列方式 Start 就是 Left,End 就是 Right
    -->
    <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView1" />
    <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView2"
        app:layout_constraintLeft_toRightOf="@+id/textView1"
        app:layout_goneMarginLeft="10dp" />
    <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView3"
        app:layout_constraintLeft_toRightOf="@+id/textView2"
        android:visibility="gone" />
    <TextView android:id="@+id/textView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView4"
        app:layout_constraintLeft_toRightOf="@+id/textView3"
        app:layout_goneMarginLeft="10dp" />

    <!--
        layout_constraintCircle - 约束当前控件,使其位于相对于指定控件的 layout_constraintCircleAngle 角度和 layout_constraintCircleRadius 距离的位置
        layout_constraintCircleAngle - 以指定控件的 Y 轴向上方向为零角度,顺时针方向的角度
        layout_constraintCircleRadius - 以指定控的中心点为起点,当前控件的中心点为终点的距离
    -->
    <TextView android:id="@+id/textView5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView5"
        app:layout_constraintCircle="@+id/textView1"
        app:layout_constraintCircleAngle="120"
        app:layout_constraintCircleRadius="150dp" />

    <!--
        layout_constraintDimensionRatio - 约束当前控件的宽高比(需要将 layout_width 和 layout_height 的其中之一设置为 0)
            比如 2:1 代表宽高比为 2:1
            比如 H,2:1 代表宽高比为 2:1
            比如 W,2:1 代表高宽比为 2:1
        注:下面的示例中控件的上下左右约束分别相对于父容器的上下左右定位,则会居中显示
    -->
    <TextView android:id="@+id/textView6" android:layout_width="wrap_content" android:background="@color/orange" android:text="TextView6"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintDimensionRatio="2:1" />

    <!--
        layout_constraintHorizontal_bias - 位于相对于屏幕左侧到右侧的指定百分比的位置(需要设置 layout_constraintLeft_toLeftOf="parent" 和 app:layout_constraintRight_toRightOf="parent")
        layout_constraintVertical_bias - 位于相对于屏幕上侧到下侧的指定百分比的位置(需要设置 layout_constraintTop_toTopOf="parent" 和 app:layout_constraintBottom_toBottomOf="parent")
    -->
    <TextView android:id="@+id/textView7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView7"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintVertical_bias="1.0"/>


    <!--
        Guideline - 辅助线,仅设计时可见
            orientation - 辅助线的方向(horizontal 或 vertical)
            layout_constraintGuide_begin - 辅助线相对于屏幕上侧的距离(horizontal)或辅助线相对于屏幕左侧的距离(vertical)
            layout_constraintGuide_end - 辅助线相对于屏幕下侧的距离(horizontal)或辅助线相对于屏幕右侧的距离(vertical)
            layout_constraintGuide_percent - 辅助线相对于屏幕上侧到下侧的百分比(horizontal)或辅助线相对于屏幕左侧到右侧的百分比(vertical)
    -->
    <androidx.constraintlayout.widget.Guideline android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="100dp" />
    <androidx.constraintlayout.widget.Guideline android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_end="100dp" />
    <androidx.constraintlayout.widget.Guideline android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.2" />

</androidx.constraintlayout.widget.ConstraintLayout>

项目地址 https://github.com/webabcd/AndroidDemo
作者 webabcd

一手遮天 Android - view(布局类): ConstraintLayout 约束布局(基础)

标签:eof   oncreate   ntop   this   into   undle   宽高   port   TBase   

原文地址:https://www.cnblogs.com/webabcd/p/android_view_layout_ConstraintLayoutDemo1.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!