创建具有可点击图像的Gridview,Android

时间:2012-08-14 07:13:39

标签: android android-layout gridview android-gridview

我想创建一个包含可点击图片的网格视图..

单击图像时,相应的值将显示在该网格视图下方。

Design of that grid view should be something like this

我面临的问题是设计部分,我不知道如何设计这样的网格视图..每次我尝试这样做我得到一些不好的结果.. 到目前为止,我没有Android ui的设计经验。

请帮助!

3 个答案:

答案 0 :(得分:22)

GridViewViewGroup,它在二维可滚动网格中显示项目。网格项将使用ListAdapter自动插入布局。

有关如何使用适配器动态插入视图的介绍,请阅读使用适配器构建布局。

http://developer.android.com/guide/topics/ui/declaring-layout.html#AdapterViews

这些好GridView教程会帮助你

http://www.androidhive.info/2012/02/android-gridview-layout-tutorial/

http://www.mkyong.com/android/android-gridview-example/

http://developer.android.com/guide/topics/ui/layout/gridview.html

答案 1 :(得分:4)

答案 2 :(得分:2)

试试这个

  1. 主要活动

    public class MainActivity extends AppCompatActivity {
     List<String> list;
       int[] imageId = {
        R.drawable.a,
        R.drawable.b,
        R.drawable.c,
        R.drawable.d,
        R.drawable.e,
        R.drawable.f,
         };
          String[] web = {
        "Google",
        "Github",
        "Instagram",
        "Facebook",
        "Flickr",
        "Pinterest",
        "Quora",
        "Twitter",
        "Vimeo",
        "WordPress",
        "Youtube",
        "Stumbleupon",
        "SoundCloud",
        "Reddit",
        "Blogger"
    
        } ;
       @Override
       protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       ImageAdapter adapter = new ImageAdapter(MainActivity.this,web, 
       imageId);
        GridView grid=(GridView)findViewById(R.id.grid_view);
       grid.setAdapter(adapter);
      grid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    
        @Override
        public void onItemClick(AdapterView<?> parent, View view,
                                int position, long id) {
        }
    });
    
     }
     }
    
    1. activity_main

                <?xml version="1.0" encoding="utf-8"?>
        <LinearLayout 
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:context="com.example.mypc.grid.MainActivity">
      
       <GridView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/grid_view"
       android:layout_width="fill_parent"
         android:layout_height="fill_parent"
        android:numColumns="2"
           android:columnWidth="90dp"
        android:horizontalSpacing="10dp"
      android:verticalSpacing="10dp"
        android:gravity="center"
        android:stretchMode="columnWidth" >
        </GridView>
        </LinearLayout>
      
    2. ImageAdapter类

      public class ImageAdapter extends BaseAdapter
      {
       private Context mContext;
       private final int[] Imageid;
       private final String[] web;
          public ImageAdapter(Context c,String[] web,int[] Imageid )
        {
         mContext = c;
         this.Imageid = Imageid;
           this.web=web;
      }
      
      @Override
      public int getCount()
      {
           return Imageid.length;
       }
      @Override
       public Object getItem(int position)
      {
           return position;
        }
        @Override
       public long getItemId(int position)
      {
          return 0;
         }
       @Override
       public View getView(int position, View convertView, ViewGroup 
         parent)
        {
           LayoutInflater inflater = (LayoutInflater) 
            mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View gridView;
            if (convertView == null)
            {
               gridView = new View(mContext);
               // get layout from mobile.xml
               gridView = inflater.inflate(R.layout.grid_layout, null);
              // set value into textview
              TextView textView = (TextView) 
              gridView.findViewById(R.id.grid_item_label);
              textView.setText(web[position]);
             // set image based on selected text
             ImageView imageView = (ImageView) 
             gridView.findViewById(R.id.grid_item_image);
             imageView.setImageResource(Imageid[position]);
         }
         else
       {
            gridView = (View) convertView;
       }
          return gridView;
       }
      }
      
    3. grid_layout

      <?xml version="1.0" encoding="utf-8"?>
      <LinearLayout 
      xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp" >
      <ImageView
        android:id="@+id/grid_item_image"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginRight="10dp"
        >
       </ImageView>
       <TextView
          android:id="@+id/grid_item_label"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@+id/label"
          android:layout_marginTop="5px"
          android:textSize="15px" >
         </TextView>
      
         </LinearLayout>