前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用代码动态增删布局(2018.8重编版)

使用代码动态增删布局(2018.8重编版)

作者头像
sean_yang
发布2018-09-04 11:07:54
4110
发布2018-09-04 11:07:54
举报

效果图

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

效果图


前言

用代码增删布局还是很常用的.


布局文件

先来看看布局文件, 不是很复杂, 但是涉及到之后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增删条目的文章. 到时候一对比就可以看到效果了. 但是在某些场合用用还是可以的, 比如弹窗中微调布局之类的. 喜欢记得点赞哦, 暗中关注我也是可以的~


本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.01.02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 效果图
  • 前言
  • 布局文件
  • 实现
  • 最后
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档