屏幕滑动效果的实现

今天的睡眠跟踪应用的开发完成了一个里程碑事件——顺利设计出滑动界面。

先说一下效果：

在点击”结束睡眠“后，会进入一个睡眠结果的显示界面，其中第一个界面只显示睡眠结果的加速度柱状图，第二个界面显示睡眠翻身次数、睡眠时间等等。两个界面之间是可以左右滑动的，并且从程序实现角度来讲，两个界面是在同一个Activity中，而不是分立各自显示。当然，为了不浪费各位看官的时间，先讲明一下：两个界面都没有实现所谓动态加载——即所有需要显示的数据都已在第一个Activity中生成，由Intent传递给第二个Activity而不是由第二个Activity动态生成。

主要思路：

其实还是运用了ViewPager这个强大的Java自带控件工具。

首先是在xml文件中声明一个viewPager控件，以及一个Layout来装两个子View。这个layout从GraphicalLayout窗口中看是一片空白的，因为他具体的内容还要等选择某个子View来填充。

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white" >
    </android.support.v4.view.ViewPager>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:id="@+id/viewGroup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="8dp"
            android:gravity="center"
            android:orientation="horizontal" >
        </LinearLayout>
    </RelativeLayout>

</FrameLayout>

接下来要分别设计两个子view（叫子view可能不合适，我想表达的子view意思就是可以切换的那两个屏的布局效果）的布局。

以下是睡眠分析子view。（这里面可以充分发挥，想把子屏设置成什么样就是什么样）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/sleep_tracking"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#18243A"
    android:orientation="vertical"
    tools:context=".SleepTrackingResultActivity" >

    <!-- 睡眠结果的第二屏，显示翻身情况 -->

    <TextView
        android:id="@+id/crrentTimeShow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="2013年8月23日"
        android:textColor="#CCFF99"
        android:textColorHighlight="#0000FF"
        android:textSize="23sp" />

    <TextView
        android:id="@+id/turnShow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="睡眠翻身"
        android:textColor="#93DAFF"
        android:textSize="23sp" />

    <TextView
        android:id="@+id/sleepTimeDurationShow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="睡眠时间为"
        android:textColor="#93DAFF"
        android:textSize="23sp" />

    <RatingBar
        android:id="@+id/ratingBar"
        style="@style/rating_bar_style_for_zwatch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:isIndicator="true"
        android:soundEffectsEnabled="true" />

</LinearLayout>

另外一个是显示图表的view。同理，这个子布局可以自行设计。其实这个子布局和普通的布局没什么区别。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/sleep_tracking"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#18243A"
    android:orientation="vertical"
    tools:context=".SleepTrackingResultActivity" >

    <!-- 第一屏，显示图表 -->

    <LinearLayout
        android:id="@+id/topViewForChart"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:visibility="visible" >
    </LinearLayout>

</LinearLayout>

xml文件设计结束后，要在代码里进行控制。最关键的问题：两个子布局文件，加上总的布局文件，一共三个，但是只有总布局文件是Java代码通过setContentView()获得的，另外两个子View中的控件如何获得？已经试验：如果直接在Java代码中写findViewById(R.id.xxx)，程序会报空指针异常，也就是程序没有那么智能会自动查找子view是否含有控件，它只会查找setContentView()已经关联的总view，不在总view中的控件，它是找不到的。

所以，这里需要viewPager的一个Adapter，与子view进行关联，通过映射的方法将子布局文件映射成view而后通过list.get(Position).findViewById的方法来获得子view中的控件而不是直接写findViewById。

中间牵涉到三个概念：adapter、viewPager、list。adapter就是用于适配viewPager的，不做解释。最后的list的作用正是把几个子view装进队列中，然后写入adapter里。

废话不多说，直接上代码。

@TargetApi(Build.VERSION_CODES.CUPCAKE)
public class SleepTrackingResultActivity extends Activity {

	private TextView sleepTimeDurationShow;
	private TextView currentTimeShow;
	private TextView turnShow;
	// 用于显示表格的LinearLayout
	private LinearLayout topViewForChart;
	private RatingBar rating;
	/** 以XXXX年XX月XX日XX时XX分XX秒为格式的睡眠时间，该格式主要用于睡眠结果的前端显示 */
	private String strSleepTimeDuration;
	// 睡眠翻身次数
	private int sleepTurnCount;
	// 睡眠质量评级字符串
	private float ratingResult;
	// 数据库中要查询的睡眠记录的pid
	private long sleepPid;
	// 数据库相关变量
	private SleepTrackingResult_db mDatabase;
	private SQLiteDatabase db;
	// 滑动效果相关变量
	private ViewPager viewPager = null;
	private List<View> list = null;
	private ImageView[] image = null;
	private int lastX = 0;
	private int currentIndex=0;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);
		setContentView(R.layout.sleep_tracking_result);

		// 分页显示相关
		viewPager = (ViewPager) findViewById(R.id.viewPager);
		list = new ArrayList<View>();
		list.add(getLayoutInflater().inflate(R.layout.sleep_tracking_chart, null));
		list.add(getLayoutInflater().inflate(R.layout.sleep_tracking_analysis, null));
	    viewPager.setAdapter(new ViewPagerAdapter(list));
	    
		// 获取数据库
		mDatabase = new SleepTrackingResult_db(this);
		db = mDatabase.getWritableDatabase();

		currentTimeShow = (TextView) list.get(1).findViewById(R.id.currentTimeShow);
		rating = (RatingBar) list.get(1).findViewById(R.id.ratingBar);
		sleepTimeDurationShow = (TextView) list.get(1).findViewById(R.id.sleepTimeDurationShow);
		turnShow = (TextView) list.get(1).findViewById(R.id.turnShow);
		topViewForChart = (LinearLayout) list.get(0).findViewById(R.id.topViewForChart);
		
		// 从传递的Intent中得到睡眠结果参数
		Bundle bundle = new Bundle();
		Intent trackingResult = getIntent();
		
		bundle = trackingResult.getExtras();
		sleepTurnCount = bundle.getInt("sleep_turn_count");
		ratingResult = bundle.getFloat("rating_result");
		strSleepTimeDuration = bundle.getString("sleep_time_duration");
		sleepPid = bundle.getLong("sleep_pid");
		
		// 交由前台展示
		currentTimeShow.setText(getCurrentDate());
		rating.setRating(ratingResult);
		sleepTimeDurationShow.append(strSleepTimeDuration);
		turnShow.append(sleepTurnCount + "次");
		// 显示图表
		SleepTrackingChart sleepTrackingChart = new SleepTrackingChart();
		View chartView = sleepTrackingChart.execute(this,sleepPid);
		chartView.setHorizontalScrollBarEnabled(true);
		chartView.setVerticalScrollBarEnabled(true);

        topViewForChart.addView(chartView);


	}
	
	class ViewPagerAdapter extends PagerAdapter {

        private List<View> list = null;

        public ViewPagerAdapter(List<View> list) {
            this.list = list;
        }

        @Override
        public int getCount() {
            return list.size();
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(list.get(position));
            return list.get(position);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(list.get(position));
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == arg1;
        }

    }

	public List<double[]> addTimeStamp(List<double[]> TargetList,
			List<Double> timeStamp) {
		double[] t = new double[timeStamp.size()];
		for (int i = 0; i < timeStamp.size(); i++) {
			t[i] = timeStamp.get(i);
		}
		TargetList.add(t);
		return TargetList;
	}

	/**
	 * 获取当前日期（精确到日）
	 * 
	 * @return 当前日期
	 */
	public String getCurrentDate() {
		SimpleDateFormat formatter = new SimpleDateFormat("yyyy年MM月dd日");
		Date curDate = new Date(System.currentTimeMillis());
		String str = formatter.format(curDate);
		return str;
	}
	
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		// TODO Auto-generated method stub
		switch(keyCode){
		case KeyEvent.KEYCODE_BACK:
			Intent retrackingIntent = new Intent();
			retrackingIntent.setClass(SleepTrackingResultActivity.this, SleepTrackingActivity.class);
			startActivity(retrackingIntent);
			return true;
		
		}
		return super.onKeyDown(keyCode, event);
	}

	@Override
	protected void onDestroy() {
		// TODO Auto-generated method stub
		super.onDestroy();
		db.close();
	}

}

迫于各种原因，import的那部分前缀省略了。整个工程源代码因为牵涉到公司利益，不给出了。可以重点关注 //分页显示相关 的那几行代码。

OK，希望以后能记住，希望看官能明白。