Android-ConstraintSet进阶-不同显示效果

作者: MonkeyLei | 来源:发表于2019-07-12 09:33 被阅读6次

Android-ConstraintSet进阶-不同显示效果
无缝LCD液晶拼接屏 or 小间距LED显示屏？
Sqlite Column 包含 ;\u000导致无法模糊匹配
图片裁剪组件
Android：pt 、sp、dp之间的换算
医学图像一致性
Android基础03
八周职场PPT之八8/8
自定义控件
网络设计的原理（一）——桧山佐知子

有时候我们同一个页面的某些部分需要根据用户状态来显示，比如下面这些情况：

image

页面其他部分都是相同的，所以我们可以看出不同的地方有：

1.按钮的显示不同（不同的按钮，按钮提示不同，位置不同，是否显示）

2.右上角是否显示相关状态的图标

按照以前本人的做法：

1. 采用一个页面布局（相对布局），把所有的布局情况全部做好，代码中利用setVisibility(View.GONE)来显示或者隐藏；

2.定义多套这种头布局文件，然后利用inlcude的方式动态添加到布局里面

3.这是作为菜鸟的我能想到的布局方式，或者还有其他的方式吧....

Now，现在我们看看利用布局，然后利用隐藏是否可以达到效果吧，目前还可以不需要Constrainset来实现。来看看按钮吧先:

1. 有时候需要同时显示两个按钮，这两个按钮左侧与左上角图标对齐，同时第二个按钮与左边是有间距的哟。

2. 然后某些情况下，左侧按钮消失，右侧按钮靠左边显示（我知道你有很多办法实现的啦）

@1 按钮层利用相对布局的方式 (控制acd_getCandyRoot 和 acd_getCandyBtn 的显示隐藏就可以达到显示状态了

         <?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"
    tools:context=".Main3Activity">

    <android.support.constraint.ConstraintLayout
        android:id="@+id/acd_titleRoot"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/acd_logo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="30dp"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="30dp"
            android:scaleType="fitXY"
            android:src="@mipmap/ic_launcher"
            app:layout_constraintBottom_toTopOf="@id/acd_getCandyRoot"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <RelativeLayout
            android:id="@+id/acd_getCandyRoot"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0"
            app:layout_constraintStart_toStartOf="@id/acd_logo"
            app:layout_constraintTop_toBottomOf="@id/acd_logo">

            <TextView
                android:id="@+id/acd_getCandyBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="20dp"
                android:background="@color/colorPrimary"
                android:paddingBottom="7dp"
                android:paddingLeft="33dp"
                android:paddingRight="33dp"
                android:paddingTop="7dp"
                android:text="立即领取"
                android:textSize="15sp" />

            <TextView
                android:id="@+id/acd_invation_timeBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@id/acd_getCandyBtn"
                android:background="@color/colorAccent"
                android:paddingBottom="6dp"
                android:paddingLeft="16dp"
                android:paddingRight="16dp"
                android:paddingTop="6dp"
                android:text="邀请好友领取"
                android:textColor="@color/colorPrimary"
                android:textSize="15sp" />
        </RelativeLayout>
    </android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

image

@1 约束同样来一套 , 同样的控制方式也可以滴

        <?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"
    tools:context=".Main3Activity">

    <android.support.constraint.ConstraintLayout
        android:id="@+id/acd_titleRoot"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/acd_logo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="30dp"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="30dp"
            android:scaleType="fitXY"
            android:src="@mipmap/ic_launcher"
            app:layout_constraintBottom_toTopOf="@id/acd_getCandyRoot"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <android.support.constraint.ConstraintLayout
            android:id="@+id/acd_getCandyRoot"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0"
            app:layout_constraintStart_toStartOf="@id/acd_logo"
            app:layout_constraintTop_toBottomOf="@id/acd_logo">

            <TextView
                android:id="@+id/acd_getCandyBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                android:paddingBottom="7dp"
                android:layout_marginRight="20dp"
                android:paddingLeft="33dp"
                android:paddingRight="33dp"
                android:paddingTop="7dp"
                android:text="立即领取"
                android:textSize="15sp"
                app:layout_constraintEnd_toStartOf="@id/acd_invation_timeBtn"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/acd_invation_timeBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@color/colorAccent"
                android:paddingBottom="6dp"
                android:paddingLeft="16dp"
                android:paddingRight="16dp"
                android:paddingTop="6dp"
                android:text="邀请好友领取"
                android:textColor="@color/colorPrimary"
                android:textSize="15sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintBottom_toBottomOf="@id/acd_getCandyBtn"
                app:layout_constraintStart_toEndOf="@id/acd_getCandyBtn"
                app:layout_constraintTop_toTopOf="@id/acd_getCandyBtn" />
        </android.support.constraint.ConstraintLayout>
    </android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

Now, 现在我们改变下布局方式，第一个按钮和第二个按钮的间距不再利用第一个按钮设置marginRight来设置，而是利用第二个按钮的marginLeft来设置:

   <android.support.constraint.ConstraintLayout
            android:id="@+id/acd_getCandyRoot"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0"
            app:layout_constraintStart_toStartOf="@id/acd_logo"
            app:layout_constraintTop_toBottomOf="@id/acd_logo">

            <TextView
                android:id="@+id/acd_getCandyBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                android:paddingBottom="7dp"
                android:paddingLeft="33dp"
                android:paddingRight="33dp"
                android:paddingTop="7dp"
                android:text="立即领取"
                android:textSize="15sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@id/acd_invation_timeBtn"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/acd_invation_timeBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:background="@color/colorAccent"
                android:paddingBottom="6dp"
                android:paddingLeft="16dp"
                android:paddingRight="16dp"
                android:paddingTop="6dp"
                android:text="邀请好友领取"
                android:textColor="@color/colorPrimary"
                android:textSize="15sp"
                app:layout_constraintBottom_toBottomOf="@id/acd_getCandyBtn"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/acd_getCandyBtn"
                app:layout_constraintTop_toTopOf="@id/acd_getCandyBtn" />
        </android.support.constraint.ConstraintLayout>

@2 当你隐藏按钮1的时候第二个按钮距离左边是有间距的

image

我们示范了一个错误的做法，那如何弥补下着错误了？这个时候我们看看ConstrainSet如何来帮助我们...

我只能说最简单的做法就是去掉间距(*** xml里面虽然是marginLeft，但是到了ConstraintSet里面记得是Start哟，否则无效的哟***):

image

多个ConstraintLayout布局嵌套，你想克隆哪个就克隆哪个哈！看你实际需求了喲.... 你想改变哪个就尽量去克隆哪个，没必要整个根约束布局都克隆。。。

另外布局里面我还想提一点就是：有时候你发下你的控件布局之间明明设置了间距margintop, marginbotttom啥的，但是就是不管用？？？

比如我们上面的布局，如果你把下面这行代码去掉：

image

你会发现:

image

你的icluncher的间距并没有用？？？？

image

@2 很多时候一开始使用约束容易出这种问题。这种高度内容包裹的布局最容易出问题。。。你约束条件如果不包含或者遗漏上下约束条件，同时你又去设置了上下间距，那么我相信约束布局渲染的时候也很难去为了设置上下间距吧！毕竟你没有给人家一个参考，没有上下约束参考，也就容易导致内部的控件也受到影响。。。

所以做约束布局尽量做到以下：

1. 尽量上下左右布局约束都设置上（当然看情况不一定哈）

2. 内部控件之间也尽量相互之间的约束都设置好

3. 对于文本控件记得设置右边约束条件，否则容易导致渲染漏文本的问题

4. 其他情况遇到再多多总结...

@2 针对上面的情况我们再利用ConstrainSet动态调整下位置看看吧

      acd_logo =  findViewById(R.id.acd_logo);
        getCandyRoot = findViewById(R.id.acd_getCandyRoot);
        acd_titleRoot =  findViewById(R.id.acd_titleRoot);
        getCandyBtn = findViewById(R.id.acd_getCandyBtn);
        invation_timeBtn = findViewById(R.id.acd_invation_timeBtn);

        ///< 克隆下按钮层的约束布局
        mConstraintSet.clone(acd_titleRoot);
        ///< 去掉间距可否?
        mConstraintSet.connect(acd_logo.getId(), ConstraintSet.START, ConstraintSet.PARENT_ID, ConstraintSet.START);
        mConstraintSet.connect(acd_logo.getId(), ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END);
        mConstraintSet.connect(acd_logo.getId(), ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP);
        mConstraintSet.connect(acd_logo.getId(), ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM);
        ///< 然后重新设置钮层的约束布局，使其生效
        mConstraintSet.applyTo(acd_titleRoot);

这是什么乱七八糟玩意哟~~~~~~

image

反正就是你想做什么事情就看这个东东能不能帮你简单实现，如果能那就用，如果不能，还不方便那就别用，好伐!!!!

如果还有什么好用的，再继续记录下.....总算是把ConstraintSet拿来自虐了一把...

Android-ConstraintSet进阶-不同显示效果
有时候我们同一个页面的某些部分需要根据用户状态来显示，比如下面这些情况：页面其他部分都是相同的，所以我们可以看出...
无缝LCD液晶拼接屏 or 小间距LED显示屏？
1、显示效果不同这两种设备显示效果不同主要是分辨率，无缝拼接屏常规的单屏分辨率可以达到1920*1080，是目...
Sqlite Column 包含 ;\u000导致无法模糊匹配
在不同数据库下sender_list的显示效果
图片裁剪组件
前言此组件的效果: 控制图片显示的区域；支持选择不同形状的蒙层，控制显示区域的形状；效果演示地址：http:...
Android：pt 、sp、dp之间的换算
dip: device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设...
医学图像一致性
我们知道相同的图片在不同的显示器上的显示效果可能是不同的。人对图像在不同设备显示的感受对医院诊断有着非常重要的意义...
Android基础03
dp:device independent pixels（设备独立像素）。不同设备有不同的显示效果，这个和设备硬件...
八周职场PPT之八8/8
不同电脑好像有色彩啊，显示效果不一样呢
自定义控件
dp、sp和px px:像素，不同设备不同的显示屏显示效果是相同的 dp:与“像素密度”密切相关。什么是像素密度...
网络设计的原理（一）——桧山佐知子
何为网络设计？相较于颜色、尺寸、显示效果固定的印刷品，网络设计因用户环境的不同，显示效果不尽相同。印刷品为单项输...