Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
# Conflicts:
#	README.md
  • Loading branch information
DMingOu committed Sep 6, 2020
2 parents 9df774b + e8abb50 commit 7934787
Showing 1 changed file with 59 additions and 9 deletions.
68 changes: 59 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,30 @@

在做项目的过程中发现经常地要写各种各样的点击选项的条目,常见的"设置页"的条目,一般的做法是每写一个条目选项就要写一个布局然后里面配置一堆的View,虽然也能完成效果,但是如果数量很多或者设计图效果各异就会容易出错浪费很多时间,同时一个页面如果有过多的布局嵌套也会影响效率。

于是,我开始找一些定制性高且内部不需要布局就能完成的框架。最后,我找到了由[GitLqr](GitLqr)作者开发的[LQROptionItemView](https://github.com/GitLqr/LQROptionItemView),大体满足需求,在此非常感谢作者[GitLqr](GitLqr),但是在使用过程中发现几个小问题:
于是,我开始找一些定制性高且内部通过纯Canvas就能完成所有绘制的框架。最后,我找到了由[GitLqr](GitLqr)作者开发的[LQROptionItemView](https://github.com/GitLqr/LQROptionItemView),大体满足需求,在此非常感谢作者[GitLqr](GitLqr),但是在使用过程中发现几个小问题:

- **图片均不能设置宽度和高度**
- **图片不支持直接设置Vector矢量资源**
- **不支持顶部/底部绘制分割线**
- **左 中 右 区域识别有误差**
- **不支持右侧View为Switch这种常见情况**

由于原作者的项目近几年好像都没有继续维护了,于是我打算自己动手改进以上的问题,并开源出来。

## 主要功能

- 绘制左、中、右侧的文字
- 绘制左、右侧的图片
- 定制右侧的Switch(IOS风格)
- 设置顶部或底部的分割线
- 定制图片与文字的大小和距离
- 定制View与文字的大小和距离
- 识别左中右分区域的点击

## 效果演示

下图列举了几种常见的条目效果,项目还支持更多不同的效果搭配。


<img src="http://picbed-dmingou.oss-cn-shenzhen.aliyuncs.com/img/image-20200904131126978.png" width="40%" height="40%">
<img src="http://picbed-dmingou.oss-cn-shenzhen.aliyuncs.com/img/20200905222714.png">


## Gradle集成方式
Expand Down Expand Up @@ -64,7 +67,7 @@ allprojects {
属性均可选,不设置的属性则不显示,⭐图片与文字的距离若不设置会有一个默认的距离,可设置任意类型的图片资源。

```xml
<com.dmingo.optionbarview.OptionBarView
<com.dmingo.optionbarview.OptionBarView
android:id="@+id/opv_1"
android:layout_width="match_parent"
android:layout_height="60dp"
Expand All @@ -80,6 +83,7 @@ allprojects {
app:title="中间标题1"
app:title_size="20sp"
app:title_color="@android:color/holo_red_light"
app:rightViewType="Image"
app:right_view_margin_right="20dp"
app:right_src="@mipmap/ic_launcher"
app:right_src_height="20dp"
Expand All @@ -91,6 +95,28 @@ allprojects {
app:divide_line_left_margin="20dp"
app:divide_line_right_margin="20dp"/>
```
或者右侧为一个Switch:
```xml
<com.dmingo.optionbarview.OptionBarView
android:id="@+id/opv_switch2"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="30dp"
android:background="@android:color/white"
app:right_text="switch"
app:right_view_margin_right="10dp"
app:right_view_margin_left="0dp"
app:rightViewType="Switch"
app:switch_background_width="50dp"
app:switch_checkline_width="20dp"
app:switch_uncheck_color="@android:color/holo_blue_bright"
app:switch_uncheckbutton_color="@android:color/holo_purple"
app:switch_checkedbutton_color="@android:color/holo_green_dark"
app:switch_checked_color="@android:color/holo_green_light"
app:switch_button_color="@android:color/white"
app:switch_checked="true"
/>
```

### 2、在Java代码里动态添加

Expand All @@ -102,7 +128,7 @@ allprojects {

默认开启的是整体点击模式,可以通过`setSplitMode(false)`手动开启

```
```java
opv2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Expand Down Expand Up @@ -133,6 +159,19 @@ opv1.setOnOptionItemClickListener(new OptionBarView.OnOptionItemClickListener()
});
```

#### 分区域点击模式下对Switch进行状态改变监听
```java
opvSwitch = findViewById(R.id.opv_switch);
opvSwitch.setSplitMode(true);
opvSwitch.setOnSwitchCheckedChangeListener(new OptionBarView.OnSwitchCheckedChangeListener() {
@Override
public void onCheckedChanged(OptionBarView view, boolean isChecked) {
Toast.makeText(MainActivity.this,"Switch是否被打开:"+isChecked,Toast.LENGTH_SHORT).show();
}
});
```


### 4、API

```java
Expand Down Expand Up @@ -165,11 +204,17 @@ setRightText(int stringId)
setRightTextColor(int color)
setRightTextSize(int sp)
setRightTextMarginRight(int dp)
setRightImageMarginLeft(int dp)
setRightImageMarginRight(int dp)
setRightViewMarginLeft(int dp)
setRightViewMarginRight(int dp)
showRightImg(boolean flag)
showRightText(boolean flag)
setRightImageWidthHeight(int width, int Height)
setRightViewWidthHeight(int width, int height)
getRightViewType()
showRightView(boolean flag)
setChecked(boolean checked)
isChecked()
toggle(boolean animate)


//点击模式
setSplitMode(boolean splitMode)
Expand All @@ -185,6 +230,11 @@ setDivideLineColor(int divideLineColor)

主要是对一些图片文字的距离属性的说明。看图就能明白了。

属性更新说明:

~~right_image_margin_left~~ 更新为 `right_view_margin_left`

~~right_image_margin_right~~ 更新为 `right_view_margin_right`

<img src="http://picbed-dmingou.oss-cn-shenzhen.aliyuncs.com/img/snipaste_20200904_134534.png" width="40%" height="40%">

Expand Down

0 comments on commit 7934787

Please sign in to comment.