Android：如何制作GroupBox小部件？

看来，Android不提供这样一个有用的小部件。然而，我的屏幕设计需要这样一个观点：Android：如何制作GroupBox小部件？

Design example

此外，交互设计要求，这样的框显示和隐藏，这取决于其他数据。

当然，我可以构建从不同的元素，例如箱子在我的XML布局（例如，从形状和在它一个TextView），但后来管理自己的知名度变成地狱......

所以，很显然，这里需要的是一个容器，就像一个相对布局。这样的容器可以有XML布局的孩子，并且可以通过简单的setVisibility（...）调用来显示和隐藏。

有人可以给我一个小费如何做到这一点，请吗？

来源

2010-10-20 JBM

您的链接导致503错误。 – CommonsWare 2010-10-20 12:14:50

我不认为有一个，但我砍在一起soemthing手册...不一样我知道，但我想我会分享“@ drawable/divider”是一个2像素方形灰色图像。创建控件周围的一个盒子的虚幻。

<?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>

来源

2011-06-30 19:59:28

记住这可绘制文件名“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>

这在你的布局：

<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>

这将创建一个组框组件，如图中的图片。

来源

2014-08-04 11:37:00 Dhahakaa

Android：如何制作GroupBox小部件？

回答

相关问题