先上效果图:
点击“+”添加一行,点击“-”去掉一行,当然还有左侧的虚点了。
实现过程:主要分为左右两部分,左边的虚点,和右边的输入目的地。
布局:
<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标示,并根据该标示将之前添加进来的虚点布局和文本框布局删除。至此该效果完成,其他逻辑可根据各自产品需求依次添加。