Android天气APP开发：如何动态创建CardViews？

嘿，刚好我之前折腾过类似的动态卡片需求，给你一步步拆解怎么实现这个个性化天气APP里的动态CardView功能：

1. 先准备单个CardView的布局模板 #

首先你需要为不同类型的天气卡片创建对应的布局文件——比如针对「当前天气」和「3天预报」分别做两个独立布局，或者如果结构类似，也可以用一个布局通过参数调整样式。举个例子，先做一个layout/item_current_weather_card.xml：

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/current_weather_card"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginHorizontal="16dp"
    android:layout_marginVertical="8dp"
    card_view:cardCornerRadius="12dp"
    card_view:cardElevation="6dp"
    card_view:cardUseCompatPadding="true">

    <!-- 当前天气的内容区域 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="20dp">

        <TextView
            android:id="@+id/tv_current_temp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="25°C"
            android:textSize="40sp"
            android:textStyle="bold"/>

        <TextView
            android:id="@+id/tv_weather_desc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="多云转晴"
            android:textSize="18sp"
            android:layout_marginTop="8dp"/>

        <TextView
            android:id="@+id/tv_humidity"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="湿度：65%"
            android:textSize="14sp"
            android:layout_marginTop="4dp"/>
    </LinearLayout>

</androidx.cardview.widget.CardView>

同理，再创建layout/item_3day_forecast_card.xml来承载3天预报的内容，里面可以嵌套一个LinearLayout用来放每天的预报项。

2. 在MainActivity中动态加载并添加卡片 #

接下来在你的MainActivity里，先找到用来承载卡片的容器（推荐用垂直方向的LinearLayout，给它设置id为ll_card_container），然后根据用户的选择逻辑来动态生成卡片：

class MainActivity : AppCompatActivity() {
    private lateinit var cardContainer: LinearLayout

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        cardContainer = findViewById(R.id.ll_card_container)

        // 这里模拟获取用户的选择（实际可以用SharedPreferences存储用户设置）
        val userSelectedOptions = mapOf(
            "current_weather" to true,
            "3day_forecast" to true
        )

        // 根据用户选择生成对应卡片
        userSelectedOptions.forEach { (key, isEnabled) ->
            if (isEnabled) {
                when(key) {
                    "current_weather" -> addCurrentWeatherCard()
                    "3day_forecast" -> add3DayForecastCard()
                }
            }
        }
    }

    private fun addCurrentWeatherCard() {
        // 加载CardView布局
        val cardView = LayoutInflater.from(this)
            .inflate(R.layout.item_current_weather_card, cardContainer, false) as CardView
        
        // 绑定真实天气数据（这里替换成你的接口返回数据）
        cardView.findViewById<TextView>(R.id.tv_current_temp).text = "23°C"
        cardView.findViewById<TextView>(R.id.tv_weather_desc).text = "晴"
        cardView.findViewById<TextView>(R.id.tv_humidity).text = "湿度：58%"
        
        // 添加到容器中
        cardContainer.addView(cardView)
    }

    private fun add3DayForecastCard() {
        val cardView = LayoutInflater.from(this)
            .inflate(R.layout.item_3day_forecast_card, cardContainer, false) as CardView
        
        val forecastContainer = cardView.findViewById<LinearLayout>(R.id.ll_forecast_list)
        // 模拟3天预报数据
        val forecastData = listOf(
            Pair("明天", "26°C/18°C 多云"),
            Pair("后天", "28°C/20°C 晴"),
            Pair("大后天", "24°C/17°C 小雨")
        )
        
        // 动态添加每天的预报项
        forecastData.forEach { (day, info) ->
            val forecastItem = LayoutInflater.from(this)
                .inflate(R.layout.item_single_forecast_day, forecastContainer, false)
            
            forecastItem.findViewById<TextView>(R.id.tv_day).text = day
            forecastItem.findViewById<TextView>(R.id.tv_forecast_info).text = info
            
            forecastContainer.addView(forecastItem)
        }
        
        cardContainer.addView(cardView)
    }
}

3. 实用优化建议 #

• 如果后续卡片类型增多或者需要频繁更新，推荐改用RecyclerView配合自定义Adapter来实现，这样不仅性能更好，还能轻松实现卡片的增删、排序和复用。
• 可以给CardView添加点击事件，比如点击当前天气卡片跳转到详细的天气详情页，提升交互体验。
• 别忘了在你的build.gradle（Module级别）中添加CardView的依赖：

implementation 'androidx.cardview:cardview:1.0.0'

这样就能完全实现你想要的效果——根据用户选择的选项，动态生成对应的CardView卡片，呈现类Google Now的简洁风格！

内容的提问来源于stack exchange，提问作者Chandler Davis