图像和文本居中的 GridView

Question

您好，我想开发这种类型的布局，但我很困惑是这样对齐的网格视图还是图像视图。好吧，我的问题是如何在我工作的片段中实现这种类型的菜单

从 https://www.learn2crack.com/2014/01/android-custom-gridview.html

实施 Gridview 之后

我得到了这样的屏幕

如何使 gridView 看起来像第一张图片？

作为块中心的文字，我真的很想实现它。

grid_single.xml

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

    <ImageView
        android:id="@+id/grid_image"
        android:layout_width="match_parent"
        android:src="@drawable/denist_3"
        android:layout_height="50dp">
    </ImageView>

    <TextView
        android:id="@+id/grid_text"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:layout_gravity="center"
        android:text="Dentist"
        android:textSize="9sp" >
    </TextView>

</LinearLayout>

main_act.xml:

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
       <GridView
        android:numColumns="auto_fit"
        android:layout_below="@+id/comsp"
        android:gravity="center"
        android:columnWidth="150dp"
        android:stretchMode="columnWidth"
        android:layout_width="fill_parent"
        android:layout_height="600dp"
        android:id="@+id/grid"
        />

</RelativeLayout>

Adapterclass.java

public class CustomGrid extends BaseAdapter{
    private Context mContext;
    private final String[] web;
    private final int[] Imageid;

    public CustomGrid(Context c,String[] web,int[] Imageid ) {
        mContext = c;
        this.Imageid = Imageid;
        this.web = web;
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return web.length;
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return null;
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        View grid;
        LayoutInflater inflater = (LayoutInflater) mContext
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        if (convertView == null) {

            grid = new View(mContext);
            grid = inflater.inflate(R.layout.grid_single, null);
            TextView textView = (TextView) grid.findViewById(R.id.grid_text);
            ImageView imageView = (ImageView)grid.findViewById(R.id.grid_image);
            textView.setText(web[position]);
            imageView.setImageResource(Imageid[position]);
        } else {
            grid = (View) convertView;
        }

        return grid;
    }
}

Mainactivity.java

     CustomGrid adapter = new CustomGrid(getActivity(), web, imageId);

 grid=(GridView)v.findViewById(R.id.grid);
 grid.setAdapter(adapter);
        grid.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                                    int position, long id) {
                Toast.makeText(getActivity(), "You Clicked at " +web[+ position], Toast.LENGTH_SHORT).show();

            }
        });

Answer 1

您的 xml 文件太复杂了。您只需在 activity/fragment 布局中使用 GridView 即可实现此目的。然后，您需要一个自定义适配器 class 来为您的 Gridview 扩充另一个 xml 文件，该文件将仅包含一个图像视图和文本视图。您可以按照此 link 开始使用 GridView：https://www.learn2crack.com/2014/01/android-custom-gridview.html

Answer 2

要获得叠加布局，您可以使用 FrameLayout，因为它的子视图会相互堆叠。在你的情况下，你的 item_layout.xml 看起来像这样

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

    <ImageView
        android:id="@+id/ivBackground"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/myimage"/>

    <TextView
        android:id="@+id/tvOverlayText"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/mytext"
        android:gravity="center"/>

</FrameLayout>

Answer 3

嘿朋友我得到了上述问题的解决方案.. 检查此解决方案..

main_activity.xml 中的 GridView

   <GridView
        android:id="@+id/listRequests"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:columnWidth="10dp"
        android:background="#e1ecef"
        android:horizontalSpacing="10dp"
        android:numColumns="2"
        android:listSelector="#e1ecef"
        android:scrollbars="none"
        android:stretchMode="columnWidth"
        android:verticalSpacing="10dp"/>

Item.xml 自定义适配器

<ImageView
    android:id="@+id/picture"
    android:layout_width="match_parent"
    android:layout_height="128dp"
    android:layout_gravity="center"
    android:adjustViewBounds="true"
    android:contentDescription="@string/app_name"
    android:src="@drawable/plumbing" />

<TextView
    android:id="@+id/text"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_alignBottom="@id/picture"
    android:layout_alignEnd="@id/picture"
    android:layout_alignStart="@id/picture"
    android:layout_alignTop="@id/picture"
    android:layout_margin="1dp"
    android:background="#55000000"
    android:gravity="center"
    android:text=""
    android:textColor="@android:color/white"
    android:textSize="@dimen/_14sdp"
    android:textStyle="normal" />

这是输出。

希望对你有所帮助...

图像和文本居中的 GridView

GridView with image and text on center

android

gridview

android-layout

android-imageview