项目实战:微交互之按钮选择器
来源:互联网 发布:visual basic编程手机 编辑:程序博客网 时间:2024/05/16 14:40
相信大家在很多APP中都见过这种微交互,点击按钮时,发现点击前和点击时按钮(甚至是按钮里的文字)的样式不一样,给用户一个友好的小提示,你确实点击了这个按钮,今天我们做一下这个效果。
首先,你以为的就是你以为的吗,表面上看它是一个按钮(Button),其实它是一个文本(TextView)。
当android:state_pressed="true",按下时,我们使用common_button_pressed选择器。一般情况我们使用common_button_unpressed选择器。
我们看一下common_button_pressed选择器:
首先,你以为的就是你以为的吗,表面上看它是一个按钮(Button),其实它是一个文本(TextView)。
我们先在布局中定义它。
<TextView android:id="@+id/selector_tv_design" android:layout_width="match_parent" android:layout_height="@dimen/dd_dimen_76px" android:layout_marginBottom="@dimen/dd_dimen_6px" android:layout_marginTop="@dimen/dd_dimen_6px" android:layout_marginLeft="@dimen/dd_dimen_36px" android:layout_marginRight="@dimen/dd_dimen_36px" android:background="@drawable/common_button_selector" android:gravity="center" android:text="Selector" android:textColor="@drawable/common_button_textcolor_selector" android:textSize="@dimen/dd_dimen_32px" />
当当当,主角登场,选择器:
按钮选择器@drawable/common_button_selector
文字选择器@drawable/common_button_textcolor_selector
先易后难,我们先看一下文字选择器common_button_textcolor_selector:
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="@color/color_fef7ed" android:state_pressed="true"/> <item android:color="@color/white" android:state_pressed="false"/></selector>
见代码知其意,android:state_pressed="true",按下时,文字颜色是color_fef7ed,一般情况文字颜色是white。
再看一下按钮选择器common_button_selector:
稍微复杂一点,因为嵌套又使用了一层选择器。
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/common_button_pressed" android:state_pressed="true"/> <item android:drawable="@drawable/common_button_unpressed" android:state_pressed="false"/></selector>
当android:state_pressed="true",按下时,我们使用common_button_pressed选择器。一般情况我们使用common_button_unpressed选择器。
我们看一下common_button_pressed选择器:
<?xml version="1.0" encoding="UTF-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <!--指定填充的颜色--> <solid android:color="@color/color_dbac6f" /> <!--圆角弧度,值越大角越圆。--> <corners android:radius="@dimen/dd_dimen_6px" /></shape>
这里我们使用了shape,按下时是一个圆角(radius="@dimen/dd_dimen_6px")矩形(shape="rectangle")。
我们在代码里设置点击事件,象征性的弹一个Toast作为点击响应:
private TextView mSelectorTv;mSelectorTv = (TextView) findViewById(R.id.selector_tv_design);mSelectorTv.setOnClickListener(this);case R.id.selector_tv_design:Toast.makeText(MainDesignActivity.this,"selector_tv_design",Toast.LENGTH_SHORT).show();
大功告成~
原创不易,转载请注明出处哈。
权兴权意
产品可以更优雅~
项目源代码,欢迎提建议(star)。
https://github.com/HXQWill/QuanStudy/commit/ba78f471205e3bcb317994321fc7523e9ab9bff0
阅读全文
0 0
- 项目实战:微交互之按钮选择器
- 项目实战:微交互之转场动画(anim、style、theme)
- 猫猫学iOS 之微博项目实战(4)微博自定义tabBar中间的添加按钮
- 项目实战No6 标签按钮
- AJ学IOS 之微博项目实战(4)微博自定义tabBar中间的添加按钮
- swift学习五天 项目实战-知乎日报之网络交互NSURLConnection
- 《jquery实战》之元素选择器整理
- CSS3实战之新增的选择器
- 项目实战No7 标签按钮 父子控制器
- 实战项目之用例图
- SpringBoot实战 之 数据交互篇
- Axure学习及实战整理--之交互
- Android项目实战--手机卫士02--与服务器交互
- 项目实战:自定义ListView、数据库操作和Activity交互
- Qt学习之---项目实战
- UCOSII之项目实战总结
- Android项目实战之战途牛
- Swift之小项目实战
- 维基利亚加解密(二)
- LAMP+Wordpress+阿里云搭建个人博客
- Ubuntu16.04使用pip3安装第三方库
- FPGA内部结构
- TCP 传输链接的释放
- 项目实战:微交互之按钮选择器
- Ext Js入门第1篇-Ext环境搭建
- lg1071 潜伏者
- C++控制台读取和输出函数
- js获取相同name的元素个数和获取其中任意一个元素的值(获取最后一个元素值)
- golang字符串
- Windows10下 Python3.6 配置 MySQL 数据库
- 利用Python将多份excel表格整理成一份表格
- poj3974 manacher算法,最大回文子串