自定义控件-优惠券布局

作者: 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