现在的位置: 首页 > 综合 > 正文

Android中focusable属性的妙用之底层按钮的实现

2018年04月22日 ⁄ 综合 ⁄ 共 2819字 ⁄ 字号 评论关闭



在Android中使用focusable 属性来实现按钮的特效,看到百威啤酒的客户端主界面的按钮,感觉比较新奇,先看下图片:

注意图中我画的箭头,当时鼠标点击的黑色圈圈的位置,然后按钮出现了按下的效果(黄色的描边)

刚开始看到这种效果很是好奇,不知道是怎么实现的,后来仔细一想,应该是整个啤酒罐是一张图片(ImageView),该图片是布局在三个按钮之上,然后就是最关键的地方,把图片设置为不可获取焦点,也就是android:focusable="false" ,就这样简单的一行,就可以搞定了!

为了验证我的想法,我建了一个工程来做测试,效果如下图所示:


具体代码如下:

main.xml:

  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"   
  3.     android:layout_width="fill_parent"   
  4.     android:layout_height="fill_parent"   
  5.     >   
  6.     <LinearLayout   
  7.         android:layout_width="match_parent"   
  8.         android:layout_height="wrap_content"   
  9.         android:orientation="vertical" >   
  10.         <Button   
  11.             android:layout_width="match_parent"   
  12.             android:layout_height="wrap_content"   
  13.             android:layout_margin="10dp"   
  14.             android:text="button1"   
  15.             android:background="@drawable/button_selector"   
  16.             />      
  17.         <Button   
  18.             android:layout_width="match_parent"   
  19.             android:layout_height="wrap_content"   
  20.             android:layout_margin="10dp"   
  21.             android:text="button2"   
  22.             android:background="@drawable/button_selector"   
  23.             />    
  24.         <Button   
  25.             android:layout_width="match_parent"   
  26.             android:layout_height="wrap_content"   
  27.             android:layout_margin="10dp"   
  28.             android:text="button3"   
  29.             android:background="@drawable/button_selector"   
  30.             />    
  31.     </LinearLayout>   
  32.     <ImageView   
  33.         android:layout_width="wrap_content"   
  34.         android:layout_height="wrap_content"   
  35.         android:src="@drawable/bg2"   
  36.         android:focusable="false"   
  37.         />   
  38. </RelativeLayout> 

button_selector.xml:

  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <selector   
  3.     xmlns:android="http://schemas.android.com/apk/res/android">   
  4.     <item android:state_pressed="true" >   
  5.         <shape>   
  6.             <!-- 实心,即填充 -->   
  7.             <solid android:color="#8470FF"/>   
  8.             <!-- 描边 -->   
  9.             <stroke   
  10.                 android:width="2dp"   
  11.                 android:color="#FFFF00"/>   
  12.             <!-- 圆角 -->   
  13.             <corners   
  14.                 android:radius="5dp" />   
  15.             <padding   
  16.                 android:left="10dp"   
  17.                 android:top="10dp"   
  18.                 android:right="10dp"   
  19.                 android:bottom="10dp" />   
  20.         </shape>   
  21.     </item>   
  22.  
  23.     <item>         
  24.         <shape>   
  25.             <!-- 实心,即填充 -->   
  26.             <solid android:color="#8470FF"/>   
  27.             <corners   
  28.                 android:radius="5dp" />   
  29.             <padding   
  30.                 android:left="10dp"   
  31.                 android:top="10dp"   
  32.                 android:right="10dp"   
  33.                 android:bottom="10dp" />   
  34.         </shape>   
  35.     </item>   
  36. </selector> 
  37. 转自:http://mobile.51cto.com/android-265446.htm

抱歉!评论已关闭.