Android Layout研究 <四> 实例

来源：互联网发布：控制微信摇骰子软件编辑：程序博客网时间：2024/06/03 16:37

以下实例是想做一个界面: 这个界面全屏显示,有背景图片, 可以显示Wifi和有线网络是否连通. 可以显示当前日期,时间. 并有横竖两排ICON. 每个Icon代表一个App,点击则进入。

咱们一步一步向下走：

1. 加背景图片，并使之全屏：

layout/main.xml如下：

在res/drawable-hdpi/目录下添加bg2.png图片作为背景图片。

之后在layout xml文件中加入：

android:background="@drawable/bg2"

在AndroidManifest.xml的Activity项目，添加如下语句，表明Activity全屏。

android:theme="@android:style/Theme.NoTitleBar.Fullscreen"

2. 在屏幕的左上方，放置两个小图示，分别显示Wifi和有线网络的状态。

<?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"
    android:background="@drawable/bg2"
    >
     
     <LinearLayout
        android:id="@+id/ll_bar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="left|center_vertical"
        android:orientation="horizontal" >



          <Button
            android:id="@+id/bar_wifiInfo"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginLeft="50dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/wifi_network"
            android:enabled="false"
            android:focusable="false" />

          <Button
            android:id="@+id/bar_netInfo"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/et_network"
            android:enabled="false"
            android:focusable="false" />

    </LinearLayout>


</RelativeLayout>

本例中, 有两层ViewGroup, 外层ViewGroup为: Relative. 它包含另一个ViewGroup---Linear. 而Linear中则包含两个View元素。Button。因为Linear并没有指出和父ViewGroup的位置关系。所以可以认为Linear和Relative左上角重合。

在后面需要加入真正的几个Button. 他们没什么特别之处. 唯一需要注意的是:

android:focusableInTouchMode="true"

在STB中,如果没有这个参数,则使用遥控器可以正常选中某Button焦点,然后进入. 但使用鼠标或Touch时,则点击直接进入. 没有焦点变化.

前面看到,Button在状态改变时,希望使用不同的背景图片. 如被焦点变化,被点击等等. 我们采用标准做法----背景选择器(selector).

例如前面的：@drawable/wifi_network， @drawable/add_bg。其实都是背景选择器。

举例详解如下：

selector创建：

在res/drawable目录下，创建xml文件如下：

<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/doc_bg_se_p1" />
    <item android:state_pressed="true" android:drawable="@drawable/doc_bg_se_p1" />
    <item android:state_focused="true" android:drawable="@drawable/doc_bg_se_p1" />
    <item android:drawable="@drawable/doc_bg" />
</selector>

讲解如下：

A:<item android:drawable="@drawable/doc_bg" />

默认状态下，采用doc_bg这张图片。图片位置在res/drawable或res/drawable-xxxx

B: <item android:state_selected="true" android:drawable="@drawable/doc_bg_se_p1" />

选中状态下，所采用的图片。

C：<item android:state_pressed="true" android:drawable="@drawable/doc_bg_se_p1" />

按下状态下，所采用的图片。

D：<item android:state_focused="true" android:drawable="@drawable/doc_bg_se_p1" />

焦点状态下，所采用的图片。

其它还有：

state_window_focused="false"：没有焦点时的图片。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_focused="true">

</item>

<item>

说明：

缺省为：

<item>

即没有任何变化。原始状态。

有焦点时：

</item>

详细分析：

shape:自定义图形（能使用6个子标签）

gradient -- 对应颜色渐变。 startcolor、endcolor就不多说了。 android:angle 是指从哪个角度开始变。

solid -- 填充。

stroke -- 描边。

corners -- 圆角。

padding -- 定义内容离边界的距离。

0 0