Skip to content

Commit

Permalink
New readme.
Browse files Browse the repository at this point in the history
  • Loading branch information
@GIGAMOLE
GIGAMOLE committed Aug 22, 2016
1 parent 850c5f4 commit da54c17
Show file tree
Hide file tree
Showing 11 changed files with 103 additions and 213 deletions.
257 changes: 57 additions & 200 deletions README.md
View file
Expand Up @@ -5,15 +5,13 @@ Infinite cycle ViewPager with two-way orientation and interactive effect.

[![DevLight](https://lh4.googleusercontent.com/-9btnRFp_eVo/V5cfwZsBpMI/AAAAAAAAC4E/s4NGoezKhpAVdVofAoez1QWpzK5Na8_cQCL0B/w147-h20-no/devlight-badge.png)](http://devlight.com.ua)

[![Android Arsenal](https://img.shields.io/badge/Android%20Arsenal-NavigationTabBar-yellow.svg?style=flat)](http://android-arsenal.com/details/1/3382)
<!--[![Android Arsenal](https://img.shields.io/badge/Android%20Arsenal-NavigationTabBar-yellow.svg?style=flat)](http://android-arsenal.com/details/1/3382)-->
[![Android](https://img.shields.io/badge/platform-android-brightgreen.svg?style=flat&label=Platform)](https://github.com/DevLight-Mobile-Agency)
[![Download](https://api.bintray.com/packages/gigamole/maven/navigationtabbar/images/download.svg) ](https://bintray.com/gigamole/maven/navigationtabbar/_latestVersion)
[![Crates.io](https://img.shields.io/crates/l/rustc-serialize.svg?maxAge=2592000&label=License)](https://github.com/DevLight-Mobile-Agency/InfiniteCycleViewPager/blob/master/LICENSE.txt)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/fa85dd3c9aa84d879b3e76be8462145e)](https://www.codacy.com/app/gigamole53/InfiniteCycleViewPager?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=DevLight-Mobile-Agency/InfiniteCycleViewPager&amp;utm_campaign=Badge_Grade)

| | | | | | |
|:-: |:-: |:-: |:-: |:-: |:-: |
![](https://lh6.googleusercontent.com/-Bf7uxUiRvfk/VvpVlkZzsVI/AAAAAAAACPA/Ysg9uuBpaL8UhsXpYPlyNJK6IJssdkMvg/w325-h552-no/hntb.gif)|![](https://lh4.googleusercontent.com/-mF70XCnMpgk/V1NnK34tnhI/AAAAAAAACkY/z0Z15Q_7gg4fMovWiEvo9agJgz7m933cQCL0B/w323-h552-no/btbntb.gif)|![](https://lh5.googleusercontent.com/-LcHHajuKNzw/Vz77El2lHsI/AAAAAAAACiQ/I0CjrMUP6R4ioH9h8nEe37LCqXmb3GJKACL0B/w317-h552-no/ntbsi.gif)|![](https://lh6.googleusercontent.com/-hMvLn-jzY3k/VzcPrGAmr4I/AAAAAAAACc0/US0yokfG23kQJEAPxFoPp-8lOUNRSPV9QCL0B/w321-h552-no/cltntb.gif)|![](https://lh4.googleusercontent.com/-k4Ac7-c2m8E/VvpVlk3ZmLI/AAAAAAAACPA/21ISoAYGZzUlvGPmIauXwfYZOKdCYIRGg/w323-h552-no/vntb.gif)|![](https://lh5.googleusercontent.com/-hmELfZQvexU/VvpVlooaPvI/AAAAAAAACPA/5HA5ic7dASwBUYqpqcfxAmfLzPPDXejqQ/w322-h552-no/ntbs.gif)
![](https://lh6.googleusercontent.com/-FATAVUtldQA/V7reKBGkq0I/AAAAAAAAC_g/PYx4RoE1TAUYtoGje5ONcUJERscxVXRmQCL0B/w402-h637-no/icvp.gif)

U can check the sample app [here](https://github.com/DevLight-Mobile-Agency/InfiniteCycleViewPager/tree/master/app).

Expand Down Expand Up @@ -63,258 +61,117 @@ Sample

<b>Parameters</b>

For `NTB` you can set such parameters as:
For `InfiniteCycleViewPager` you can set such parameters as:

- models:
- min scale:

allows you to set `NTB` models, where you set icon and color. Can be set up only via code.
allows you to set the minimum scale of left and right bottom pages.

- behavior:
- max scale:

allows you to set bottom translation behavior.
allows you to set the maximum scale of center top page.

- view pager:
- min scale offset:

allows you to connect `NTB` with `ViewPager`. If you want your can also set `OnPageChangeListener`.
allows you to set offset from edge to minimum scaled pages.

- background color:
- center scale offset:

allows you to set background to `NTB` which automatically set with offset relative to badge gravity and corners radius.
allows you to set offset from center when two pages appears.

- model selected icon:

allows you to set selected icon when current model is active.

- model title:
- medium scaled:

allows you to enable title in you model.
allows you to set is scaling would be min -> max or min -> medium -> max.

- model badge:
- scroll duration:

allows you to enable badge in you model.
allows you to set snap scrolling duration.

- use custom typeface on badge:
- scroll interpolator:

allows you to handle set of custom typeface in your badge.
allows you to set snap scrolling interpolator.

- title mode:
- page transform listener:

allows you to handle mode of the model title show. Can show all or only active.

- title size:

allows you to set titles size.

- scale mode:

allows you to handle mode of the model icon and title scale.

- tint mode:

allows you to enable or disable icon tinting.

- badge size:

allows you to set badges size.

- badge position:

allows you to set the badge position in you model. Can be: left(25%), center(50%) and right(75%).

- badge gravity:

allows you to set the badge gravity in NTB. Can be top or bottom.

- badge colors:

allows you to set the badge bg and title colors.

- typeface:

allows you to set custom typeface to your title.

- corners radius:

allows you to set corners radius of pointer.

- icon size fraction:
allows you to set page transform listener.

allows you to set icon size fraction relative to smaller model side.

- animation duration:

allows you to set animation duration.

- inactive color:

allows you to set inactive icon color.

- active color:

allows you to set active icon color.

- tab bar listener:

allows you to set listener which triggering on start or on end when you set model index.

- preview colors:

allows you to set preview colors, which generate count of models equals to count of colors.

<b>Tips</b>

Creation of models occurs through `Builder` pattern.

`ModelBuilder` requires two fields: icon and color. Title, badge title and selected icon is optional.

You can set selected icon. Resize and scale of selected icon equals to original icon.
Two-way widget need a lot of memory.

Orientation automatically detected according to `View` size.
Infinite scroll available when item count more then 2.

By default badge bg color is the active model color and badge title color is the model bg color. To reset colors just set `AUTO_COLOR` value to badge bg and title color.

By default badge sizes and title sizes is auto fit. To reset calculation just set `AUTO_SIZE` value to badge size and title size.

By default icon size fraction is `0.5F` (half of smaller side of `NTB` model). To reset scale fraction of icon to automatic just put in method `AUTO_SCALE` value.

If your set `ViewPager` and enable swipe you can action down on active pointer and do like drag.
You can set vertical or horizontal infinite cycle ViewPager.

<b>Init</b>

Check out in code init:

```java
final NavigationTabBar navigationTabBar = (NavigationTabBar) findViewById(R.id.ntb);
final ArrayList<NavigationTabBar.Model> models = new ArrayList<>();
models.add(
new NavigationTabBar.Model.Builder(
getResources().getDrawable(R.drawable.ic_first),
Color.parseColor(colors[0])
).title("Heart")
.badgeTitle("NTB")
.build()
);
models.add(
new NavigationTabBar.Model.Builder(
getResources().getDrawable(R.drawable.ic_second),
Color.parseColor(colors[1])
).title("Cup")
.badgeTitle("with")
.build()
);
models.add(
new NavigationTabBar.Model.Builder(
getResources().getDrawable(R.drawable.ic_third),
Color.parseColor(colors[2])
).title("Diploma")
.badgeTitle("state")
.build()
);
models.add(
new NavigationTabBar.Model.Builder(
getResources().getDrawable(R.drawable.ic_fourth),
Color.parseColor(colors[3])
).title("Flag")
.badgeTitle("icon")
.build()
);
models.add(
new NavigationTabBar.Model.Builder(
getResources().getDrawable(R.drawable.ic_fifth),
Color.parseColor(colors[4])
).title("Medal")
.badgeTitle("777")
.build()
);
navigationTabBar.setModels(models);
navigationTabBar.setViewPager(viewPager, 2);

navigationTabBar.setTitleMode(NavigationTabBar.TitleMode.ACTIVE);
navigationTabBar.setBadgeGravity(NavigationTabBar.BadgeGravity.BOTTOM);
navigationTabBar.setBadgePosition(NavigationTabBar.BadgePosition.CENTER);
navigationTabBar.setTypeface("fonts/custom_font.ttf");
navigationTabBar.setIsBadged(true);
navigationTabBar.setIsTitled(true);
navigationTabBar.setIsTinted(true);
navigationTabBar.setIsBadgeUseTypeface(true);
navigationTabBar.setBadgeBgColor(Color.RED);
navigationTabBar.setBadgeTitleColor(Color.WHITE);
navigationTabBar.setIsSwiped(true);
navigationTabBar.setBgColor(Color.BLACK);
navigationTabBar.setBadgeSize(10);
navigationTabBar.setTitleSize(10);
navigationTabBar.setIconSizeFraction(0.5);
// final VerticalInfiniteCycleViewPager infiniteCycleViewPager =
// (VerticalInfiniteCycleViewPager) view.findViewById(R.id.vicvp);
final HorizontalInfiniteCycleViewPager infiniteCycleViewPager =
(HorizontalInfiniteCycleViewPager) view.findViewById(R.id.hicvp);
infiniteCycleViewPager.setAdapter(...);
infiniteCycleViewPager.setScrollDuration(500);
infiniteCycleViewPager.setInterpolator(...);
infiniteCycleViewPager.setMediumScaled(true);
infiniteCycleViewPager.setMaxPageScale(0.8F);
infiniteCycleViewPager.setMinPageScale(0.5F);
infiniteCycleViewPager.setCenterPageScaleOffset(30.0F);
infiniteCycleViewPager.setMinPageScaleOffset(5.0F);
infiniteCycleViewPager.setOnInfiniteCyclePageTransformListener(...);
```

If your models is in badge mode you can set title, hide, show, toggle and update badge title like this:
If your want to get item position just call this metho:
```java
model.setTitle("Here some title to model");
model.hideBadge();
model.showBadge();
model.toggleBadge();
model.updateBadgeTitle("Here some title like NEW or some integer value");
infiniteCycleViewPager.getRealItem();
```
To enable behavior translation inside `CoordinatorLayout` when at bottom of screen:
```java
navigationTabBar.setBehaviorEnabled(true);
```

To deselect active index and reset pointer:
To update your ViewPager after some adapter update or else, you can call this method:
```java
navigationTabBar.deselect();
infiniteCycleViewPager.notifyDataSetChanged();
```

Other methods check out in sample.

And XML init:

```xml
<com.gigamole.navigationtabbar.ntb.NavigationTabBar
android:id="@+id/ntb"
android:layout_width="match_parent"
android:layout_height="50dp"
app:ntb_animation_duration="400"
app:ntb_preview_colors="@array/colors"
app:ntb_corners_radius="10dp"
app:ntb_active_color="#fff"
app:ntb_inactive_color="#000"
app:ntb_badged="true"
app:ntb_titled="true"
app:ntb_scaled="true"
app:ntb_tinted="true"
app:ntb_title_mode="all"
app:ntb_badge_position="right"
app:ntb_badge_gravity="top"
app:ntb_badge_bg_color="#ffff0000"
app:ntb_badge_title_color="#ffffffff"
app:ntb_typeface="fonts/custom_typeface.ttf"
app:ntb_badge_use_typeface="true"
app:ntb_swiped="true"
app:ntb_bg_color="#000"
app:ntb_icon_size_fraction="0.5"
app:ntb_badge_size="10sp"
app:ntb_title_size="10sp"/>

<!--<com.gigamole.infinitecycleviewpager.VerticalInfiniteCycleViewPager-->
<com.gigamole.infinitecycleviewpager.HorizontalInfiniteCycleViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
app:icvp_interpolator="..."
app:icvp_center_page_scale_offset="30dp"
app:icvp_max_page_scale="0.8"
app:icvp_medium_scaled="true"
app:icvp_min_page_scale="0.5"
app:icvp_min_page_scale_offset="5dp"
app:icvp_scroll_duration="500"/>
```

Getting Help
======

To report a specific problem or feature request, [open a new issue on Github](https://github.com/DevLight-Mobile-Agency/NavigationTabBar/issues/new).
To report a specific problem or feature request, [open a new issue on Github](https://github.com/DevLight-Mobile-Agency/InfiniteCycleViewPager/issues/new).

License
======

Apache 2.0 and MIT. See [LICENSE](https://github.com/DevLight-Mobile-Agency/NavigationTabBar/blob/master/LICENSE.txt) file for details.
Apache 2.0 and MIT. See [LICENSE](https://github.com/DevLight-Mobile-Agency/InfiniteCycleViewPager/blob/master/LICENSE.txt) file for details.

Inspiration
===========

| | | | |
|:-: |:-: |:-: |:-: |
![](https://s-media-cache-ak0.pinimg.com/originals/39/ee/33/39ee330f3460bd638284f0576bc95b65.gif)|![](https://s-media-cache-ak0.pinimg.com/564x/f4/0d/a9/f40da9e5b73eb5e0e46681eba38f1347.jpg)|![](https://s-media-cache-ak0.pinimg.com/564x/14/eb/dd/14ebddfc0d92f02be3d61ede48a9da6e.jpg)|![](https://d13yacurqjgara.cloudfront.net/users/25514/screenshots/1367175/attachments/195679/Sleep-Tracker-iPhone-UI-ramotion.png)

Thanks to [Valery Nuzhniy](https://www.pinterest.com/hevbolt/) for NTB badge design.
| | |
|:-: |:-: |
![](https://d13yacurqjgara.cloudfront.net/users/1169587/screenshots/2832006/cinema_app_gif.gif)|![](http://dbwgapw6amg93.cloudfront.net/wp-content/uploads/2016/05/personal-festival-app-beautiful-mobile-ui.jpg?097e9c)

Author
=======
Expand All @@ -329,7 +186,7 @@ Support
If you'd like to support future development and new product features, please make a payments on Gratipay and Beerpay or become a patron on Patreon.

[![Gratipay](https://img.shields.io/gratipay/user/gigamole.svg?maxAge=2592000)](https://gratipay.com/~GIGAMOLE/)
[![Beerpay](https://beerpay.io/DevLight-Mobile-Agency/NavigationTabBar/badge.svg?style=flat)](https://beerpay.io/DevLight-Mobile-Agency/NavigationTabBar)
[![Beerpay](https://beerpay.io/DevLight-Mobile-Agency/InfiniteCycleViewPager/badge.svg?style=flat)](https://beerpay.io/DevLight-Mobile-Agency/InfiniteCycleViewPager)
[![Patreon](https://lh5.googleusercontent.com/-lXI_oKp5724/V58ysdDtxHI/AAAAAAAAC7s/g91W_YT2SM0Q_VaIhDAMmoe-jHPP3ijJwCL0B/w140-h20-no/patreon-badge.png)](https://www.patreon.com/gigamole)

Also, if you use this library in applications that are available on Google Play, please report it to us or author.
Expand Down
2 changes: 1 addition & 1 deletion app/build.gradle
View file
Expand Up @@ -6,7 +6,7 @@ android {

defaultConfig {
applicationId "com.gigamole.sample"
minSdkVersion 14
minSdkVersion 11
targetSdkVersion 23
versionCode 1
versionName "1.0"
Expand Down
1 change: 1 addition & 0 deletions app/src/main/java/com/gigamole/sample/screens/HorizontalPagerFragment.java
View file
Expand Up @@ -39,6 +39,7 @@ public void onViewCreated(final View view, @Nullable final Bundle savedInstanceS
// horizontalInfiniteCycleViewPager.setMinPageScale(0.5F);
// horizontalInfiniteCycleViewPager.setCenterPageScaleOffset(30.0F);
// horizontalInfiniteCycleViewPager.setMinPageScaleOffset(5.0F);
// horizontalInfiniteCycleViewPager.setOnInfiniteCyclePageTransformListener();

// horizontalInfiniteCycleViewPager.setCurrentItem(
// horizontalInfiniteCycleViewPager.getRealItem() + 1
Expand Down
3 changes: 0 additions & 3 deletions app/src/main/java/com/gigamole/sample/screens/MainActivity.java
View file
Expand Up @@ -7,7 +7,6 @@
import com.gigamole.navigationtabstrip.NavigationTabStrip;
import com.gigamole.sample.R;
import com.gigamole.sample.adapters.MainPagerAdapter;
import com.stanko.tools.DeviceInfo;

public class MainActivity extends AppCompatActivity {

Expand All @@ -16,8 +15,6 @@ protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

DeviceInfo.init(this);

final ViewPager viewPager = (ViewPager) findViewById(R.id.vp_main);
viewPager.setAdapter(new MainPagerAdapter(getSupportFragmentManager()));
viewPager.setOffscreenPageLimit(2);
Expand Down
5 changes: 3 additions & 2 deletions app/src/main/java/com/gigamole/sample/utils/TintSelectorImageView.java
View file
Expand Up @@ -2,6 +2,7 @@

import android.content.Context;
import android.graphics.Color;
import android.graphics.PorterDuff;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ImageView;
Expand Down Expand Up @@ -33,8 +34,8 @@ public boolean onTouchEvent(final MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
// setColorFilter(TINT_SELECTOR_COLOR, PorterDuff.Mode.SRC_OVER);
// postInvalidate();
setColorFilter(TINT_SELECTOR_COLOR, PorterDuff.Mode.SRC_OVER);
postInvalidate();
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
Expand Down

0 comments on commit da54c17

Please sign in to comment.