Android布局ConstraintLayout代码修改约束及辅助功能

目录
  • 实践过程
    • 代码修改约束
  • 辅助功能
    • Guideline
    • Barrier
    • Flow
    • Placeholder
    • Group和Layer

实践过程

代码修改约束

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/idConstraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/idTxt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color_00ff00"
        android:padding="10dp"
        android:text="芝麻粒儿"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
    <Button
        android:id="@+id/idBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="变化"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
public class ActivityJavaConstraintLayout extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_java_constraint);
        ConstraintLayout idConstraintLayout = findViewById(R.id.idConstraintLayout);
        findViewById(R.id.idBtn).setOnClickListener(v -> {
            ConstraintSet constraintSet = new ConstraintSet();
            constraintSet.clone(idConstraintLayout);
            //设置相对父布局剧中
            constraintSet.centerHorizontally(R.id.idTxt, ConstraintSet.PARENT_ID);
            constraintSet.centerVertically(R.id.idTxt, ConstraintSet.PARENT_ID);
            //可以添加动画
            TransitionManager.beginDelayedTransition(idConstraintLayout);
            constraintSet.applyTo(idConstraintLayout);
        });
        //还有其他形式  控件A底部和空间B顶部对其   等同于xml中属性 app:layout_constraintBottom_toTopOf
//        constraintSet.connect(R.id.idTxtA, ConstraintSet.BOTTOM, R.id.idTxtB, ConstraintSet.TOP);
    }
}

除了上面的效果,我们还能实现切换布局的时候,相同控件动画化。我们准备两个布局,布局内id一致,但是位置不同。

布局A如下:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/idConstraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/idTxt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color_00ff00"
        android:padding="10dp"
        android:text="芝麻粒儿"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
    <Button
        android:id="@+id/idBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="变化"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    <Button
        android:id="@+id/idBtnBack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="回去"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

布局B如下:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/idConstraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/idTxt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color_00ff00"
        android:padding="10dp"
        android:text="芝麻粒儿"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    <Button
        android:id="@+id/idBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="变化"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
    <Button
        android:id="@+id/idBtnBack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="回去"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
public class ActivityJavaConstraintLayout extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_java_constraint);
        ConstraintLayout idConstraintLayout = findViewById(R.id.idConstraintLayout);
        //变化
        findViewById(R.id.idBtn).setOnClickListener(v ->{
            ConstraintSet constraintSet = new ConstraintSet();
            constraintSet.clone(this,R.layout.activity_java_constraint_b);
            TransitionManager.beginDelayedTransition(idConstraintLayout);
            constraintSet.applyTo(idConstraintLayout);
        });
        //恢复
        findViewById(R.id.idBtnBack).setOnClickListener(v->{
            ConstraintSet constraintSet = new ConstraintSet();
            constraintSet.clone(this,R.layout.activity_java_constraint);
            TransitionManager.beginDelayedTransition(idConstraintLayout);
            constraintSet.applyTo(idConstraintLayout);
        });
    }
}

辅助功能

Guideline

表示辅助线,需要使用单独的不是你实际布局的View控件来做,因为是辅助工具,所以真实运行的时候不会绘制,仅在你写布局的时候帮助你绘制,辅助你完成布局,有三个相关属性:

app:layout_constraintGuide_percent=“0.5” 在父布局的百分比位置。

app:layout_constraintGuide_begin=“10dp” 距离父布局开始位置,横向为左,纵向为顶部。

app:layout_constraintGuide_end=“10dp” 距离父布局末尾位置。

需要和android:orientation结合使用,vertical是纵辅助线,horizontal是横向辅助线。

Barrier

寓意屏障,比如我们有几个不固定宽度或高度的控件,而有一个控件想一直在这几个中的最长的那个控件边缘对其,按照以前我们是将这几个控件包裹嵌套一层来实现。但是ConstraintLayout可以使用Barrier辅助工具实现。重点有两个属性app:barrierDirection表示屏障在目标控件的哪个方向,app:constraint_referenced_ids指定目标控件,注意多个逗号隔开。

<TextView
    android:id="@+id/idTxt1"
...
/>
<TextView
    android:id="@+id/idTxt2"
    app:layout_constraintTop_toBottomOf="@+id/idTxt1"
...
/>
<androidx.constraintlayout.widget.Barrier
    android:id="@+id/idBarrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="right"
    app:constraint_referenced_ids="idTxt1,idTxt2" />
<TextView
    android:id="@+id/idTxt3"
    app:layout_constraintLeft_toRightOf="@id/idBarrier"
...
/>

Flow

这是网格布局,不具体介绍了,就说一下属性吧。

  • app:flow_wrapMode="aligned":有3个值:aligned-绝对对齐(和网格对齐类似);none-默认方式,成为一排,宽度不够,从两边出去;chain-和绝对对齐有点出入的是,比如6个元素,第一排4个,第二排是2个,这2个元素会平分横屏宽度
  • app:flow_verticalGap和app:flow_horizontalGap:表示竖直间距或横向间距
  • android:orientation="horizontal":水平方向的流式还是竖直方向的流式
  • app:flow_maxElementsWrap="":表示一行几个元素
  • app:flow_verticalAlign="top":有四个值:top,bottom,center,baseline。每一行元素的对齐方式
  • app:flow_horizontalBias="float":low的bias偏移,只在style为packed时生效
  • app:flow_horizontalStyle="spread|spread_inside|packed":当wrapMode为chain或ALIGNED时生效

Placeholder

这节其实算是和小重点,感兴趣的自己去搜索吧,主要作用是占位功能,占位之后其他控件可以通过setContentId移动到该位置。

Group和Layer

能很好的控制多个控件的显示和隐藏。app:constraint_referenced_ids指定目标控件的id,多个逗号隔开。

<androidx.constraintlayout.widget.Group
    android:id="@+id/idGroup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="visible"
    app:constraint_referenced_ids="idTxt,idBtn" />

Layer不仅能实现Group的隐藏,还能修改背景,使用方式和Group一致。

以上就是Android布局ConstraintLayout代码修改约束及辅助功能的详细内容,更多关于Android ConstraintLayout 布局约束的资料请关注我们其它相关文章!

(0)

相关推荐

  • android 布局之ConstraintLayout的使用

    其实ConstraintLayout是Android Studio 2.2中主要的新增功能之一,也是Google在2016年的I/O大会上重点宣传的一个功能.是为了android可视化编辑而做的努力.android studio 的可视化编辑个人不推荐使用,不过ConstraintLayout布局的使用还是有必要了解的. 1,要想使用ConstraintLayout需要在app的build.gradle里面引入: compile 'com.android.support.constraint:c

  • Android利用ConstraintLayout实现漂亮的动画详解

    前言 最近ConstrainLayout是Android中比较火的一个东西.ConstrainLayout可以使View层级扁平化,提升性能,支持任意的边框,其目的就是修复之前layout的一些短板.其实ConstrainLayout还有一个大多数人没有注意到的特性:可以利用Constrainlayout快速构建漂亮的动画效果. 方法 我这里假设已经你已经掌握了Constrainlayout基本知识(比如:app:layout_constraintLeft_toLeftOf等).Constrai

  • Android新布局方式ConstraintLayout快速入门教程

    前言 在Android开发中,我们通常是手写布局,很少会用拖动来写布局,虽然ConstraintLayout在I/O上以拖动来展现了各种功能,我估计在以后开发中,程序员还是习惯手撸代码. 我自己试着拖着用了一下,用得不是很明白 ,而且用起来效果不是很好. 那么 直接上手撸了一下~~~ 其实很简单 Button1:app:layout_constraintBottom_toTopOf="@id/iv_head" 我们把这个属性拆开来看,constraintBottom指的本身的底部,即B

  • Android中ConstraintLayout约束布局的最全详细解析

    目录 一.ConstraintLayout概述 二.ConstraintLayout基础篇 2.1 基础操作 2.2 控件间添加约束 2.3 约束布局xml代码实现 三.ConstraintLayout 进阶篇 3.1 Chains链 3.2 尺寸约束 3.3 百分比布局 3.4 radio属性 3.5 圆形定位 四.ConstraintLayout 高级篇 4.1 Guideline 4.2 Group 4.3 Barrier 总结 一.ConstraintLayout概述 Constrain

  • Android新特性ConstraintLayout完全解析

    本文同步发表于我的微信公众号,在微信搜索 郭霖 即可关注,每天都有文章更新. 今天给大家带来2017年的第一篇文章,这里先祝大家新年好. 本篇文章的主题是ConstraintLayout.其实ConstraintLayout是Android Studio 2.2中主要的新增功能之一,也是Google在去年的I/O大会上重点宣传的一个功能.我们都知道,在传统的Android开发当中,界面基本都是靠编写XML代码完成的,虽然Android Studio也支持可视化的方式来编写界面,但是操作起来并不方

  • 详解Android ConstraintLayout 约束布局的用法

    前言 在2016年的Google I/O大会上 , Google 发布了Android Studio 2.2预览版,同时也发布了Android 新的布局方案 ConstraintLayout , 但是最近的一年也没有大规模的使用.2017年Google发布了 Android Studio 2.3 正式版,在 Android Studio 2.3 版本中新建的Module中默认的布局就是 ConstraintLayout .如下所示: <?xml version="1.0" enc

  • Android修行手册之ConstraintLayout布局使用详解

    目录 实践过程 示例一 示例二 实践过程 近期创建的项目默认是带有的,如果没有去build.gradle文件中查看有没有引入 implementation 'androidx.constraintlayout:constraintlayout:2.1.4' 截止2022年8月最新版是2.1.4 示例一 想要实现这个效果: 使用RelativeLayout无法实现,更不要说其他的了.哪怕红块底部对齐利用margin负数的形式做出来了,但是这就得是提前固定宽高,可固定高度又得考虑适配的事,或者干脆这

  • Android布局ConstraintLayout代码修改约束及辅助功能

    目录 实践过程 代码修改约束 辅助功能 Guideline Barrier Flow Placeholder Group和Layer 实践过程 代码修改约束 <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/an

  • Android布局生成分享图片代码实例

        首先, 第一次写博客,也不知道说点什么.写的不好的地方希望大家能理解一下! 然后,说一说自己的艰苦过程!因为没有写过这个功能,而公司又强需此功能,我也只好硬着头皮在网上艰苦的寻找此类功能.找了2天,最后还是找到了一篇类似的文章,经过一些修改终于是实现了此功能! 核心类: package app.makemone.ky.com.testapplication; import android.graphics.Bitmap; import android.graphics.Canvas; i

  • Android编程之代码创建布局实例分析

    本文实例讲述了Android编程之代码创建布局使用方法.分享给大家供大家参考,具体如下: 大概描述一下效果:最外层是一个 RelativeLayout 里面有自定义个LinearLayout,每个LinearLayout有两个TextView.that's it !!! private void initView() { // 获取xml的RelativeLayout layout = (RelativeLayout) findViewById(R.id.liner); for (int i =

  • Android分页中显示出下面翻页的导航栏的布局实例代码

    当页面条目过多的时候需要分页,要在布局中显示出分页的相关布局,使用android:layout_weight="11" activity_call_safe.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:lay

  • Android Selector 按下修改背景和文本颜色的实现代码

    1,selector 按下修改背景和文本颜色 [1]点击改变字体颜色 - android:state_pressed(按压状态) [2]selector状态选择器(bg_btn_two (存放 res - drawable)) 资源文件下,否则不起作用 [3] selector状态选择器(bg_btn_one (存放 res - color)) 资源文件下,否则不起作用 [3]android:state_pressed="true" 必须放在第一行,否则不生效 2,实现Demo [1]

  • Android webview注入JS代码 修改网页内容操作

    今天开发的时候遇到一个需求,就是需要隐藏webview的元素,鼓捣了半天 在stack overFlow找到了解决办法 在此记录一下 final WebView webview = (WebView)findViewById(R.id.browser); webview.getSettings().setJavaScriptEnabled(true); webview.setWebViewClient(new WebViewClient() { @Override public void onP

  • android布局优化的一些实用建议

    前言 Android的绘制优化其实可以分为两个部分,即布局(UI)优化和卡顿优化,而布局优化的核心问题就是要解决因布局渲染性能不佳而导致应用卡顿的问题,所以它可以认为是卡顿优化的一个子集. 本文主要包括以下内容 为什么要进行布局优化及android绘制,布局加载原理 获取布局文件加载耗时的方法 介绍一些布局优化的手段与方法 一些常规优化手段 为什么要进行布局优化? 为什么要进行布局优化?答案是显而易见的,如果布局嵌套过深,或者其他原因导致布局渲染性能不佳,可能会导致应用卡顿 那么布局到底是如何导

随机推荐