界面无小事(七):使用代码动态增删布局

界面无小事(一):RecyclerView+CardView了解一下
界面无小事(二):让RecyclerView展示更多不同视图
界面无小事(三):用RecyclerView + Toolbar做个文件选择器
界面无小事(四):来写个滚动选择器吧!
界面无小事(五):自定义TextView
界面无小事(六):来做个好看得侧拉菜单!
github传送门

---

目录

• 效果图
• 前言
• 布局文件
• 实现
• 最后

---

效果图

不多废话, 先上图, 有兴趣再看下去:

---

前言

这篇是之前的一篇旧文改的, 也是想将这篇放入自己的界面无小事专题, 所以当成新篇章来写, 绝对不是为了什么日更之类的事情哦(手动滑稽)~.

---

布局文件

先来看看布局文件, 不是很复杂, 但是涉及到之后java部分的代码, 所以必须都贴出来. 不过你可以看下预览图就好:

<?xml version="1.0" encoding="utf-8"?> <ScrollView 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" tools:context="com.so.moreview.ui.activity.MainActivity"> <LinearLayout android:id="@+id/ll_content" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="@dimen/eight_dp"> <LinearLayout android:id="@+id/ll_item" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/darker_gray" android:orientation="vertical" android:padding="@dimen/eight_dp" tools:ignore="UselessParent"> <EditText android:id="@+id/et_item" android:layout_width="match_parent" android:layout_height="@dimen/forty_dp" android:background="@android:color/white" android:gravity="center_vertical" android:inputType="textMultiLine" android:textSize="@dimen/sixteen_sp" tools:ignore="LabelFor" /> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/eight_dp"> <ImageButton android:id="@+id/ib_add" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:background="@drawable/add" android:contentDescription="" tools:ignore="ContentDescription" /> </RelativeLayout> </LinearLayout> </LinearLayout> </ScrollView> 

---

实现

LinkedList<ImageButton> mAddList; mAddList.add(curView, btAdd); LinkedList<ImageButton> mDelList; mDelList.add(curView, btDel); 

这里我使用LinkedList<ImageButton>实例存储ImageButton, 就是为了让增删的时候方便一些. 最关键的是增删按钮的代码:

• 添加条目

/** * @param v 添加一个新条目 */ private void addItem(View v) { if (v == null) { return; } // 1. 根据传入的v, 判断是mListAddBtn中的哪一个 int curView = -1; for (int i = 0; i < mAddList.size(); i++) { if (mAddList.get(i) == v) { curView = i; break; } } // 2. 根据获取的值添加控件 if (curView >= 0) { curView++; // ll_item LinearLayout ll = new LinearLayout(MainActivity.this); LinearLayout.LayoutParams llParams = new LinearLayout.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT); llParams.setMargins(0, UIUtil.dp2px(8), 0, 0); ll.setLayoutParams(llParams); ll.setBackgroundColor(ContextCompat.getColor(this, android.R.color.darker_gray)); ll.setPadding(UIUtil.dp2px(8), UIUtil.dp2px(8), UIUtil.dp2px(8), UIUtil.dp2px(8)); ll.setOrientation(LinearLayout.VERTICAL); // et_item EditText et = new EditText(MainActivity.this); LinearLayout.LayoutParams etParams = new LinearLayout.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, mEtHeight); et.setLayoutParams(etParams); et.setBackgroundColor(ContextCompat.getColor(this, android.R.color.white)); et.setGravity(Gravity.CENTER_VERTICAL); et.setInputType(InputType.TYPE_TEXT_FLAG_MULTI_LINE); et.setTextSize(16); et.setId(mEtId); ll.addView(et); RelativeLayout rl = new RelativeLayout(MainActivity.this); RelativeLayout.LayoutParams rlParams = new RelativeLayout.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT); rlParams.setMargins(0, UIUtil.dp2px(8), 0, 0); rl.setLayoutParams(rlParams); // ib_add ImageButton btAdd = new ImageButton(MainActivity.this); RelativeLayout.LayoutParams btAddParams = new RelativeLayout.LayoutParams( ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); btAddParams.addRule(RelativeLayout.ALIGN_PARENT_END); btAdd.setLayoutParams(btAddParams); btAdd.setBackgroundResource(R.drawable.add); btAdd.setId(mBtnAddId); btAdd.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { addItem(v); } }); rl.addView(btAdd); mAddList.add(curView, btAdd); // ib_del ImageButton btDel = new ImageButton(MainActivity.this); RelativeLayout.LayoutParams btDelParams = new RelativeLayout.LayoutParams( ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); btDelParams.setMargins(0, 0, UIUtil.dp2px(8), 0); btDelParams.addRule(RelativeLayout.LEFT_OF, mBtnAddId); btDel.setLayoutParams(btDelParams); btDel.setBackgroundResource(R.drawable.del); btDel.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { delItem(v); } }); rl.addView(btDel); mDelList.add(curView, btDel); ll.addView(rl); mLlContent.addView(ll, curView); mBtnAddId++; mEtId++; } } 

看起来有些长, 但是对照布局文件来看, 就非常简单了, 就是用java代码把布局文件里写的再写一遍.

• 删除条目

/** * @param v 删除一个新的EditText条目 */ private void delItem(View v) { if (v == null) { return; } int curView = -1; for (int i = 0; i < mDelList.size(); i++) { if (mDelList.get(i) == v) { curView = i; break; } } if (curView >= 0) { mAddList.remove(curView); mDelList.remove(curView); mLlContent.removeViewAt(curView); } } 

删除就很简单了, 先弄清点击的是哪个按钮, 然后把相关的一股脑删了即可.

---

最后

其实这样改动视图还是比较过时的, 之后会准备一篇RecyclerView增删条目的文章. 到时候一对比就可以看到效果了. 但是在某些场合用用还是可以的, 比如弹窗中微调布局之类的. 喜欢记得点赞哦, 暗中关注我也是可以的~

---