Статьи

Разработайте приложение Android Weather с Material Design

Январь 26, 2018

В этом посте описывается, как создать приложение погоды, используя рекомендации по дизайну материалов . Материальный дизайн — это набор правил для визуального дизайна, взаимодействия пользовательского интерфейса, движения и так далее. Эти правила помогают разработчикам при разработке и создании приложения для Android.

Темы охватывали

  • Материальный дизайн
  • Приложение Погода
  • Панель инструментов Android
  • Цвета материала Android
  • Руководство по материалам Android

Этот пост хочет описать, как мы создаем приложение погоды, используя  Weatherlib в качестве слоя погоды и правила дизайна материалов. Мы хотим разработать это приложение не только для Android 5 Lollipop, который изначально поддерживает дизайн материалов, но и для поддержки предыдущей версии Android, такой как 4.x Kitkat. По этой причине мы представим библиотеку appCompat v7, которая поможет нам реализовать Material Design даже в предыдущих версиях Android.

Мы хотим закодировать приложение, которое имеет расширенную панель инструментов, которая содержит некоторую информацию о местоположении и текущей погоде и некоторую основную информацию о погоде, такую ​​как температура, значок погоды, влажность, ветер и давление. В конце мы получим что-то вроде картинки, показанной ниже:

Проект Android настроен

Первое, что нам нужно сделать, это настроить наш проект так, чтобы мы могли использовать Weatherlib и особенно appCompat v7. Мы можем открыть build.graddle и добавить эти строки:

?

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:21.0.+'
    compile 'com.mcxiaoke.volley:library:1.0.6@aar'
    compile 'com.survivingwithandroid:weatherlib:1.5.3'
    compile 'com.survivingwithandroid:weatherlib_volleyclient:1.5.3'
}

Теперь у нас есть правильно настроенный проект, и мы можем начать определять макет нашего приложения.

Макет приложения: дизайн материала

Как кратко объяснено ранее, мы хотим использовать панель инструментов в нашем случае расширенную панель инструментов . Toolbar это действие бар обобщение , которое дает нам больше контроля. В отличие от панели действий, которая тесно связана с Actvitiy, панель инструментов может быть размещена везде внутри иерархии представления.

Таким образом, наш макет будет разделен на три основные области:

  • Область панели инструментов
  • Значок погоды и температура
  • Другие данные о погоде

Макет показан ниже:

?

<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>

Как видите, мы использовали панель инструментов. Мы установили высоту панели инструментов равной 128dp, как указано в рекомендациях, и, кроме того, мы использовали основной цвет в качестве фона. Основной цвет определяется в colors.xml. Вы можете обратиться к руководству по цвету дизайна материала для получения дополнительной информации . Мы должны определить как минимум три разных цвета:

  • Основной цвет, обозначенный 500
  • Основной темный цвет обозначен 700
  • Цвет акцента, который должен быть для кнопок основного действия и т. Д.

Цвет фона панели инструментов установлен на основной цвет.

?

<resources>
    <color name="primaryColor_500">#03a9f4</color>
    <color name="primaryDarkColor_700">#0288d1</color>
    ....
</resources>

Кроме того, левый и нижний отступы внутри панели инструментов определяются в соответствии с указаниями. В конце мы добавляем пункты меню, как мы привыкли делать с панелью действий. Основной результат показан ниже:

Как видите, панель инструментов имеет фон, равный основному цвету.

Поиск города: Popup with Material Design

Мы можем использовать всплывающее окно, чтобы позволить пользователю ввести местоположение. Всплывающее окно очень простое, оно создается с помощью EditText, который используется для ввода данных, и простого ListView, который показывает город, соответствующий шаблону, вставленному в EditText. Я не буду рассказывать о том, как искать город в WeatherLib, потому что я уже рассказывал о нем. Результат показан здесь:

Макет всплывающего окна четко показан ниже:

?

<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:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/dialog.city.header"
        style="@style/Theme.AppCompat.Dialog"/>
 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8sp"
        android:text="@string/dialog.city.pattern"/>
 
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:id="@+id/ptnEdit"/>
 
    <ListView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/cityList"
        android:clickable="true"/>
 
</LinearLayout>

Код для создания и обработки диалога показан ниже:

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<City> 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();
}

Важно отметить, что в строке 33 мы устанавливаем заголовок панели инструментов в соответствии с городом, выбранным пользователем, а затем получаем текущую погоду. Результат этого куска кода показан здесь:

Weatherlib: погода

Для получения текущей погоды мы используем 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());
                             }
     ....
}

Вы можете заметить, что в строке 8 мы устанавливаем субтитры панели инструментов в соответствии с текущей погодой, а в строке 15 мы меняем цвет панели инструментов в соответствии с текущей температурой. В качестве цвета фона панели инструментов мы использовали основные цвета, показанные в рекомендациях.

31
Share: