【问题标题】:Creating Gridview having clickable images,Android创建具有可点击图像的Gridview,Android
【发布时间】:2012-08-14 07:13:38
【问题描述】:

我想创建一个具有可点击图像的网格视图..

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

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

请帮忙!

【问题讨论】:

标签: android android-layout gridview android-gridview


【解决方案1】:

GridView 是一个ViewGroup,它在二维、可滚动的网格中显示项目。网格项会使用 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

【讨论】:

    【解决方案2】:
    【解决方案3】:

    试试这个

    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> 
        

    【讨论】:

      猜你喜欢
      • 2010-10-18
      • 1970-01-01
      • 2023-01-05
      • 1970-01-01
      • 2011-02-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多