Skip to content

Commit 7934787

Browse files
committed
# Conflicts: # README.md
2 parents 9df774b + e8abb50 commit 7934787

File tree

1 file changed

+59
-9
lines changed

1 file changed

+59
-9
lines changed

README.md

Lines changed: 59 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,27 +9,30 @@
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
106132
opv2.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)
165204
setRightTextColor(int color)
166205
setRightTextSize(int sp)
167206
setRightTextMarginRight(int dp)
168-
setRightImageMarginLeft(int dp)
169-
setRightImageMarginRight(int dp)
207+
setRightViewMarginLeft(int dp)
208+
setRightViewMarginRight(int dp)
170209
showRightImg(boolean flag)
171210
showRightText(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
//点击模式
175220
setSplitMode(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

Comments
 (0)