Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@woxingxiao
woxingxiao committed Feb 22, 2017
1 parent f271a75 commit 6a7a730
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 184 deletions.
115 changes: 23 additions & 92 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@
**A beautiful Android custom seekbar, which has a bubble view with progress appearing upon when seeking. Highly customizable, mostly demands has been considered. `star` or `pull request` will be welcomed**
****
##Screenshot
![demo](https://github.com/woxingxiao/BubbleSeekBar/blob/master/demo.gif)

[**sample.apk**](https://github.com/woxingxiao/BubbleSeekBar/raw/master/apk/sample.apk)
![demo](https://github.com/woxingxiao/BubbleSeekBar/blob/master/screenshot/demo.gif)
![demo](https://github.com/woxingxiao/BubbleSeekBar/blob/master/screenshot/demo2.gif)
##Download
root project:`build.gradle`
```groovy
Expand All @@ -21,9 +20,26 @@ root project:`build.gradle`
app:`build.gradle`
```groovy
dependencies {
compile 'com.github.woxingxiao:BubbleSeekBar:v1.8'
compile 'com.github.woxingxiao:BubbleSeekBar:v1.9'
}
```
##Usage
Check out the demo for more details: [**`MainActivity.java`**](https://github.com/woxingxiao/BubbleSeekBar/blob/master/app/src/main/java/com/xw/samlpe/bubbleseekbar/MainActivity.java) [**`content_main.xml`**](https://github.com/woxingxiao/BubbleSeekBar/blob/master/app/src/main/res/layout/content_main.xml)
[**sample.apk**](https://github.com/woxingxiao/BubbleSeekBar/raw/master/apk/sample.apk)
##Attentions
- You must correct the offsets by setting `ScrollListener` when `BubbleSeekBar`'s parent view is scrollable, otherwise the position of bubble appears maybe be wrong. For example:
```java
mContainer.setOnYourContainerScrollListener(new OnYourContainerScrollListener() {
@Override
public void onScroll() {
// call this method to correct offsets
mBubbleSeekBar.correctOffsetWhenContainerOnScrolling();
}
});
```
- When set `bsb_touch_to_seek` attribute to be `true` , you better not to click **too fast** because the animation may not have enough time to play.
- This library depends `support:appcompat-v7` is **`provided`**, so you don't need to worry about redundant `dependencies`.

##Attributes
attr | format | description
-------- | ---|---
Expand Down Expand Up @@ -51,93 +67,8 @@ bsb_show_progress_in_float|boolean|show _bubble-progress_ in float or not, defau
bsb_bubble_color|int|color of bubble, default: same as _left-track_'s color
bsb_bubble_text_size|dimension|text size of _bubble-progress_, default: 14sp
bsb_bubble_text_color|int|text color of _bubble-progress_, default: #ffffffff
bsb_anim_duration|int|duration of animation, default: 200ms  

##Usage
```xml
<com.xw.repo.BubbleSeekBar
android:id="@+id/bubble_seek_bar_0"
android:layout_width="match_parent"
android:layout_height="16dp"
android:layout_marginTop="32dp"/>

<com.xw.repo.BubbleSeekBar
android:id="@+id/bubble_seek_bar_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
app:bsb_progress="50"
app:bsb_second_track_color="@color/color_green"
app:bsb_show_section_mark="true"
app:bsb_track_color="@color/color_gray"/>

<com.xw.repo.BubbleSeekBar
android:id="@+id/bubble_seek_bar_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
app:bsb_max="500"
app:bsb_min="100"
app:bsb_progress="200"
app:bsb_second_track_color="@color/color_green"
app:bsb_track_color="@color/color_gray"
app:bsb_track_size="4dp"/>

<com.xw.repo.BubbleSeekBar
android:id="@+id/bubble_seek_bar_3"
android:layout_width="match_parent"
android:layout_height="16dp"
android:layout_marginTop="32dp"
app:bsb_show_progress_in_float="true"
app:bsb_show_section_mark="true"
app:bsb_show_text="true"
app:bsb_show_thumb_text="true"/>

<com.xw.repo.BubbleSeekBar
android:id="@+id/bubble_seek_bar_4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
app:bsb_auto_adjust_section_mark="true"
app:bsb_bubble_color="@color/color_red_light"
app:bsb_bubble_text_color="@color/colorPrimaryDark"
app:bsb_bubble_text_size="10sp"
app:bsb_max="50"
app:bsb_min="-50"
app:bsb_second_track_color="@color/color_red"
app:bsb_show_section_mark="true"
app:bsb_show_text="true"
app:bsb_show_thumb_text="true"
app:bsb_text_position="bottom"
app:bsb_track_color="@color/color_red_light"/>

<com.xw.repo.BubbleSeekBar
android:id="@+id/bubble_seek_bar_5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
app:bsb_auto_adjust_section_mark="true"
app:bsb_second_track_color="@color/color_blue"
app:bsb_section_count="5"
app:bsb_show_progress_in_float="true"
app:bsb_show_section_mark="true"
app:bsb_show_text="true"
app:bsb_show_thumb_text="true"
app:bsb_text_position="bottom"
app:bsb_thumb_text_color="@color/colorPrimary"
app:bsb_thumb_text_size="18sp"/>
```
You must correct the offsets by setting `ScrollListener` when `BubbleSeekBar`'s parent view is scrollable, otherwise the position of bubble appears maybe be wrong. For example:
```java
mContainer.setOnYourContainerScrollListener(new OnYourContainerScrollListener() {
@Override
public void onScroll() {
// call this method to correct offsets
mBubbleSeekBar.correctOffsetWhenContainerOnScrolling();
}
});
```

bsb_anim_duration|int|duration of animation, default: 200ms
bsb_touch_to_seek|boolean|touch anywhere on _track_ to quickly seek, default: false
##License
```
The MIT License (MIT)
Expand All @@ -161,4 +92,4 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```
```
115 changes: 23 additions & 92 deletions README_zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,8 @@
**自定义`SeekBar`，进度变化由可视化气泡样式呈现，定制化程度较高，适合大部分需求。欢迎`star` or `pull request`**
****
##Screenshot
![demo](https://github.com/woxingxiao/BubbleSeekBar/blob/master/demo.gif)

[**sample.apk**](https://github.com/woxingxiao/BubbleSeekBar/raw/master/apk/sample.apk)
![demo](https://github.com/woxingxiao/BubbleSeekBar/blob/master/screenshot/demo.gif)
![demo](https://github.com/woxingxiao/BubbleSeekBar/blob/master/screenshot/demo2.gif)
##Download
root project:`build.gradle`
```groovy
Expand All @@ -19,9 +18,25 @@ root project:`build.gradle`
app:`build.gradle`
```groovy
dependencies {
compile 'com.github.woxingxiao:BubbleSeekBar:v1.8'
compile 'com.github.woxingxiao:BubbleSeekBar:v1.9'
}
```
```
##Usage
查看demo获知更多使用细节: [**`MainActivity.java`**](https://github.com/woxingxiao/BubbleSeekBar/blob/master/app/src/main/java/com/xw/samlpe/bubbleseekbar/MainActivity.java) [**`content_main.xml`**](https://github.com/woxingxiao/BubbleSeekBar/blob/master/app/src/main/res/layout/content_main.xml)
[**sample.apk**](https://github.com/woxingxiao/BubbleSeekBar/raw/master/apk/sample.apk)
##Attentions
- 如果`BubbleSeekBar`的外部容器是可滑动的控件，需要设置滑动监听来修正气泡的偏移，否则滑动后气泡出现位置可能错乱。方法如下：
```java
mContainer.setOnYourContainerScrollListener(new OnYourContainerScrollListener() {
@Override
public void onScroll() {
// 调用修正偏移方法
mBubbleSeekBar.correctOffsetWhenContainerOnScrolling();
}
});
```
- 当设置`bsb_touch_to_seek`属性为`true`时， 最好不要点击**太快**去seek进度，否则动画可能没有足够时间播放。
- 本库依赖`support:appcompat-v7`采用的**`provided`**方式，所以不必担心冗余的依赖引入。
##Attributes
attr | format | description
-------- | ---|---
Expand All @@ -48,93 +63,9 @@ bsb_thumb_text_color|int|thumb下进度文字颜色，默认与左track相同
bsb_show_progress_in_float|boolean|进度是否显示浮点数，默认false
bsb_bubble_color|int|气泡的颜色，默认与左track相同
bsb_bubble_text_size|dimension|气泡中进度文字大小，默认14sp
bsb_bubble_text_color|int|气泡中进度文字颜色，默认白色

##Usage
```xml
<com.xw.repo.BubbleSeekBar
android:id="@+id/bubble_seek_bar_0"
android:layout_width="match_parent"
android:layout_height="16dp"
android:layout_marginTop="32dp"/>

<com.xw.repo.BubbleSeekBar
android:id="@+id/bubble_seek_bar_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
app:bsb_progress="50"
app:bsb_second_track_color="@color/color_green"
app:bsb_show_section_mark="true"
app:bsb_track_color="@color/color_gray"/>

<com.xw.repo.BubbleSeekBar
android:id="@+id/bubble_seek_bar_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
app:bsb_max="500"
app:bsb_min="100"
app:bsb_progress="200"
app:bsb_second_track_color="@color/color_green"
app:bsb_track_color="@color/color_gray"
app:bsb_track_size="4dp"/>

<com.xw.repo.BubbleSeekBar
android:id="@+id/bubble_seek_bar_3"
android:layout_width="match_parent"
android:layout_height="16dp"
android:layout_marginTop="32dp"
app:bsb_show_progress_in_float="true"
app:bsb_show_section_mark="true"
app:bsb_show_text="true"
app:bsb_show_thumb_text="true"/>

<com.xw.repo.BubbleSeekBar
android:id="@+id/bubble_seek_bar_4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
app:bsb_auto_adjust_section_mark="true"
app:bsb_bubble_color="@color/color_red_light"
app:bsb_bubble_text_color="@color/colorPrimaryDark"
app:bsb_bubble_text_size="10sp"
app:bsb_max="50"
app:bsb_min="-50"
app:bsb_second_track_color="@color/color_red"
app:bsb_show_section_mark="true"
app:bsb_show_text="true"
app:bsb_show_thumb_text="true"
app:bsb_text_position="bottom"
app:bsb_track_color="@color/color_red_light"/>

<com.xw.repo.BubbleSeekBar
android:id="@+id/bubble_seek_bar_5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
app:bsb_auto_adjust_section_mark="true"
app:bsb_second_track_color="@color/color_blue"
app:bsb_section_count="5"
app:bsb_show_progress_in_float="true"
app:bsb_show_section_mark="true"
app:bsb_show_text="true"
app:bsb_show_thumb_text="true"
app:bsb_text_position="bottom"
app:bsb_thumb_text_color="@color/colorPrimary"
app:bsb_thumb_text_size="18sp"/>
```
如果`BubbleSeekBar`的外部容器是可滑动的控件，需要设置滑动监听来修正气泡的偏移，否则滑动后气泡出现位置可能错乱。方法如下：
```java
mContainer.setOnYourContainerScrollListener(new OnYourContainerScrollListener() {
@Override
public void onScroll() {
// 调用修正偏移方法
mBubbleSeekBar.correctOffsetWhenContainerOnScrolling();
}
});
```

bsb_bubble_text_color|int|气泡中进度文字颜色，默认白色
bsb_anim_duration|int|动画执行时间， 默认: 200ms
bsb_touch_to_seek|boolean|是否点击track任意地方来快速设置进度， 默认: false  
##License
```
The MIT License (MIT)
Expand Down

0 comments on commit 6a7a730

Please sign in to comment.