如何在android中设计类似google calender事件的表单？

Question

我想要设计和实现这种类型的表单吗？

帮我为

我M个新的android系统

Answer 1

您可以通过使用PercentageRelativeLayout实现这一目标。

试试这个XML代码：

<?xml version="1.0" encoding="utf-8"?> 
<android.support.percent.PercentRelativeLayout 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:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:padding="20dp" 
    android:layout_margin="10dp"> 

    <android.support.percent.PercentRelativeLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/from_layout" 
     android:layout_margin="5dp"> 

     <TextView 
      android:text="FROM" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/textView8" 
      android:textSize="24sp" 
      style="@android:style/Widget.DeviceDefault.Light.TextView" /> 

     <Spinner 
      app:layout_widthPercent="60%" 
      android:layout_height="wrap_content" 
      android:id="@+id/spinner2" 
      android:layout_below="@+id/textView8" 
      android:spinnerMode="dialog" 
      style="@style/Platform.Widget.AppCompat.Spinner" /> 

     <Spinner 
      app:layout_widthPercent="40%" 
      android:layout_height="wrap_content" 
      android:id="@+id/spinner4" 
      android:layout_toRightOf="@+id/spinner2" 
      android:gravity="start" 
      android:layout_below="@+id/textView8" 
      android:spinnerMode="dialog" 
      style="@style/Platform.Widget.AppCompat.Spinner" /> 

    </android.support.percent.PercentRelativeLayout> 

    <android.support.percent.PercentRelativeLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/to_layout" 
     android:layout_below="@+id/from_layout" 
     android:layout_margin="5dp"> 

     <TextView 
      android:text="TO" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/textView9" 
      android:textSize="24sp" 
      style="@android:style/Widget.DeviceDefault.Light.TextView" /> 

     <Spinner 
      app:layout_widthPercent="60%" 
      android:layout_height="wrap_content" 
      android:id="@+id/spinner5" 
      android:layout_below="@+id/textView9" 
      android:spinnerMode="dialog" 
      style="@style/Platform.Widget.AppCompat.Spinner" /> 

     <Spinner 
      app:layout_widthPercent="40%" 
      android:layout_height="wrap_content" 
      android:id="@+id/spinner6" 
      android:layout_below="@+id/textView9" 
      android:layout_toRightOf="@+id/spinner5" 
      android:spinnerMode="dialog" 
      style="@style/Platform.Widget.AppCompat.Spinner" /> 

    </android.support.percent.PercentRelativeLayout> 

    <android.support.percent.PercentRelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_below="@+id/to_layout" 
     android:layout_margin="5dp"> 

     <CheckBox 
      android:text="ALL DAY" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/checkBox" 
      tools:ignore="HardcodedText" 
      style="@style/Widget.AppCompat.CompoundButton.CheckBox" 
      android:textSize="18sp" /> 

     <Spinner 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:id="@+id/spinner3" 
      android:layout_below="@+id/checkBox" 
      android:spinnerMode="dialog" 
      style="@style/Platform.Widget.AppCompat.Spinner" /> 
    </android.support.percent.PercentRelativeLayout> 
</android.support.percent.PercentRelativeLayout> 

你会得到的设计是这样的：