40、流量统计--界面设计

这里联系使用抽屉控件SlidingDrawer，布局文件：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView style="@style/title_center_text"
        android:text="流量统计"/>
    <View style="@style/splitter_view"/>

    <SlidingDrawer
        android:content="@+id/content"
        android:handle="@+id/handle"
        android:layout_height="match_parent"
        android:layout_width="match_parent">
        <ImageView
            android:id="@id/handle"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:src="@drawable/notification"/>
        <RelativeLayout
            android:id="@id/content"
            android:layout_height="match_parent"
            android:layout_width="match_parent">
            <LinearLayout
                android:orientation="vertical"
                android:gravity="center"
                android:id="@+id/ll_loading"
                android:layout_height="match_parent"
                android:layout_width="match_parent">
                <ProgressBar style="@style/my_pb_style"
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content" />
                <TextView style="@style/commontext"
                    android:text="正在加载流量信息……"/>
            </LinearLayout>
            <ListView
                android:id="@+id/lv_traffic"
                android:layout_height="match_parent"
                android:layout_width="match_parent"/>
        </RelativeLayout>
    </SlidingDrawer>
</LinearLayout>

每一个item的布局文件参考 《37、进程管理器--界面设计》：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:id="@+id/ll_taskmanager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/iv_traffic_icon"
        android:layout_height="60dip"
        android:layout_width="60dip"
        android:layout_weight="0"
        android:layout_gravity="left"/>
    <RelativeLayout
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView style="@style/content_text"
            android:id="@+id/tv_traffic_name"
            android:layout_alignParentTop="true"
            android:singleLine="true"
            android:ellipsize="end"
            android:textSize="20sp"/>
        <LinearLayout
            android:orientation="horizontal"
            android:layout_alignParentBottom="true"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content">
            <ImageView
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:src="@drawable/app_traffic_send"/>
            <TextView style="@style/content_text"
                android:id="@+id/tv_traffic_tx"
                android:textSize="12sp"/>
            <TextView style="@style/content_text"
                android:text="    "
                android:textSize="12sp"/>
            <ImageView
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:src="@drawable/app_traffic_down"/>
            <TextView style="@style/content_text"
                android:id="@+id/tv_traffic_rx"
                android:textSize="12sp"/>
        </LinearLayout>
    </RelativeLayout>

    <TextView style="@style/content_text"
        android:id="@+id/tv_traffic_total"
        android:textSize="12sp"/>
</LinearLayout>

运行效果图：

点击抽屉的把柄向上滑动，显示正在加载中的滚动条：

滚动条为自定义的ProgressBar，继承风格：@style/my_pb_style：

    <style name="my_pb_style" parent="@android:style/Widget.ProgressBar">
        <item name="android:indeterminateDrawable">@drawable/my_pb_bg</item>
    </style>

其中my_pb_bg.xml：

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/notification"
    android:pivotX="50%"
    android:pivotY="50%"
 />