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小部件？

回答

相關問題