使用风格化Android的GridView元素背景

刚刚学习Android的时候,GridView上元素的背景把我搞得很狼狈,那个背景的大小难以控制,导致一个元素背景经常会覆盖到相邻的元素.我费了好大力气才把GridView调整好,但是元素的背景依然没有好的办法去调整.

   
    我所说的元素背景就是上面图片中Car Home图标后面的桔红色的方块.

    今天看了一段代码,是SDK/Sample/HOME项目,大家可以研究一下.

    在布局文件home.xml中有下面的代码:

    <GridView android:id="@+id/all_apps"
        android:background="@drawable/application_background"
        android:persistentDrawingCache="animation|scrolling"
        android:alwaysDrawnWithCache="true"
        android:scrollbars="none"
        android:drawSelectorOnTop="false"
        android:listSelector="@drawable/grid_selector"
        android:numColumns="auto_fit"
        android:columnWidth="78dp"
        android:stretchMode="spacingWidth"
        android:layout_weight="1.0"
        android:layout_height="0dip"
        android:layout_width="match_parent"
        android:stackFromBottom="true"
        android:visibility="invisible" 
    />
    在GridView属性中注意上面绿色的那一行.它指定了元素的背景布局文件为dwawable目录下面的grid_selector.xml文件.打开grid_selector.xml文件,有下面的描述:

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true" 

            android:drawable="@drawable/pressed_application_background_static" />
        <item android:state_window_focused="false"  

             android:drawable="@drawable/focused_application_background_static" />
        <item android:state_window_focused="true" 

              android:drawable="@drawable/focused_application_background_static" />
    </selector>

    在此文件中,三个<item>分别指定了在点击图标,聚焦,失焦的情况下使用的元素背景

    其中,在dwawable-hdpi目录下的pressed_application_background_static.png文件显示为:

       

    在dwawable-hdpi目录下的focused_application_background_static文件显示为: 

      
    这就是我们点击图标元素和滚动图标元素时元素后面的背景.我们通过这样的方法就可以改变其大小,形状以及颜色了,这会使你的GridView制作得更漂亮.

 

 

 

2: Android中图片实现按钮点击效果

 

    

我们在开发的过程中，往往为了美化界面的需要，会修改按钮的默认外观，而因为Android中的按钮有三种状态—默认，被点击，被选中。所以，如果要改变按钮的外观，需要对这三种情况都做出修改，也许在以往，我们最容易想到的就是，手动监听按钮的选中和点击事件，然后写代码来替换按钮的背景，但是在android中，我们不需要这么麻烦，android早就替我们想好了解决方案，那就是selector资源。如果我们要实现按钮的三种背景，只需在res/drawable目录中建立这样一个XML文件：

　　selector.xml

 

<selector xmlns:android="http://schemas.android.com/apk/res/android">

 

        <item android:state_window_focused="false"

 

        android:drawable="@drawable/t3"/>

 

        <item android:state_focused="true"

 

        android:drawable="@drawable/t1"/>

 

        <item android:state_pressed="true"

 

        android:drawable="@drawable/t2"/>

 

        <item android:drawable="@drawable/t3"/>

 

</selector>

 

    正如上面的资源文件所描述的，我们在这里定义了三种行为各自的图片资源，接下来，我们只需要在相应的按钮中,将背景资源指定为drawable/selector，就完成我们需要做的一切了～

 

 

<ImageButton android:layout_width="100px" android:layout_height="50px" android:src="@drawable/selector"/>

 

     这一切就这么简单，不用写任何的逻辑代码，android开发是不是很方便呢～，下面是效果图：

 

 

默认：

 

点击：

 

选中：

 

 

 

 

3

 

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

最近比较热衷于Android开发这方面，关注到了许多像下面这样对例子，分享一下。Focusable 是 Microsoft .NET 属性访问器，它实际上是一个依赖项属性。 这一特定依赖项属性非常普遍地在派生元素类（尤其是控件）中以不同方式设置其原本的“默认”值。 这种情况通常以两种方式发生

AD：

 

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

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

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

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

具体代码如下：

main.xml：

   
   
<?xml version="1.0" encoding="utf-8"?>   
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"   
    android:layout_width="fill_parent"   
    android:layout_height="fill_parent"   
    >   
    <LinearLayout   
        android:layout_width="match_parent"   
        android:layout_height="wrap_content"   
        android:orientation="vertical" >   
        <Button   
            android:layout_width="match_parent"   
            android:layout_height="wrap_content"   
            android:layout_margin="10dp"   
            android:text="button1"   
            android:background="@drawable/button_selector"   
            />      
        <Button   
            android:layout_width="match_parent"   
            android:layout_height="wrap_content"   
            android:layout_margin="10dp"   
            android:text="button2"   
            android:background="@drawable/button_selector"   
            />    
        <Button   
            android:layout_width="match_parent"   
            android:layout_height="wrap_content"   
            android:layout_margin="10dp"   
            android:text="button3"   
            android:background="@drawable/button_selector"   
            />    
    </LinearLayout>   
    <ImageView   
        android:layout_width="wrap_content"   
        android:layout_height="wrap_content"   
        android:src="@drawable/bg2"   
        android:focusable="false"   
        />   
</RelativeLayout> 

button_selector.xml：

   
   
<?xml version="1.0" encoding="utf-8"?>   
<selector   
    xmlns:android="http://schemas.android.com/apk/res/android">   
    <item android:state_pressed="true" >   
        <shape>   
            <!-- 实心，即填充 -->   
            <solid android:color="#8470FF"/>   
            <!-- 描边 -->   
            <stroke   
                android:width="2dp"   
                android:color="#FFFF00"/>   
            <!-- 圆角 -->   
            <corners   
                android:radius="5dp" />   
            <padding   
                android:left="10dp"   
                android:top="10dp"   
                android:right="10dp"   
                android:bottom="10dp" />   
        </shape>   
    </item>   
 
    <item>         
        <shape>   
            <!-- 实心，即填充 -->   
            <solid android:color="#8470FF"/>   
            <corners   
                android:radius="5dp" />   
            <padding   
                android:left="10dp"   
                android:top="10dp"   
                android:right="10dp"   
                android:bottom="10dp" />   
        </shape>   
    </item>   
</selector> 

关于button_selector.xml中shape的使用有疑问的可以看我上次的文章：Android中shape的使用。