web-dev-qa-db-ja.com

アイコン/テキストボタンのグリッドレイアウト

アイテムの3 x 3グリッドを作成しようとしています。各アイテムは、ImageViewの上にあるTextViewで構成されます。残念ながら、すべてをうまく再生させるのに問題があります。

ここでは、そのようなアイテムを2つ並べて取得しようとしています。テキストビューは表示されず、アイコンは（等間隔ではなく）一緒に押しつぶされます。

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

結局のところ、私の目的は、メインメニューの画像とテキストであるクリック可能な項目のグリッドを作成することです。これを達成するために使用する必要があるレイアウトについて誰かが私を案内できますか？

androidgridandroid-layout
16
Josh

私の意見ではあなたの最善の策は、スクロールと間隔をサポートする方法でgridViewを使用することであり、各アイテムのレイアウトとイベントが何であるかを非常に動的にすることができます。別のオプションは、相対/線形レイアウトの組み合わせで画像をレイアウトするだけです。

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>
30
Patrick Kafka

グリッドを作成するには、TableRowsではなく、GridViewを実際に使用する必要があります。 GridViewのAndroidチュートリアルをご覧になりましたか？ テキストがオーバーレイされた画像で希望どおりの結果を得るには、FrameLayoutを使用する必要があります AndroidのFrameLayoutの例。 =ただし、ここでトリッキーな部分は、グリッドビューに配置する各アイテムにこのレイアウトを適用する必要があることです。

たとえば、次のような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;

これを使用すると、たとえば、グリッド内の各アイテムの画像をオーバーレイして（テキストかアイコンかに関係なく）何でも設定できます。正確なニーズを満たすために、この例を少し調整する必要があるかもしれませんが、これは私が取り組む戦略です。

6
Hakan Ozbay