您现在的位置是：首页 > 文章详情

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

日期：2018-08-08点击：554收藏

界面无小事(一):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);
    }
}