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

  

  

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

  

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

  

<强>查看主要的几种状态

  

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

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

<强>,设置不同状态下的图标背景

  

首先准备好不同状态下的同一类型的图标分别两张,复制到产生文件下,然后在可拉的文件下新建可拉的资源文件文件,命名为selector_icon_home.xml。

  

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

  

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

        & lt;选择xmlns: android=" http://schemas.android.com/apk/res/android "比;   & lt; !——非集中的州比;   & lt;项目android: state_focused=" false " android: state_selected=癴alse”android: state_pressed=癴alse”android:可拉的=癅mipmap/icon_home”/比;   & lt;项目android: state_focused=" false " android: state_selected=" true " android: state_pressed=癴alse”android:可拉的=癅mipmap/icon_home_press”/比;   & lt; !——集中的州比;   & lt;项目android: state_focused=" true " android: state_selected=癴alse”android: state_pressed=癴alse”android:可拉的=癅mipmap/icon_home_press”/比;   & lt;项目android: state_focused=" true " android: state_selected=" true " android: state_pressed=癴alse”android:可拉的=癅mipmap/icon_home_press”/比;   & lt; !——压比;   & lt;项目android: state_selected=" true " android: state_pressed=" true " android:可拉的=癅mipmap/icon_home_press”/比;   & lt;项目android: state_pressed=" true " android:可拉的=癅mipmap/icon_home_press”/比;   & lt;/selector>      

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

        imageView.setBackgroundResource (R.drawable.selector_icon_home);      

运行后得到效果图如下。

  

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

  

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

  

新建色文件,然后新建颜色资源文件文件,命名为selector_tab_text.xml。

  

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

  

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

        & lt;选择xmlns: android=" http://schemas.android.com/apk/res/android "比;   & lt; !——选择比;   & lt;项目android: state_selected=" true " android:颜色=" # eb4f38 "/比;   & lt; !——积极的在   & lt;项目android: state_active=" true " android:颜色=" # eb4f38 "/比;   & lt;项目android: state_selected=" false " android:颜色=" # a9b7b7 "/比;   & lt;项目android: state_active=" false " android:颜色=" # a9b7b7 "/比;   & lt;/selector>

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