简单的流式布局(移动应用开发)

简单的流式布局(移动应用开发),第1张

概述1.首先创建一个自定义View类:publicclassCustomViewextendsViewGroup{privateintmleftMargin=20;privateintmtopMargin=20;publicCustomView(Contextcontext){this(context,null);}publicCustomView(Contextcontext,AttributeSeta

1.首先创建一个自定义view类:

public class CustomVIEw extends VIEwGroup {
private int mleftmargin=20;
private int mtopmargin=20;

public CustomVIEw(Context context) {
this(context,null);
}

public CustomVIEw(Context context, AttributeSet attrs) {
this(context, attrs,0);
}

public CustomVIEw(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}

@OverrIDe
protected voID onMeasure(int wIDthMeasureSpec, int heightmeasureSpec) {
super.onMeasure(wIDthMeasureSpec, heightmeasureSpec);
measureChildren(wIDthMeasureSpec,heightmeasureSpec);

int leftmargin = mleftmargin;
int topmargin = mtopmargin;

int vIEwHeight = 0;
int vIEwWIDth = 0;

//父控件传进来的宽度和高度以及对应的测量模式
int sizeWIDth = MeasureSpec.getSize(wIDthMeasureSpec);
int modeWIDth = MeasureSpec.getMode(wIDthMeasureSpec);
int sizeHeight = MeasureSpec.getSize(heightmeasureSpec);
int modeHeight = MeasureSpec.getMode(heightmeasureSpec);

switch (modeHeight){
case MeasureSpec.AT_MOST:
int measuredHeight = 0;
for (int j = 0; j < getChildCount(); j++) {
int measureDWIDth = getChildAt(j).getMeasureDWIDth();
measuredHeight = getChildAt(j).getMeasuredHeight();
if (leftmargin+measureDWIDth+mleftmargin>getWIDth()){
leftmargin=mleftmargin;
topmargin+=measuredHeight+mtopmargin;
}
leftmargin+=measureDWIDth+mleftmargin;
}
topmargin+=measuredHeight+mtopmargin;
break;
}
setMeasuredDimension(sizeWIDth,topmargin);
}

@OverrIDe
protected voID onLayout(boolean b, int i, int i1, int i2, int i3) {
int leftmargin = mleftmargin;
int topmargin = mtopmargin;

for (int j = 0; j < getChildCount(); j++) {
int measureDWIDth = getChildAt(j).getMeasureDWIDth();
int measuredHeight = getChildAt(j).getMeasuredHeight();
if (leftmargin+measureDWIDth+mleftmargin>getWIDth()){
leftmargin=mleftmargin;
topmargin+=measuredHeight+mtopmargin;
getChildAt(j).layout(leftmargin,topmargin,leftmargin+measureDWIDth,topmargin+measuredHeight);
}else {
getChildAt(j).layout(leftmargin,topmargin,leftmargin+measureDWIDth,topmargin+measuredHeight);
}
leftmargin+=measureDWIDth+mleftmargin;
}
}
}
2.自定义搜索框布局xml:

<?xml version="1.0" enCoding="utf-8"?>
<linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"
xmlns:tools="http://schemas.androID.com/tools"
androID:layout_wIDth="match_parent"
androID:layout_height="match_parent"
androID:orIEntation="vertical"
tools:context=".vIEw.activity.SearchActivity">
<relativeLayout
androID:layout_wIDth="match_parent"
androID:layout_height="65dp"
androID:background="@null"
>
<ImageVIEw
androID:ID="@+ID/search_back"
androID:layout_wIDth="wrap_content"
androID:layout_height="wrap_content"
androID:layout_centerVertical="true"
androID:layout_marginleft="15dp"
androID:src="@drawable/sao_kind" />
<relativeLayout
androID:layout_wIDth="match_parent"
androID:layout_height="35dp"
androID:layout_centerHorizontal="true"
androID:layout_centerVertical="true"
androID:layout_marginleft="30dp"
androID:layout_marginRight="20dp"
androID:layout_toleftOf="@ID/result_search"
androID:layout_toRightOf="@ID/search_back"
androID:background="@drawable/addatten_edit"
androID:focusable="true"
androID:focusableIntouchMode="true">
<ImageVIEw
androID:ID="@+ID/relation_search"
androID:layout_wIDth="wrap_content"
androID:layout_height="wrap_content"
androID:layout_centerVertical="true"
androID:layout_marginleft="9dp"
androID:src="@drawable/a_4" />
<VIEw
androID:ID="@+ID/search_line"
androID:layout_wIDth="0.5dp"
androID:layout_height="20dp"
androID:layout_centerVertical="true"
androID:layout_marginleft="10dp"
androID:layout_toRightOf="@ID/relation_search"
androID:background="#fff"></VIEw>

<EditText
androID:ID="@+ID/search_input_search"
androID:layout_wIDth="match_parent"
androID:layout_height="wrap_content"
androID:layout_centerVertical="true"
androID:layout_marginleft="10dp"
androID:layout_toRightOf="@ID/search_line"
androID:background="@null"
androID:hint="请输入关键词搜索"
androID:textcolor="@color/login_Title"
androID:textSize="14sp" />
</relativeLayout>
<TextVIEw
androID:ID="@+ID/result_search"
androID:layout_wIDth="wrap_content"
androID:layout_height="wrap_content"
androID:layout_alignParentRight="true"
androID:layout_centerVertical="true"
androID:layout_marginRight="15dp"
androID:textSize="14sp"
androID:text="搜索"
/>
</relativeLayout>
<TextVIEw
androID:paddingtop="20dp"
androID:layout_wIDth="match_parent"
androID:layout_height="wrap_content"
androID:text="热搜"
androID:textSize="20sp"
/>
<com.example.mall.vIEw.custom.CustomVIEw
androID:ID="@+ID/search_flowlayout"
androID:layout_wIDth="fill_parent"
androID:layout_height="wrap_content"
androID:background="#fff"
androID:paddingtop="10dp"
>
</com.example.mall.vIEw.custom.CustomVIEw>
<button
androID:ID="@+ID/search_clear"
androID:layout_wIDth="match_parent"
androID:layout_height="wrap_content"
androID:text="清空记录"/>
<ListVIEw
androID:ID="@+ID/search_List"
androID:layout_wIDth="match_parent"
androID:layout_height="wrap_content">
</ListVIEw>
</linearLayout>
3.在Activity要写的内容:

public class SearchActivity extends BaseActivity implements VIEw.OnClickListener {
String[] name={"手机","电脑","玩具","手机","电脑","苹果手机", "笔记本电脑", "电饭煲 ", "腊肉",
"特产", "剃须刀", "宝宝", "康佳", "特产", "剃须刀", "宝宝", "康佳"};
private ImageVIEw mSearchBack;
private ImageVIEw mRelationSearch;
private VIEw mSearchline;
/**
* 请输入关键词搜索
*/
private EditText mSearchinputSearch;
/**
* 搜索
*/
private TextVIEw mResultSearch;
private CustomVIEw mSearchFlowlayout;
/**
* 清空记录
*/
private button mSearchClear;
private ListVIEw mSearchList;
private TextVIEw textVIEw;

@OverrIDe
protected voID onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@OverrIDe
voID initVIEw() {
mSearchBack = (ImageVIEw) findVIEwByID(R.ID.search_back);
mRelationSearch = (ImageVIEw) findVIEwByID(R.ID.relation_search);
mSearchline = (VIEw) findVIEwByID(R.ID.search_line);
mSearchinputSearch = (EditText) findVIEwByID(R.ID.search_input_search);
mResultSearch = (TextVIEw) findVIEwByID(R.ID.result_search);
mSearchFlowlayout = (CustomVIEw) findVIEwByID(R.ID.search_flowlayout);
mSearchClear = (button) findVIEwByID(R.ID.search_clear);
mSearchClear.setonClickListener(this);
mSearchList = (ListVIEw) findVIEwByID(R.ID.search_List);
}
@OverrIDe
voID initData() {
//设置默认显示
for (int i = 0; i < name.length; i++) {
textVIEw = new TextVIEw(this);
textVIEw.setText(name[i]);
//设置背景
textVIEw.setBackground(getDrawable(R.drawable.addatten_edit));
//设置内边距
textVIEw.setpadding(5,5,5,5);
textVIEw.setTextSize(20);
//设置颜色
textVIEw.setTextcolor(color.RED);
//添加数据
mSearchFlowlayout.addVIEw(textVIEw);
}
//点击搜索添加
mResultSearch.setonClickListener(new VIEw.OnClickListener() {
@OverrIDe
public voID onClick(VIEw v) {
String s = mSearchinputSearch.getText().toString();
textVIEw = new TextVIEw(SearchActivity.this);
textVIEw.setBackground(getDrawable(R.drawable.addatten_edit));
textVIEw.setpadding(5,5,5,5);
textVIEw.setTextSize(20);
textVIEw.setText(s);
mSearchFlowlayout.addVIEw(textVIEw);
}
});
//mSearchFlowlayout.invalIDate(); 刷新UI布局
// mSearchFlowlayout.removeAllVIEws(); 删除所有
//mSearchFlowlayout.removeVIEw(); 删除单个子控件
}
@OverrIDe
BasePresenter setBasePresenter() {
return null;
}
@OverrIDe
int setChildContenVIEw() {
return R.layout.activity_search;
}
@OverrIDe
public voID onClick(VIEw v) {
switch (v.getID()) {
default:
break;
case R.ID.search_clear:
mSearchFlowlayout.removeAllVIEws();
break;
}
}
}
4.自定义边框:addatten_edit.xml

<?xml version="1.0" enCoding="utf-8"?>
<shape
xmlns:androID="http://schemas.androID.com/apk/res/androID">
<!-- 内部颜色 -->
<solID
androID:color="#ffffff" />
<!-- 边缘线条颜色 -->
<stroke
androID:wIDth="1dp"
androID:color="#9e9e9e" />
<!-- 圆角的幅度 -->
<corners androID:radius="45dp" />
</shape>

————————————————
版权声明:本文为CSDN博主「浅若清兮」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/Fzy99999/article/details/80507466

总结

以上是内存溢出为你收集整理的简单的流式布局(移动应用开发)全部内容,希望文章能够帮你解决简单的流式布局(移动应用开发)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1011984.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-22
下一篇 2022-05-22

发表评论

登录后才能评论

评论列表(0条)

保存