引言
本週第二階段的主要任如下:
- 用戶詳細設計的進行
- 服務器端詳細設計的進行
- 用戶界面設計的詳細進行
對我我的主要任務,主要是針對部分構建好的界面進行測試數據的填充
用戶界面設計
這一階段主要針對以下三個界面:
- 個人首頁界面
- 社區首頁界面
- 我的好友界面
個人首頁界面
佈局代碼如下;
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/activity_bg_gray"
android:orientation="vertical">
<com.example.sdu.myflag.widget.CustomViewPager
android:id="@+id/main_view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/activity_bg_gray" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/white"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:onClick="onMainTabClick"
android:orientation="vertical">
<ImageView
android:id="@+id/tab_main_img"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="@drawable/main_page_default" />
<TextView
android:id="@+id/tab_main_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="首頁"
android:textColor="@color/tab_text_color_gray"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:onClick="onCommunityTabClick"
android:orientation="vertical">
<ImageView
android:id="@+id/tab_community_img"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="@drawable/community_default" />
<TextView
android:id="@+id/tab_community_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="社區"
android:textColor="@color/tab_text_color_gray"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:onClick="onMySelfTabClick"
android:orientation="vertical">
<ImageView
android:id="@+id/tab_myself_img"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="@drawable/myself_default" />
<TextView
android:id="@+id/tab_myself_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="我"
android:textColor="@color/tab_text_color_gray"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
設計效果圖: | 數據填充效果圖: |
---|---|
社區首頁界面
社區首頁界面的代碼設計如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/activity_bg_gray"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/white">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="社區"
android:textColor="@color/black"
android:textSize="19sp" />
</RelativeLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/community_swipe_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="@+id/community_list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/activity_bg_gray"
android:divider="@color/transparent" />
</android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>
設計效果圖: | 數據填充效果圖: |
---|---|
我的好友界面
我的好友界面代碼:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#fffafafa"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/white">
<ImageButton
android:id="@+id/back_btn"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentLeft="true"
android:onClick="FriendBack"
android:background="@drawable/toolbar_back_bg"
android:src="?attr/homeAsUpIndicator" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="好友"
android:textColor="@color/black"
android:textSize="19sp" />
<Button
android:id="@+id/complete_btn"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentRight="true"
android:text="完成"
android:textSize="15sp"
android:textColor="@color/login_button_default_blue"
android:background="@drawable/toolbar_back_bg"
android:src="?attr/homeAsUpIndicator" />
</RelativeLayout>
<com.example.sdu.myflag.widget.LetterFilterListView
android:id="@+id/letterView"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:focusable="true"
android:focusableInTouchMode="true">
<ListView
android:id="@+id/listView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:cacheColorHint="#00000000"
android:divider="@null"/>
</com.example.sdu.myflag.widget.LetterFilterListView>
</LinearLayout>
設計效果圖: | 數據填充效果圖: |
---|---|
總結
這些界面設計在整體上還是令人滿意的,但是在細節方面還需要及時與客戶端開發人員溝通,進行調節。