前一篇博客写了《Android 实现个人中心设置界面》, 发现许多朋友询问怎么实现点击事件, 其实实现点击事件又两种方式实现, 一种是自带的 setOnClickListener 实现 onclicklister 接口就可以实现整个 item 的点击事件. 另外一种是在自定义 view 中暴漏一个接口给外界调用.
效果图 1: 原生点击事件
效果图 2: 对外暴漏接口点击事件
效果图 3: 代码设置每个 item 的左侧图标, 标题文字, 右侧文字, 以及右侧小箭头和下划线的显示和隐藏 (如图, 代码设置用户名 item 的图标和修改标题以及描述和右侧箭头以及下划线隐藏)
提示: 当然每个 item 的左侧图标, 标题文字, 右侧文字, 以及右侧小箭头和下划线的显示和隐藏也可以不通过代码, 在我的自定义 view 中直接 xml 文件定义相应的属性值也是可以修改的, 所以提供了两个方式修改这些属性, 看你的需求是什么样子的.
下面说一下怎么实现的, 至于头部的磨砂效果可以参考上一篇的博客, 就不在本篇赘述了, 地址:
点击打开链接
上头部关键代码:
gradle 配置
- implementation 'com.github.bumptech.glide:glide:3.7.0'
- implementation 'jp.wasabeef:glide-transformations:2.0.1'
xml 代码:
- <RelativeLayout Android:layout_width="match_parent" Android:layout_height="wrap_content">
- <ImageView Android:id="@+id/h_back" Android:layout_width="match_parent"
- Android:layout_height="180dp" />
- <ImageView Android:id="@+id/h_head" Android:layout_width="80dp" Android:layout_height="80dp"
- Android:layout_centerInParent="true" />
- <RelativeLayout Android:layout_width="match_parent" Android:layout_height="wrap_content"
- Android:layout_alignBottom="@id/h_back" Android:layout_marginBottom="20dp"
- Android:orientation="horizontal">
- <ImageView Android:id="@+id/user_line" Android:layout_width="1dp" Android:layout_height="25dp"
- Android:layout_centerHorizontal="true" Android:layout_marginLeft="15dp"
- Android:background="@android:color/white" />
- <TextView Android:id="@+id/user_name" Android:layout_width="wrap_content"
- Android:layout_height="wrap_content" Android:layout_toLeftOf="@id/user_line"
- Android:text="张三" Android:textColor="@android:color/white" Android:textSize="17sp"
- />
- <TextView Android:id="@+id/user_val" Android:layout_width="wrap_content"
- Android:layout_height="wrap_content" Android:layout_marginLeft="15dp" Android:layout_toRightOf="@id/user_line"
- Android:text="182****5882" Android:textColor="@android:color/white" Android:textSize="17sp"
- />
- </RelativeLayout>
Activity 代码
- // 设置背景磨砂效果
- Glide.with(this).load(R.drawable.head)
- .bitmapTransform(new BlurTransformation(this, 25), new CenterCrop(this))
- .into(mHBack);
- // 设置圆形图像
- Glide.with(this).load(R.drawable.head)
- .bitmapTransform(new CropCircleTransformation(this))
- .into(mHHead);
以上就是实现头部部分代码, 效果图:
/**************************************** 分割线 *****************************/
下面重点在 item 的点击事件和动态设置属性以及 xml 文件配置属性设置
1. 先写一个 item 的布局, 一个比较全面的 item 布局, 就是所有的属性都有的布局, 然后在这个布局上面控制属性的显示和隐藏
相信这个布局很容易实现
2. 在 res-values 下面新建 attr.xml 文件, 定义控制每个 item 的相关属性的参数
- <declare-styleable name="ItemView">
- <attr name="left_icon" format="integer" />
- // 设置左侧图标
- <attr name="show_left_icon" format="boolean" />
- // 是否显示左侧图标
- <attr name="left_text" format="string" />
- // 左侧标题文字
- <attr name="right_text" format="string" />
- // 右侧描述文字
- <attr name="show_right_arrow" format="boolean" />
- // 是否显示右侧小箭头
- <attr name="show_bottom_line" format="boolean" />
- // 是否显示下划线
- </declare-styleable>
具体看每个后面的描述
3. 获取控件设置的属性
- TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ItemView);
- isShowBottomLine = ta.getBoolean(R.styleable.ItemView_show_bottom_line, true);// 得到是否显示底部下划线属性
- isShowLeftIcon = ta.getBoolean(R.styleable.ItemView_show_left_icon, true);// 得到是否显示左侧图标属性标识
- isShowRightArrow = ta.getBoolean(R.styleable.ItemView_show_right_arrow, true);// 得到是否显示右侧图标属性标识
- leftIcon.setBackground(ta.getDrawable(R.styleable.ItemView_left_icon));// 设置左侧图标
- leftTitle.setText(ta.getString(R.styleable.ItemView_left_text));// 设置左侧标题文字
- leftIcon.setVisibility(isShowLeftIcon ? View.VISIBLE : View.INVISIBLE);// 设置左侧箭头图标是否显示 rightDesc.setText(ta.getString(R.styleable.ItemView_right_text));// 设置右侧文字描述
- bottomLine.setVisibility(isShowBottomLine ? View.VISIBLE : View.INVISIBLE);// 设置底部图标是否显示
- rightArrow.setVisibility(isShowRightArrow ? View.VISIBLE : View.INVISIBLE);// 设置右侧箭头图标是否显示
4.xml 布局中添加引入每个 item
- <com.fang.mycenter.ItemView Android:id="@+id/sex" Android:layout_width="wrap_content"
- Android:layout_height="50dp" App:left_icon="@drawable/ic_sex" App:left_text="性别"
- App:right_text="男" />
- <com.fang.mycenter.ItemView Android:id="@+id/signName" Android:layout_width="wrap_content"
- Android:layout_height="50dp" App:left_icon="@drawable/ic_sign_name" App:left_text="个性签名"
- App:right_text="风一样的男子" />
注意: 头部命名空间需要引入,
xmlns:App="http://schemas.android.com/apk/res-auto"
至此就可以实现我们的第一步, 显示这样一个界面布局:
下面重点来了:
1. 设置普通点击事件
1) 实例化控件, 设置 onClick 点击事件
- // 设置用户名整个 item 的点击事件
- mNickName.setOnClickListener(new View.OnClickListener() {
- @Override
- public void onClick(View v) {
- Toast.makeText(MainActivity.this, "我是 onclick 事件显示的", Toast.LENGTH_SHORT).show();
- }
- });
- mNickName = (ItemView) findViewById(R.id.nickName);
这是顶部效果图 1 的点击事件的实现方式
2. 自定义 view 中定义接口, 对外暴漏接口, 设置点击事件
1)view 中定义接口, 设置点击事件
- public interface itemClickListener{
- void itemClick(String text);
- }
- private itemClickListener listener;
- // 向外暴漏接口
- public void setItemClickListener(itemClickListener listener){
- this.listener=listener;
- }
2) 为整个 item 设置点击事件
- // 给整个 item 设置点击事件
- rootView.setOnClickListener(new OnClickListener() {
- @Override
- public void onClick(View v) {
- listener.itemClick(rightDesc.getText().toString());
- }
- });
3)Activity 中实现接口事件
- // 设置用户名整个 item 的点击事件
- mNickName.setItemClickListener(new ItemView.itemClickListener() {
- @Override
- public void itemClick(String text) {
- Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show();
- }
- });
这是顶部效果图 2 的点击事件的实现方式
3. 代码中设置左侧图标, 标题文字, 下划线显示隐藏, 右侧图标隐藏等
1)view 中写相应设置方法
- // 设置左侧图标
- public void setLeftIcon(int value) {
- Drawable drawable=getResources().getDrawable(value);
- leftIcon.setBackground(drawable);
- }
- // 设置左侧标题文字
- public void setLeftTitle(String value) {
- leftTitle.setText(value);
- }
- // 设置右侧描述文字
- public void setRightDesc(String value) {
- rightDesc.setText(value);
- }
- // 设置右侧箭头
- public void setShowRightArrow(boolean value) {
- rightArrow.setVisibility(value ? View.VISIBLE : View.INVISIBLE);// 设置右侧箭头图标是否显示
- }
- // 设置是否显示下画线
- public void setShowBottomLine(boolean value) {
- bottomLine.setVisibility(value ? View.VISIBLE : View.INVISIBLE);// 设置右侧箭头图标是否显示
- }
2)Activity 中设置属性
- mNickName.setLeftIcon(R.drawable.ic_phone);
- //
- mNickName.setLeftTitle("修改后的用户名");
- mNickName.setRightDesc("名字修改");
- mNickName.setShowRightArrow(false);
- mNickName.setShowBottomLine(false);
这是顶部效果图 3 的点击事件的实现方式
4.xml 文件直接设置属性的显示隐藏以及文字等属性
- <com.fang.mycenter.ItemView Android:id="@+id/nickName" Android:layout_width="wrap_content"
- Android:layout_height="50dp" App:left_icon="@drawable/ic_nick_name" App:left_text="用户名"
- App:right_text="张三 xx" App:show_left_icon="false" App:show_bottom_line="false"
- />
好了, 至此所有点击事件, 设置属性的两种方式都已经实现, 具体代码下载, 请点击:
点击打开链接, 下载资源文件 https://download.csdn.net/download/asfang/10500410
来源: http://www.bubuko.com/infodetail-3451771.html