android组建学习之 GridView与BaseAdapter
实验案例5-2 GridView与BaseAdapter
【实验目的】
进步掌握BaseAdapter类的功能及其使用方法；
掌握GridView通过BaseAdapter关联到数据的方法。
【实验目标】
1．图片列表
通过GridView实现图片列表。运行的效果如图1所示。
图1
2．功能扩展
对上面进行扩展，当单击网格视图中任意一个小图片时，打开一个新页面满屏显示这张图片。具体效果如图2所示。
图2
练习一：图片列表
【实验步骤】
1．创建新项目
先建立一个空项目，如HelloWorld项目，然后进行以下修改。
2．资源建设
从网上下载图片到res\drawable目录下，并将这些图片文件命名为p1.jpg、p2.jpg、…，直到p24.jpg。
3．UI设计
修改主布局文件activity_main.xml，在其中添加GridView组件，并设置其相关属性，具体内容如下。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context="com.example.administrator.mytoast.MainActivity">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="网球运动员："
android:textSize="20sp"
android:textColor="#FF0000"
/>
<GridView
android:id="@+id/gv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="100dp"
android:verticalSpacing="5dp"
android:horizontalSpacing="5dp"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:gravity="center"
/>
</LinearLayout>
GridView的各个属性的作用，请参考PPT。
4．编写代码
（1）自定义继承于BaseAdapter类的Adapter类
自定义继承于BaseAdapter类的MyBaseAdapter，并实现其四个抽象方法。
MyBaseAdapter.java
package com.example.administrator.mytoast;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
public class MyBaseAdapter extends BaseAdapter {
private Context mContext;
public Integer[] imgIds={R.drawable.p1,R.drawable.p2,
R.drawable.p3,R.drawable.p4,R.drawable.p5,R.drawable.p6,
R.drawable.p7,R.drawable.p8,R.drawable.p9,R.drawable.p10,
R.drawable.p11,R.drawable.p12,R.drawable.p13,R.drawable.p14,
R.drawable.p15,R.drawable.p16,R.drawable.p17,R.drawable.p18,
R.drawable.p19,R.drawable.p20,R.drawable.p21,R.drawable.p22,
R.drawable.p23,R.drawable.p24
};//数据源
public MyBaseAdapter(Context context) {
super();
this.mContext = context;
}
@Override
public int getCount() {
return imgIds.length;
}
@Override
public Object getItem(int position) {
return null;
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if(convertView==null){
imageView=new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(100,100));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8,8,8,8);
} else{
imageView=(ImageView)convertView;
}
imageView.setImageResource(imgIds[position]);
return imageView;
}
}
（2）主程序代码编写
修改主程序代码，如下：
package com.example.administrator.mytoast;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.GridView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
GridView gridview=(GridView)findViewById(R.id.gv);
gridview.setAdapter(new MyBaseAdapter(this));
}
}
5．验证效果
运行，便会出现如图1的效果。
练习二：功能扩展
【实验步骤】
1．新建一个Activity
一个Activity就似一个页面，因为点击一张图片后，此图片要在一个新页面里满屏显示，为实现此效果，需要新建一个Activity。
新建方式，可通过Android Studio的向导进行创建，通过此向导创建的Activity，可以同时创建对应的布局文件，并在AndroidManifest.xml中进行注册。如图3所示。
图3
图4
设置新Activity的名称为SingleViewActivity，对应的布局文件的名称为activity_single_view。如图4所示。
2．修改新Activity的布局文件
在新Activity的布局文件中，添加一个ImageView用于显示图片。修改后的内容如下：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_single_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.administrator.mytoast.SingleViewActivity">
<ImageView
android:id="@+id/SingleView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
3．编写代码
（1）修改主Activity的类文件MainActivity.java
package com.example.administrator.mytoast;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
GridView gridview=(GridView)findViewById(R.id.gv);
gridview.setAdapter(new MyBaseAdapter(this));
gridview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
Intent intent=new Intent(getApplicationContext(),SingleViewActivity.class);
intent.putExtra("id",i);
startActivity(intent);
}
});
}
}
程序说明：
对GridView的item点击事件进行监听，通过startActivity(intent)实现Activity之间的跳转，Intent在Activtiy之间起作信使的作用，将被点击的item的位置传递给SingleViewActivity。
（2）修改新建Activity的类文件SingleViewActivity.java
package com.example.administrator.mytoast;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
public class SingleViewActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_single_view);
Intent intent=getIntent();
int position=intent.getExtras().getInt("id");
MyBaseAdapter myAdapter=new MyBaseAdapter(this);
ImageView imageView=(ImageView)findViewById(R.id.SingleView);
imageView.setImageResource(myAdapter.imgIds[position]);
}
}
程序说明：
通过Intent获取被点击的位置，将对应的图片放入ImageView中显示。
4．效果验证
编译运行，点击图片列表的某一项，可得到效果如图2所示。