文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

这篇文章教我们如何根据 material 设计指南 来创建一个 material 风格的安卓天气 APP。Google Material 设计包含了一系列可视化设计、用户交互、手势等的规范。这些规范帮助开发人员设计和创建一个安卓应用程序。

这篇文章页教我们如何使用 Weatherlib 作为天气数据处理层来创建一个 material 风格的安卓天气 APP,同时描述了 Material 设计规范。我们希望开发出的 APP 不仅能兼容那些原生支持 Material 设计的 Android 5 Lollipop 版本以后的系统,同时兼容像 4.x Kitkat 这些早期版本的系统。

第 1 段(可获 1.19 积分)

因为这个原因,我们引入了 appCompat v7库  ,可以帮助我们即使在以前的安卓版本上也能实现Material Design。

Android Weather app tutorial

material风格的安卓应用程序应当有一个 扩展工具栏,包含了位置信息、当天天气以及一些基本的气象信息比如温度、湿度、风、气压。最后我们得到类似下图的界面:

material weather app

 

安卓质感气象app:项目设置

我们要做的第一件事就是配置我们的项目,这样我们可以使用Weatherlib,尤其是appCompat v7。我们可以打开 build.graddle,并添加以下行:

第 2 段(可获 1.31 积分)
dependencies {
  compile fileTree(dir: 'libs', include: ['*.jar'])
  compile 'com.android.support:appcompat-v7:23.1.0'
  compile 'com.mcxiaoke.volley:library:[email protected]'
  compile 'com.survivingwithandroid:weatherlib:1.6.0'
  compile 'com.survivingwithandroid:weatherlib_volleyclient:1.6.0'
}

现在我们的项目已经成功设置好,接下来可以开始定义应用布局。

应用程序布局: Google Material design

正如之前的简要描述,在这个例子中我们想要用的 工具栏扩展工具栏。 工具栏是action bar 一般给了我们更多控制权。 不同于Action bar与动作紧密关联,这个工具栏可以放在视图层次的任何地方。

第 3 段(可获 0.85 积分)

因此,我们的布局将分为三个主要区域:

  • 工具栏区
  • 天气图标和温度
  • 其他气象数据

布局如下所示:

<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"
  tools:context=".WeatherActivity"
  android:orientation="vertical">

  <android.support.v7.widget.Toolbar
    xmlns:app="http://schemas.android.com/apk/res-auto"
   android:id="@+id/my_toolbar"
   android:layout_height="128dp"
   app:popupTheme="@style/ActionBarPopupThemeOverlay"
   android:layout_width="match_parent"
   android:background="?attr/colorPrimary"
   android:paddingLeft="72dp"
   android:paddingBottom="16dp"
   android:gravity="bottom"
   app:titleTextAppearance="@style/Toolbartitle"
   app:subtitleTextAppearance="@style/ToolbarSubtitle"
   app:theme="@style/ThemeOverlay.AppCompat.Light"
   android:title="@string/location_placeholder">

....
</RelativeLayout>
第 4 段(可获 0.6 积分)

因此,我们的布局将分为三个主要区域:

  • 工具栏区
  • 天气图标和温度
  • 其他气象数据

布局如下所示:

<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"
  tools:context=".WeatherActivity"
  android:orientation="vertical">

  <android.support.v7.widget.Toolbar
    xmlns:app="http://schemas.android.com/apk/res-auto"
   android:id="@+id/my_toolbar"
   android:layout_height="128dp"
   app:popupTheme="@style/ActionBarPopupThemeOverlay"
   android:layout_width="match_parent"
   android:background="?attr/colorPrimary"
   android:paddingLeft="72dp"
   android:paddingBottom="16dp"
   android:gravity="bottom"
   app:titleTextAppearance="@style/Toolbartitle"
   app:subtitleTextAppearance="@style/ToolbarSubtitle"
   app:theme="@style/ThemeOverlay.AppCompat.Light"
   android:title="@string/location_placeholder">

....
</RelativeLayout>
第 5 段(可获 1.11 积分)

此外,toolbar 中的左 padding 和底部 padding 是根据指南定义的。最后我们像使用 action bar 一样添加了菜单选项。主要效果如下:

搜索城市:Material 设计的弹出式窗口(popup)

我们可以使用弹出式窗口(popup)让用户输入位置。弹出式窗口很简单,它基于 EditText,可以用来输入数据,同时有一个简洁的 ListView 显示与输入相匹配的城市。我将不会涉及 如何使用 weatherlib 实现搜索城市 的内容,因为我已经提到了。结果如下:

第 6 段(可获 1.43 积分)

因此,我们的布局将分为三个主要区域:

  • 工具栏区
  • 天气图标和温度
  • 其他气象数据

布局如下所示:

<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"
  tools:context=".WeatherActivity"
  android:orientation="vertical">

  <android.support.v7.widget.Toolbar
    xmlns:app="http://schemas.android.com/apk/res-auto"
   android:id="@+id/my_toolbar"
   android:layout_height="128dp"
   app:popupTheme="@style/ActionBarPopupThemeOverlay"
   android:layout_width="match_parent"
   android:background="?attr/colorPrimary"
   android:paddingLeft="72dp"
   android:paddingBottom="16dp"
   android:gravity="bottom"
   app:titleTextAppearance="@style/Toolbartitle"
   app:subtitleTextAppearance="@style/ToolbarSubtitle"
   app:theme="@style/ThemeOverlay.AppCompat.Light"
   android:title="@string/location_placeholder">

....
</RelativeLayout>
第 7 段(可获 0.09 积分)

创建及操作对话框的代码如下所示:

private Dialog createDialog() {
  AlertDialog.Builder builder = new AlertDialog.Builder(this);
  LayoutInflater inflater = this.getLayoutInflater();
  View v = inflater.inflate(R.layout.select_city_dialog, null);
  builder.setView(v);

  EditText et = (EditText) v.findViewById(R.id.ptnEdit);
  ....
  et.addTextChangedListener(new TextWatcher() {
  ....
  @Override
  public void onTextChanged(CharSequence s, int start, int before, int count) {
    if (count > 3) {
    // We start searching
    weatherclient.searchCity(s.toString(), new WeatherClient.CityEventListener() {
     @Override
     public void onCityListRetrieved(List&lt;City&gt; cities) {
      CityAdapter ca = new CityAdapter(WeatherActivity.this, cities);
      cityListView.setAdapter(ca);
    }

   });
 }
}

});
builder.setPositiveButton("Accept", new DialogInterface.OnClickListener() {
  @Override
  public void onClick(DialogInterface dialog, int which) {
    dialog.dismiss();
    // We update toolbar
    toolbar.setTitle(currentCity.getName() + "," + currentCity.getCountry());
    // Start getting weather
    getWeather();
  }
});

builder.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
  @Override
  public void onClick(DialogInterface dialog, int which) {
    dialog.dismiss();
  }
});

return builder.create();
}
第 8 段(可获 0.14 积分)

需要注意的是第 33 行,我们根据用户选择的城市设置 toolbar 的标题,接着我们获得了当前的天气。这段代码的结果如图所示:

Weatherlib: weather

我们用 Weatherlib 来获取当前天气:

private void getWeather() {
  weatherclient.getCurrentCondition(new WeatherRequest(currentCity.getId()),
  new WeatherClient.WeatherEventListener() {
     @Override
     public void onWeatherRetrieved(CurrentWeather currentWeather) {
       // We have the current weather now
       // Update subtitle toolbar
       toolbar.setSubtitle(currentWeather.weather.currentCondition.getDescr());
       tempView.setText(String.format("%.0f",currentWeather.weather.temperature.getTemp()));
       pressView.setText(String.valueOf(currentWeather.weather.currentCondition.getPressure()));
       windView.setText(String.valueOf(currentWeather.weather.wind.getSpeed()));
       humView.setText(String.valueOf(currentWeather.weather.currentCondition.getHumidity()));
       weatherIcon.setImageResource(WeatherIconMapper.getWeatherResource(
                  currentWeather.weather.currentCondition.getIcon(),         
                  currentWeather.weather.currentCondition.getWeatherId()));

     setToolbarColor(currentWeather.weather.temperature.getTemp());
    }
....
}
第 9 段(可获 0.64 积分)

你可以注意到在第 8 行,我们将 toolbar 的副标题设置为当前的天气,同时在第 15 行,我们根据当前的温度修改了 toolbar 的颜色。toolbar 的背景色我们使用了指南中所示的主色调。下图展示了安卓 material 风格 app 的最终效果。

android weather app with material designhow to implement android weather app using materil design

你知道你可以建立你的气象站吗?这很容易,在这篇文章中

根据 Arduino 的温度和压力传感发送推文

你可以找到所有的细节数据来建立你的个人气象站,监视您的房间温度和气压,然后通过 twitter 发送信息。去看一看吧。

第 10 段(可获 1.35 积分)

android

 

这很有趣不是么?但是……在使用 Arduino 创建你的天气站之前,你需要去学习 物联网 Arduino 编程。Arduino的传感器可以测量大气温度和压力。

可用的源代码 @github

第 11 段(可获 0.43 积分)

文章评论