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。

	@Override
	public 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