Android: comment créer un widget GroupBox?

Question

Il semble que Android ne propose pas un tel widget utile. Cependant, ma conception d'écran nécessite une vue comme ceci: En outre,

la conception d'interaction exige que ces boîtes sont affichées et masquées, en fonction d'autres données.

Bien sûr, je pourrais construire cette boîte à partir d'éléments séparés dans ma mise en page XML (par exemple à partir d'une forme et un textview dessus), mais la gestion puis leur visibilité se transforme en enfer ...

Il est donc clair que ce qui est nécessaire ici est un conteneur, comme une disposition relative. Un tel conteneur peut avoir des enfants en format XML et peut être montré et caché avec un simple appel setVisibility (...).

Quelqu'un peut-il me donner un conseil pour ce faire, s'il vous plaît?

Answer 1

Je ne pense pas qu'il y en a un, mais j'ai piraté ensemble manuel de soemthing ... pas le même je sais, mais pensé que je partagerais "@ drawable/divider" est une image grise carrée de 2 pixels. Crée l'illusiuon d'une boîte autour des contrôles.

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 
    <ScrollView android:id="@+id/ScrollView01" android:layout_height="fill_parent" android:layout_width="fill_parent"> 
     <LinearLayout 
      xmlns:android="http://schemas.android.com/apk/res/android" 
      android:orientation="vertical" android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/linLayout02"> 
      <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" > 
       <ImageView 
        xmlns:android="http://schemas.android.com/apk/res/android" 
        android:background="@drawable/divider" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:scaleType="fitXY"/> 
      </TableRow> 

      <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/tableRow1" android:visibility="gone"> 
       <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/image_folder" android:minWidth="100px" android:visibility="gone"></TextView> 
       <EditText android:text="..." android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="fill_parent" android:id="@+id/txtImageFolder" android:enabled="false" android:visibility="gone"></EditText> 
      </TableRow> 

      <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/tableRow2"> 
       <LinearLayout 
        xmlns:android="http://schemas.android.com/apk/res/android" 
        android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="left"> 
        <ImageView 
         xmlns:android="http://schemas.android.com/apk/res/android" 
         android:background="@drawable/divider" 
         android:layout_width="wrap_content" 
         android:layout_height="fill_parent" 
         android:scaleType="fitXY"/> 
        <CheckBox android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/cbDisplayText" android:text="@string/text_below_images"></CheckBox> 
        <LinearLayout 
         xmlns:android="http://schemas.android.com/apk/res/android" 
         android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="right"> 
         <ImageView 
          xmlns:android="http://schemas.android.com/apk/res/android" 
          android:background="@drawable/divider" 
          android:layout_width="wrap_content" 
          android:layout_height="fill_parent" 

          android:scaleType="fitXY"/> 
        </LinearLayout> 
       </LinearLayout> 
      </TableRow> 
      <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/tableRow3" > 
       <LinearLayout 
        xmlns:android="http://schemas.android.com/apk/res/android" 
        android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="left"> 
        <ImageView 
         xmlns:android="http://schemas.android.com/apk/res/android" 
         android:background="@drawable/divider" 
         android:layout_width="wrap_content" 
         android:layout_height="fill_parent" 
         android:scaleType="fitXY"/> 
        <TextView android:id="@+id/tvLocale" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/locale" android:minWidth="100px"></TextView> 
        <Spinner android:id="@+id/cboLocales" android:layout_width="wrap_content" android:layout_height="wrap_content" android:minWidth="100px"></Spinner> 
        <LinearLayout 
         xmlns:android="http://schemas.android.com/apk/res/android" 
         android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="right"> 
         <ImageView 
          xmlns:android="http://schemas.android.com/apk/res/android" 
          android:background="@drawable/divider" 
          android:layout_width="wrap_content" 
          android:layout_height="fill_parent" 

          android:scaleType="fitXY"/> 
        </LinearLayout> 
       </LinearLayout> 
      </TableRow> 

      <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/tableRow3_1" > 
       <LinearLayout 
        xmlns:android="http://schemas.android.com/apk/res/android" 
        android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="left"> 
        <ImageView 
         xmlns:android="http://schemas.android.com/apk/res/android" 
         android:background="@drawable/divider" 
         android:layout_width="wrap_content" 
         android:layout_height="fill_parent" 
         android:scaleType="fitXY"/> 
        <TextView android:id="@+id/tvPitch" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/pitch" android:minWidth="100px"></TextView> 
        <SeekBar android:minWidth="100px" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/barPitch" android:max="200" ></SeekBar> 
        <LinearLayout 
         xmlns:android="http://schemas.android.com/apk/res/android" 
         android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="right"> 
         <ImageView 
          xmlns:android="http://schemas.android.com/apk/res/android" 
          android:background="@drawable/divider" 
          android:layout_width="wrap_content" 
          android:layout_height="fill_parent" 

          android:scaleType="fitXY"/> 
        </LinearLayout> 
       </LinearLayout> 
      </TableRow> 
      <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/tableRow3_2" > 
       <LinearLayout 
        xmlns:android="http://schemas.android.com/apk/res/android" 
        android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="left"> 
        <ImageView 
         xmlns:android="http://schemas.android.com/apk/res/android" 
         android:background="@drawable/divider" 
         android:layout_width="wrap_content" 
         android:layout_height="fill_parent" 
         android:scaleType="fitXY"/> 
        <TextView android:id="@+id/tvLocale" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/speed" android:minWidth="100px"></TextView> 
        <SeekBar android:minWidth="100px" android:layout_width="wrap_content" android:id="@+id/barSpeed" android:layout_height="wrap_content" android:max="200"></SeekBar> 
        <LinearLayout 
         xmlns:android="http://schemas.android.com/apk/res/android" 
         android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="right"> 
         <ImageView 
          xmlns:android="http://schemas.android.com/apk/res/android" 
          android:background="@drawable/divider" 
          android:layout_width="wrap_content" 
          android:layout_height="fill_parent" 

          android:scaleType="fitXY"/> 
        </LinearLayout> 
       </LinearLayout> 
      </TableRow> 

      <TableRow android:layout_width="fill_parent" android:id="@+id/tableRow4" android:layout_height="wrap_content" > 
       <LinearLayout 
        xmlns:android="http://schemas.android.com/apk/res/android" 
        android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="left"> 
        <ImageView 
         xmlns:android="http://schemas.android.com/apk/res/android" 
         android:background="@drawable/divider" 
         android:layout_width="wrap_content" 
         android:layout_height="fill_parent" 
         android:scaleType="fitXY"/> 
        <Button android:minWidth="100px" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/btnSave" android:text="@string/save"></Button> 
        <Button android:minWidth="100px" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/btnCancel" android:text="@string/cancel"></Button> 
        <LinearLayout 
         xmlns:android="http://schemas.android.com/apk/res/android" 
         android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="right"> 
         <ImageView 
          xmlns:android="http://schemas.android.com/apk/res/android" 
          android:background="@drawable/divider" 
          android:layout_width="wrap_content" 
          android:layout_height="fill_parent" 

          android:scaleType="fitXY"/> 
        </LinearLayout> 
       </LinearLayout> 
      </TableRow> 

      <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" > 
       <ImageView 
        xmlns:android="http://schemas.android.com/apk/res/android" 
        android:background="@drawable/divider" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:scaleType="fitXY" 
        android:paddingLeft="5dp" 
        android:paddingRight="5dp" 
        android:paddingBottom="2dp" 
        android:paddingTop="2dp" /> 
      </TableRow> 

      <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="2px"> 
       <ImageView 
        xmlns:android="http://schemas.android.com/apk/res/android" 
        android:background="@drawable/divider" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:scaleType="fitXY" 
        android:paddingLeft="5dp" 
        android:paddingRight="5dp" 
        android:paddingBottom="2dp" 
        android:paddingTop="2dp" /> 
      </TableRow> 

      <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" > 
       <LinearLayout 
        xmlns:android="http://schemas.android.com/apk/res/android" 
        android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="left"> 
        <ImageView 
         xmlns:android="http://schemas.android.com/apk/res/android" 
         android:background="@drawable/divider" 
         android:layout_width="wrap_content" 
         android:layout_height="fill_parent" 
         android:scaleType="fitXY"/> 
        <TextView android:text="@string/download_msg" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView> 
        <LinearLayout 
         xmlns:android="http://schemas.android.com/apk/res/android" 
         android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="right"> 
         <ImageView 
          xmlns:android="http://schemas.android.com/apk/res/android" 
          android:background="@drawable/divider" 
          android:layout_width="wrap_content" 
          android:layout_height="fill_parent" 

          android:scaleType="fitXY"/> 
        </LinearLayout> 
       </LinearLayout> 
      </TableRow> 

      <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" > 
       <LinearLayout 
        xmlns:android="http://schemas.android.com/apk/res/android" 
        android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="left"> 
        <ImageView 
         xmlns:android="http://schemas.android.com/apk/res/android" 
         android:background="@drawable/divider" 
         android:layout_width="wrap_content" 
         android:layout_height="fill_parent" 
         android:scaleType="fitXY"/> 
        <TextView android:text="Step 1: Download and Install eSpeak:" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView> 
        <Button android:minWidth="80px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/btneSpeak" android:text="@string/eSpeak"></Button> 
        <ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/barESpeak" android:visibility="gone"></ProgressBar> 
        <LinearLayout 
         xmlns:android="http://schemas.android.com/apk/res/android" 
         android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="right"> 
         <ImageView 
          xmlns:android="http://schemas.android.com/apk/res/android" 
          android:background="@drawable/divider" 
          android:layout_width="wrap_content" 
          android:layout_height="fill_parent" 

          android:scaleType="fitXY"/> 
        </LinearLayout> 
       </LinearLayout> 
      </TableRow> 

      <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" > 
       <LinearLayout 
        xmlns:android="http://schemas.android.com/apk/res/android" 
        android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="left"> 
        <ImageView 
         xmlns:android="http://schemas.android.com/apk/res/android" 
         android:background="@drawable/divider" 
         android:layout_width="wrap_content" 
         android:layout_height="fill_parent" 
         android:scaleType="fitXY"/> 
        <TextView android:text="Step 2: Download and Install Languages:" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView> 
        <Button android:minWidth="80px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/btnLanguages" android:text="@string/languages"></Button> 
        <ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/barLanguages" android:visibility="gone"></ProgressBar> 
        <LinearLayout 
         xmlns:android="http://schemas.android.com/apk/res/android" 
         android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="right"> 
         <ImageView 
          xmlns:android="http://schemas.android.com/apk/res/android" 
          android:background="@drawable/divider" 
          android:layout_width="wrap_content" 
          android:layout_height="fill_parent" 

          android:scaleType="fitXY"/> 
        </LinearLayout> 
       </LinearLayout> 
      </TableRow> 

      <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" > 
       <LinearLayout 
        xmlns:android="http://schemas.android.com/apk/res/android" 
        android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="left"> 
        <ImageView 
         xmlns:android="http://schemas.android.com/apk/res/android" 
         android:background="@drawable/divider" 
         android:layout_width="wrap_content" 
         android:layout_height="fill_parent" 
         android:scaleType="fitXY"/> 
        <TextView android:text="Step 3: Reboot the device:" android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView> 
        <Button android:minWidth="80px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/btnReboot" android:text="Reboot"></Button> 
        <LinearLayout 
         xmlns:android="http://schemas.android.com/apk/res/android" 
         android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="right"> 
         <ImageView 
          xmlns:android="http://schemas.android.com/apk/res/android" 
          android:background="@drawable/divider" 
          android:layout_width="wrap_content" 
          android:layout_height="fill_parent" 

          android:scaleType="fitXY"/> 
        </LinearLayout> 
       </LinearLayout> 
      </TableRow> 

      <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" > 
       <LinearLayout 
        xmlns:android="http://schemas.android.com/apk/res/android" 
        android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="left"> 
        <ImageView 
         xmlns:android="http://schemas.android.com/apk/res/android" 
         android:background="@drawable/divider" 
         android:layout_width="wrap_content" 
         android:layout_height="fill_parent" 
         android:scaleType="fitXY"/> 
        <TextView android:text="Note: If Text to speech still fails repeat Step 2 and reboot again." android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView> 
        <LinearLayout 
         xmlns:android="http://schemas.android.com/apk/res/android" 
         android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="right"> 
         <ImageView 
          xmlns:android="http://schemas.android.com/apk/res/android" 
          android:background="@drawable/divider" 
          android:layout_width="wrap_content" 
          android:layout_height="fill_parent" 

          android:scaleType="fitXY"/> 
        </LinearLayout> 
       </LinearLayout> 
      </TableRow> 

      <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" > 
       <ImageView 
        xmlns:android="http://schemas.android.com/apk/res/android" 
        android:background="@drawable/divider" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:scaleType="fitXY" 
        android:paddingLeft="5dp" 
        android:paddingRight="5dp" 
        android:paddingBottom="2dp" 
        android:paddingTop="2dp" /> 
      </TableRow> 

     </LinearLayout> 

    </ScrollView> 

</LinearLayout> 

Answer 2

Gardez cela à votre nom de fichier Drawable "selector_fieldset_background.xml"

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle" > 
    <solid android:color="#FFFFFF" /> 
    <stroke 
     android:width="1dip" 
     android:color="#4fa5d5" /> 
</shape> 

Et ceci vous mise en page:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" > 

    <LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_alignParentLeft="true" 
    android:layout_alignParentTop="true" 
    android:layout_marginTop="13dp" 
    android:background="@drawable/selector_fieldset_background" 
    android:orientation="vertical" > 
    </LinearLayout> 

    <TextView 
    android:id="@+id/textView1" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignParentTop="true" 
    android:layout_centerHorizontal="true" 
    android:background="@color/white" 
    android:paddingLeft="20dp" 
    android:paddingRight="20dp" 
    android:text="Order Information" 
    android:textAppearance="?android:attr/textAppearanceLarge"/> 
</RelativeLayout> 

Cela va créer une boîte groupe de composants comme indiqué dans votre image.