使用程式碼動態增刪佈局(2018.8重編版)

Sorrower發表於2018-01-02

目錄

  • 效果圖
  • 前言
  • 佈局檔案
  • 實現
  • 最後

效果圖

不多廢話, 先上圖, 有興趣再看下去:

效果圖

前言

用程式碼增刪佈局還是很常用的.

佈局檔案

先來看看佈局檔案, 不是很複雜, 但是涉及到之後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增刪條目的文章. 到時候一對比就可以看到效果了. 但是在某些場合用用還是可以的, 比如彈窗中微調佈局之類的. 喜歡記得點贊哦, 暗中關注我也是可以的~


相關文章