自定义控件-优惠券布局
2018-06-27 本文已影响253人
javalong
github地址:
https://github.com/javalong/CustomView
效果
横向效果
Screenshot_20180627-175003.jpg纵向效果
Screenshot_20180627-175009.jpg
使用
(具体代码可在github上看,有demo)
以横向的为例,纵向的其实使用方式是一样的
- 非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,左右,或者上下布局
- 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>
所有可配置参数
- 非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
}
- 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>
觉得还可以的话,帮忙点个赞兄弟