Android 仿京东商城底部布局的选择效果(Selector 选择器的实现)

京东商城的底部布局的选择效果看上去很复杂,其实很简单,这主要是要感谢 selector 选择器,本文将讲解仿照京东商城的底部布局的选择效果,如何实现 selector 选择器,在不同的状态下,给 view 设置不同的背景。
京东商城底部布局的选择效果如下。

View主要的几种状态

主要状态有8种,设置状态的代码以及相应的含义如下。

android:state_pressed = "true/false" //true表示按下状态,false表示非按下状态。 android:state_focused = "true/false" //true表示焦点聚集状态,false表示非焦点聚集状态。 android:state_selected = "true/false" //true表示选中状态,false表示非选中状态。 android:state_activated = "true/false" //true表示激活状态,false表示非激活状态。 android:state_checkable = "true/false" //true表示可以勾选状态,false表示不可以勾选。 android:state_checked = "true/false" //true表示被勾选状态,false表示未被勾选状态。 android:state_enabled = "true/false" //true表示可用状态,fasle表示不可用状态。 android:state_window_focused = "true/false" //true表示应用程序窗口获取焦点状态,false表示应用程序窗口非获取焦点状态。

设置不同状态下的图标背景

首先准备好不同状态下的同一类型的图标分别两张,复制到 mipmap 文件下,然后在 drawable 文件下新建 Drawable resource file 文件,命名为 selector_icon_home.xml。

之后在 selector 下写入不同状态下的背景图,这里是首页模块的 Selector 设置的源代码。其他模块的 Selector 图标设置和首页模块一致。

<selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- Non focused states --> <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@mipmap/icon_home" /> <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@mipmap/icon_home_press" /> <!-- Focused states --> <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@mipmap/icon_home_press" /> <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@mipmap/icon_home_press" /> <!-- Pressed --> <item android:state_selected="true" android:state_pressed="true" android:drawable="@mipmap/icon_home_press" /> <item android:state_pressed="true" android:drawable="@mipmap/icon_home_press" /> </selector>

所有模块下的 Selector 图片文件都添加完成后,最后设置 ImageView 的背景为 R.drawable.selector_icon_home,代码如下。

imageView.setBackgroundResource(R.drawable.selector_icon_home);

运行后得到效果图如下。

设置不同状态下的文字颜色

新建 color 文件,然后新建 Color resource file 文件,命名为 selector_tab_text.xml。

这里各个模块的选择效果下文本颜色变化是一样的,只需要在该文件中写入不同状态下的文字的颜色就可以了,其源代码如下。

<selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- Selected --> <item android:state_selected="true" android:color="#eb4f38" /> <!-- Active --> <item android:state_active="true" android:color="#eb4f38"/> <item android:state_selected="false" android:color="#a9b7b7" /> <item android:state_active="false" android:color="#a9b7b7"/> </selector>

然后在布局文件 layout 中设置 TextView 的文字颜色为 R.color. selector_tab_text 就大功到成了。

android:textColor="@color/selector_tab_text

运行后得到效果图如下。

最终效果

selector 选择器在点击事件状态变化时基本上都会使用到,既开发方便,又交互效果好,已经是必不可少的,更多的用处和用法可以参考 Android developer 官方文档。

以上所述是小编给大家介绍的Android 仿京东商城底部布局的选择效果(Selector 选择器的实现),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

时间: 2024-09-15 11:24:33

Android 仿京东商城底部布局的选择效果(Selector 选择器的实现)的相关文章

Android仿网易严选底部弹出菜单效果

在网易严选的看东西的时候在商品详情页里看到他的底部弹出菜单,本能反应是想用DottomSheetDialog或者PopupWindow来实现,可是发现实现不了他那种效果,于是就自己模仿一个像严选这样的底部弹出菜单. 不管是DottomSheetDialog或者PopupWindow他们的阴影背景都是全部覆盖的,这就造成除了菜单内容的View之外其他都是阴影的,而严选不是这样的.唠叨到此,首先展示效果图如下: 是不是还可以呢,由于代码量不多却注释详细,所以先贴出代码再一一详说: BottomPop

Android仿京东、天猫下拉刷新效果

说到下拉刷新,相信大家都不陌生,现在基本上每个项目都会用到.我们公司的项目一直都是使用SwipeRefreshLayout,官方的Material Design风格,好用少Bug.现在下拉刷新大概有下面几种实现方式:一种是直接包在ListView或者RecyclerView的头部,有的则是像SwipeRefreshLayout一样,包在视图的最外层,个人建议使用包在最外层的做法,可拓展性比较强.下面用包在最外层的方法实现京东和天猫的下拉刷新. 1.使用框架Android-Ultra-Pull-T

Android 仿58同城的布局,有2个地方不知道怎么实现的,求指导

问题描述 Android 仿58同城的布局,有2个地方不知道怎么实现的,求指导 ** 谁能告诉我这2个地方是怎么实现的? 求demo.... ** 解决方案 第一个是通过gallery实现. 第二个是一般的view,不过是设置了整个view是半透明的,把这图片真个view分成3部分,最顶端为头headview,中间的是个ScrollView.那么你的说的第二部分,也就是底部的透明部分为footview,这整个布局是个RelativeLayout,假设ScrollView的id是detailScr

Android仿QQ空间底部菜单示例代码_Android

之前曾经在网上看到Android仿QQ空间底部菜单的Demo,发现这个Demo有很多Bug,布局用了很多神秘数字.于是研究了一下QQ空间底部菜单的实现,自己写了一个,供大家参考.效果如下图所示:   1.实现原理很简单,底部菜单是一个水平分布的LinearLayout,里面又是五个LinearLayout,它们的layout_weight都为1,意味着底部菜单的子控件将屏幕宽度平均分为5部分.五个LinearLayout除了中间那个,其余都在里面放置ImageView和TextView(中间先空

Jquery实现仿京东商城省市联动菜单_jquery

本文实例讲述了Jquery实现仿京东商城省市联动菜单的简单实例代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href=&q

Android仿QQ空间底部菜单示例代码

之前曾经在网上看到Android仿QQ空间底部菜单的Demo,发现这个Demo有很多Bug,布局用了很多神秘数字.于是研究了一下QQ空间底部菜单的实现,自己写了一个,供大家参考.效果如下图所示:   1.实现原理很简单,底部菜单是一个水平分布的LinearLayout,里面又是五个LinearLayout,它们的layout_weight都为1,意味着底部菜单的子控件将屏幕宽度平均分为5部分.五个LinearLayout除了中间那个,其余都在里面放置ImageView和TextView(中间先空

Android仿京东淘宝自动无限循环轮播控件思路详解

在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于RelativeLayout,首先要考虑的就是自定义的控件需要扩展那些属性,把这些属性列出来.在这里是要实现类似于京东淘宝的无限轮播广告栏,那么首先想到的就是轮播的时长.轮播指示器的样式等等.我在这里列举了一些并且结合到了代码中. 1.扩展属性 (1)是否开启自动轮播的功能. (2)指示器的图形样式,一

仿京东商城的UI

问题描述 一个仿京东商城的UI,完成度不错,供大家学习分享github托管地址:https://github.com/youngcarl/JD_UI

jQuery简单实现仿京东商城的左侧菜单效果代码_jquery

本文实例讲述了jQuery简单实现仿京东商城的左侧菜单效果代码.分享给大家供大家参考.具体如下: 这是一款挺漂亮的左侧菜单效果,基于jQuery插件,但是还没有真正的完善,有些闪动,也希望高人指点修正.仿京东商城风格的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-jd-shop-left-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.