美文网首页android技术Constraintlayout
Android ConstraintLayout 实现角标

Android ConstraintLayout 实现角标

作者: gzl003 | 来源:发表于2021-12-14 22:07 被阅读0次

    ConstraintLayout + Placeholder 实现

    UI布局中常见的角标数量的设计如下图:
    image

    类似于这种的设计,之前的做法是 上下左右四边约束,使其角标中心位于底部view的右上角

    但是等到UI还原的时候设计小哥就提出了问题,说角标偏外了,需要往里挪一挪

    。。。。。。

    我的实现方案

    <?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"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_round_8"
            android:padding="@dimen/padding_10"
            android:text="Hello World!"
            android:textColor="@color/white"
            android:textSize="@dimen/size_20"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
        <TextView
            android:id="@+id/text_jb"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:background="@drawable/bg_round_8_red"
            android:gravity="center"
            android:text="9"
            android:textColor="@color/white"
            app:layout_constraintBottom_toTopOf="@id/zhan_wei"
            app:layout_constraintEnd_toEndOf="@id/zhan_wei"
            app:layout_constraintStart_toEndOf="@id/zhan_wei"
            app:layout_constraintTop_toTopOf="@id/zhan_wei" />
    
        <androidx.constraintlayout.widget.Placeholder
            android:id="@+id/zhan_wei"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_margin="8dp"
            app:layout_constraintBottom_toBottomOf="@id/text"
            app:layout_constraintLeft_toLeftOf="@id/text"
            app:layout_constraintRight_toRightOf="@id/text"
            app:layout_constraintTop_toTopOf="@id/text" />
    
    </androidx.constraintlayout.widget.ConstraintLayout>
    

    需要往里或者外挪多少只需要调整占位的margin 的就行了
    思路就是改变角标的参照view

    相关文章

      网友评论

        本文标题:Android ConstraintLayout 实现角标

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