简单天气开发系列（三）——侧滑的实现

1 概述

因为其实本项目是模仿轻松天气(EZWeather)的，轻松天气的界面有这么个效果，可以通过侧滑在天气界面和区域选择界面切换。本来看了郭神的博客我是打算按博客上说的通过自己编写触摸事件来实现侧滑效果的，大体思路是一个主布局包含左右两个分布局，将左布局宽度设置为屏幕宽度-固定值(即显示左界面的时候会显示部分右界面，固定值即显示的右界面的宽度)，右布局宽度为屏幕宽度，初始让左布局偏移为-左布局宽度，这样初始就显示右布局。然后监听右布局上的触摸事件，分别编写UP, MOVE DOWN事件下的代码，通过控制左布局偏移来达到一个侧滑的效果。

但是郭神博客上说了要求左右布局必须是4种基本布局，而我想用两个Fragment，感觉这样结构清晰，区域选择的逻辑在左边Fragment，天气显示的逻辑在右边Fragment，不用挤到一个Activity里面，我没试过Fragment是否可用就百度了下sliding fragment，结果发现了一个叫slidingmenu的开源包，实现侧滑效果巨简单，于是决定用slidingmenu来实现。

代码地址：https://github.com/hookbrother/spweather

2 slidingmenu使用

可以通过下载源码，然后导入库，然后进行一些配置，但是已经有热心网友已经打成jar包，这样我们直接使用jar包就可以（如果出错，可能需要导入v4包）。下面介绍他的基本用法：

2.1 创建SlidingMenu

很简单，在Activity的onCreate方法里使用new SlidingMeny(this)即可。

2.2 设置主布局

直接setContentView就可以。

2.3 设置slidingmenu属性（包括副布局）

1. setMode(SlidingMenu.LEFT)。设置左滑还是右滑。
2. setBehindWidth(width)。设置副布局宽度。
3. setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN)。设置触摸滑动的范围，有全屏，边缘和NONE三种。
4. setFadeDegree(0.35f)。设置滑动速度。
5. slidingMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT)。将slidingMenu绑定到当前Activity。
6. setMenu(resourceId)。设置副布局。

3 代码逻辑

主Activity代码：

public class WeatherActivity extends BaseActivity {

    private SlidingMenu slidingMenu;

    @Override
    public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	requestWindowFeature(Window.FEATURE_NO_TITLE);
	setContentView(R.layout.weather_fragment);

	slidingMenu = new SlidingMenu(this);
	slidingMenu.setMode(SlidingMenu.LEFT);
	slidingMenu.setBehindWidth(SPWeatherApp.getScreenWidth() - 80);
	slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
	slidingMenu.setFadeDegree(0.35f);
	slidingMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
	slidingMenu.setMenu(R.layout.region_fragment);
    }

    public SlidingMenu getSlidingMenu() {
	return slidingMenu;
    }
}

主副布局代码：

<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
	  android:id="@+id/region_fragment"
	  android:name="com.hookbrother.spweather.fragment.RegionFragment"
	  android:layout_width="match_parent"
	  android:layout_height="match_parent"/>

<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
	  android:id="@+id/weather_fragment"
	  android:name="com.hookbrother.spweather.fragment.WeatherFragment"
	  android:layout_width="match_parent"
	  android:layout_height="match_parent"/>

两个Fragment代码

public class RegionFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
			     Bundle savedInstanceState) {
	View view = inflater.inflate(R.layout.region_layout, container, false);
	return view;
    }
}

public class WeatherFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
			     Bundle savedInstanceState) {
	return inflater.inflate(R.layout.weather_layout, container, false);
    }
}

两个Fragment布局代码

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

    <TextView
	android:text="Region Test"
	android:layout_width="match_parent"
	android:layout_height="match_parent"/>

</LinearLayout>

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

    <TextView
	android:text="Weather Test"
	android:layout_width="match_parent"
	android:layout_height="match_parent"/>

</LinearLayout>

两个Fragment无论是逻辑和布局都很简单，布局仅有一个TextView来区分两个Fragment，逻辑也仅仅是在onCreateView里返回一个由相应布局inflate的View，主Activity的逻辑也仅仅是设置了主副两个Fragment和slidingMenu的基本参数(slidingMenu可以实现丰富的滑动动画效果，想进一步了解的可以看它的相关文档)，需要注意的是在我把slidingMenu作为一个Activity的成员变量，并且提供了它的获取方法，这样做的原因是可以在主Fragment里得到slidingMenu，并通过调用toggle()方法可以直接让界面滑动到副界面。

文章倒不短了，但是以重复代码居多，准备尽快完成下一篇博客（即本文的左Fragment的布局和代码逻辑，区域选择的实现）。