我想创建一个包含可点击图片的网格视图..
单击图像时,相应的值将显示在该网格视图下方。
我面临的问题是设计部分,我不知道如何设计这样的网格视图..每次我尝试这样做我得到一些不好的结果.. 到目前为止,我没有Android ui的设计经验。
请帮助!
答案 0 :(得分:22)
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
答案 1 :(得分:4)
答案 2 :(得分:2)
主要活动
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) {
}
});
}
}
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>
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;
}
}
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>