多次添加相同的视图 - 重用布局

Question

我正在开发一个应用程序，它显示 4 个不同地区的天气预报，未来 5 天。每个区域显示 5 天，每天都有自己的数据：一个带有当天名称的 TextView，一个带有当天主要天气状况的 TextView，一个显示天气图标的 ImageView，以及两个带有 min temp 和 max 的 TextView那天的温度。像这样：

我在一个 SUPER AWFUL layout.xml 文件中实现了这一点，分别处理 4 个区域的所有 20 天的每个 TextView 和 ImageView：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_weather_forecats_title"
            style="@style/tv_weather_11"
            android:text="@string/extended_forecast" />

        <TextView
            android:id="@+id/tv_fore_title_city"
            style="@style/tv_weather_6"
            android:text="@string/title_city" />

        <LinearLayout style="@style/ll_weather_1">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_fore_day1_city"
                    style="@style/tv_weather_7"
                    android:text="Mon"/>

                <TextView
                    android:id="@+id/tv_fore_cond1_city"
                    style="@style/tv_weather_8"
                    android:text="Light Rain"/>

                <ImageView
                    android:id="@+id/iv_fore_ic_day1_city"
                    style="@style/iv_weather_1"
                    android:src="@drawable/ic_main_broken_clouds" />

                <TextView
                    android:id="@+id/tv_fore_min_day1_city"
                    style="@style/tv_weather_9"
                    android:text="5"/>

                <TextView
                    android:id="@+id/tv_fore_max_day1_city"
                    style="@style/tv_weather_10"
                    android:text="15"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_fore_day2_city"
                    style="@style/tv_weather_7"
                    android:text="Tue"/>

                <TextView
                    android:id="@+id/tv_fore_cond2_city"
                    style="@style/tv_weather_8"
                    android:text="Light Rain"/>

                <ImageView
                    android:id="@+id/iv_fore_ic_day2_city"
                    style="@style/iv_weather_1"
                    android:src="@drawable/ic_main_broken_clouds"/>

                <TextView
                    android:id="@+id/tv_fore_min_day2_city"
                    style="@style/tv_weather_9"
                    android:text="5"/>

                <TextView
                    android:id="@+id/tv_fore_max_day2_city"
                    style="@style/tv_weather_10"
                    android:text="15"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_fore_day3_city"
                    style="@style/tv_weather_7"
                    android:text="Wed"/>

                <TextView
                    android:id="@+id/tv_fore_cond3_city"
                    style="@style/tv_weather_8"
                    android:text="Light Rain"/>

                <ImageView
                    android:id="@+id/iv_fore_ic_day3_city"
                    style="@style/iv_weather_1"
                    android:src="@drawable/ic_main_broken_clouds"/>

                <TextView
                    android:id="@+id/tv_fore_min_day3_city"
                    style="@style/tv_weather_9"
                    android:text="5"/>

                <TextView
                    android:id="@+id/tv_fore_max_day3_city"
                    style="@style/tv_weather_10"
                    android:text="15"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_fore_day4_city"
                    style="@style/tv_weather_7"
                    android:text="Thu"/>

                <TextView
                    android:id="@+id/tv_fore_cond4_city"
                    style="@style/tv_weather_8"
                    android:text="Light Rain"/>

                <ImageView
                    android:id="@+id/iv_fore_ic_day4_city"
                    style="@style/iv_weather_1"
                    android:src="@drawable/ic_main_broken_clouds"/>

                <TextView
                    android:id="@+id/tv_fore_min_day4_city"
                    style="@style/tv_weather_9"
                    android:text="5"/>

                <TextView
                    android:id="@+id/tv_fore_max_day4_city"
                    style="@style/tv_weather_10"
                    android:text="15"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_fore_day5_city"
                    style="@style/tv_weather_7"
                    android:text="Fri"/>

                <TextView
                    android:id="@+id/tv_fore_cond5_city"
                    style="@style/tv_weather_8"
                    android:text="Light Rain"/>

                <ImageView
                    android:id="@+id/iv_fore_ic_day5_city"
                    style="@style/iv_weather_1"
                    android:src="@drawable/ic_main_broken_clouds"/>

                <TextView
                    android:id="@+id/tv_fore_min_day5_city"
                    style="@style/tv_weather_9"
                    android:text="5"/>

                <TextView
                    android:id="@+id/tv_fore_max_day5_city"
                    style="@style/tv_weather_10"
                    android:text="15"/>
            </LinearLayout>
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:background="@color/colorDarkTextDivider" />

        <TextView
            android:id="@+id/tv_fore_title_east"
            style="@style/tv_weather_6"
            android:text="@string/title_east" />

        <LinearLayout style="@style/ll_weather_1">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_fore_day1_east"
                    style="@style/tv_weather_7"
                    android:text="Mon"/>

                <TextView
                    android:id="@+id/tv_fore_cond1_east"
                    style="@style/tv_weather_8"
                    android:text="Light Rain"/>

                <ImageView
                    android:id="@+id/iv_fore_ic_day1_east"
                    style="@style/iv_weather_1"
                    android:src="@drawable/ic_main_broken_clouds"/>

                <TextView
                    android:id="@+id/tv_fore_min_day1_east"
                    style="@style/tv_weather_9"
                    android:text="5"/>

                <TextView
                    android:id="@+id/tv_fore_max_day1_east"
                    style="@style/tv_weather_10"
                    android:text="15"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_fore_day2_east"
                    style="@style/tv_weather_7"
                    android:text="Tue"/>

                <TextView
                    android:id="@+id/tv_fore_cond2_east"
                    style="@style/tv_weather_8"
                    android:text="Light Rain"/>

                <ImageView
                    android:id="@+id/iv_fore_ic_day2_east"
                    style="@style/iv_weather_1"
                    android:src="@drawable/ic_main_broken_clouds"/>

                <TextView
                    android:id="@+id/tv_fore_min_day2_east"
                    style="@style/tv_weather_9"
                    android:text="5"/>

                <TextView
                    android:id="@+id/tv_fore_max_day2_east"
                    style="@style/tv_weather_10"
                    android:text="15"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_fore_day3_east"
                    style="@style/tv_weather_7"
                    android:text="Wed"/>

                <TextView
                    android:id="@+id/tv_fore_cond3_east"
                    style="@style/tv_weather_8"
                    android:text="Light Rain"/>

                <ImageView
                    android:id="@+id/iv_fore_ic_day3_east"
                    style="@style/iv_weather_1"
                    android:src="@drawable/ic_main_broken_clouds"/>

                <TextView
                    android:id="@+id/tv_fore_min_day3_east"
                    style="@style/tv_weather_9"
                    android:text="5"/>

                <TextView
                    android:id="@+id/tv_fore_max_day3_east"
                    style="@style/tv_weather_10"
                    android:text="15"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_fore_day4_east"
                    style="@style/tv_weather_7"
                    android:text="Thu"/>

                <TextView
                    android:id="@+id/tv_fore_cond4_east"
                    style="@style/tv_weather_8"
                    android:text="Light Rain"/>

                <ImageView
                    android:id="@+id/iv_fore_ic_day4_east"
                    style="@style/iv_weather_1"
                    android:src="@drawable/ic_main_broken_clouds" />

                <TextView
                    android:id="@+id/tv_fore_min_day4_east"
                    style="@style/tv_weather_9"
                    android:text="5"/>

                <TextView
                    android:id="@+id/tv_fore_max_day4_east"
                    style="@style/tv_weather_10"
                    android:text="15"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_fore_day5_east"
                    style="@style/tv_weather_7"
                    android:text="Fri"/>

                <TextView
                    android:id="@+id/tv_fore_cond5_east"
                    style="@style/tv_weather_8"
                    android:text="Light Rain"/>

                <ImageView
                    android:id="@+id/iv_fore_ic_day5_east"
                    style="@style/iv_weather_1"
                    android:src="@drawable/ic_main_broken_clouds"/>

                <TextView
                    android:id="@+id/tv_fore_min_day5_east"
                    style="@style/tv_weather_9"
                    android:text="5"/>

                <TextView
                    android:id="@+id/tv_fore_max_day5_east"
                    style="@style/tv_weather_10"
                    android:text="15"/>
            </LinearLayout>
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:background="@color/colorDarkTextDivider" />

        <TextView
            android:id="@+id/tv_fore_title_south"
            style="@style/tv_weather_6"
            android:text="@string/title_south" />

        <LinearLayout style="@style/ll_weather_1">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_fore_day1_south"
                    style="@style/tv_weather_7"
                    android:text="Mon"/>

                <TextView
                    android:id="@+id/tv_fore_cond1_south"
                    style="@style/tv_weather_8"
                    android:text="Light Rain"/>

                <ImageView
                    android:id="@+id/iv_fore_ic_day1_south"
                    style="@style/iv_weather_1"
                    android:src="@drawable/ic_main_broken_clouds"/>

                <TextView
                    android:id="@+id/tv_fore_min_day1_south"
                    style="@style/tv_weather_9"
                    android:text="5"/>

                <TextView
                    android:id="@+id/tv_fore_max_day1_south"
                    style="@style/tv_weather_10"
                    android:text="15"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_fore_day2_south"
                    style="@style/tv_weather_7"
                    android:text="Tue"/>

                <TextView
                    android:id="@+id/tv_fore_cond2_south"
                    style="@style/tv_weather_8"
                    android:text="Light Rain"/>

                <ImageView
                    android:id="@+id/iv_fore_ic_day2_south"
                    style="@style/iv_weather_1"
                    android:src="@drawable/ic_main_broken_clouds"/>

                <TextView
                    android:id="@+id/tv_fore_min_day2_south"
                    style="@style/tv_weather_9"
                    android:text="5"/>

                <TextView
                    android:id="@+id/tv_fore_max_day2_south"
                    style="@style/tv_weather_10"
                    android:text="15"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_fore_day3_south"
                    style="@style/tv_weather_7"
                    android:text="Wed"/>

                <TextView
                    android:id="@+id/tv_fore_cond3_south"
                    style="@style/tv_weather_8"
                    android:text="Light Rain"/>

                <ImageView
                    android:id="@+id/iv_fore_ic_day3_south"
                    style="@style/iv_weather_1"
                    android:src="@drawable/ic_main_broken_clouds" />

                <TextView
                    android:id="@+id/tv_fore_min_day3_south"
                    style="@style/tv_weather_9"
                    android:text="5"/>

                <TextView
                    android:id="@+id/tv_fore_max_day3_south"
                    style="@style/tv_weather_10"
                    android:text="15"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_fore_day4_south"
                    style="@style/tv_weather_7"
                    android:text="Thu"/>

                <TextView
                    android:id="@+id/tv_fore_cond4_south"
                    style="@style/tv_weather_8"
                    android:text="Light Rain"/>

                <ImageView
                    android:id="@+id/iv_fore_ic_day4_south"
                    style="@style/iv_weather_1"
                    android:src="@drawable/ic_main_broken_clouds" />

                <TextView
                    android:id="@+id/tv_fore_min_day4_south"
                    style="@style/tv_weather_9"
                    android:text="5"/>

                <TextView
                    android:id="@+id/tv_fore_max_day4_south"
                    style="@style/tv_weather_10"
                    android:text="15"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_fore_day5_south"
                    style="@style/tv_weather_7"
                    android:text="Fri"/>

                <TextView
                    android:id="@+id/tv_fore_cond5_south"
                    style="@style/tv_weather_8"
                    android:text="Light Rain"/>

                <ImageView
                    android:id="@+id/iv_fore_ic_day5_south"
                    style="@style/iv_weather_1"
                    android:src="@drawable/ic_main_broken_clouds" />

                <TextView
                    android:id="@+id/tv_fore_min_day5_south"
                    style="@style/tv_weather_9"
                    android:text="5"/>

                <TextView
                    android:id="@+id/tv_fore_max_day5_south"
                    style="@style/tv_weather_10"
                    android:text="15"/>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

在 Java 文件中，我有 100 个视图声明并使用 100 行来获取视图实例，以及另外 100 个设置文本和图像的方法...我知道，超级/难以置信的糟糕。

这肯定是糟糕的设计。必须有一种方法可以将单个视图（日期名称、条件、图像、最低温度和最高温度）放入布局中并重用它。任何想法？

Answer 1

假设数据来自某种 Weather Api 或您自己实施的数据库。

我有两个解决方案来实现这一点

1. 嵌套 RecyclerView : 垂直 RecyclerView 内的水平 RecyclerView

   • 你会有一个水平垂直布局

     这种布局每天会重复 7 次。
     
     

   • 您的 Vertical RecyclerView 将是此类 Horizo​​ntal RecyclerView 的集合（针对区域）
     
     

   • 使用 ArrayList 并填充您的 RecyclerView。

这是实现您想要实现的目标的更简洁但复杂的方式。

1. 单垂直 RecyclerView

   • 使用存储视图的水平线性布局创建单个布局。

     布局结构是这样的（重复7次）

     线性布局（水平）
     

     • 线性布局（垂直）
       
     • 5 个文本视图
       

   • 使用 Arraylist 填充您的 Recyclerview。

我个人会选择第一个，但你可以选择任何对你有帮助的东西。

Answer 2

您可以创建一个自定义视图，封装您的所有演示逻辑，然后在您的LinearLayout 中添加一些逻辑。

您将避免 XML 代码重复，并且您将能够拥有一个适合您需要的、定义明确的小部件。此外，这将减少将数据绑定到现有视图所需的 Java 代码量。