android天气预报应用开发（二）----前台界面

Weather天气应用界面包括主界面，天气趋势界面，标题栏和一个侧滑菜单栏。具体布局在可参考代码。

主界面：

主界面包含的数据

1.当天温度

2.当天天气

3.舒适度

4.风力

5.日期

6.更新时间点

7.地区

7.地区前的方向标补间动画

8.第二天的天气情况

9.天气图片

注意点：当天温度"18℃"设置字体阴影，可以有发光效果，其中shadowRadius是阴影半径，值越大阴影越模糊。配以相应阴影颜色shadowColor可达到发光的视觉效果。

        <TextView            android:id="@+id/temperature"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginBottom="10dp"            android:text="21℃"            android:textColor="@color/abs__holo_blue_light"            android:textSize="48sp"             android:shadowColor="@android:color/white"            android:shadowRadius="14"/>

xml设置补间动画：

1.先在项目目录下新建一个anim文件夹：

2.在anim文件夹下新建一个xml文件cityarrow.xml，里面包含动画的各个动画帧，已经每帧的动画停留时，是否重复执行等。

<?xml version="1.0" encoding="utf-8"?><animation-list xmlns:apk="http://schemas.android.com/apk/res/android"    apk:oneshot="false" >    <item        apk:drawable="@drawable/arrow_ani_1"        apk:duration="500"/>    <item        apk:drawable="@drawable/arrow_ani_2"        apk:duration="500"/>    <item        apk:drawable="@drawable/arrow_ani_3"        apk:duration="500"/>    <item        apk:drawable="@drawable/arrow_ani_4"        apk:duration="500"/>    <item        apk:drawable="@drawable/arrow_ani_5"        apk:duration="500"/></animation-list>

3.在布局文件中添加一个imageView控件：

<ImageView android:id="@+id/arrow"android:layout_width="wrap_content" android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:background="@anim/cityarrow" />

其中background属性设置为刚才设置的cityarrow。

4.activity中代码设置动画的开始

// 城市箭头补间动画ImageView imageView = (ImageView) findViewById(R.id.arrow);AnimationDrawable ad = (AnimationDrawable) imageView.getBackground();ad.start();

天气趋势界面：

1.四天的星期（未完成）

2.四天的天气

3.四天的日期（未完成）

4.天气折线图

注意点：

天气折现图原本是想依靠google开源项目AChartEngine实现，但是想达到例如墨迹天气折线图的效果难度太大。AchartEngine的教程可以参考http://blog.csdn.net/lk_blog/article/details/7645509。

项目中使用网上的一个自定义view控件修改得到TrendView控件。实现原理也很简单，通过set设置最高和最低温度集合。以及天气图片编号，在onDraw中根据数据绘制直线和点的位置。

其中需要计算文字的高度，方法如下：

FontMetrics fontMetrics = mTextPaint.getFontMetrics();  // 计算文字高度  float fontHeight = fontMetrics.bottom - fontMetrics.top;

标题栏：

1.更新按钮

2.查找城市按钮

3.home按钮

注意点：

1.ActionBarSherlock添加到布局中，需Activity继承SherlockActivity。

2.在onCreate()函数中调用

getSupportActionBar().setDisplayHomeAsUpEnabled(true);//设置左上角的home按钮是否有效getSupportActionBar().setLogo(R.drawable.icon);//设置左上角的logo图标getSupportActionBar().setTitle("Weather");//设置左上角标题getSupportActionBar().setBackgroundDrawable(this.getResources().getDrawable(R.drawable.base_actionbar_bg));//设置标题栏背景setSupportProgressBarIndeterminateVisibility(false);//加载进度隐藏

3.在onCreateOptionsMenu函数中添加标题栏按钮，重写的是ActionBarSherlock中的onCreateOptionsMenu。

@Overridepublic boolean onCreateOptionsMenu(Menu menu) {menu.add(0, 1, 0, "add")        .setIcon(R.drawable.ic_search)        .setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM | MenuItem.SHOW_AS_ACTION_WITH_TEXT);        menu.add(0, 0, 0, "Refresh")        .setIcon(R.drawable.ic_refresh)        .setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM | MenuItem.SHOW_AS_ACTION_WITH_TEXT);        return true;}

4在onOptionsItemSelected函数中编写按钮事件响应

public boolean onOptionsItemSelected(MenuItem item) {//标题栏菜单按钮事件switch(item.getItemId()){case android.R.id.home:mMenuDrawer.toggleMenu();break;case 1://添加add();break;case 0://更新refresh();break;default:break;}return super.onOptionsItemSelected(item);}

侧滑菜单栏：

1.选择地区按钮：

2.已添加地区列表

注意点：开源项目menuDrawer