Google Play Music Tabs and View Pager
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

Google Play View Pager And Tabs Module

##Copyright This module is base on the android module from Astuetz with some changes
Thanks astuetz for greate solution.

Description

Note: Unfortunately I have no time to support this plugin. Please fork me and help to the others if you can. Thank you.

This module is like Google Play tabs and ViewPager whit:

  • Support RTL ( Right To Left )
  • Customizing color of ( Indicator, Underline, Text, Tabs Background, Separator )
  • Add or Remove tabs in runtime
  • Changed all color in runtime
  • Using custom font and style ( Appcelerator font object )
  • Set current tab ( only creation time yet )
  • show tabs in two style ( Scrolling, Adjust with screen width )
  • set padding
  • 4 events supported ( Touch, Page Scrolled, Page Selected, Page Scroll State Changed )
  • Supported all UI element that it extends of View object except Ti.UI.Window ( ex. TextField, Button, View, Scroll View, etc. )
  • Set Tab height
  • supported android theme resource like Holo theme for all colors

###if you like the module please donate. ###
BitCoint Address:
1NLwq7hGahzHHnsAAD6P7kZ9RSKk4ReBCH

Accessing the tabs Module

To access this module from JavaScript, you would do the following:

var module = require("com.navid.tabs");
var tabs = module.createPagerTabs();

The module variable is a reference to the Module object. The tabs variable is a instance of viewpager.

Alloy

For Alloy there's a widget to wrap this module.

Reference

This module use https://github.com/astuetz/PagerSlidingTabStrip with some changes

Fork repository is here: https://github.com/dreamlearn/PagerSlidingTabStrip

module.createPagerTabs

var win = Ti.UI.createWindow();
win.open();
var module = require('com.navid.tabs');
var tabs = module.createPagerTabs();
win.add(tabs);

module.property

  • tab ( Object)
    • color ( Text color )
    • colorResource ( Android resource string, ex. "holo_blue_dark" )
    • indicatorColor
    • indicatorResource
    • underlineColor
    • underlineResource
    • dividerColor
    • dividerResource
    • backgroundColor
    • backgroundResource
    • indicatorHeight
    • underlineHeight
    • dividerPadding
    • upperCase ( if set true all tabs title will show capital case, default is false )
    • shouldExpand ( if set true the width tabs adjusted with screen width, if set false the tab enabled scrolling. default is false )
    • padding ( only right padding and left padding )
    • alignment ( module.ALIGNMENT_RIGHT or module.ALIGNMENT_LEFT, default is module.ALIGNMENT_LEFT )
    • font ( same as Appcelerator font object )
  • views
    • array
      • [0]
        • title ( Title of tab )
        • view ( Object of Appcelerator view ( Button, Label, View, ImageView and etc... except Window )
  • current ( set current tab in first time, if alignment set with ALIGNMENT_RIGHT detects itself and select tab from right to left, ex. the 1 index is first tab in right )

The priority of color and color resource is with Color, if color not set use its resource if it set ex.

{
   color: "red",
  colorResource: "holo_blue_light"
}

text will be red and colorResource will be ignored }

Usage

var win = Ti.UI.createWindow();
win.open();

var tabs = require('com.navid.tabs');

var text = Ti.UI.createTableView({
	title: "NAVID",
    backgroundColor: "white",
	data: [
    	{title: "1"},
        {title: "2"},
	    {title: "3"},
    	{title: "4"},
        {title: "5"}
	]
});

var text2 = Ti.UI.createTableView({
	title: "NAVID",
    backgroundColor: "white",
    data: [
	    {title: "1"},
    	{title: "2"},
        {title: "3"},
	    {title: "4"},
    	{title: "5"},
        {title: "6"}
	]
});

var text3 = Ti.UI.createTableView({
    title: "NAVID",
    backgroundColor: "white",
    data: [
        {title: "1"},
        {title: "2"}
    ]
});

var tabs = tabs.createPagerTabs({
    current: 4,
    tab: {
        indicatorResource: "holo_blue_light",
        colorResource: "holo_blue_light",
        backgroundColor: "white",
        alignment: tabs.ALIGNMENT_RIGHT
    },
    views: [
        {
            title: "Test1",
            view: text
        },
        {
            title: "Test2",
            view: text2
        },
        {
            title: "Test3",
            view: text3
        }
    ]
});

tabs.add("Dynamic Tab", Ti.UI.createLabel({text:"Label 1"}));
tabs.add("Dynamic Tab 2", Ti.UI.createLabel({text:"Position 2"}));

tabs.addEventListener('pageScrolled', function (evt) {
    console.log('Page Scrolled');
});

tabs.addEventListener('pageSelected', function (evt) {
    console.log('Page Selected');
});

tabs.addEventListener('pageScrollStateChanged', function (evt) {
    console.log('Page Scroll Changed');
});

tabs.addEventListener('click', function (evt) {
    console.log('Click');
});
tabs.addEventListener('longClick', function (evt) {
    console.log('Long click');
});
tabs.addEventListener('touch', function (evt) {
    console.log('Touch');
});
tabs.addEventListener('focusChange', function (evt) {
    console.log('Focus Change');
});

win.add(tabs);

Author

Full Name: Navid Ghahremani

Email: ghahramani.navid@gmail.com

Please fill free to contact and share your idea with me ( Add new feature, fixing bug, get some help and etc... )

License

It's open source and it's under Apache licenses