Android Activity-GridView使用学习
jopen
12年前
<p>我们将通过两个例子学习GridView。Grid和Table有一点点类似。我们将在例子中逐步描绘如何编写一个Grid的Activity</p> <p><big><strong>例子一：继承ArrayAdapter作为自定义adapter</strong></big></p> <p>1、编写Android XML</p> <blockquote style="border-bottom:#ffbcbc thin dashed;border-left:#ffbcbc thin dashed;padding-bottom:5pt;line-height:130%;background-color:#ffffea;margin-top:11px;text-indent:0em;padding-left:5pt;padding-right:5pt;font-family:微软雅黑;margin-bottom:11px;margin-left:10pt;font-size:9.5pt;border-top:#ffbcbc thin dashed;border-right:#ffbcbc thin dashed;padding-top:5pt;"> <p><span style="color:#888888;"><?xml version="1.0" encoding="utf-8"?><br /> <LinearLayout<br /> xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:orientation="vertical"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"><br /> <TextView android:id="@+id/selection4"<br /> android:layout_width="fill_parent"<br /> android:layout_height="wrap_content" /></span><br /> <<strong>GridView</strong> <span style="color:#888888;">android:id="@+id/grid"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"</span><br /> android:<strong>verticalSpacing</strong>="35px" <span style="color:#6666ff;"><!-- grid元素之间的竖直间隔 --></span><br /> android:<strong>horizontalSpacing</strong>="5px" <span style="color:#6666ff;"><!--</span><span style="color:#6666ff;">grid元素之间的水平间隔 </span><span style="color:#6666ff;"> --></span><br /> android:<strong>numColumns</strong>="auto_fit" <span style="color:#6666ff;"><!--表示有多少列，如果设置为auto_fit，将根据columnWidth和Spacing来自动计算 --></span><br /> android:<strong>columnWidth</strong>="100px" <span style="color:#6666ff;"><!-- 一般建议采用有像素密度无关的dip或者dp来表示--></span><br /> android:<strong>stretchMode</strong>="columnWidth" <span style="color:#6666ff;"><!--如何填满空余的位置，模拟器采用WVGA800*480，每排4列，有4＊100＋5＊3＝415，还余65px的空间，如果是 columnWidth，则这剩余的65将分摊给4列，每列增加16/17px。如果采用SpacingWidth，则分摊给3个间隔空隙 --></span><br /> android:gravity="center" /> <br /> <span style="color:#888888;"></LinearLayout></span></p> </blockquote> <p>2、编写代码。和其他selected widget，我们之前学习的ListView和Spinner的方式，通过setAdapter()来提供数据和子View显示风格，通过触发 setOnItemSelectedListener()注册选择listner。在这里处理选择之外，我们增加一个Click的触发，可以比较一下此两 的差异。此次我们不再使用Android自带的格式，而设置我们自己的UI风格。</p> <blockquote style="border-bottom:#ffbcbc thin dashed;border-left:#ffbcbc thin dashed;padding-bottom:5pt;line-height:130%;background-color:#ffffea;margin-top:11px;text-indent:0em;padding-left:5pt;padding-right:5pt;font-family:微软雅黑;margin-bottom:11px;margin-left:10pt;font-size:9.5pt;border-top:#ffbcbc thin dashed;border-right:#ffbcbc thin dashed;padding-top:5pt;"> <p>public class Chapter7Test4 extends Activity implements <strong>OnItemSelectedListener</strong>,<strong>OnItemClickListener</strong>{<br /> <span style="color:#888888;"> private TextView selection = null;<br /> private String[] items={"lorem", "ipsum", "dolor", "sit", "amet", "hello", "me", "elit", "morbi", "vel", "ligula", "vitae", "arcu", "aliquet", "mollis", "etiam", "vel", "erat", "placerat", "ante","hi", "sodales", "test", "augue", "purus"};</span><br /> <span style="color:#888888;"><br /> @Override</span><br /> protected void onCreate(Bundle savedInstanceState) {<br /> <span style="color:#888888;"> super.onCreate(savedInstanceState);<br /> setContentView(R.layout.chapter_7_test4);<br /> </span><br /> <span style="color:#888888;"> selection = (TextView)findViewById(R.id.selection4);</span><br /> GridView grid= (GridView)findViewById(R.id.grid);<br /> <span style="color:#003366;">/<strong>/步骤1：设置ArrayAdapter，可以采用android自带的格式，也可以自定义，这里我们将自己定义。</strong></span><br /> grid.<strong>setAdapter</strong>( new <em><strong>FunnyLookingAdapter</strong></em>(this, android.R.layout.simple_list_item_1,items));<br /> <span style="color:#888888;">//grid.setAdapter(new ArrayAdapter <string> (this,android.R.layout.simple_list_item_1,items)); </string></span><br /> <span style="color:#003366;"><strong> //步骤2：设置元素被选择以及被点击的回调触发处理</strong></span><br /> grid.<strong>setOnItemSelectedListener</strong>(this);<br /> grid.<strong>setOnItemClickListener</strong>(this);<br /> }<br /> <span style="color:#003366;"><strong> //步骤3：编写CallBack触发函数</strong></span><br /> <span style="color:#808080;"> @Override</span><span style="color:#008000;"> /* 这是OnItemSelectedListener接口*/</span><br /> public void onItemSelected(AdapterView <!--?--> arg0, View arg1, int arg2, long arg3) {<br /> selection.setText(items[arg2]);<br /> }<br /> <br /> <span style="color:#808080;"> @Override</span> <span style="color:#008000;">/* 这是OnItemSelectedListener接口*/</span><br /> public void onNothingSelected(AdapterView <!--?--> arg0) {<br /> selection.setText("");<br /> }<br /> <br /> <span style="color:#808080;"> @Override</span> <span style="color:#008000;">/* 这是OnItemClickListener接口*/</span><br /> public void onItemClick(AdapterView <!--?--> arg0, View arg1, int arg2, long arg3) {<br /> selection.setText("Clicked: " + items[arg2]);<br /> }<br /> <br /> <span style="color:#003366;"><strong>//步骤4：编写自定义的adapter，继承ArrayAdapter <string></string></strong></span><br /> private class <strong>FunnyLookingAdapter extends ArrayAdapter <string></string></strong>{<br /> <span style="color:#808080;"> private Context context;<br /> private String[] theItems;</span><br /> <span style="color:#003366;"><strong>//步骤4.1：编写adapter</strong></span><strong><span style="color:#003366;">的构造函数</span></strong><br /> FunnyLookingAdapter( Context context, int resource, String[] items){<br /> <strong>super(context,resource,items);</strong><br /> this.context = context;<br /> theItems = items;<br /> }<br /> <br /> <span style="color:#003366;"><strong>//步骤4.2：</strong></span><span style="color:#003366;"><strong>重写getView()，</strong></span><span style="color:#003366;"><strong>对每个单元的内容以及UI格式进行描述</strong></span><br /> <span style="color:#008000;">/*如果我们不使用TextView，则我们必须通过getView()对每一个gridview单元进行描述。这些单元可以是Button，ImageView，在这里我们使用Button和TextView分别作测试 重<span style="color:#008000;">写</span></span><span style="color:#008000;">override getView(int, View, ViewGroup)，返回任何我们所希望的view。</span><span style="color:#008000;">*/</span><br /> public View <strong>getView</strong> (int position, View convertView, ViewGroup parent){<br /> TextView label = (TextView)convertView;<br /> <span style="color:#008000;"> //我们测试发现，除第一个convertView外，其余的都是NULL，因此如果没有view，我们需要创建</span><br /> if(convertView == null){<br /> convertView = new TextView(context);<br /> label = (TextView)convertView;<br /> }<br /> <br /> label.setText(position + ": " + theItems[position]); <br /> return convertView;<br /> }<br /> }<span style="color:#808080;">// End of class FunnyLookingAdapter</span><br /> <br /> }</p> </blockquote> <p><img style="width:702px;height:366px;" alt="Android Activity-GridView使用学习" src="https://simg.open-open.com/show/c8dbf5f32b26fc9aa6703d0f0e3ce2c5.png" /> </p> <p>左图是使用android自带的粗体格式，即被注释掉的setAdapter，图二为例子源代码示例，图右将 FunnyLookingAdapter中的getView()用Button代替TextView，这是发现有一个有趣的现象，Button是检测 Click动作，而我们在类中通过setItemClickListener中设置了对GridView中的item检测Click的动作，这两个是重叠 的，而将优先监听Button的Click，即我们定制的GridView中将得不到触发，这需特别注意。</p> <p><big><strong>例子二：</strong></big><span style="font-family:微软雅黑;"><big><strong>继承BaseAdapter作为自定义adapter</strong></big></span></p> <p>这是来自Totorial的例子。在这里GridView里面的元素是ImageView。Android XML的文件很简单：</p> <blockquote style="border-bottom:#ffbcbc thin dashed;border-left:#ffbcbc thin dashed;padding-bottom:5pt;line-height:130%;background-color:#ffffea;margin-top:11px;text-indent:0em;padding-left:5pt;padding-right:5pt;font-family:微软雅黑;margin-bottom:11px;margin-left:10pt;font-size:9.5pt;border-top:#ffbcbc thin dashed;border-right:#ffbcbc thin dashed;padding-top:5pt;"> <p><span style="color:#808080;"> <!--?xml version="1.0" encoding="utf-8"?--></span><br /> <span style="color:#3366ff;"> <!-- dp等同于dip，device independent pixels设备独立像素，多用于android，与分别率无关， --></span><br /> <<strong>GridView </strong><span style="color:#808080;">xmlns:android="http://schemas.android.com/apk/res/android"</span><br /> <span style="color:#808080;"> android:id="@+id/gridview"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"</span><br /> android:<strong>columnWidth</strong>="90dp"<br /> android:<strong>numColumns</strong>=<em><strong>"auto_fit"</strong></em><br /> android:<strong>verticalSpacing</strong>="10dp"<br /> android:<strong>horizontalSpacing</strong>="10dp"<br /> android:<strong>stretchMode</strong>=<em><strong>"columnWidth"</strong></em><br /> android:gravity="center" ><br /> </p> </blockquote> <p>我们在来看看Java code。</p> <p>1）我们将<a href="/misc/goto?guid=4959517965761493516">图片</a>，copy至res/drawable-hdpi/中。</p> <p>2）设置GridView的adapter，并设置点击触发函数，点击后采用Toast显示点击的序号。</p> <blockquote style="border-bottom:#ffbcbc thin dashed;border-left:#ffbcbc thin dashed;padding-bottom:5pt;line-height:130%;background-color:#ffffea;margin-top:11px;text-indent:0em;padding-left:5pt;padding-right:5pt;font-family:微软雅黑;margin-bottom:11px;margin-left:10pt;font-size:9.5pt;border-top:#ffbcbc thin dashed;border-right:#ffbcbc thin dashed;padding-top:5pt;"> <p> protected void onCreate(Bundle savedInstanceState) {<br /> <span style="color:#808080;"> super.onCreate(savedInstanceState);<br /> setContentView(R.layout.chapter_7_test5);</span><br /> <br /> <span style="color:#808080;"> GridView gridview = (GridView)findViewById(R.id.gridview);</span><br /> gridview.<strong>setAdapter</strong>(new ImageAdapter(this));<br /> <br /> gridview.<strong>setOnItemClickListener</strong>(new OnItemClickListener(){<br /> public void onItemClick(AdapterView <!--?--> parent, View v, int position, long id){<br /> <strong>Toast</strong>.makeText(this, ""+position, Toast.LENGTH_SHORT).show();<br /> } <br /> });<br /> }</p> </blockquote> <p>3）设置我们自子的ImageAdapter，继承BasAdapter。</p> <blockquote style="border-bottom:#ffbcbc thin dashed;border-left:#ffbcbc thin dashed;padding-bottom:5pt;line-height:130%;background-color:#ffffea;margin-top:11px;text-indent:0em;padding-left:5pt;padding-right:5pt;font-family:微软雅黑;margin-bottom:11px;margin-left:10pt;font-size:9.5pt;border-top:#ffbcbc thin dashed;border-right:#ffbcbc thin dashed;padding-top:5pt;"> <p> public class <strong>ImageAdapter extends BaseAdapter</strong>{<br /> <span style="color:#808080;"> private Context context = null;</span><br /> // references to our images<br /> private Integer[] mThumbIds = {R.drawable.sample_2, R.drawable.sample_3,R.drawable.sample_4, R.drawable.sample_5,R.drawable.sample_6,<span style="color:#0000ff;">...</span><span style="color:#0000ff;">// 这里是文件的对应的Id，不在具体列出</span>};<br /> <span style="color:#0000ff;"> //步骤1： 构造函数 </span><br /> public ImageAdapter(Context context){<br /> this.context = context;<br /> }<br /> <span style="color:#0000ff;"> //步骤2：</span><span style="color:#0000ff;">BaseAdapter需要重构四个方法</span><span style="color:#0000ff;">getCount(),getItem(),getItemId(int position),getView()</span><br /> <span style="color:#0000ff;">//</span><span style="color:#0000ff;">步骤2.1：getCount() 表示How many items are in the data set represented by this Adapter.</span><br /> public int getCount() {<br /> return mThumbIds.length;<br /> }<br /> <span style="color:#0000ff;"> //步骤2.2：</span><span style="color:#0000ff;">getItem()</span><span style="color:#0000ff;">根据需要position获得布放在GridView的对象。在这个例子中，我们不需要处理里面的对象，可以设为null</span><br /> public Object getItem(int position) {<br /> return null;<br /> }<br /> <span style="color:#0000ff;">//步骤2.3：</span><span style="color:#0000ff;">getItemId()</span><span style="color:#0000ff;">获得row id（</span><span style="color:#0000ff;">Get the row id associated with the specified position in the list）</span><span style="color:#0000ff;">，由于我们也不需要，简单的设为0</span><br /> public long getItemId(int position) {<br /> return 0;<br /> }<br /> <span style="color:#0000ff;"> //</span><span style="color:#0000ff;">步骤2.4：</span><span style="color:#0000ff;">获得GridView里面的View</span>，<span style="color:#0000ff;">Get a View that displays the data at the specified position in the data set.</span> <span style="color:#3366ff;">和第一个例子一样，传递的第二个函数可能为null，必须进行处理。</span><br /> <strong>public View getView(int </strong><em>position</em><strong>, View </strong><em>convertView</em><strong>, ViewGroup </strong><em>parent</em><strong>)</strong> {<br /> ImageView imageView = null;<br /> if(convertView == null){<br /> imageView = new ImageView(context);<br /> <span style="color:#008080;"> // 设置View的height和width：这样保证无论image原来的尺寸，每个图像将重新适合这个指定的尺寸。</span><br /> imageView.<strong>setLayoutParams</strong>(new GridView.LayoutParams(85,85));<br /> <span style="color:#008080;"> /* ImageView.ScaleType.CENTER 但不执行缩放比例<br /> * ImageView.ScaleType.CENTER_CROP 按比例统一缩放图片（保持图片的尺寸比例）便于图片的两维（宽度和高度）等于或大于相应的视图维度<br /> * ImageView.ScaleType.CENTER_INSIDE 按比例统一缩放图片（保持图片的尺寸比例）便于图片的两维（宽度和高度）等于或小于相应的视图维度 */</span><br /> imageView.<strong>setScaleType</strong>(ImageView.ScaleType.CENTER_CROP);<br /> imageView.setPadding(8,8,8,8);<br /> }else{<br /> imageView = (ImageView)convertView;<br /> }<br /> imageView.<strong>setImageResource</strong>(mThumbIds[position]);<br /> return imageView;<br /> }<br /> <br /> }</p> </blockquote> <p>我们设置了几种scaleType，下面左图是ImageView.ScaleType.CENTER_CROP，中图是ImageView.ScaleType.CENTER_INSIDE，右图是ImageView.ScaleType.CENTER</p> <p><img alt="Android Activity-GridView使用学习" src="https://simg.open-open.com/show/e4aef3c4ed431ea06332ea465b39c5df.png" width="465" height="383" /></p>