web-dev-qa-db-ja.com

クリック可能な画像を持つGridviewの作成、Android

クリック可能な画像を含むグリッドビューを作成したい。

画像がクリックされるたびに、対応する値がそのグリッドビューの下に表示されます。

Design of that grid view should be something like this

私が直面している問題は、パーツの設計にあります。このようなグリッドビューを設計する方法がわかりません。これを実行しようとすると、悪い結果が得られます。Android現在のUIデザイン経験。

助けてください ！

androidandroid-layoutgridviewandroid-gridview
8
Harshit Syal

GridViewはViewGroupで、アイテムを2次元のスクロール可能なグリッドに表示します。グリッドアイテムは、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

22
Avi Kumar Manku

これを試して

  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. グリッドレイアウト

      <?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>
2
Sunil