Android 选项卡内的网格布局_Android_Android Fragments_Android Viewpager_Android Gridview_Android Tabs

Android 选项卡内的网格布局

android android-fragments

Android 选项卡内的网格布局,android,android-fragments,android-viewpager,android-gridview,android-tabs,Android,Android Fragments,Android Viewpager,Android Gridview,Android Tabs,我是Android新手，因此面临着这样的问题如何从以下位置更改布局：致： XML片段\u main： <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_paren

我是Android新手，因此面临着这样的问题

如何从以下位置更改布局：

致：

XML片段\u main：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.snbgearassistant.MainActivity$PlaceholderFragment" >


<TextView
    android:id="@+id/section_label"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

</RelativeLayout>

因此，我需要这些选项卡具有不同内容的网格布局。

您必须在ViewPager中使用网格视图。因此，在您的

main活动中

，您将拥有此布局

创建activity_main.xml布局这是主要布局。所有的东西都在里面，包括你的片段和标签

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.myapp.gridview.MainActivity" />

现在，让我们定义一个片段类，它负责扩展这个布局并处理视图

创建一个片段以膨胀GridView布局：PlaceHolderFragment.java 现在，我们必须创建一个适配器类来处理

GridView

的每个项，这样您就可以管理每个项的行为

创建适配器以支持GridView项：MyAdapter.java 正如您在这里看到的，我们通过将一些项添加到适配器类末尾定义的

Item

类型的

ArrayList

来将它们添加到GridView

private class MyAdapter extends BaseAdapter
{
        private List<Item> items = new ArrayList<Item>();
        private LayoutInflater inflater;

        public MyAdapter(Context context)
        {
            inflater = LayoutInflater.from(context);

            items.add(new Item("Image 1", Color.GREEN));
            items.add(new Item("Image 2", Color.RED));
            items.add(new Item("Image 3", Color.BLUE));
            items.add(new Item("Image 4", Color.GRAY));
            items.add(new Item("Image 5", Color.YELLOW));
        }

        @Override
        public int getCount() {
            return items.size();
        }

        @Override
        public Object getItem(int i)
        {
            return items.get(i);
        }

        @Override
        public long getItemId(int i)
        {
            return items.get(i).colorId;
        }

        @Override
        public View getView(int i, View view, ViewGroup viewGroup)
        {
            View v = view;
            ImageView picture;
            TextView name;

            if(v == null)
            {
                v = inflater.inflate(R.layout.gridview_item, viewGroup, false);
                v.setTag(R.id.picture, v.findViewById(R.id.picture));
                v.setTag(R.id.text, v.findViewById(R.id.text));
            }

            picture = (ImageView)v.getTag(R.id.picture);
            name = (TextView)v.getTag(R.id.text);

            Item item = (Item)getItem(i);

            picture.setBackgroundColor(item.colorId);
            name.setText(item.name);

            return v;
        }

        private class Item
        {
            final String name;
            final int colorId;

            Item(String name, int drawableId)
            {
                this.name = name;
                this.colorId = drawableId;
            }
        }
    }

现在我们必须为

GridView

项定义XML布局

创建XML布局gridview_item.XML 如您所见，这里我们向布局中添加了两项。一个是

SquareImageView

（我们在上面创建的类）类型的元素，另一个是

TextView

，它是每个图像的标签

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.myapp.gridview.SquareImageView
        android:id="@+id/picture"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        />
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="15dp"
        android:paddingBottom="15dp"
        android:layout_gravity="bottom"
        android:textColor="@android:color/white"
        android:background="#55000000"
        />
</FrameLayout>

在这里，我测试了代码，这是最终结果。当然，您会为图像更改这些颜色，但这是您应该遵循的方法

注意：要在

MyAdapter

类的

getView（）

方法中为

GridView

项设置图像而不是颜色，请使用而不是

setBackgroundColor（int）

您必须在ViewPager中使用GridView。因此，在您的

main活动中