项目动态添加删除文本框和左侧虚点

来源：互联网发布：工商银行淘宝灵通卡编辑：程序博客网时间：2024/06/05 00:21

先上效果图：
这里写图片描述

点击“+”添加一行，点击“-”去掉一行，当然还有左侧的虚点了。

实现过程：主要分为左右两部分，左边的虚点，和右边的输入目的地。
这里写图片描述

布局：<LinearLayout    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="@color/c11"    android:orientation="horizontal">    <LinearLayout        android:layout_width="24dp"        android:layout_height="wrap_content"        android:layout_marginLeft="@dimen/s2"        android:layout_marginRight="@dimen/s2"        android:layout_marginTop="@dimen/s3"        android:gravity="center_horizontal"        android:orientation="vertical">        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:scaleType="center"            android:src="@mipmap/ic_mylocation_list" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:scaleType="center"            android:src="@mipmap/ic_pointline_list" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:scaleType="center"            android:src="@mipmap/ic_destination_list" />        <LinearLayout            android:id="@+id/ll_address_icon_container"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:gravity="center_horizontal"            android:orientation="vertical" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:scaleType="center"            android:src="@mipmap/ic_pointline_list" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:scaleType="center"            android:src="@mipmap/ic_stoplocation_list" />    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginRight="@dimen/s4"        android:orientation="vertical">        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="48dp">            <TextView                android:id="@+id/tv_start_location"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_centerVertical="true"                android:ellipsize="end"                android:singleLine="true"                android:textColor="@color/c3"                android:textSize="@dimen/f3" />            <View                android:layout_width="match_parent"                android:layout_height="1px"                android:layout_alignParentBottom="true"                android:background="@color/c5" />        </RelativeLayout>        <RelativeLayout            android:id="@+id/ll_location0_info"            android:layout_width="match_parent"            android:layout_height="48dp"            android:tag="address0">            <ImageView                android:id="@+id/iv_add"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_alignParentRight="true"                android:layout_centerVertical="true"                android:padding="4dp"                android:src="@mipmap/ic_add_list" />            <TextView                android:id="@+id/tv_location_item"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_centerVertical="true"                android:layout_toLeftOf="@id/iv_add"                android:ellipsize="end"                android:singleLine="true"                android:text="@string/price_calculate_default_text"                android:textColor="@color/c4"                android:textSize="@dimen/f3" />            <View                android:layout_width="match_parent"                android:layout_height="1px"                android:layout_alignParentBottom="true"                android:background="@color/c5" />        </RelativeLayout>        <LinearLayout            android:id="@+id/ll_address_container"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="vertical" />        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="48dp">            <TextView                android:id="@+id/tv_end_location"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:layout_centerVertical="true"                android:ellipsize="end"                android:gravity="center_vertical"                android:singleLine="true"                android:textColor="@color/c3"                android:textSize="@dimen/f3"                tools:text="测试文案" />            <View                android:layout_width="match_parent"                android:layout_height="1px"                android:layout_alignParentBottom="true"                android:background="@color/c5" />        </RelativeLayout>    </LinearLayout></LinearLayout>

左侧虚点中有一个用来存放添加的虚点的。

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

右侧有一个用来存放新增的文本框

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

然后我们展示出需要添加的布局
虚点：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:gravity="center_horizontal"    android:orientation="vertical">    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:scaleType="center"        android:src="@mipmap/ic_pointline_list" />    <ImageView        android:id="@+id/iv_del_item_icon"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:scaleType="center"        android:src="@mipmap/ic_pointline_list" /></LinearLayout>

文本框：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="48dp"    android:background="@color/c11">    <ImageView        android:id="@+id/iv_location_item_del"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentRight="true"        android:layout_centerVertical="true"        android:padding="4dp"        android:src="@mipmap/ic_reduce_list" />    <TextView        android:id="@+id/tv_location_item"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_centerVertical="true"        android:layout_toLeftOf="@id/iv_location_item_del"        android:ellipsize="end"        android:singleLine="true"        android:text="@string/price_calculate_default_text"        android:textColor="@color/c4"        android:textSize="@dimen/f3" />    <View        android:layout_width="match_parent"        android:layout_height="1px"        android:layout_alignParentBottom="true"        android:background="@color/c5" /></RelativeLayout>

现在所有布局都准备好了，我们需要去界面中码砖了。

//--------------------------点击+号添加地址--------------------------    @OnClick(R.id.iv_add)    public void addClick() {        if (mLlAddressContainer.getChildCount() >= 4) {            L.i("目的地地址最多为5个");            return;        }        String tag = "address" + count.getAndIncrement();        // 左侧的虚线View        View dashLineView = layoutInflater.inflate(R.layout.cost_assess_address_del_item, null);        dashLineView.setTag(tag);        mLlAddressIconContainer.addView(dashLineView);        // 新增加的选择地址ItemView        View addressView = layoutInflater.inflate(R.layout.cost_assess_address_item, null);        addressView.setTag(tag);        LinearLayout.LayoutParams addressParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, (int) getResources().getDimension(R.dimen.s5));        addressView.setOnClickListener(addressClick);        View rightDelIcon = addressView.findViewById(R.id.iv_location_item_del);        rightDelIcon.setTag(tag);        rightDelIcon.setOnClickListener(delIconClick);        mLlAddressContainer.addView(addressView, addressParams);    }

这里我们创建了一个tag标示，给每次add进来的view都添加了tag标示，为了当我们删除add进来的view来做查找判断。
代码中我们首先将在左侧虚点布局的LinearLayout中添加了虚点布局，右侧文本框布局的LinearLayout中添加了文本框布局。

然后对文本框做了点击事件处理（该文章不关注此动作），对“-”做了点击处理，接下来我们查看该处理动作。

/** * 右侧的删除地址Icon点击逻辑 */private View.OnClickListener delIconClick = new View.OnClickListener() {    @Override    public void onClick(View view) {        String tag = (String) view.getTag();        L.i("delIconClick---点击的是：" + tag);        deleteAddressByTag(tag);    }};/** * 根据tag删除添加的目的地地址，及Icon * * @param tag */private void deleteAddressByTag(String tag) {    View iconView = mLlAddressIconContainer.findViewWithTag(tag);    mLlAddressIconContainer.removeView(iconView);    View addressView = mLlAddressContainer.findViewWithTag(tag);    mLlAddressContainer.removeView(addressView);    //deleteItemPoint(tag);}

这里我们通过点击的view获取到我们设置的tag标示，并根据该标示将之前添加进来的虚点布局和文本框布局删除。至此该效果完成，其他逻辑可根据各自产品需求依次添加。

0 0