自定义控件-优惠券布局

作者: javalong | 来源:发表于2018-06-27 18:02 被阅读253次

    github地址:
    https://github.com/javalong/CustomView

    效果

    横向效果

    Screenshot_20180627-175003.jpg

    纵向效果


    Screenshot_20180627-175009.jpg

    使用

    (具体代码可在github上看,有demo)
    以横向的为例,纵向的其实使用方式是一样的

    1. 非xml
     var lp = FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, 400)
            var couponLayout = HorizontalCouponLayout.Builder()
                    .indentRadius(20.0f)
                    .mediumCircleCount(11)
                    .mediumCircleHeight(20.0f)
                    .mediumCircleWidth(10.0f)
                    .shadowRadius(20.0f)
                    .build(this)
            lp.topMargin = 200
            couponLayout.attachTo(flContent, lp)
            LayoutInflater.from(this).inflate(R.layout.item_couponlayout_left, couponLayout)
            LayoutInflater.from(this).inflate(R.layout.item_couponlayout_right, couponLayout)
    
    

    最多只允许添加2个子view,左右,或者上下布局

    1. xml
      <com.javalong.customview.lib.layout.HorizontalCouponLayout
                android:id="@+id/couponLayout"
                android:layout_width="match_parent"
                android:layout_height="101dp"
                android:layout_marginBottom="100dp"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp"
                android:layout_marginTop="100dp"
                app:jcl_HorizontalCouponLayout_indentRadius="5dp"
                app:jcl_HorizontalCouponLayout_mediumCircleCount="10"
                app:jcl_HorizontalCouponLayout_shadowRadius="5dp">
    
                <include
                    layout="@layout/item_couponlayout_left"/>
                <include
                    layout="@layout/item_couponlayout_right"/>
    
            </com.javalong.customview.lib.layout.HorizontalCouponLayout>
    
    

    所有可配置参数

    1. 非xml
           //边角裁剪的圆的半径
            fun indentRadius(indentRadius: Float): Builder {
                this.indentRadius = indentRadius
                return this
            }
            //中间圈圈的宽度
            fun mediumCircleWidth(mediumCircleWidth: Float): Builder {
                this.mediumCircleWidth = mediumCircleWidth
                return this
            }
            //中间圈圈的高度
            fun mediumCircleHeight(mediumCircleHeight: Float): Builder {
                this.mediumCircleHeight = mediumCircleHeight
                return this
            }
            //中间的圈圈数
            fun mediumCircleCount(mediumCircleCount: Int): Builder {
                this.mediumCircleCount = mediumCircleCount
                return this
            }
            //阴影大小
            fun shadowRadius(shadowRadius: Float): Builder {
                this.shadowRadius = shadowRadius
                return this
            }
    
    
    1. xml
     <declare-styleable name="jcl_HorizontalCouponLayout">
            <!--被裁剪的角上的圆的半径-->
            <attr name="jcl_HorizontalCouponLayout_indentRadius" format="dimension|reference" />
            <!--阴影大小-->
            <attr name="jcl_HorizontalCouponLayout_shadowRadius" format="dimension|reference" />
            <!--中间一排的空心圆的宽度-->
            <attr name="jcl_HorizontalCouponLayout_mediumCircleWidth" format="dimension|reference" />
            <!--中间一排的空心圆的高度-->
            <attr name="jcl_HorizontalCouponLayout_mediumCircleHeight" format="dimension|reference" />
            <!--中间一排的空心圆的个数-->
            <attr name="jcl_HorizontalCouponLayout_mediumCircleCount" format="integer|reference" />
        </declare-styleable>
    

    觉得还可以的话,帮忙点个赞兄弟

    相关文章

      网友评论

      • 6faef730638b:这个有必要自定义view吗
      • ZZombiee:小老板现在也开始疯狂自定义view了呀

      本文标题:自定义控件-优惠券布局

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