Un diseño de cuadrícula de los botones de icono/texto

Question

Estoy intentando crear una grilla de elementos de 3 x 3. Cada elemento se compone de ImageView en la parte superior de TextView. Desafortunadamente, estoy teniendo problemas para que todo funcione bien.

Aquí está mi intento de obtener 2 artículos de este tipo uno al lado del otro. Las vistas de texto ni siquiera se muestran, y los iconos son aplastados juntos (en lugar de uniformemente espaciadas)

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
android:stretchColumns="1" android:gravity="center" 
    android:paddingLeft="40px" android:paddingRight="40px" > 
<TableRow> 
    <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" 
android:layout_height="fill_parent"> 
     <ImageView 
      android:id="@+id/usertoolsimage" 
      android:src="@drawable/ftnicon" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      /> 
     <TextView 
     android:text="User Accounts" 
     android:gravity="right" 
     android:padding="3dip" android:textColor="#ffffff" /> 
    </LinearLayout> 


    <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" 
android:layout_height="fill_parent"> 
     <ImageView 
      android:id="@+id/queueimage" 
      android:src="@drawable/ftnicon" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      /> 
     <TextView 
     android:text="Queue Management" 
     android:gravity="right" 
     android:padding="3dip" android:textColor="#ffffff" /> 
    </LinearLayout> 
</TableRow> 

<TableRow> 
    <TextView 
     android:text="test 3" 
     android:padding="3dip" android:textColor="#ffffff" /> 
    <TextView 
     android:text="test 4" 
     android:gravity="right" 
     android:padding="3dip" android:textColor="#ffffff" /> 
</TableRow> 
</TableLayout> 

Mi objetivo al final es tener una red de elementos interactivos en el que el artículo es una imagen y texto para un menú principal. ¿Alguien puede guiarme en qué diseños debería usar para lograr esto?

Answer 1

La mejor opción, en mi opinión, sería utilizar gridView de esa manera, es compatible con el desplazamiento y el espaciado, y puede ser muy dinámico en cuanto a la distribución de cada elemento y los eventos. Otra opción es simplemente crear un diseño de las imágenes con una combinación de diseños relativos/lineales.

diseño GridView:

<GridView xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/myGrid" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:padding="10dp" 
android:verticalSpacing="10dp" 

android:horizontalSpacing="10dp" 
android:numColumns="3" 
android:columnWidth="60dp" 
android:stretchMode="columnWidth" 

android:gravity="center" 
/> 

y luego en su actividad:

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    // TODO Auto-generated method stub 
    super.onCreate(savedInstanceState); 
    mGame.status = GameStatus.PLAYING; 

    setContentView(R.layout.gridLayout); 
    GridView grid = (GridView) findViewById(R.id.myGrid); 
    grid.setAdapter(new customAdapter()); 

    grid.setOnItemClickListener(new OnItemClickListener() { 
     @Override 
     public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, 
       long arg3) { 
      //do some stuff here on click 
     } 
    }); 
} 

public class customAdapter extends BaseAdapter { 

    public View getView(int position, View convertView, ViewGroup parent) { 
//create a basic imageview here or inflate a complex layout with 
//getLayoutInflator().inflate(R.layout...) 
     ImageView i = new ImageView(this); 

     i.setImageResource(mFams.get(position).imageId); 
     i.setScaleType(ImageView.ScaleType.FIT_CENTER); 
     final int w = (int) (36 * getResources().getDisplayMetrics().density + 0.5f); 
     i.setLayoutParams(new GridView.LayoutParams(w * 2, w * 2)); 
     return i; 
    } 

    public final int getCount() { 
     return 9; 
    } 

    public final Family getItem(int position) { 
     return mFams.get(position); 
    } 

    public final long getItemId(int position) { 
     return position; 
    } 
} 

O el diseño básico utilizando diseños lineales:

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

<LinearLayout android:id="@+id/linearLayout1" 
android:layout_height="fill_parent" 
android:layout_weight="1" 
android:layout_alignParentLeft="true" 
android:layout_width="fill_parent" 
android:orientation="horizontal"> 

    <ImageView>...</ImageView> 
    <ImageView>...</ImageView> 
    <ImageView>...</ImageView> 

</LinearLayout> 

<LinearLayout android:id="@+id/linearLayout2" 
android:layout_height="fill_parent" 
android:layout_weight="1" 
android:layout_alignParentLeft="true" 
android:layout_width="fill_parent" 
android:orientation="horizontal"> 

    <ImageView>...</ImageView> 
    <ImageView>...</ImageView> 
    <ImageView>...</ImageView> 

</LinearLayout> 

<LinearLayout android:id="@+id/linearLayout3" 
android:layout_height="fill_parent"" 
android:layout_weight="1" 
android:layout_alignParentLeft="true" 
android:layout_width="fill_parent" 
android:orientation="horizontal"> 

    <ImageView>...</ImageView> 
    <ImageView>...</ImageView> 
    <ImageView>...</ImageView> 

</LinearLayout> 

Answer 2

realmente debería utilizar un GridV iew para hacer grids, y no TableRows. Have you seen Android's tutorial for GridView's? Para poder lograr lo que desea con una imagen superpuesta con texto, necesitaría utilizar FrameLayout como se muestra en Android's FrameLayout example.. La parte más difícil aquí es que necesita aplicar este diseño a cada elemento que va a estar en el Gridview.

Así, por ejemplo, digamos que se crea un archivo de diseño llamado image_text_view.xml que se parece a esto:

<FrameLayout 
xmlns:android = "http://schemas.android.com/apk/res/android" 
android:id="@+id/gridImage" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
android:orientation="vertical" 
android:gravity="center_horizontal"> 
<ImageView 
android:id="@+id/image" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
android:adjustViewBounds="false"> 
</ImageView> 
<CheckedTextView 
android:id="@+id/imageTick" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:gravity="center_horizontal" 
android:textColor="#000000" 
android:layout_gravity="center_horizontal|bottom" 
android:checkMark="@drawable/icon" 
android:checked="false" 
android:visibility="invisible" 
> 
</CheckedTextView> 
</FrameLayout> 

es necesario aplicar esta disposición en cada uno de sus artículos GridView. Para ello, (el ejemplo de edición GridView de Android) Usted tendría que redefinir el getView en el ImageAdapter de la siguiente manera:

public View getView(int position, View convertView, ViewGroup parent) { 
View v; 
    if(convertView==null){ 
     v = LayoutInflater.from(mContext).inflate(R.layout.image_text_view,null); 
     v.setLayoutParams(new GridView.LayoutParams(100,100)); 

     ImageView imageView = (ImageView)v.findViewById(R.id.image); 
     imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); 
     imageView.setPadding(8, 8, 8, 8); 
     imageView.setImageResource(mThumbsIds[position]); 

        CheckedTextView checkedTextView = (TextView) v.findViewById(R.id.imageTick); 
        checkedTextView.setEnabled(true); 
        checkedTextView.setVisibility(View.VISIBLE); 

    } 
    else 
    { 
     v = convertView; 
    } 


    return v; 

uso de este, por ejemplo, va a tener lo que establece (si su texto o iconos) que recubre la imágenes para cada elemento en la cuadrícula. Es posible que deba realizar ajustes menores en este ejemplo para satisfacer sus necesidades exactas, pero esta es la estrategia con la que lo haría.