• 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"
    />


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

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

  • 相关阅读:
    L317 电子烟
    L316 波音737Max 危机
    2.19.3月 专业综合错题
    L314 单音节词读音规则(二)-元音字母发音规则
    L313 珊瑚裸鼠灭绝
    L312 难看懂的
    Pycharm写代码中文输入法不跟随
    Windows下Python多版本共存
    Python之批处理字符串(打开文件)
    Python Url请求代码
  • 原文地址:https://www.cnblogs.com/Alex80/p/12439185.html
Copyright © 2020-2023  润新知