項目動態添加刪除文本框和左側虛點

先上效果圖:
這裏寫圖片描述

點擊“+”添加一行,點擊“-”去掉一行,當然還有左側的虛點了。

實現過程:主要分爲左右兩部分,左邊的虛點,和右邊的輸入目的地。
這裏寫圖片描述這裏寫圖片描述

佈局:
<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標示,並根據該標示將之前添加進來的虛點佈局和文本框佈局刪除。至此該效果完成,其他邏輯可根據各自產品需求依次添加。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章