原文:
10天学安卓-第九天
接着昨天的任务，我们今天实现左右滑动可以切换城市的功能。
这里就需要引入新的控件了，Android给我们提供了ViewPager，我们就使用这个，同时，显示天气的界面我们也不再使用Activity，而改为Fragment。
Fragment
Fragment可以认为是可复用的UI组件，有自己的布局和完整的生命周期，可以处理本身的事件，但是必须依存于Activity，不能脱离Activity而存在。
可以看出来，Fragment的生命周期跟Activity非常相似，并且会随着Activity的销毁而销毁。
下面，我们来战。
首先，新建一个Fragment的子类，取名为WeatherFragment。
public class WeatherFragment extends Fragment
{
@Override
public void onCreate( Bundle savedInstanceState )
{
super.onCreate( savedInstanceState );
}
@Override
public View onCreateView( LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState )
{
return super.onCreateView( inflater, container, savedInstanceState );
}
}
这是用来显示天气的界面，而我们之前是直接在Activity中显示的，需要把这部分代码给移植到Fragment中。
这是个麻烦的过程，不过不要紧，慢慢来。
新建一个Layout，取名为frag_weather.xml，然后把activity_main.xml中的代码给复制过来，
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin" >
<ListView
android:id="@+id/weather_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >
</ListView>
</RelativeLayout>
我们让WeatherFragment使用新的Layout，再把MainActivity中关于天气的代码移植到WeatherFragment中，
public class WeatherFragment extends Fragment
{
@ViewInject( R.id.weather_list )
private ListView lstWeather;
private WeatherAdapter adapter;
private BaiduData data;
private List<WeatherDataBean> datas;
private String city;
public void setCity( String city )
{
this.city = city;
}
@Override
public void onCreate( Bundle savedInstanceState )
{
super.onCreate( savedInstanceState );
datas = new ArrayList<WeatherDataBean>();
adapter = new WeatherAdapter( getActivity(), datas );
}
@Override
public View onCreateView( LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState )
{
View view = inflater.inflate( R.layout.frag_weather, null );
ViewUtils.inject( this, view );
lstWeather.setAdapter( adapter );
getWeather();
return view;
}
private void getWeather()
{
HttpUtils http = new HttpUtils();
RequestParams params = new RequestParams();
params.addQueryStringParameter( "location", city );
params.addQueryStringParameter( "output", "json" );
params.addQueryStringParameter( "ak", "YknGmxIoPugT7YrNrG955YLS" );
http.send( HttpMethod.GET, "http://api.map.baidu.com/telematics/v3/weather", params, new RequestCallBack<String>()
{
@Override
public void onSuccess( ResponseInfo<String> responseInfo )
{
String weather = responseInfo.result;
Gson gson = new Gson();
data = gson.fromJson( weather, BaiduData.class );
datas.clear();
datas.addAll( data.getResults().get( 0 ).getWeather_data() );
adapter.notifyDataSetChanged();
Log.v( "onSuccess", data.toString() );
}
@Override
public void onFailure( HttpException arg0, String arg1 )
{
Log.v( "onFailure", arg1 );
}
} );
}
}
然后，修改主页面activity_main.xml为：
<?xml version="1.0"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:id="@+id/viewGroup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="30dp"
android:gravity="center_horizontal"
android:orientation="horizontal" >
</LinearLayout>
</RelativeLayout>
这里我们引入了ViewPager，并且还有一个LinearLayout，其中ViewPager我们用来显示天气，Linearlayout用来作为指示器，表示我们当前所选城市的次序。
之后，修改我们主页面的代码，主界面现在的作用主要是两个：
1. 初次启动的时候，获取所在地城市
2. 处理切换Fragment的逻辑
3. 处理页面跳转/返回的逻辑
public class MainActivity extends FragmentActivity
{
@ViewInject( R.id.viewPager )
private ViewPager pager;
@ViewInject( R.id.viewGroup )
private LinearLayout layout;
private MyAdapter mAdapter;
private List<SelectCityBean> citys;
private LocationClient mLocationClient;
private BDLocationListener myListener;
private List<ImageView> imageViews;
@Override
protected void onCreate( Bundle savedInstanceState )
{
super.onCreate( savedInstanceState );
setContentView( R.layout.activity_main );
Log.v( "WeatherAPP", "onCreate" );
ViewUtils.inject( this );
imageViews = new ArrayList<ImageView>();
citys = readCity();
mAdapter = new MyAdapter( getSupportFragmentManager() );
pager.setAdapter( mAdapter );
pager.setOnPageChangeListener( new OnPageChangeListener()
{
@Override
public void onPageSelected( int arg0 )
{
setTitle( citys.get( arg0 ).getCityName() + "天气" );
setImageBackground( arg0 );
}
@Override
public void onPageScrolled( int arg0, float arg1, int arg2 )
{
}
@Override
public void onPageScrollStateChanged( int arg0 )
{
}
} );
if( citys == null || citys.size() == 0 )
{
citys = new ArrayList<SelectCityBean>();
initLocationClient();
mLocationClient.start();
}
showIndicator( 0 );
}
private void showIndicator( int position )
{
layout.removeAllViews();
imageViews = new ArrayList<ImageView>();
pager.setCurrentItem( position );
for( int i = 0; i < citys.size(); i++ )
{
ImageView imageView = new ImageView( this );
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams( 20, 20 );
lp.leftMargin = 5;
imageView.setLayoutParams( lp );
imageViews.add( imageView );
if( i == position )
{
setTitle( citys.get( position ).getCityName() + "天气" );
imageView.setBackgroundResource( R.drawable.page_indicator_focused );
}
else
{
imageView.setBackgroundResource( R.drawable.page_indicator_unfocused );
}
layout.addView( imageView );
}
}
private void setImageBackground( int selectItems )
{
for( int i = 0; i < imageViews.size(); i++ )
{
if( i == selectItems )
{
imageViews.get( i ).setBackgroundResource( R.drawable.page_indicator_focused );
}
else
{
imageViews.get( i ).setBackgroundResource( R.drawable.page_indicator_unfocused );
}
}
}
@Override
public boolean onCreateOptionsMenu( Menu menu )
{
super.onCreateOptionsMenu( menu );
menu.add( Menu.NONE, Menu.FIRST + 1, 0, "添加城市" ).setShowAsAction( MenuItem.SHOW_AS_ACTION_ALWAYS );
return true;
}
@Override
public boolean onOptionsItemSelected( MenuItem item )
{
if( item.getItemId() == Menu.FIRST + 1 )
{
Intent intent = new Intent( getApplicationContext(), ChooseCityActivity.class );
intent.putExtra( "key", "value" );
startActivityForResult( intent, 99 );
}
return super.onOptionsItemSelected( item );
}
@Override
protected void onActivityResult( int requestCode, int resultCode, Intent data )
{
super.onActivityResult( requestCode, resultCode, data );
if( resultCode == RESULT_OK )
{
String city = data.getStringExtra( "selectedCity" );
addCity( city );
}
}
private void initLocationClient()
{
mLocationClient = new LocationClient( getApplicationContext() ); // 声明LocationClient类
myListener = new MyLocationListener();
LocationClientOption option = new LocationClientOption();
option.setLocationMode( LocationMode.Hight_Accuracy );
option.setIsNeedAddress( true );
mLocationClient.setLocOption( option );
mLocationClient.registerLocationListener( myListener );
}
@Override
protected void onStop()
{
Log.v( "WeatherAPP", "onStop" );
super.onStop();
if( mLocationClient != null ) mLocationClient.stop();
}
@Override
protected void onPause()
{
Log.v( "WeatherAPP", "onPause" );
super.onPause();
}
@Override
protected void onRestart()
{
Log.v( "WeatherAPP", "onRestart" );
super.onRestart();
}
@Override
protected void onResume()
{
Log.v( "WeatherAPP", "onResume" );
super.onResume();
}
@Override
protected void onStart()
{
Log.v( "WeatherAPP", "onStart" );
super.onStart();
}
@Override
protected void onDestroy()
{
Log.v( "WeatherAPP", "onDestroy" );
super.onDestroy();
}
public class MyLocationListener implements BDLocationListener
{
@Override
public void onReceiveLocation( BDLocation location )
{
String city = location.getCity();
addCity( city );
}
}
private void addCity( String city )
{
SelectCityBean cityBean = new SelectCityBean();
cityBean.setCityName( city );
saveCity( cityBean );
if( citys == null ) citys = new ArrayList<SelectCityBean>();
citys.add( cityBean );
mAdapter.notifyDataSetChanged();
showIndicator( citys.size() - 1 );
}
private void saveCity( SelectCityBean city )
{
DbUtils dbUtils = WeatherApplication.getInstance().getDbUtil();
try
{
dbUtils.save( city );
}
catch( DbException e )
{
}
}
private List<SelectCityBean> readCity()
{
DbUtils dbUtils = WeatherApplication.getInstance().getDbUtil();
try
{
return dbUtils.findAll( SelectCityBean.class );
}
catch( DbException e )
{
return null;
}
}
public class MyAdapter extends FragmentStatePagerAdapter
{
public MyAdapter( FragmentManager fm )
{
super( fm );
}
@Override
public Fragment getItem( int arg0 )
{
WeatherFragment fragment = new WeatherFragment();
fragment.setCity( citys.get( arg0 ).getCityName() );
return fragment;
}
@Override
public int getItemPosition( Object object )
{
return POSITION_NONE;
}
@Override
public int getCount()
{
if( citys == null ) return 0;
return citys.size();
}
}
}
基本上面目全非了，跟之前的代码完全不一样了，这里面的主要变动为：
1. saveCity、readCity不再从Preference中获取数据了，而改为从数据库获取
2. 增加了MyAdapter以及相关的ViewPager的逻辑
这里还用到了一个新的SelectCityBean以及两个图片资源，
public class SelectCityBean
{
private int id;
private String cityName;
public int getId()
{
return id;
}
public void setId( int id )
{
this.id = id;
}
public String getCityName()
{
return cityName;
}
public void setCityName( String cityName )
{
this.cityName = cityName;
}
}
两个图片资源分别代表了当前城市以及其他城市，
完成之后，运行来看看，我这边的效果是这样的：
你可以试着添加城市看看，是不是这样的效果。
今天的内容比较少，代码比较多，大家多多练习一下。
附件是本次的工程文件，点击下载 http://pan.baidu.com/s/1sj2V5fB 。
此系列文章系本人原创，如需转载，请注明出处 www.liuzhibang.cn
