आइकन/टेक्स्ट बटन का ग्रिड लेआउट

Question

मैं 3 x 3 ग्रिड आइटम बनाने का प्रयास कर रहा हूं। TextView के शीर्ष पर प्रत्येक आइटम में ImageView होता है। दुर्भाग्यवश, मुझे अच्छी तरह से खेलने के लिए सब कुछ मिल रहा है।

यहां 2 ऐसे आइटम प्राप्त करने का मेरा प्रयास है। पाठ विचारों भी दिखाई नहीं देते, और प्रतीक एक साथ 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> 

अंत में मेरा लक्ष्य क्लिक करने योग्य आइटम का एक ग्रिड जहां आइटम एक चित्र और के लिए पाठ है है एक मुख्य मेनू क्या कोई मुझे यह जानने के लिए उपयोग कर सकता है कि मुझे किस लेआउट का उपयोग करना चाहिए?

Answer 1

मेरी राय में आपकी सबसे अच्छी शर्त ग्रिड व्यू का उपयोग करना होगा जिस तरह से यह स्क्रॉलिंग और रिक्ति का समर्थन करता है और आप प्रत्येक आइटम लेआउट और घटनाओं में बहुत गतिशील हो सकते हैं। एक और विकल्प है कि रिलेटिव/लीनियर लेआउट के संयोजन के साथ छवियों को केवल एक बिछाएं।

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

और उसके बाद अपनी गतिविधि में:

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

या मूल लेआउट का उपयोग कर रैखिक लेआउट:

<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

आप वास्तव में उपयोग करना चाहिए एक ग्रिडवी ग्रिड करने के लिए iew, और tableRows नहीं। Have you seen Android's tutorial for GridView's? टेक्स्ट के साथ ओवरले किए गए चित्र के साथ आप जो चाहते हैं उसे हासिल करने में सक्षम होने के लिए, आपको Android's FrameLayout example. में दिखाए गए फ्रेमलेआउट का उपयोग करने की आवश्यकता होगी, हालांकि यहां मुश्किल हिस्सा यह है कि आपको इस लेआउट को प्रत्येक आइटम में लागू करने की आवश्यकता है ग्रिडव्यू

उदाहरण के लिए, की मदद से आप जो इस तरह दिखता है image_text_view.xml नामक एक लेआउट फ़ाइल बनाने का कहना है:

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

आप अपने GridView आइटम में से प्रत्येक में इस लेआउट आवेदन करना होगा। इस (संपादन Android के GridView उदाहरण) ऐसा करने के लिए आप ImageAdapter में getView को फिर से परिभाषित करने के लिए इस प्रकार की आवश्यकता होगी:

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; 

इस का प्रयोग, उदाहरण के लिए, आप जो कुछ भी आप सेट करना होगा (अपने पाठ या चिह्न या नहीं) डालने ग्रिड में प्रत्येक आइटम के लिए छवियों। आपको अपनी सटीक जरूरतों को पूरा करने के लिए इस उदाहरण में मामूली बदलाव करने की आवश्यकता हो सकती है, लेकिन यह वह रणनीति है जिसके साथ मैं जाऊंगा।