Android自定义view实现个人中心设置界面带点击事件

前一篇博客写了《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"
        />

好了，至此所有点击事件，设置属性的两种方式都已经实现，具体代码下载，请点击：

点击打开链接，下载资源文件