鴻蒙學(xué)習(xí)-流式布局

組件代碼

package com.example.myapplication;

import ohos.agp.components.AttrSet;

import ohos.agp.components.Component;

import ohos.agp.components.ComponentContainer;

import ohos.app.Context;

import java.util.HashMap;

import java.util.Map;

public class FlowComponentextends ComponentContainerimplements Component.EstimateSizeListener, ComponentContainer.ArrangeListener {

private int yy =0;

private int xx =0;

private int maxWidth =0;

private int maxHeight =0;

private int lastHeight =0;

// 子組件索引與其布局?jǐn)?shù)據(jù)的集合

? ? private final Mapaxis =new HashMap<>();

public FlowComponent(Context context) {

super(context);

setEstimateSizeListener(this);

setArrangeListener(this);

}

public FlowComponent(Context context, AttrSet attrSet) {

super(context, attrSet);

setEstimateSizeListener(this);

setArrangeListener(this);

}

public FlowComponent(Context context, AttrSet attrSet, String styleName) {

super(context, attrSet, styleName);

setEstimateSizeListener(this);

setArrangeListener(this);

}

//測量組件的大小以確定寬度和高度瞧预。

? ? @Override

? ? public boolean onEstimateSize(int widthEstimatedConfig,int heightEstimatedConfig) {

measureChildren(widthEstimatedConfig, heightEstimatedConfig);

int width = Component.EstimateSpec.getSize(widthEstimatedConfig);

// 關(guān)聯(lián)子組件的索引與其布局?jǐn)?shù)據(jù)

? ? ? ? for (int idx =0; idx < getChildCount(); idx++) {

Component childView = getComponentAt(idx);

addChild(childView, idx, width);

}

setEstimatedSize(

Component.EstimateSpec.getChildSizeWithMode(maxWidth, widthEstimatedConfig,0),

Component.EstimateSpec.getChildSizeWithMode(maxHeight, heightEstimatedConfig,0));

return true;

}

private void measureChildren(int widthEstimatedConfig,int heightEstimatedConfig) {

for (int idx =0; idx < getChildCount(); idx++) {

Component childView = getComponentAt(idx);

if (childView !=null) {

measureChild(childView, widthEstimatedConfig, heightEstimatedConfig);

}

}

}

private void measureChild(Component child,int parentWidthMeasureSpec,int parentHeightMeasureSpec) {

ComponentContainer.LayoutConfig lc = child.getLayoutConfig();

int childWidthMeasureSpec = EstimateSpec.getChildSizeWithMode(

lc.width, parentWidthMeasureSpec, EstimateSpec.UNCONSTRAINT);

int childHeightMeasureSpec = EstimateSpec.getChildSizeWithMode(

lc.height, parentHeightMeasureSpec, EstimateSpec.UNCONSTRAINT);

child.estimateSize(childWidthMeasureSpec, childHeightMeasureSpec);

}

private void invalidateValues() {

xx =0;

yy =0;

maxWidth =0;

maxHeight =0;

axis.clear();

}

private void addChild(Component component,int id,int layoutWidth) {

Layout layout =new Layout();

layout.positionX =xx + component.getMarginLeft();

layout.positionY =yy + component.getMarginTop();

layout.width = component.getEstimatedWidth();

layout.height = component.getEstimatedHeight();

if ((xx + layout.width) > layoutWidth) {

xx =0;

yy +=lastHeight;

lastHeight =0;

layout.positionX =xx + component.getMarginLeft();

layout.positionY =yy + component.getMarginTop();

}

axis.put(id, layout);

lastHeight = Math.max(lastHeight, layout.height + component.getMarginBottom());

xx += layout.width + component.getMarginRight();

maxWidth = Math.max(maxWidth, layout.positionX + layout.width);

maxHeight = Math.max(maxHeight, layout.positionY + layout.height);

}

@Override

? ? public boolean onArrange(int i,int i1,int i2,int i3) {

// 對各個子組件進行布局

? ? ? ? for (int idx =0; idx < getChildCount(); idx++) {

Component childView = getComponentAt(idx);

Layout layout =axis.get(idx);

if (layout !=null) {

childView.setTag(layout.toString());

childView.arrange(layout.positionX, layout.positionY, layout.width, layout.height);

}

}

return true;

}

private static class Layout {

int positionX =0;

int positionY =0;

int width =0;

int height =0;

}

}


布局樣式

<?xml version="1.0" encoding="utf-8"?>

<StackLayout

? ? xmlns:ohos="http://schemas.huawei.com/res/ohos"

? ? ohos:id="$+id:sl"

? ? ohos:height="match_parent"

? ? ohos:width="match_parent">

<com.example.myapplication.FlowComponent

? ? ? ? ohos:id="$+id:fc"

? ? ? ? ohos:height="match_parent"

? ? ? ? ohos:width="match_content"/>

</StackLayout>


AbilitySlice代碼

package com.example.myapplication.slice;

import com.example.myapplication.FlowComponent;

import com.example.myapplication.ResourceTable;

import ohos.aafwk.ability.AbilitySlice;

import ohos.aafwk.content.Intent;

import ohos.agp.colors.RgbColor;

import ohos.agp.components.*;

import ohos.agp.components.element.ShapeElement;

import ohos.agp.utils.Color;

import ohos.agp.utils.LayoutAlignment;

import ohos.agp.window.dialog.ToastDialog;

public class MainAbilitySliceextends AbilitySlice {

String[]str = {"yi","er","san","si","wu","liu","qi","ba","jiu","shi","111111111111111111","222222222222222222222","3333","4444444","5555555555"};

@Override

? ? public void onStart(Intent intent) {

super.onStart(intent);

super.setUIContent(ResourceTable.Layout_ability_main);

FlowComponent fc = (FlowComponent) findComponentById(ResourceTable.Id_fc);

for (int i =0; i

fc.addComponent(getText(str[i]));

}

}

public Text getText(String msg) {

Text text =new Text(getContext());

text.setText(msg);

text.setTextSize(50);

text.setClickedListener(new Component.ClickedListener() {

@Override

? ? ? ? ? ? public void onClick(Component component) {

showToast(msg);

}

});

text.setTextColor(Color.WHITE);

text.setMarginsLeftAndRight(30,30);

text.setMarginsTopAndBottom(15,15);

text.setPadding(10,10,10,10);

text.setTruncationMode(Text.TruncationMode.ELLIPSIS_AT_MIDDLE);

ShapeElement element =new ShapeElement();

element.setRgbColor(new RgbColor(78,88,99));

element.setCornerRadius(15);

text.setBackground(element);

return text;

}

public void showToast(String msg) {

ToastDialog dialog =new ToastDialog(getContext());

dialog.setAlignment(LayoutAlignment.CENTER);

dialog.setText(msg);

dialog.show();

}

}



?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市突倍,隨后出現(xiàn)的幾起案子鸠澈,更是在濱河造成了極大的恐慌,老刑警劉巖掠廓,帶你破解...
    沈念sama閱讀 221,576評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件简烘,死亡現(xiàn)場離奇詭異苔严,居然都是意外死亡,警方通過查閱死者的電腦和手機孤澎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,515評論 3 399
  • 文/潘曉璐 我一進店門届氢,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人覆旭,你說我怎么就攤上這事退子。” “怎么了型将?”我有些...
    開封第一講書人閱讀 168,017評論 0 360
  • 文/不壞的土叔 我叫張陵寂祥,是天一觀的道長。 經(jīng)常有香客問我七兜,道長丸凭,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,626評論 1 296
  • 正文 為了忘掉前任腕铸,我火速辦了婚禮惜犀,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘狠裹。我一直安慰自己虽界,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 68,625評論 6 397
  • 文/花漫 我一把揭開白布酪耳。 她就那樣靜靜地躺著浓恳,像睡著了一般。 火紅的嫁衣襯著肌膚如雪碗暗。 梳的紋絲不亂的頭發(fā)上颈将,一...
    開封第一講書人閱讀 52,255評論 1 308
  • 那天,我揣著相機與錄音言疗,去河邊找鬼晴圾。 笑死,一個胖子當(dāng)著我的面吹牛噪奄,可吹牛的內(nèi)容都是我干的死姚。 我是一名探鬼主播,決...
    沈念sama閱讀 40,825評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼勤篮,長吁一口氣:“原來是場噩夢啊……” “哼都毒!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起碰缔,我...
    開封第一講書人閱讀 39,729評論 0 276
  • 序言:老撾萬榮一對情侶失蹤账劲,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體瀑焦,經(jīng)...
    沈念sama閱讀 46,271評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡腌且,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,363評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了榛瓮。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片铺董。...
    茶點故事閱讀 40,498評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖禀晓,靈堂內(nèi)的尸體忽然破棺而出精续,到底是詐尸還是另有隱情,我是刑警寧澤粹懒,帶...
    沈念sama閱讀 36,183評論 5 350
  • 正文 年R本政府宣布驻右,位于F島的核電站,受9級特大地震影響崎淳,放射性物質(zhì)發(fā)生泄漏堪夭。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,867評論 3 333
  • 文/蒙蒙 一拣凹、第九天 我趴在偏房一處隱蔽的房頂上張望森爽。 院中可真熱鬧,春花似錦嚣镜、人聲如沸爬迟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,338評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽付呕。三九已至,卻和暖如春跌捆,著一層夾襖步出監(jiān)牢的瞬間徽职,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,458評論 1 272
  • 我被黑心中介騙來泰國打工佩厚, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蹋偏,地道東北人乎莉。 一個月前我還...
    沈念sama閱讀 48,906評論 3 376
  • 正文 我出身青樓桅狠,卻偏偏與公主長得像蚕泽,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子钙姊,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,507評論 2 359

推薦閱讀更多精彩內(nèi)容