2012-08-14 2 views
8

Ich möchte ein gridview mit anklickbaren Bilder erstellen ..Erstellen von Gridview mit klickbare Bilder, Android

Wann immer ein Bild ein entsprechender Wert angeklickt wird, wird unterhalb dieser Rasteransicht angezeigt.

Design of that grid view should be something like this

Das Problem, das ich bin vor bei der Gestaltung Teil ist, ich weiß nicht, wie wie dies eine Rasteransicht zu entwerfen .. jedes Mal wenn ich versuche nicht zu tun, dass ich ein paar schlechte Ergebnisse erhalten .. Ich habe android ui entwirft Erfahrung ab sofort.

Bitte Hilfe!

+0

Siehe diese Links http://mytelcoit.com/2010/02/programming-android-create-icon-with-text-using-gridview-and-layout -inflater/http://android-coding.blogspot.in/2011/09/custom-gridview-ii-with-imageview-and.html – rajeshwaran

Antwort

21

GridView ein ViewGroup ist, die Elemente in einem zweidimensionalen, scrollbaren Raster anzeigt. Die Rasterelemente werden automatisch mit einer ListAdapter in das Layout eingefügt.

Eine Einführung in das dynamische Einfügen von Ansichten mithilfe eines Adapters finden Sie unter Erstellen von Layouts mit einem Adapter.

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

und Das sind gute GridView Tutorials helfen Ihnen

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

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

und

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

1

Versuchen Sie, diese

  1. Haupttätigkeit

    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 Klasse

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