Grid网格内的动态CardViews视图

时间:2016-11-02 16:55:24

标签: android xml xamarin.android android-linearlayout android-cardview

我正在尝试创建 CardViews 的不同模式,将它们水平和垂直对齐并将它们放在一个大的 LinearLayout 中,以实现以下目的:

enter image description here

我已经创建了第一张和最后一张卡片视图,但是我在创建卡片视图之间遇到了麻烦,其中包括所有功能:垂直分割器,以及第一个和第二个之间的边缘切割水平分隔线cardviews。

(**红色剪刀和蓝色圆圈是png的)

我对任何其他可能完成这个简单的“GridView”xml代码的建议持开放态度。

我添加了我的xml代码:

execute_script

谢谢你的帮助。

1 个答案:

答案 0 :(得分:1)

在努力使用 CardView android:layout_below 并在 Vertical 水平分割器上学习之后,我得到了解决方案。以下的Cardview(也可能在LinearLayout中)包含上面的模型:

          <android.support.v7.widget.CardView
              xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:card_view="http://schemas.android.com/apk/res-auto"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:gravity="center_vertical"
              android:orientation="vertical"
              android:id="@+id/MainFormThirdRow"
              card_view:cardCornerRadius="0dp"
              card_view:cardElevation="0dp"
              card_view:contentPadding="10dp"
              card_view:cardBackgroundColor="@android:color/white"
              android:layout_below="@+id/Divider2">

            <LinearLayout
                xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

              <LinearLayout
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:layout_weight="2"
                  android:orientation="horizontal">

                <!--Cycle Name-->  <!--Cycle Stage-->
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:orientation="vertical">

                    <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="2"
                    android:gravity="center_vertical"
                    android:orientation="vertical">

                  <!--Cycle Name-->
                  <LinearLayout
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:layout_weight="1"
                      android:gravity="center_vertical"
                      android:orientation="vertical">

                    <TextView
                        android:id="@+id/textViewCycleName"
                        style="@style/Base.TextAppearance.AppCompat.Headline"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Current Cycle Name"
                        android:textColor="#6d6e70"
                        android:textSize="15dp"/>

                    <LinearLayout
                        android:id="@+id/tableRowIOMapping1"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:orientation="horizontal"
                        android:padding="5dp">
                      <!--Cycle Image-->
                      <ImageView
                          android:id="@+id/CycleImage"
                          android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:layout_marginRight="10dp">
                      </ImageView>
                      <TextView
                          android:id="@+id/editTextCycleName"
                          style="@style/Base.TextAppearance.AppCompat.Body1"
                          android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:text="Cycle Value"
                          android:textColor="#ff0000"
                          android:textSize="17dp"
                          android:paddingTop="5dp"
                          android:maxLines="2"
                          android:ellipsize="end"/>
                    </LinearLayout>
                  </LinearLayout>

                  <!--Divider-->
                  <View
                        android:layout_width="match_parent"
                        android:background="@drawable/HalfHorizontalDivider"
                        android:layout_height="1dp"/>

                  <!--Cycle Stage--> 
                  <LinearLayout
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:layout_weight="1"
                      android:gravity="center_vertical"
                      android:orientation="vertical">

                    <LinearLayout
                      android:layout_width="match_parent"
                      android:layout_height="match_parent"
                      android:layout_weight="1"
                      android:gravity="center_vertical"
                      android:orientation="vertical">
                      <TextView
                          android:id="@+id/textViewCycleStage"
                          style="@style/Base.TextAppearance.AppCompat.Headline"
                          android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:text="Cycle Stage"
                          android:textColor="#6d6e70"
                          android:textSize="15dp"
                          android:gravity="center_horizontal"/>
                      <LinearLayout
                          android:id="@+id/tableRowIOMapping1"
                          android:layout_width="match_parent"
                          android:layout_height="wrap_content"
                          android:layout_weight="1"
                          android:orientation="vertical"
                          android:paddingLeft="30dp">
                        <TextView
                          android:id="@+id/editTextCycleStage"
                          style="@style/Base.TextAppearance.AppCompat.Body1"
                          android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:text="Cycle Stage Value"
                          android:textColor="#231f20"
                          android:textSize="15dp"
                          android:textStyle="bold"
                          android:ellipsize="end"/>
                        <!--Cycle Image-->
                        <WebView
                            xmlns:android="http://schemas.android.com/apk/res/android"
                             android:id="@+id/MyWebView"
                             android:layout_width="100dp"
                             android:layout_height="100dp"/>
                      </LinearLayout>
                    </LinearLayout>

                  </LinearLayout>

                </LinearLayout>
                </LinearLayout>

                <!--Vertical Divider-->
                <View
                    android:layout_width="1dp"
                    android:layout_height="match_parent"
                    android:background="@drawable/FullVerticalDivider"/>

                <!--System Status-->  <!--Door State-->  <!--Cycle Error-->
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:orientation="vertical"
                    android:layout_marginLeft="5dp">

                  <LinearLayout
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:layout_weight="3"
                  android:gravity="center_vertical"
                  android:orientation="vertical">
                    <!--System Status-->
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical"
                        android:layout_weight="1">

                      <TextView
                          android:id="@+id/textViewSystemStatus"
                          style="@style/Base.TextAppearance.AppCompat.Headline"
                          android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:text="System Status"
                          android:textColor="#6d6e70"
                          android:textSize="15dp"/>

                      <TextView
                          android:id="@+id/editTextSystemStatus"
                          style="@style/Base.TextAppearance.AppCompat.Body1"
                          android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:text="System Value"
                          android:textColor="#ff0000"
                          android:textSize="20dp"
                          android:padding="5dp"
                          android:maxLines="2"
                          android:ellipsize="end"/>
                    </LinearLayout>

                    <!--Divider-->
                    <View
                          android:layout_width="match_parent"
                          android:background="@drawable/HalfHorizontalDivider"
                          android:layout_height="1dp"/>

                    <!--Door State-->
                    <LinearLayout
                          android:layout_width="match_parent"
                          android:layout_height="match_parent"
                          android:orientation="vertical"
                          android:layout_weight="1">

                      <TextView
                          android:id="@+id/textViewDoorState"
                          style="@style/Base.TextAppearance.AppCompat.Headline"
                          android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:text="Door State"
                          android:textColor="#6d6e70"
                          android:textSize="15dp"
                          android:ellipsize="end"
                          android:maxLines="1"/>

                      <TextView
                          android:id="@+id/editTextDoorState"
                          style="@style/Base.TextAppearance.AppCompat.Body1"
                          android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:text="Door State Value"
                          android:textColor="#ff0000"
                          android:textSize="20dp"
                          android:padding="5dp"
                          android:ellipsize="end"/>
                    </LinearLayout>

                    <!--Divider-->
                    <View
                          android:layout_width="match_parent"
                          android:background="@drawable/HalfHorizontalDivider"
                          android:layout_height="1dp"/>

                    <!--Cycle Error-->
                    <LinearLayout
                          android:layout_width="match_parent"
                          android:layout_height="match_parent"
                          android:orientation="vertical"
                          android:layout_weight="1">

                      <TextView
                          android:id="@+id/textViewCycleError"
                          style="@style/Base.TextAppearance.AppCompat.Headline"
                          android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:textColor="#6d6e70"
                          android:textSize="15dp"/>

                      <TextView
                          android:id="@+id/editTextCycleError"
                          style="@style/Base.TextAppearance.AppCompat.Body1"
                          android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:textColor="#ff0000"
                          android:textSize="20dp"
                          android:padding="5dp"
                          android:ellipsize="end"
                          android:maxLines="1"/>
                    </LinearLayout>

                  </LinearLayout>

                </LinearLayout>

            </LinearLayout>
            </LinearLayout>
          </android.support.v7.widget.CardView>

垂直分隔线:

     <shape xmlns:android="http://schemas.android.com/apk/res/android" >
        <size android:width="1dp"/>
        <solid android:color="#989898"/>
      </shape>

水平分割器:

      <?xml version="1.0" encoding="utf-8"?>
      <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
        <item>
          <shape android:shape="rectangle" >
            <solid android:color="@android:color/white" />
          </shape>
        </item>


        <item
            android:left="10dp"
            android:right="10dp">
          <shape android:shape="rectangle" >
            <solid android:color="#989898"/>
          </shape>
        </item>

      </layer-list>

我希望它会有用。