引言
本周第二阶段的主要任如下:
- 用户详细设计的进行
- 服务器端详细设计的进行
- 用户界面设计的详细进行
对我我的主要任务,主要是针对部分构建好的界面进行测试数据的填充
用户界面设计
这一阶段主要针对以下三个界面:
- 个人首页界面
- 社区首页界面
- 我的好友界面
个人首页界面
布局代码如下;
<?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>
设计效果图: | 数据填充效果图: |
---|---|
总结
这些界面设计在整体上还是令人满意的,但是在细节方面还需要及时与客户端开发人员沟通,进行调节。