在Android中动态添加和删除视图?

147

如何在Android应用程序中添加和删除视图,例如在原始股票Android联系人屏幕上,您按下字段右侧的小图标即可添加或删除由TextVieweditTextView(据我所见)组成的字段。

如何实现此功能的示例?

10个回答

248
一般情况下,ViewParent不能移除视图,但是ViewGroup可以。如果你想要实现这个功能,需要将父级强制转换为ViewGroup(如果它是ViewGroup)。
例如:
View namebar = View.findViewById(R.id.namebar);
((ViewGroup) namebar.getParent()).removeView(namebar);
请注意所有的 Layout 都是 ViewGroup

2
ViewParent 无法移除子视图,但 ViewGroup 可以。 - ThomasW
1
链接已经失效。避免像这个元问题中所看到的那样,将整个答案与外部链接相关联。https://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers - Willian Soares
我有一个类似的问题,请问您能否看一下我的问题 - Moeez

39

我需要完全相同的功能,就像这个问题描述的那样。这是我的解决方案和源代码: https://github.com/laoyang/android-dynamic-views。您可以在这里观看视频演示: http://www.youtube.com/watch?v=4HeqyG6FDhQ

布局

基本上你需要两个xml布局文件:

  • 一个水平的LinearLayout行视图,带有TextEditSpinnerImageButton用于删除。
  • 一个垂直的LinearLayout容器视图,只有一个添加新的按钮。

控制

在Java代码中,您将动态地将行视图添加和删除到容器中,使用inflate、addView、removeView等方法。在原生Android app中有一些可见性控制以实现更好的用户体验。您需要为每行的EditText视图添加TextWatcher: 当文本为空时,您需要隐藏添加新的按钮和删除按钮。在我的代码中,我编写了一个void inflateEditRow(String)辅助函数来处理所有逻辑。

其他技巧

  • 在xml中设置android:animateLayoutChanges="true"以启用动画效果
  • 使用自定义的透明背景和pressed选择器,使按钮在视觉上与原生Android app中的按钮相同。

源代码

主要活动的Java代码(这解释了所有逻辑,但是一些属性在xml布局文件中设置,完整的解决方案请参考Github源代码):

public class MainActivity extends Activity {
// Parent view for all rows and the add button.
private LinearLayout mContainerView;
// The "Add new" button
private Button mAddButton;
// There always should be only one empty row, other empty rows will
// be removed.
private View mExclusiveEmptyView;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.row_container);
    mContainerView = (LinearLayout) findViewById(R.id.parentView);
    mAddButton = (Button) findViewById(R.id.btnAddNewItem);

    // Add some examples
    inflateEditRow("Xiaochao");
    inflateEditRow("Yang");
}

// onClick handler for the "Add new" button;
public void onAddNewClicked(View v) {
    // Inflate a new row and hide the button self.
    inflateEditRow(null);
    v.setVisibility(View.GONE);
}

// onClick handler for the "X" button of each row
public void onDeleteClicked(View v) {
    // remove the row by calling the getParent on button
    mContainerView.removeView((View) v.getParent());
}

// Helper for inflating a row
private void inflateEditRow(String name) {
    LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    final View rowView = inflater.inflate(R.layout.row, null);
    final ImageButton deleteButton = (ImageButton) rowView
            .findViewById(R.id.buttonDelete);
    final EditText editText = (EditText) rowView
            .findViewById(R.id.editText);
    if (name != null && !name.isEmpty()) {
        editText.setText(name);
    } else {
        mExclusiveEmptyView = rowView;
        deleteButton.setVisibility(View.INVISIBLE);
    }

    // A TextWatcher to control the visibility of the "Add new" button and
    // handle the exclusive empty view.
    editText.addTextChangedListener(new TextWatcher() {

        @Override
        public void afterTextChanged(Editable s) {

            // Some visibility logic control here:
            if (s.toString().isEmpty()) {
                mAddButton.setVisibility(View.GONE);
                deleteButton.setVisibility(View.INVISIBLE);
                if (mExclusiveEmptyView != null
                        && mExclusiveEmptyView != rowView) {
                    mContainerView.removeView(mExclusiveEmptyView);
                }
                mExclusiveEmptyView = rowView;
            } else {
                if (mExclusiveEmptyView == rowView) {
                    mExclusiveEmptyView = null;
                }
                mAddButton.setVisibility(View.VISIBLE);
                deleteButton.setVisibility(View.VISIBLE);
            }
        }

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count,
                int after) {
        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before,
                int count) {
        }
    });

    // Inflate at the end of all rows but before the "Add new" button
    mContainerView.addView(rowView, mContainerView.getChildCount() - 1);
}

正在处理类似于这个SO的东西,这很有效。 - Srikanth Roopa
根据我的屏幕高度,我可以添加7个条目,之后“添加新”按钮就不可见了,它被隐藏在软键盘下面。要点击“添加新”按钮以添加更多条目,我必须隐藏键盘并单击“添加新”按钮。在12个条目后,“添加新”按钮被埋在屏幕下方,Valid XHTML - Usman
我有一个类似的问题,您能否看一下我的问题 - Moeez

12

这是我的一般做法:

View namebar = view.findViewById(R.id.namebar);
ViewGroup parent = (ViewGroup) namebar.getParent();
if (parent != null) {
    parent.removeView(namebar);
}

我有一个类似的问题,您能否看一下我的问题 - Moeez

6

您可以尝试通过添加相对布局,然后在其中添加文本视图来实现此目的。

LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
            (LayoutParams.WRAP_CONTENT), (LayoutParams.WRAP_CONTENT));

RelativeLayout relative = new RelativeLayout(getApplicationContext());
relative.setLayoutParams(lp);

TextView tv = new TextView(getApplicationContext());
tv.setLayoutParams(lp);

EditText edittv = new EditText(getApplicationContext());
edittv.setLayoutParams(lp);

relative.addView(tv);
relative.addView(edittv);

1
Android 在添加新视图时必须重新绘制屏幕(我认为是这样)。但在大多数情况下,这不应该影响您。 - Falmarri
11
有没有关于如何从LinearLayout中删除特定视图的示例? - Jono
因为没有实现一个“移除视图”的方法而被踩了。 - AndyRoid
1
要从LinearLayout中移除视图,我通常这样做:MyLinearLayoutThatHoldsOtherViews.removeAllViews(); removeAllViews()是关键。希望能帮到你并且讲得清楚明白。^.^ - Micah Montoya
我有一个类似的问题,您能否看一下我的问题 - Moeez
显示剩余2条评论

5

只需使用myView.setVisibility(View.GONE);完全删除它。 但如果您想保留其父视图中占用的空间,请使用myView.setVisibility(View.INVISIBLE);


5
只是隐藏,而非删除。 - ruX
1
是的,但View.GONE就像删除一样,因为保留的空间不再显示。 - Soheil Setayeshi
1
非常棒的帖子,解决了我的问题。如果您的视图已经在xml中创建,并且您只想显示或隐藏它们,并让其他视图占用那些隐藏视图应该存在的空间,我相信这是正确的答案。 - CHarris
请记住,View.INVISIBLE 只是隐藏了视图。如果设置了 OnClickListener,当用户触摸视图存在但不可见的区域时,它仍然会响应用户。因此,在这种情况下,最好也删除 OnClickListeners - Kathir
我有一个类似的问题,您能否看一下我的问题 - Moeez

5

Kotlin扩展解决方案

添加removeSelf直接在视图上调用。如果已连接到父级,则将其删除。这使您的代码更加声明性,因此更易读。

myView.removeSelf()

fun View?.removeSelf() {
    this ?: return
    val parent = parent as? ViewGroup ?: return
    parent.removeView(this)
}

这里有三种选项来以编程的方式向一个 ViewGroup 添加视图。
// Built-in
myViewGroup.addView(myView)

// Reverse addition
myView.addTo(myViewGroup)

fun View?.addTo(parent: ViewGroup?) {
    this ?: return
    parent ?: return
    parent.addView(this)
}

// Null-safe extension
fun ViewGroup?.addView(view: View?) {
    this ?: return
    view ?: return
    addView(view)
}

4

ViewGroup及其方法并未提供API(而是一组库),但仅提供一些处理行为的方法(例如添加和删除视图)。这些方法不仅仅是在运行时管理视图的工具,而且是管理它们的唯一方式。当您编写XML布局时,它只是在Java中解析,并在运行时基于其创建视图! - Davide Cannizzo

3

添加按钮

LinearLayout dynamicview = (LinearLayout)findViewById(R.id.buttonlayout);
LinearLayout.LayoutParams  lprams = new LinearLayout.LayoutParams(  LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);

Button btn = new Button(this);
btn.setId(count);
final int id_ = btn.getId();
btn.setText("Capture Image" + id_);
btn.setTextColor(Color.WHITE);
btn.setBackgroundColor(Color.rgb(70, 80, 90));
dynamicview.addView(btn, lprams);
btn = ((Button) findViewById(id_));
btn.setOnClickListener(this);

去除按钮

ViewGroup layout = (ViewGroup) findViewById(R.id.buttonlayout);
View command = layout.findViewById(count);
layout.removeView(command);

计数器就是动态创建的按钮的ID。 - Amaresh Jana

3

你好,首先编写Activity类。以下类具有类别名称和小型添加按钮。当您按下添加(+)按钮时,它将添加新行,其中包含EditText和执行行删除的ImageButton。

package com.blmsr.manager;

import android.app.Activity;
import android.app.ListActivity;
import android.content.Intent;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.ScrollView;
import android.widget.TableLayout;
import android.widget.TableRow;
import android.widget.TextView;

import com.blmsr.manager.R;
import com.blmsr.manager.dao.CategoryService;
import com.blmsr.manager.models.CategoryModel;
import com.blmsr.manager.service.DatabaseService;

public class CategoryEditorActivity extends Activity {
    private final String CLASSNAME = "CategoryEditorActivity";
    LinearLayout itsLinearLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_category_editor);

        itsLinearLayout = (LinearLayout)findViewById(R.id.linearLayout2);
    }
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_category_editor, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    switch (item.getItemId()) {
        case R.id.action_delete:
            deleteCategory();
            return true;
        case R.id.action_save:
            saveCategory();
            return true;
        case R.id.action_settings:
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}

/**
 * Adds a new row which contains the EditText and a delete button.
 * @param theView
 */
public void addField(View theView)
{
    itsLinearLayout.addView(tableLayout(), itsLinearLayout.getChildCount()-1);
}

// Using a TableLayout as it provides you with a neat ordering structure

private TableLayout tableLayout() {
    TableLayout tableLayout = new TableLayout(this);
    tableLayout.addView(createRowView());
    return tableLayout;
}

private TableRow createRowView() {
    TableRow tableRow = new TableRow(this);
    tableRow.setPadding(0, 10, 0, 0);

    EditText editText = new EditText(this);
    editText.setWidth(600);
    editText.requestFocus();

    tableRow.addView(editText);
    ImageButton btnGreen = new ImageButton(this);
    btnGreen.setImageResource(R.drawable.ic_delete);
    btnGreen.setBackgroundColor(Color.TRANSPARENT);
    btnGreen.setOnClickListener(anImageButtonListener);
    tableRow.addView(btnGreen);

    return tableRow;
}

/**
 * Delete the row when clicked on the remove button.
 */
private View.OnClickListener anImageButtonListener = new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        TableRow anTableRow = (TableRow)v.getParent();
        TableLayout anTable = (TableLayout) anTableRow.getParent();
        itsLinearLayout.removeView(anTable);

    }
};

/**
 * Save the values to db.
 */
private void saveCategory()
{
    CategoryService aCategoryService = DatabaseService.getInstance(this).getCategoryService();
    aCategoryService.save(getModel());
    Log.d(CLASSNAME, "successfully saved model");

    Intent anIntent = new Intent(this, CategoriesListActivity.class);
    startActivity(anIntent);

}

/**
 * performs the delete.
 */
private void deleteCategory()
{

}

/**
 * Returns the model object. It gets the values from the EditText views and sets to the model.
 * @return
 */
private CategoryModel getModel()
{
    CategoryModel aCategoryModel = new CategoryModel();
    try
    {
        EditText anCategoryNameEditText = (EditText) findViewById(R.id.categoryNameEditText);
        aCategoryModel.setCategoryName(anCategoryNameEditText.getText().toString());
        for(int i= 0; i< itsLinearLayout.getChildCount(); i++)
        {
            View aTableLayOutView = itsLinearLayout.getChildAt(i);
            if(aTableLayOutView instanceof  TableLayout)
            {
                for(int j= 0; j< ((TableLayout) aTableLayOutView).getChildCount() ; j++ );
                {
                    TableRow anTableRow = (TableRow) ((TableLayout) aTableLayOutView).getChildAt(i);
                    EditText anEditText =  (EditText) anTableRow.getChildAt(0);
                    if(StringUtils.isNullOrEmpty(anEditText.getText().toString()))
                    {
                        // show a validation message.
                        //return aCategoryModel;
                    }

                    setValuesToModel(aCategoryModel, i + 1, anEditText.getText().toString());
                }
            }
        }
    }
    catch (Exception anException)
    {
        Log.d(CLASSNAME, "Exception occured"+anException);
    }

    return aCategoryModel;
}

/**
 * Sets the value to model.
 * @param theModel
 * @param theFieldIndexNumber
 * @param theFieldValue
 */
private void setValuesToModel(CategoryModel theModel, int theFieldIndexNumber, String theFieldValue)
{
    switch (theFieldIndexNumber)
    {
        case 1 :
            theModel.setField1(theFieldValue);
            break;
        case 2 :
            theModel.setField2(theFieldValue);
            break;
        case 3 :
            theModel.setField3(theFieldValue);
            break;
        case 4 :
            theModel.setField4(theFieldValue);
            break;
        case 5 :
            theModel.setField5(theFieldValue);
            break;
        case 6 :
            theModel.setField6(theFieldValue);
            break;
        case 7 :
            theModel.setField7(theFieldValue);
            break;
        case 8 :
            theModel.setField8(theFieldValue);
            break;
        case 9 :
            theModel.setField9(theFieldValue);
            break;
        case 10 :
            theModel.setField10(theFieldValue);
            break;
        case 11 :
            theModel.setField11(theFieldValue);
            break;
        case 12 :
            theModel.setField12(theFieldValue);
            break;
        case 13 :
            theModel.setField13(theFieldValue);
            break;
        case 14 :
            theModel.setField14(theFieldValue);
            break;
        case 15 :
            theModel.setField15(theFieldValue);
            break;
    }
}
}

2. 按照以下给出的方式编写Layout xml。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#006699"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.blmsr.manager.CategoryEditorActivity">

<LinearLayout
    android:id="@+id/addCategiryNameItem"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/categoryNameTextView"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="@string/lbl_category_name"
        android:textStyle="bold"
        />

    <TextView
        android:id="@+id/categoryIconName"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="@string/lbl_category_icon_name"
        android:textStyle="bold"
        />

</LinearLayout>

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <EditText
        android:id="@+id/categoryNameEditText"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:hint="@string/lbl_category_name"
        android:inputType="textAutoComplete" />


    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/linearLayout2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

        <LinearLayout
            android:id="@+id/linearLayout3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">


            </LinearLayout>

            <ImageButton
                android:id="@+id/addField"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_below="@+id/addCategoryLayout"
                android:src="@drawable/ic_input_add"
                android:onClick="addField"
                />
        </LinearLayout>
    </ScrollView>
</LinearLayout>

  1. 一旦您完成,您的视图将如下所示:enter image description here

0
//MainActivity :





 package com.edittext.demo;
    import android.app.Activity;
    import android.os.Bundle;
    import android.text.TextUtils;
    import android.view.Menu;
    import android.view.View;
    import android.view.View.OnClickListener;
    import android.widget.Button;
    import android.widget.EditText;
    import android.widget.LinearLayout;
    import android.widget.Toast;

    public class MainActivity extends Activity {

        private EditText edtText;
        private LinearLayout LinearMain;
        private Button btnAdd, btnClear;
        private int no;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);

            edtText = (EditText)findViewById(R.id.edtMain);
            btnAdd = (Button)findViewById(R.id.btnAdd);
            btnClear = (Button)findViewById(R.id.btnClear);
            LinearMain = (LinearLayout)findViewById(R.id.LinearMain);

            btnAdd.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (!TextUtils.isEmpty(edtText.getText().toString().trim())) {
                        no = Integer.parseInt(edtText.getText().toString());
                        CreateEdittext();
                    }else {
                        Toast.makeText(MainActivity.this, "Please entere value", Toast.LENGTH_SHORT).show();
                    }
                }
            });

            btnClear.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    LinearMain.removeAllViews();
                    edtText.setText("");
                }
            });

            /*edtText.addTextChangedListener(new TextWatcher() {
                @Override
                public void onTextChanged(CharSequence s, int start, int before, int count) {

                }
                @Override
                public void beforeTextChanged(CharSequence s, int start, int count,int after) {
                }
                @Override
                public void afterTextChanged(Editable s) {
                }
            });*/

        }

        protected void CreateEdittext() {
            final EditText[] text = new EditText[no];
            final Button[] add = new Button[no];
            final LinearLayout[] LinearChild = new LinearLayout[no];
            LinearMain.removeAllViews();

            for (int i = 0; i < no; i++){

                View view = getLayoutInflater().inflate(R.layout.edit_text, LinearMain,false);
                text[i] = (EditText)view.findViewById(R.id.edtText);
                text[i].setId(i);
                text[i].setTag(""+i);

                add[i] = (Button)view.findViewById(R.id.btnAdd);
                add[i].setId(i);
                add[i].setTag(""+i);

                LinearChild[i] = (LinearLayout)view.findViewById(R.id.child_linear);
                LinearChild[i].setId(i);
                LinearChild[i].setTag(""+i);

                LinearMain.addView(view);

                add[i].setOnClickListener(new View.OnClickListener() {
                    public void onClick(View v) {
                        //Toast.makeText(MainActivity.this, "add text "+v.getTag(), Toast.LENGTH_SHORT).show();
                        int a = Integer.parseInt(text[v.getId()].getText().toString());
                        LinearChild[v.getId()].removeAllViews();
                        for (int k = 0; k < a; k++){

                            EditText text = (EditText) new EditText(MainActivity.this);
                            text.setId(k);
                            text.setTag(""+k);

                            LinearChild[v.getId()].addView(text);
                        }
                    }
                });
            }
        }

        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            // Inflate the menu; this adds items to the action bar if it is present.
            getMenuInflater().inflate(R.menu.main, menu);
            return true;
        }

    }

// 现在添加xml主文件

<LinearLayout 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"
android:orientation="vertical"
tools:context=".MainActivity" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:orientation="horizontal" >

    <EditText
        android:id="@+id/edtMain"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_weight="1"
        android:ems="10"
        android:hint="Enter value" >

        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/btnAdd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:text="Add" />

    <Button
        android:id="@+id/btnClear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:text="Clear" />
</LinearLayout>

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="10dp" >

    <LinearLayout
        android:id="@+id/LinearMain"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
    </LinearLayout>
</ScrollView>

// 现在添加视图 XML 文件...

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:orientation="horizontal" >

    <EditText
        android:id="@+id/edtText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:ems="10" />

    <Button
        android:id="@+id/btnAdd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:text="Add" />
</LinearLayout>

<LinearLayout
    android:id="@+id/child_linear"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="5dp"
    android:orientation="vertical" >
</LinearLayout>


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接