ITPub博客

首页 > IT职业 > IT职场 > 使用代码动态增删布局

使用代码动态增删布局

IT职场 作者:wanxud 时间:2021-09-09 09:45:16 0 删除 编辑

github传送门


目录

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

效果图

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

图片描述


前言

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


布局文件

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

图片描述


实现

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

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

  • 添加条目
/**
 * @param v 添加一个新条目
 */
private void addItem(View v) {
    if (v == null) {
        return;
    }

    // 1. 根据传入的v, 判断是mListAddBtn中的哪一个
    int curView = -1;
    for (int i = 0; i = 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 = 0) {
        mAddList.remove(curView);
        mDelList.remove(curView);

        mLlContent.removeViewAt(curView);
    }
}

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


最后

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


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/3451/viewspace-2806924/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-08-30

  • 博文量
    100
  • 访问量
    1144