界面无小事(一):RecyclerView+CardView了解一下
界面无小事(二):让RecyclerView展示更多不同视图
界面无小事(三):用RecyclerView + Toolbar做个文件选择器
界面无小事(四):来写个滚动选择器吧!
界面无小事(五):自定义TextView
界面无小事(六):来做个好看得侧拉菜单!
github传送门
目录
- 效果图
- 前言
- 布局文件
- 实现
- 最后
效果图
不多废话, 先上图, 有兴趣再看下去:
效果图
前言
这篇是之前的一篇旧文改的, 也是想将这篇放入自己的界面无小事专题, 所以当成新篇章来写, 绝对不是为了什么日更之类的事情哦(手动滑稽)~.
布局文件
先来看看布局文件, 不是很复杂, 但是涉及到之后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增删条目的文章. 到时候一对比就可以看到效果了. 但是在某些场合用用还是可以的, 比如弹窗中微调布局之类的. 喜欢记得点赞哦, 暗中关注我也是可以的~
