手机QQ UI界面分析

jhzhao

2013-03-30

一、设置界面。

采用PerferenceActivity 与Perference完美配置在一起。

类似android自身的设置界面也是采用此种方式。

配置Activity，指定了一个主题

<!--  配置这个属性表示切换横竖屏的时候，不会调用oncreate()方法而是调用onConfigchanges -->
        <activity android:name=".SettingActivity"
                  android:label="设置与帮助"
                  android:theme="@style/Default"
                  android:configChanges="keyboardHidden|orientation" >

顶部是使用自定义WindowTitle，也可以先获得第一个ScreenPrefernces,然后自行添加的headView

//Light改变了 "消息通知"这一栏的明亮程度

<style name="Default.NoTitleBar" parent="@android:style/Theme.Light.NoTitleBar">
<item name="android:textColorPrimaryInverse">@color/traffic_txt</item>   
        <item name="android:windowBackground">@color/window_bg</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowTitleStyle">@style/CustomWindowTitleText</item> 
        <item name="android:windowTitleBackgroundStyle">@style/CustomWindowTitleBackground</item>
        <item name="android:checkboxStyle">@style/customCheckBox</item>
        <item name="android:listViewStyle">@style/customListView</item>

设置的配置文件。

<PreferenceScreen
	xmlns:android="http://schemas.android.com/apk/res/android">
	
    <PreferenceCategory android:title="消息通知"> 
        <CheckBoxPreference android:title="开启声音" android:key="开启声音" android:summary="当有新消息通知时播放声音提示" android:summaryOn="选中了我" android:summaryOff="没选中我" android:defaultValue="false"/>
        <CheckBoxPreference android:title="开启震动" android:key="开启震动" android:summary="当有新消息通知时震动提示" android:defaultValue="true" />    
    </PreferenceCategory>
    
    <PreferenceCategory android:title="图片接收">	
        <CheckBoxPreference android:title="自动接收图片" android:key="自动接收图片" android:summary="GPRS,3G网络下自动接收并显示图片" android:defaultValue="false" >
         </CheckBoxPreference>       
    </PreferenceCategory>
    
    <PreferenceCategory android:title="显示" >  
        <CheckBoxPreference android:title="开启横屏模式" android:key="开启横屏模式" android:defaultValue="true" />
        <CheckBoxPreference android:title="显示系统栏挂机图标" android:key="显示系统栏挂机图标" android:summary="后台运行时，在系统栏显示程序图标" android:defaultValue="true" />
        <PreferenceScreen android:title="更换皮肤">
            <intent android:targetPackage="com.genius.demo" android:targetClass="com.genius.demo.SkinActivity" />
        </PreferenceScreen>
        
    </PreferenceCategory>
    
    <PreferenceCategory android:title="辅助功能">
        <CheckBoxPreference android:title="开启截屏功能" android:key="开启截屏功能" android:summary="摇晃手机即可截图（在QQ外截图需root权限）" android:defaultValue="false" />
        <CheckBoxPreference android:title="上报我的地理位置" android:key="上报我的地理位置" android:summary="上报地理位置信息以便附近的人能够找到我" android:defaultValue="false" />
        <PreferenceScreen android:title="查看流量统计" android:summary="使用手机QQ所产生的上行和下行流量">
            <intent android:targetPackage="com.genius.demo" android:targetClass="com.genius.demo.TrafficStatActivity" />
        </PreferenceScreen>

    </PreferenceCategory>
    
    <PreferenceCategory android:title="帮助">
        <PreferenceScreen android:title="反馈建议" android:summary="反馈建议">
            <intent android:action="android.intent.action.VIEW" android:data="http://wap.3g.qq.com/g/s?aid=wapsupport&amp;amp;fid=647" />
        </PreferenceScreen>
        <PreferenceScreen android:title="好友设置" android:summary="好友设置">
            <intent android:targetPackage="com.genius.demo" android:targetClass="com.genius.demo.FriendInfoActivity" />
        </PreferenceScreen>
    </PreferenceCategory>
</PreferenceScreen>

手机QQ UI界面分析

二、查看流量统计

手机QQ UI界面分析

页面布局
中间的采用include的形式进去的。里面采用的布局是一个tableLayout。注意到中间的矩形周边有圆角没。那是采用shape作为背景的。
手机QQ UI界面分析

table布局文件

<?xml version="1.0" encoding="UTF-8"?>
<!-- shape_bg作为背景配置 -->
<TableLayout 
	android:background="@drawable/shape_bg" 
	android:paddingLeft="6.0dip" 
	android:paddingTop="5.0dip" 
	android:paddingRight="6.0dip" 
	android:paddingBottom="5.0dip" 
	android:layout_width="fill_parent" 
	android:layout_height="wrap_content" 
	android:layout_marginLeft="8.0dip" 
	android:layout_marginTop="0.0dip" 
	android:layout_marginRight="8.0dip" 
	android:layout_marginBottom="9.0dip"
	
    xmlns:android="http://schemas.android.com/apk/res/android">
    
    
    <TableRow>
        <TextView android:textSize="14.0sp" android:textColor="@color/traffic_txt" android:padding="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="" android:layout_weight="1.0" />
        <TextView android:textSize="14.0sp" android:textColor="@color/traffic_txt" android:padding="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="发送" android:layout_weight="1.0" />
        <TextView android:textSize="14.0sp" android:textColor="@color/traffic_txt" android:padding="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="接收" android:layout_weight="1.0" />
    </TableRow>
    <TableRow>
        <TextView android:textSize="14.0sp" android:textColor="@color/traffic_txt" android:padding="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="基础聊天" android:layout_weight="1.0" />
        <TextView android:textSize="14.0sp" android:textColor="@color/traffic_data" android:padding="5.0dip" android:layout_width="fill_parent" android:id="@+id/base_send_trafic" android:text="34 KB" android:layout_height="wrap_content" android:layout_weight="1.0" />
        <TextView android:textSize="14.0sp" android:textColor="@color/traffic_data" android:padding="5.0dip" android:layout_width="fill_parent" android:id="@+id/base_recv_trafic" android:text="15 KB" android:layout_height="wrap_content" android:layout_weight="1.0" />
    </TableRow>
    <TableRow>
        <TextView android:textSize="14.0sp" android:textColor="@color/traffic_txt" android:padding="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="图片" android:layout_weight="1.0" />
        <TextView android:textSize="14.0sp" android:textColor="@color/traffic_data"  android:padding="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="0 bytes" android:layout_weight="1.0" />
        <TextView android:textSize="14.0sp" android:textColor="@color/traffic_data"  android:padding="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="0 bytes" android:layout_weight="1.0" />
    </TableRow>
    <TableRow>
        <TextView android:textSize="14.0sp" android:textColor="@color/traffic_txt" android:padding="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="语音" android:layout_weight="1.0" />
        <TextView android:textSize="14.0sp" android:textColor="@color/traffic_data" android:padding="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="0 bytes" android:layout_weight="1.0" />
        <TextView android:textSize="14.0sp" android:textColor="@color/traffic_data" android:padding="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="0 bytes" android:layout_weight="1.0" />
    </TableRow>
    <TableRow>
        <TextView android:textSize="14.0sp" android:textColor="@color/traffic_txt" android:padding="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="视频" android:layout_weight="1.0" />
        <TextView android:textSize="14.0sp" android:textColor="@color/traffic_data" android:padding="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="0 bytes" android:layout_weight="1.0" />
        <TextView android:textSize="14.0sp" android:textColor="@color/traffic_data" android:padding="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="0 bytes" android:layout_weight="1.0" />
    </TableRow>
    <TableRow>
        <TextView android:textSize="14.0sp" android:textColor="@color/traffic_txt" android:padding="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="小计" android:layout_weight="1.0" />
        <TextView android:textSize="14.0sp" android:textColor="@color/traffic_data" android:text="34 KB" android:id="@+id/total_send_trafic"  android:padding="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0" />
        <TextView android:textSize="14.0sp" android:textColor="@color/traffic_data" android:text="15 KB" android:id="@+id/total_recv_trafic" android:padding="5.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0" />
    </TableRow>
</TableLayout>

shape_bg.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape android:shape="rectangle"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/white" />
<!--边框的粗细与颜色-->
    <stroke android:width="1.0dip" android:color="#ffe0e0e0" />
    <corners android:radius="4.0dip" />
</shape>

三、好友资料界面

使用多个LinerLayout来控制。。每个LinerLayout设置一个边界距离。

手机QQ UI界面分析