Simgenin/metin düğmelerinin ızgara yerleşimi

Question

3 x 3 ızgara öğeleri oluşturmaya çalışıyorum. Her bir Ürün, bir TextView'un üstünde bir ImageView'dan oluşur. Maalesef, her şeyin güzelce oynaması için sorunlara sahibim.

İşte böyle 2 öğe yan yana alma girişimi. (Eşit aralıklı yerine) Metin görünümleri bile görünmüyor ve simgeler birlikte squished

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

sonunda Amacım öğenin bir resim ve metin içindir tıklanabilir öğeleri bir ızgara sahip olmaktır

ana menü. Bunu başarmak için hangi düzeni kullanmam gerektiğini bana kim yönlendirebilir?

Answer 1

Benim düşünceme göre en iyi bahsiniz, grid'i kullanmaktır, böylece kaydırma ve aralamayı destekler ve her öğenin düzeni ve olaylarının ne olduğu konusunda çok dinamik olabilirsiniz. Diğer bir seçenek ise, sadece Göreli/Doğrusal Düzenler kombinasyonuyla görüntülerin oluşturulmasıdır.

GridView düzen:

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

ve sonra aktivitesinde:

@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; 
    } 
} 

Veya temel düzeni kullanılarak doğrusal düzenleri:

<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

Gerçekten kullanmalısınız bir GridV TabloRows yapmak için değil, ızgara yapmak için. Have you seen Android's tutorial for GridView's? Metnin üzerine yerleştirilmiş bir görüntü ile istediğiniz görüntüyü elde edebilmek için, FrameLayout'u Android's FrameLayout example.'da gösterildiği gibi kullanmanız gerekir. Buradaki zor kısım da, bu düzeni içinde olacak her bir öğeye uygulamanız gerektiğidir. Gridview.

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

Sen GridView öğenin her bu düzeni uygulamak gerekir:

Yani, örneğin, şuna benzer image_text_view.xml adlı bir düzen dosyası oluşturmak varsayalım. aşağıdaki gibi ImageAdapter içinde GetView yeniden tanımlamak gerekir bu (düzenleme Android'in GridView örneği) yapmak için:

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; 

bu kullanma örneğin, ayarladığınız ne olacak (onun metin veya simgeleri olsun) bindirilirken Kılavuzdaki her öğe için resimler. Tam ihtiyacınızı karşılamak için bu örnekte küçük ince ayarlamalar yapmanız gerekebilir, ancak bununla birlikte kullanacağım stratejidir.