Skip to content

Commit 456e49c

Browse files
tamtomtamtom
authored
Create Readme file
1 parent 94d0a02 commit 456e49c

File tree

1 file changed

+321
-0
lines changed

1 file changed

+321
-0
lines changed

‎README.md

Lines changed: 321 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,321 @@
1+
<a href="https://opensooq.com/">
2+
<img src="https://opensooqui2.os-cdn.com/os_web/desktop/opensooq-logo.svg" alt="OpenSooq logo" title="OpenSooq" align="right" height="70" />
3+
</a>
4+
5+
Pluto [Android Slider view Library]
6+
======================
7+
![API](https://img.shields.io/badge/API-17%2B-green.svg?style=flat) [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
8+
9+
:star: Star us on GitHub — it helps!
10+
11+
[![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)
12+
13+
##### Pluto is an Easy, light wight and high performance Slider view Library for Android! You can customize it to any view since it based RecyclerView not like other libraries that has only images model and Pluto is not depending on any Image loading library
14+
15+
16+
17+
Demo
18+
======================
19+
<img src="https://github.com/OpenSooq/Pluto/blob/master/demoassets/demo_1.gif" height="440" /> <img src="https://github.com/OpenSooq/Pluto/blob/master/demoassets/demo_2.gif" height="440" />
20+
21+
## Table of content
22+
23+
* [Download](#download)
24+
* [Sample Project](#sample-project)
25+
* [Usage](#usage)
26+
* [Event Listeners](#event-listeners)
27+
* [Custom indicator](#indicator)
28+
29+
- [License](#license)
30+
31+
# Download
32+
33+
This library is available in **jCenter** which is the default Maven repository used in Android Studio. You can also import this library from source as a module.
34+
35+
```groovy
36+
dependencies {
37+
// other dependencies here
38+
implementation 'com.opensooq.android:pluto:1.2'
39+
}
40+
```
41+
42+
43+
# Sample Project
44+
We have a sample project demonstrating how to use the library.
45+
46+
Checkout the demo [here](https://github.com/OpenSooq/Pluto/tree/master/app/src/main/java/com/opensooq/plutodemo)
47+
48+
49+
50+
# Usage
51+
#### First create your own adapter extending the ``PlutoAdapter``
52+
53+
```java
54+
public class YourAdapter extends PlutoAdapter<YourModel, YourViewHolder> {
55+
56+
public YourAdapter(List<YourModel> items) {
57+
super(items);
58+
}
59+
60+
@Override
61+
public ViewHolder getViewHolder(ViewGroup parent, int viewType) {
62+
return new YourViewHolder(parent, R.layout.item_your_layout);
63+
}
64+
65+
public static class YourViewHolder extends PlutoViewHolder<YourModel> {
66+
ImageView ivPoster;
67+
TextView tvRating;
68+
69+
public YourViewHolder(ViewGroup parent, int itemLayoutId) {
70+
super(parent, itemLayoutId);
71+
ivPoster = getView(R.id.iv_poster);
72+
tvRating = getView(R.id.tv_rating);
73+
}
74+
75+
@Override
76+
public void set(YourModel item, int pos) {
77+
// yourImageLoader.with(mContext).load(item.getPosterId()).into(ivPoster);
78+
tvRating.setText(item.getImdbRating());
79+
}
80+
}
81+
}
82+
```
83+
#### Then in your xml
84+
```XML
85+
<com.opensooq.pluto.Pluto
86+
android:id="@+id/slider_view"
87+
android:layout_width="match_parent"
88+
android:layout_height="wrap_content"
89+
app:indicator_visibility="true"
90+
app:layout_constraintEnd_toEndOf="parent"
91+
app:layout_constraintStart_toStartOf="parent"
92+
app:layout_constraintTop_toTopOf="parent"/>
93+
```
94+
### finaly attach the adapter to Pluto
95+
```java
96+
Pluto pluto = findViewById(R.id.slider_view);
97+
YourAdapter adapter = new YourAdapter(yourModelsList);
98+
pluto.create(adapter);
99+
```
100+
| Method | usage |
101+
| ------ | ------ |
102+
| ``` create(PlutoAdapter adapter, long duration)``` | it is the initialization method it take your adapter and the duration of waiting between each slide |
103+
| ``` startAutoCycle() ``` | by default the value of autocycle is true, it determine to start autocycling or not |
104+
| ``` stopAutoCycle() ``` | it stops the auto cycling of the view |
105+
| ``` moveNextPosition() ``` | if you are the auto cylce is off you can manually move next with this method |
106+
| ``` movePrevPosition() ``` | if you are the auto cylce is off you can manually move to the previus item with this method |
107+
| ``` setIndicatorPosition(IndicatorPosition presetIndicator) ``` | to set the position of the indicator where values are ```CENTER_BOTTOM``` ```RIGHT_BOTTOM``` ```LEFT_BOTTOM``` ```CENTER_TOP``` ```RIGHT_TOP``` ```LEFT_TOP```|
108+
| ``` setCustomIndicator(PlutoIndicator indicator) ``` | if you want to custom the indicator use this method for custom indicators check [Custom indicators](#indicator) |
109+
110+
# Event Listeners
111+
### for item click listener its the responsibility of the ```PlutoAdapter``` to handle it,
112+
#### Example
113+
```java
114+
115+
SliderAdapter adapter = new SliderAdapter(getAvengers(), (item, position) -> {
116+
//handle clickhere
117+
});
118+
119+
adapter.setOnItemClickListener((item, position) -> {
120+
//handle click here
121+
});
122+
```
123+
### you can attach listener to the ```PlutoView``` to listen for sliding event
124+
#### Example
125+
126+
```java
127+
128+
pluto.setOnSlideChangeListener(new OnSlideChangeListener() {
129+
@Override
130+
public void onSlideChange(PlutoAdapter adapter, int position) {
131+
132+
}
133+
});
134+
```
135+
136+
# Custom indicator
137+
Add the following xml to your layout:
138+
139+
```xml
140+
<com.opensooq.pluto.PlutoIndicator
141+
android:id="@+id/custom_indicator"
142+
android:layout_width="wrap_content"
143+
android:layout_height="wrap_content"
144+
android:gravity="center"
145+
/>
146+
```
147+
### Customizable Properties
148+
149+
| Property | Description |
150+
|:----------------------|:---------------------:|
151+
| `shape` | `oval` &#124; `rect` |
152+
| `visibility` | `visible` &#124; `invisible` |
153+
| `selected_drawable unselected_drawable` | You can use an image or custom drawable as the indicator. If you decide to use your own drawable, then the built-in drawable and the properties associated with the built-in drawable will not work. |
154+
| `selected_color` `unselected_color` | the color of the indicator |
155+
| `selected_width` `unselected_width` | the width of the shape |
156+
| `selected_height` `unselected_height` | the height of the shape |
157+
|`selected_padding_left` `unselected_padding_left` `selected_padding_right` `unselected_padding_right` `selected_padding_top` `unselected_padding_top` `selected_padding_bottom` `unselected_padding_bottom` | the padding of the indicator |
158+
159+
#### Examples
160+
161+
![Demo-1](http://ww3.sinaimg.cn/mw690/610dc034jw1eh7metysj6j201y0150jn.jpg)
162+
```xml
163+
<com.opensooq.pluto.PlutoIndicator
164+
android:id="@+id/custom_indicator"
165+
android:layout_width="wrap_content"
166+
android:layout_height="wrap_content"
167+
android:gravity="center"
168+
custom:selected_color="#555555"
169+
custom:unselected_color="#55555555"
170+
custom:shape="oval"
171+
custom:selected_padding_left="3dp"
172+
custom:selected_padding_right="3dp"
173+
custom:unselected_padding_left="3dp"
174+
custom:unselected_padding_right="3dp"
175+
custom:selected_width="8dp"
176+
custom:selected_height="8dp"
177+
custom:unselected_width="4dp"
178+
custom:unselected_height="4dp"
179+
/>
180+
```
181+
182+
***
183+
184+
![Demo-2](http://ww2.sinaimg.cn/mw690/610dc034jw1eh7ml8me63j203h00z3y9.jpg)
185+
186+
```xml
187+
<com.opensooq.pluto.PlutoIndicator
188+
android:id="@+id/custom_indicator"
189+
android:layout_width="wrap_content"
190+
android:layout_height="wrap_content"
191+
android:gravity="center"
192+
custom:selected_color="#FF5500"
193+
custom:unselected_color="#55333333"
194+
custom:shape="rect"
195+
custom:selected_padding_left="2dp"
196+
custom:selected_padding_right="2dp"
197+
custom:unselected_padding_left="2dp"
198+
custom:unselected_padding_right="2dp"
199+
custom:selected_width="16dp"
200+
custom:selected_height="3dp"
201+
custom:unselected_width="16dp"
202+
custom:unselected_height="3dp"
203+
/>
204+
```
205+
206+
***
207+
208+
![Demo-3](http://ww4.sinaimg.cn/mw690/610dc034jw1eh7mp7q3fxj202900y3y9.jpg)
209+
```xml
210+
<com.opensooq.pluto.PlutoIndicator
211+
android:id="@+id/custom_indicator"
212+
android:layout_width="wrap_content"
213+
android:layout_height="wrap_content"
214+
android:gravity="center"
215+
custom:selected_color="#0095BF"
216+
custom:unselected_color="#55333333"
217+
custom:shape="rect"
218+
custom:selected_padding_left="2dp"
219+
custom:selected_padding_right="2dp"
220+
custom:unselected_padding_left="2dp"
221+
custom:unselected_padding_right="2dp"
222+
custom:selected_width="6dp"
223+
custom:selected_height="6dp"
224+
custom:unselected_width="6dp"
225+
custom:unselected_height="6dp"
226+
/>
227+
```
228+
229+
***
230+
231+
![Demo-4](http://ww4.sinaimg.cn/mw690/610dc034jw1eh7n82vqk3j203401e0sh.jpg)
232+
```xml
233+
<com.opensooq.pluto.PlutoIndicator
234+
android:id="@+id/custom_indicator"
235+
android:layout_width="wrap_content"
236+
android:layout_height="wrap_content"
237+
android:gravity="center"
238+
custom:selected_color="#0095BF"
239+
custom:unselected_color="#55333333"
240+
custom:selected_drawable="@drawable/bird"
241+
custom:shape="oval"
242+
custom:selected_padding_left="6dp"
243+
custom:selected_padding_right="6dp"
244+
custom:unselected_padding_left="2dp"
245+
custom:unselected_padding_right="2dp"
246+
custom:selected_width="6dp"
247+
custom:selected_height="6dp"
248+
custom:unselected_width="6dp"
249+
custom:unselected_height="6dp"
250+
/>
251+
```
252+
253+
**NOTE**: Because a custom image is used for the indicator, following properties will not work:
254+
255+
- `custom:selected_color`
256+
- `custom:selected_width`
257+
- `custom:selected_height`
258+
- `custom:shape`
259+
- `custom:color`
260+
- `custom:width`
261+
- `custom:height`
262+
263+
### Preset Styles
264+
265+
Source is [here](https://github.com/OpenSooq/Pluto/blob/master/pluto/src/main/res/values/styles.xml).
266+
267+
Preset-1:
268+
269+
![](http://ww3.sinaimg.cn/mw690/610dc034jw1ehdhc9drczj202l0160p7.jpg)
270+
```xml
271+
<com.opensooq.pluto.PlutoIndicator
272+
android:id="@+id/custom_indicator"
273+
style="@style/Pluto_Magnifier_Oval_Black"
274+
/>
275+
```
276+
***
277+
Preset-2:
278+
279+
![](http://ww4.sinaimg.cn/mw690/610dc034jw1ehdhc5zj9gj203a019jr5.jpg)
280+
```xml
281+
<com.opensooq.pluto.PlutoIndicator
282+
android:id="@+id/custom_indicator"
283+
style="@style/Pluto_Attractive_Rect_Blue"
284+
/>
285+
```
286+
***
287+
Preset-3:
288+
289+
![](http://ww2.sinaimg.cn/mw690/610dc034jw1ehdhc0hzb1j202g01aa9t.jpg)
290+
```xml
291+
<com.opensooq.pluto.PlutoIndicator
292+
android:id="@+id/custom_indicator"
293+
style="@style/Pluto_Corner_Oval_Orange"
294+
/>
295+
```
296+
297+
### Using the View
298+
299+
Bind it with a `PlutoView` instance.
300+
301+
```java
302+
pluto.setCustomIndicator(findViewById(R.id.custom_indicator));
303+
```
304+
305+
306+
# License
307+
308+
```
309+
Copyright 2019 OpenSooq
310+
311+
Licensed under the Apache License, Version 2.0 (the "License");
312+
you may not use this file except in compliance with the License.
313+
You may obtain a copy of the License at
314+
315+
http://www.apache.org/licenses/LICENSE-2.0
316+
317+
Unless required by applicable law or agreed to in writing, software
318+
distributed under the License is distributed on an "AS IS" BASIS,
319+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
320+
See the License for the specific language governing permissions and
321+
limitations under the License.

0 commit comments

Comments
 (0)