Android简单实现天气预报App的教程_F11 - 专业站长和开发者的学习网站

一、UI设计

首页UI

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/week10_3"

tools:context=".MainActivity">

<TextView

android:id="@+id/text1"

android:layout_width="133dp"

android:layout_height="81dp"

android:text="确定"

android:textSize="30dp"

android:fontFamily="sans-serif-black"

android:gravity="center"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent" />

<EditText

android:id="@+id/address"

android:layout_width="214dp"

android:layout_height="98dp"

android:layout_marginTop="180dp"

android:ems="10"

android:inputType="textPersonName"

android:text="请选择城市"

android:gravity="center"

android:textSize="30dp"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.497"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

效果：

展示页面UI

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/view"

tools:context=".ShowActivity">

<TextView

android:id="@+id/textView"

android:layout_width="107dp"

android:layout_height="59dp"

android:layout_marginStart="16dp"

android:layout_marginTop="36dp"

android:gravity="center"

android:text="地址"

android:textColor="@color/white"

android:textSize="30dp"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

<TextView

android:id="@+id/textView3"

android:layout_width="153dp"

android:layout_height="142dp"

android:fontFamily="sans-serif-black"

android:gravity="center"

android:text="气温"

android:textColor="@color/white"

android:textSize="70dp"

app:layout_constraintStart_toStartOf="@+id/textView"

app:layout_constraintTop_toBottomOf="@+id/textView" />

<TextView

android:id="@+id/textView4"

android:layout_width="98dp"

android:layout_height="55dp"

android:fontFamily="sans-serif-black"

android:gravity="center"

android:text="天气"

android:textColor="@color/white"

android:textSize="30dp"

app:layout_constraintBottom_toBottomOf="@+id/textView3"

app:layout_constraintStart_toEndOf="@+id/textView3" />

<TextView

android:id="@+id/textView5"

android:layout_width="251dp"

android:layout_height="60dp"

android:fontFamily="sans-serif-black"

android:gravity="left"

android:text="风力风向湿度"

android:textColor="@color/white"

android:textSize="23dp"

app:layout_constraintStart_toStartOf="@+id/textView3"

app:layout_constraintTop_toBottomOf="@+id/textView3" />

<TextView

android:id="@+id/textView6"

android:layout_width="97dp"

android:layout_height="44dp"

android:text="空气质量"

android:textColor="@color/white"

android:gravity="center"

android:textSize="20dp"

android:fontFamily="sans-serif-black"

app:layout_constraintBottom_toTopOf="@+id/textView4"

app:layout_constraintEnd_toEndOf="parent" />

<androidx.constraintlayout.widget.ConstraintLayout

android:layout_width="185dp"

android:layout_height="190dp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintStart_toStartOf="parent">

<TextView

android:id="@+id/texttoday"

android:layout_width="70dp"

android:layout_height="45dp"

android:layout_marginStart="8dp"

android:layout_marginTop="20dp"

android:fontFamily="sans-serif-black"

android:gravity="center"

android:text="今天"

android:textColor="@color/white"

android:textSize="24dp"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

<TextView

android:id="@+id/weathertoday"

android:layout_width="100dp"

android:layout_height="45dp"

android:fontFamily="sans-serif-black"

android:gravity="center"

android:text="TextView"

android:textColor="@color/white"

android:textSize="24dp"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintTop_toTopOf="@+id/texttoday" />

<TextView

android:id="@+id/temtoday"

android:layout_width="100dp"

android:layout_height="45dp"

android:layout_marginTop="30dp"

android:fontFamily="sans-serif-black"

android:gravity="left"

android:text="TextView"

android:textColor="@color/white"

android:textSize="24dp"

app:layout_constraintStart_toStartOf="@+id/texttoday"

app:layout_constraintTop_toBottomOf="@+id/texttoday" />

<TextView

android:id="@+id/qualtoday"

android:layout_width="50dp"

android:layout_height="45dp"

android:fontFamily="sans-serif-black"

android:gravity="left"

android:text="良"

android:textColor="@color/white"

android:textSize="24dp"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintTop_toTopOf="@+id/temtoday" />

</androidx.constraintlayout.widget.ConstraintLayout>

<androidx.constraintlayout.widget.ConstraintLayout

android:layout_width="185dp"

android:layout_height="190dp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent">

<TextView

android:id="@+id/texttomo"

android:layout_width="70dp"

android:layout_height="45dp"

android:layout_marginStart="8dp"

android:layout_marginTop="20dp"

android:text="明天"

android:textSize="24dp"

android:textColor="@color/white"

android:gravity="center"

android:fontFamily="sans-serif-black"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

<TextView

android:id="@+id/weathertomo"

android:layout_width="100dp"

android:layout_height="45dp"

android:layout_marginEnd="15dp"

android:fontFamily="sans-serif-black"

android:gravity="center"

android:text="TextView"

android:textColor="@color/white"

android:textSize="24dp"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintTop_toTopOf="@+id/texttomo" />

<TextView

android:id="@+id/temtomo"

android:layout_width="100dp"

android:layout_height="45dp"

android:layout_marginTop="30dp"

android:text="TextView"

android:textSize="24dp"

android:textColor="@color/white"

android:gravity="center"

android:fontFamily="sans-serif-black"

app:layout_constraintStart_toStartOf="@+id/texttomo"

app:layout_constraintTop_toBottomOf="@+id/texttomo" />

<TextView

android:id="@+id/qualtomo"

android:layout_width="50dp"

android:layout_height="45dp"

android:text="TextView"

android:textSize="24dp"

android:textColor="@color/white"

android:gravity="center"

android:fontFamily="sans-serif-black"

app:layout_constraintEnd_toEndOf="@+id/weathertomo"

app:layout_constraintTop_toTopOf="@+id/temtomo" />

</androidx.constraintlayout.widget.ConstraintLayout>

<TextView

android:id="@+id/textView16"

android:layout_width="251dp"

android:layout_height="60dp"

android:fontFamily="sans-serif-black"

android:gravity="left"

android:text="TextView"

android:textColor="@color/white"

android:textSize="23dp"

app:layout_constraintStart_toStartOf="@+id/textView3"

app:layout_constraintTop_toBottomOf="@+id/textView5" />

</androidx.constraintlayout.widget.ConstraintLayout>

效果:

二、调用数据并上传至前台

这里我将首页设置一个输入框，里面输入地点，然后将地点的值传给展示页面，让展示页面接收到地点后再连接对应的API并调用数据。

1.首页

代码如下（示例）：

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

getSupportActionBar().hide();

ImmersionBar.with(this)

//.statusBarColor(R.color.purple_200) //不写默认透明

.init();

TextView textView=findViewById(R.id.text1);

EditText editText=findViewById(R.id.address);

textView.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

String address=editText.getText().toString();

Intent intent=new Intent(MainActivity.this,ShowActivity.class);

intent.putExtra("address",address);

startActivity(intent);

}

});

editText.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

if(editText.getText().toString()!=null){

editText.setText("");

}

});

}

2.展示页面

代码如下（示例）：

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_show);

getSupportActionBar().hide();

ImmersionBar.with(this)

//.statusBarColor(R.color.purple_200) //不写默认透明

.init();

TextView textView=findViewById(R.id.textView);

TextView tem=findViewById(R.id.textView3);

TextView wind=findViewById(R.id.textView5);

TextView aqi=findViewById(R.id.textView6);

TextView weather=findViewById(R.id.textView4);

TextView ziwaixian=findViewById(R.id.textView16);

TextView t2=findViewById(R.id.weathertoday);

TextView t3=findViewById(R.id.temtoday);

TextView t4=findViewById(R.id.qualtoday);

TextView m2=findViewById(R.id.weathertomo);

TextView m3=findViewById(R.id.temtomo);

TextView m4=findViewById(R.id.qualtomo);

Intent intent=getIntent();

String address=getIntent().getStringExtra("address");

textView.setText(address);

//c5494be085dd41dca6ec4ffa59c9ed6a

String code="APPCODE "+"c5494be085dd41dca6ec4ffa59c9ed6a";

Api api=RetrofitUtils.getRetrofit("https://ali-weather.showapi.com/").create(Api.class);

Call<WeatherResult> weatherResultCall=api.getWeather(code,address);

weatherResultCall.enqueue(new Callback<WeatherResult>() {

@Override

public void onResponse(Call<WeatherResult> call, Response<WeatherResult> response) {

WeatherResult weatherResult = response.body();

t2.setText(weatherResult.showapi_res_body.f1.day_weather);

t3.setText(weatherResult.showapi_res_body.f1.day_air_temperature+"/"+weatherResult.showapi_res_body.f1.night_air_temperature+"℃");

t4.setText(weatherResult.showapi_res_body.f1.jiangshui);

m2.setText(weatherResult.showapi_res_body.f2.day_weather);

m3.setText(weatherResult.showapi_res_body.f2.day_air_temperature+"/"+weatherResult.showapi_res_body.f2.night_air_temperature+"℃");

m4.setText(weatherResult.showapi_res_body.f2.jiangshui);

tem.setText(weatherResult.showapi_res_body.now.temperature+"℃");

weather.setText(weatherResult.showapi_res_body.now.weather);

wind.setText(weatherResult.showapi_res_body.now.wind_direction+weatherResult.showapi_res_body.now.wind_power+" "+weatherResult.showapi_res_body.now.sd);

aqi.setText("aqi:"+weatherResult.showapi_res_body.now.aqi);

ziwaixian.setText("紫外线强度："+weatherResult.showapi_res_body.f1.ziwaixian);

}

@Override

public void onFailure(Call<WeatherResult> call, Throwable t) {

}

});

}