99
1010在做项目的过程中发现经常地要写各种各样的点击选项的条目,常见的"设置页"的条目,一般的做法是每写一个条目选项就要写一个布局然后里面配置一堆的View,虽然也能完成效果,但是如果数量很多或者设计图效果各异就会容易出错浪费很多时间,同时一个页面如果有过多的布局嵌套也会影响效率。
1111
12- 于是,我开始找一些定制性高且内部不需要布局就能完成的框架 。最后,我找到了由[ GitLqr] ( GitLqr ) 作者开发的[ LQROptionItemView] ( https://github.com/GitLqr/LQROptionItemView ) ,大体满足需求,在此非常感谢作者[ GitLqr] ( GitLqr ) ,但是在使用过程中发现几个小问题:
12+ 于是,我开始找一些定制性高且内部通过纯Canvas就能完成所有绘制的框架 。最后,我找到了由[ GitLqr] ( GitLqr ) 作者开发的[ LQROptionItemView] ( https://github.com/GitLqr/LQROptionItemView ) ,大体满足需求,在此非常感谢作者[ GitLqr] ( GitLqr ) ,但是在使用过程中发现几个小问题:
1313
1414- ** 图片均不能设置宽度和高度**
1515- ** 图片不支持直接设置Vector矢量资源**
1616- ** 不支持顶部/底部绘制分割线**
17+ - ** 左 中 右 区域识别有误差**
18+ - ** 不支持右侧View为Switch这种常见情况**
1719
1820由于原作者的项目近几年好像都没有继续维护了,于是我打算自己动手改进以上的问题,并开源出来。
1921
2022## 主要功能
2123
2224- 绘制左、中、右侧的文字
2325- 绘制左、右侧的图片
26+ - 定制右侧的Switch(IOS风格)
2427- 设置顶部或底部的分割线
25- - 定制图片与文字的大小和距离
28+ - 定制View与文字的大小和距离
29+ - 识别左中右分区域的点击
2630
2731## 效果演示
2832
2933下图列举了几种常见的条目效果,项目还支持更多不同的效果搭配。
3034
31-
32- <img src =" http://picbed-dmingou.oss-cn-shenzhen.aliyuncs.com/img/image-20200904131126978.png " width =" 40% " height =" 40% " >
35+ <img src =" http://picbed-dmingou.oss-cn-shenzhen.aliyuncs.com/img/20200905222714.png " >
3336
3437
3538## Gradle集成方式
@@ -64,7 +67,7 @@ allprojects {
6467属性均可选,不设置的属性则不显示,⭐图片与文字的距离若不设置会有一个默认的距离,可设置任意类型的图片资源。
6568
6669``` xml
67- <com .dmingo.optionbarview.OptionBarView
70+ <com .dmingo.optionbarview.OptionBarView
6871 android : id =" @+id/opv_1"
6972 android : layout_width =" match_parent"
7073 android : layout_height =" 60dp"
@@ -80,6 +83,7 @@ allprojects {
8083 app : title =" 中间标题1"
8184 app : title_size =" 20sp"
8285 app : title_color =" @android:color/holo_red_light"
86+ app : rightViewType =" Image"
8387 app : right_view_margin_right =" 20dp"
8488 app : right_src =" @mipmap/ic_launcher"
8589 app : right_src_height =" 20dp"
@@ -91,6 +95,28 @@ allprojects {
9195 app : divide_line_left_margin =" 20dp"
9296 app : divide_line_right_margin =" 20dp" />
9397```
98+ 或者右侧为一个Switch:
99+ ``` xml
100+ <com .dmingo.optionbarview.OptionBarView
101+ android : id =" @+id/opv_switch2"
102+ android : layout_width =" match_parent"
103+ android : layout_height =" 60dp"
104+ android : layout_marginTop =" 30dp"
105+ android : background =" @android:color/white"
106+ app : right_text =" switch"
107+ app : right_view_margin_right =" 10dp"
108+ app : right_view_margin_left =" 0dp"
109+ app : rightViewType =" Switch"
110+ app : switch_background_width =" 50dp"
111+ app : switch_checkline_width =" 20dp"
112+ app : switch_uncheck_color =" @android:color/holo_blue_bright"
113+ app : switch_uncheckbutton_color =" @android:color/holo_purple"
114+ app : switch_checkedbutton_color =" @android:color/holo_green_dark"
115+ app : switch_checked_color =" @android:color/holo_green_light"
116+ app : switch_button_color =" @android:color/white"
117+ app : switch_checked =" true"
118+ />
119+ ```
94120
95121### 2、在Java代码里动态添加
96122
@@ -102,7 +128,7 @@ allprojects {
102128
103129默认开启的是整体点击模式,可以通过` setSplitMode(false) ` 手动开启
104130
105- ```
131+ ``` java
106132opv2. setOnClickListener(new View .OnClickListener () {
107133 @Override
108134 public void onClick (View view ) {
@@ -133,6 +159,19 @@ opv1.setOnOptionItemClickListener(new OptionBarView.OnOptionItemClickListener()
133159 });
134160```
135161
162+ #### 分区域点击模式下对Switch进行状态改变监听
163+ ``` java
164+ opvSwitch = findViewById(R . id. opv_switch);
165+ opvSwitch. setSplitMode(true );
166+ opvSwitch. setOnSwitchCheckedChangeListener(new OptionBarView .OnSwitchCheckedChangeListener () {
167+ @Override
168+ public void onCheckedChanged (OptionBarView view , boolean isChecked ) {
169+ Toast . makeText(MainActivity . this ," Switch是否被打开:" + isChecked,Toast . LENGTH_SHORT ). show();
170+ }
171+ });
172+ ```
173+
174+
136175### 4、API
137176
138177``` java
@@ -165,11 +204,17 @@ setRightText(int stringId)
165204setRightTextColor(int color)
166205setRightTextSize(int sp)
167206setRightTextMarginRight(int dp)
168- setRightImageMarginLeft (int dp)
169- setRightImageMarginRight (int dp)
207+ setRightViewMarginLeft (int dp)
208+ setRightViewMarginRight (int dp)
170209showRightImg(boolean flag)
171210showRightText(boolean flag)
172- setRightImageWidthHeight(int width, int Height )
211+ setRightViewWidthHeight(int width, int height)
212+ getRightViewType()
213+ showRightView(boolean flag)
214+ setChecked(boolean checked)
215+ isChecked()
216+ toggle(boolean animate)
217+
173218
174219// 点击模式
175220setSplitMode(boolean splitMode)
@@ -185,6 +230,11 @@ setDivideLineColor(int divideLineColor)
185230
186231主要是对一些图片文字的距离属性的说明。看图就能明白了。
187232
233+ 属性更新说明:
234+
235+ ~~ right_image_margin_left~~ 更新为 ` right_view_margin_left `
236+
237+ ~~ right_image_margin_right~~ 更新为 ` right_view_margin_right `
188238
189239<img src =" http://picbed-dmingou.oss-cn-shenzhen.aliyuncs.com/img/snipaste_20200904_134534.png " width =" 40% " height =" 40% " >
190240
0 commit comments