利用Android從0到1實(shí)現(xiàn)一個(gè)流布局控件
前言
流布局在在項(xiàng)目中還是會(huì)時(shí)不時(shí)地用到的,比如在搜索歷史記錄,分類,熱門詞語等可用標(biāo)簽來顯示的,都可以設(shè)計(jì)成流布局的展示方式。這里我從0到1實(shí)現(xiàn)了一個(gè)搜索歷史記錄的流布局。
演示效果:

實(shí)現(xiàn)步驟:
1、創(chuàng)建FlowLayoutView,創(chuàng)建數(shù)據(jù)源,并添加各個(gè)子view。
2、在onMeasure方法中遍歷子view,通過簡單計(jì)算剩余寬度,用集合存儲(chǔ)當(dāng)前行的幾個(gè)子view,再根據(jù)子view的累加高度設(shè)置自己的最終尺寸。
3、在onLayout方法中,遍歷每一行,遍歷該行的子view,依次調(diào)動(dòng)layout設(shè)置子view位置。
核心點(diǎn):
引入行的概念,每一行存儲(chǔ)自己應(yīng)該放置的子view。判斷該行剩余空間和該子view的寬度,來決定能放入該行,還是需要新建下一行來存儲(chǔ)。
主要代碼:
/**
* description 流布局viewGroup
*/
public class FlowLayoutView extends ViewGroup {
private List<Row> rows = new ArrayList<>();
private int usedWidth;
/**
* 當(dāng)前需要操作的行
*/
private Row curRow;
private int verticalPadding = 30;
private int horizontalPadding = 40;
public FlowLayoutView(Context context) {
super(context);
}
public FlowLayoutView(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
restoreLine(); //每次重新布局,屬性要初始化,避免onMeasure重復(fù)調(diào)用混亂問題
//子view設(shè)置寬高為父view大小減去padding值
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
//設(shè)置每個(gè)子view寬高,并且將每個(gè)子View歸到自己的行
for (int i = 0; i < getChildCount(); i++) {
View childView = getChildAt(i);
//設(shè)置子view設(shè)置AT_MOST模式,即布局屬性為wrap_content
int childWidthSpec = MeasureSpec.makeMeasureSpec(width, widthMode == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : widthMode);
int childHeightSpec = MeasureSpec.makeMeasureSpec(height, heightMode == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : heightMode);
childView.measure(childWidthSpec, childHeightSpec);
if (curRow == null) {
curRow = new Row();
}
//根據(jù)當(dāng)前childview寬度和剩余寬度判斷是否能放進(jìn)當(dāng)前行,放不了就要換行
if (childView.getMeasuredWidth() + horizontalPadding > width - usedWidth) {
//先換行,再放入
nextLine();
}
usedWidth += childView.getMeasuredWidth() + horizontalPadding;
curRow.addView(childView);
}
//將最后一個(gè)row加入到rows中
rows.add(curRow);
//根據(jù)子view組成的高度重設(shè)自己高度
int finalHeight = 0;
for (Row row : rows) {
finalHeight += row.height + verticalPadding;
}
setMeasuredDimension(width, finalHeight);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int top = 0;
//遍歷每一行,將每一行子view布局
for (Row row : rows) {
row.layout(top);
top = top + row.height + verticalPadding;
}
}
/**
* 換行,需要將當(dāng)前row存儲(chǔ),并且創(chuàng)建新的row,新的行使用空間置0
*/
private void nextLine() {
rows.add(curRow);
curRow = new Row();
usedWidth = 0;
}
/**
* 每次onmeasure需要重置信息
*/
private void restoreLine() {
rows.clear();
curRow = new Row();
usedWidth = 0;
}
/**
* 用于記錄每一行放置子View的信息
*/
class Row {
/**
* 該行放置的子view
*/
private List<View> childViews = new ArrayList<>();
private int height;
public void addView(View view) {
childViews.add(view);
height = view.getMeasuredHeight() > height ? view.getMeasuredHeight() : height; //高度取最高子view的高度
}
public int getSize() {
return childViews.size();
}
/**
* 將當(dāng)前childViews進(jìn)行布局
* top 當(dāng)前hang處于的頂部高度
*/
public void layout(int top) {
int leftMargin = 0;
for (int i = 0; i < childViews.size(); i++) {
View view = childViews.get(i);
view.layout(leftMargin, top, leftMargin + view.getMeasuredWidth(), top + view.getMeasuredHeight());
leftMargin = leftMargin + view.getMeasuredWidth() + horizontalPadding;
}
}
}
}
MainActivity代碼:
public class MainActivity extends AppCompatActivity {
private FlowLayoutView flowLayoutView;
private String[] tagTextArray = new String[]{"天貓精靈", "充電臺(tái)燈", "睡衣", "手表", "創(chuàng)意水杯", "夏天T恤男", "燈光機(jī)械鍵盤",
"計(jì)算機(jī)原理", "學(xué)霸筆記本", "可口可樂", "跑步機(jī)", "旅行箱", "竹漿衛(wèi)生紙", "吹風(fēng)機(jī)", "洗面奶", "窗簾"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
private void init() {
flowLayoutView = findViewById(R.id.flowlayout);
TextView tvAddTag = findViewById(R.id.tv_addtag);
tvAddTag.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
View view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.item_tagview, null);
TextView tvContent = view.findViewById(R.id.tv_content);
tvContent.setText(tagTextArray[(int) (Math.random()*tagTextArray.length)]);
flowLayoutView.addView(view);
}
});
}
}
總結(jié)
到此這篇關(guān)于利用Android從0到1實(shí)現(xiàn)一個(gè)流布局控件的文章就介紹到這了,更多相關(guān)Android實(shí)現(xiàn)流布局控件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android自定義View實(shí)現(xiàn)公交成軌跡圖
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)公交成軌跡圖,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06
Android在Fragment中實(shí)現(xiàn)監(jiān)聽觸摸事件
這篇文章主要給大家介紹了Android在Fragment中實(shí)現(xiàn)監(jiān)聽觸摸事件的相關(guān)資料,文中介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。2017-05-05
Android通過SeekBar調(diào)節(jié)布局背景顏色
這篇文章主要為大家詳細(xì)介紹了Android通過SeekBar調(diào)節(jié)布局背景顏色,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
Android開發(fā)中數(shù)據(jù)庫升級(jí)且表添加新列的方法
這篇文章主要介紹了Android開發(fā)中數(shù)據(jù)庫升級(jí)且表添加新列的方法,結(jié)合具體實(shí)例形式分析了Android數(shù)據(jù)庫升級(jí)開發(fā)過程中常見問題與相關(guān)操作技巧,需要的朋友可以參考下2017-09-09
Android調(diào)用系統(tǒng)裁剪的實(shí)現(xiàn)方法
下面小編就為大家分享一篇Android調(diào)用系統(tǒng)裁剪的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
詳解Android實(shí)現(xiàn)定時(shí)器的幾種方法
本篇文章主要介紹了詳解Android實(shí)現(xiàn)定時(shí)器的幾種方法,主要包括了Handler, Timer, Thread, AlarmManager,有興趣的可以了解一下2017-09-09
Android編程實(shí)現(xiàn)等比例顯示圖片的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)等比例顯示圖片的方法,實(shí)例分析了Android等比例縮放圖片的具體步驟與相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11

