Tangram屬性

Tangram屬性

Card屬性：

	public static final String KEY_TYPE = "type";
    public static final String KEY_STYLE = "style";
    public static final String KEY_ID = "id";
    public static final String KEY_TYPE_KEY = "typeKey";	//adapter用 = type
    public static final String KEY_TYPE_REUSEID = "reuseId";
    public static final String KEY_INDEX = "index";
    public static final String KEY_POSITION = "position";
    public static final String KEY_ITEMS = "items";
    public static final String KEY_HEADER = "header";
    public static final String KEY_FOOTER = "footer";
    public static final String KEY_LOAD_TYPE = "loadType";
    public static final String KEY_LOADED = "loaded";
    public static final String KEY_API_LOAD = "load";
    public static final String KEY_HAS_MORE = "hasMore";
    public static final String KEY_API_LOAD_PARAMS = "loadParams";
    public static final String KEY_MAX_CHILDREN = "maxChildren";

style屬性

	public static final String KEY_BIZ_ID = "bizId";
    public static final String KEY_BACKGROUND_IMAGE = "background-image";
    public static final String KEY_BACKGROUND_COLOR = "background-color";
    public static final String KEY_MARGIN = "margin";
    public static final String KEY_PADDING = "padding";
    public static final String KEY_WIDTH = "width";
    public static final String KEY_HEIGHT = "height";
    public static final String KEY_COLS = "cols";
    public static final String KEY_DISPLAY = "display";	//字體顯示風格
    public static final String KEY_ZINDEX = "zIndex";
    public static final String KEY_ASPECT_RATIO = "aspectRatio";
    public static final String KEY_RATIO = "ratio";
    public static final String KEY_ANIMATION_DURATION = "animationDuration";
    public static final String KEY_SLIDABLE = "slidable";
    public static final String KEY_FOR_LABEL = "forLabel";

一，流式佈局

依次填充，滿一行換下一行。
type屬性：
container-oneColumn 單列(一排一)
container-twoColumn 雙列
container-threeColumn 三列
container-fourColumn 四列
container-fiveColumn 五列
container-flow N列
style屬性：
margin 卡片的外間距，上右下左 [9,9,9,9],"[9,9,9,9]"，[“9”,“9”,“9”,“9”]均可，建議使用第一種
padding 卡片的內間距，上右下左 [9,9,9,9],"[9,9,9,9]",[“9”,“9”,“9”,“9”]均可，建議使用第一種
aspectRatio 每一行的寬高比 String “9”
vGap 垂直方向上，每個組件的間距 String/Number “9”
hGap 水平方向上，每個組件的間距 String/Number “9”
background-image 背景圖 String https://gw.alicdn.com/tps/TB1dkjfOXXXXXb0aXXXXXXXXXXX-1125-220.png
background-color 背景色 String “#FFFFFF”
cols 每列的百分比，如果是N列，可以只寫Array中只寫N-1項，最後一項會自動填充，如果加一起大於100，就按照填寫的來算 Array(String/Number) [“30”,“30”] 或 [30",30]

二，一拖N(N=2/3/4)佈局

左邊一個大的，右邊N個小的，可調整比例。
type屬性：
container-onePlusN 一拖2/3/4
style屬性：
margin 卡片的外間距，順序是上右下左 [9,9,9,9],"[9,9,9,9]",[“9”,“9”,“9”,“9”]均可，建議使用第一種
aspectRatio 整體寬高比 String “9”
background-image 背景圖 String https://gw.alicdn.com/tps/TB1dkjfOXXXXXb0aXXXXXXXXXXX-1125-220.png
background-color 背景色 String “#FFFFFF”
cols 設定寬度比例，內容是百分比的數字 Array(String/Number) [“30”,“30”] 或 [30,30]
rows 設定上下比例，只能有兩項 Array(String/Number) [“30”,“30”] 或 [30,30]

三，浮標佈局

可拖動，自動吸邊。
type屬性：
container-float
style屬性：
align 相對初始位置來說，初始出現位置的原點 String top_left/top_right/bottom_left/bottom_right
x 相對原點的橫向偏移量 String/Number 9
y 相對原點的縱向偏移量 String/Number 9
background-color 背景色 String “#FFFFFF”

四，固定佈局

固定在某個位置，不可拖動。
type屬性：
container-fix 固定頂部或者底部，根據屬性指定
container-scrollFix 滾動固定(滾動到某個佈局的時候，出現並固定)
style屬性：
align 相對初始位置來說，初始出現位置的原點， 8(固定底部)默認是bottom_left 9(固定頂部)默認是top_left String top_left/top_right/bottom_left/bottom_right
x 相對原點的橫向偏移量 String/Number 9
y 相對原點的縱向偏移量 String/Number 9
background-color 背景色 String “#FFFFFF”
showType 前一個顯示時顯示/前一個消失時顯示/永遠顯示(默認永遠顯示) String “showOnEnter”,”showOnLeave”,”always”

五，吸頂/吸底佈局

碰到Tangram的頂端或底端就吸住。
type屬性：
container-sticky 吸頂或吸底，根據屬性指定
style屬性：
margin 卡片的外間距，順序是上右下左 [9,9,9,9],”[9,9,9,9]”,[“9”,”9”,”9”,”9”]均可，建議使用第一種
offset 吸住的時候距離頂部或底部的偏移量，單位是系統單位 String/Number “9”
sticky 固定的位置 enum(start/end)，start 表示固定到頂部，end 表示固定到底部，默認 start “start”
enableScroll 是否平鋪&可滾動 Bool true,”false”

六，輪播佈局

適用於Banner的場景，按頁可自動滾動，循環滾動，一頁一頁的滾動。
type屬性：
container-banner
style屬性：
itemRatio 內部 View 的寬高比，寬度=滿屏幕， 高度=根據ratio計算高度，建議設置此屬性，可預先佔位，避免 Banner 有一個高度撐開的過程 Number或者String 2.4
pageRatio 內部 View 寬度佔總屏幕寬度的比例
margin 卡片的外間距，順序是上右下左 [9,9,9,9],"[9,9,9,9]",[“9”,“9”,“9”,“9”]均可，建議使用第一種
padding 卡片的內間距，順序是上右下左 [9,9,9,9],"[9,9,9,9]",[“9”,“9”,“9”,“9”]均可，建議使用第一種
autoScroll 自動滾動的間隔，單位毫秒，填寫數字大於0就開始自動滾動，默認值 String/Number “3000”,3000
specialInterval 單獨指定每一幀的自動滾動的間隔，單位毫秒，key從0開始計數；與autoScroll配合使用，當未在此聲明某一幀的停留時間的時候，使用autoScroll指定的間隔，否則使用此處聲明的間隔時間 Map {“1”: “10000”, “2”: “5000”}
infinite 是否無限滾動 String/Bool “true”,“false”
indicatorImg1 指示器選中狀態的圖片，必須帶圖片寬高比後綴 String
https://img.alicdn.com/tps/TB16i4qNXXXXXbBXFXXXXXXXXXX-32-4.png
indicatorImg2 指示器未被選中狀態的圖片，必須帶圖片寬高比後綴String https://img.alicdn.com/tps/TB1XRNFNXXXXXXKXXXXXXXXXXXX-32-4.png
indicatorGravity 指示器位置，居中居左還是居右 String “left”/“right”/“center”
indicatorPosition 指示器位置，在內部還是在外部 String “inside”/“outside”
indicatorGap 每個之間的指示器間距 String/Number “9”
indicatorMargin 指示器相對於佈局底端的間距 String/Number “9”
indicatorHeight 指示器高度 String/Number “9”
pageWidth 頁面寬度，配置了此參數，輪播佈局的滾動會變爲線性,不配置的話，就是一頁一頁的滾動 String/Number “100”
scrollMarginLeft 最左邊一幀距離佈局左邊的間距 String/Number “100”
scrollMarginRight 最右邊一幀距離佈局右邊的間距 String/Number “100”
hGap 橫向每一幀之間的間距 String/Number “100”

七，橫向線性滾動佈局

連續滾動，不是Banner一頁一頁的滾動。
type屬性：
container-scroll
style屬性：
pageWidth 頁面寬度，在iOS上配置了此參數，輪播佈局的滾動會變爲線性,不配置的話，就是一頁一頁的滾動，Android需要依賴此選型設置頁面寬度 String/Number “100”
pageHeight 頁面高度 String/Number “78”
hGap 橫向每一幀之間的間距(Android不支持) String/Number “100”
scrollMarginLeft 最左邊一幀距離佈局左邊的間距 String/Number “100”
scrollMarginRight 最右邊一幀距離佈局右邊的間距(iOS上不支持) String/Number “100”
hasIndicator 是否顯示指示器 Boolean false
indicatorColor 指示器選中顏色(iOS不支持) Color #FF0000
defaultIndicatorColor 指示器默認顏色(iOS不支持) Color #666666

八，瀑布流佈局

type屬性：
container-waterfall
style屬性：
margin 卡片的外間距，順序是上右下左 [9,9,9,9],”[9,9,9,9]”,[“9”,”9”,”9”,”9”]均可，建議使用第一種
vGap 垂直方向上，每個組件的間距 String/Number “9”
hGap 水平方向上，每個組件的間距 String/Number “9”
background-color 背景色 String “#FFFFFF”
column 列數 String/Number “3”或3