实验案例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组件,并设置其相关属性,具体内容如下。
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">
android:layout_height="wrap_content"
android:text="网球运动员:"
android:textSize="20sp"
android:textColor="#FF0000"
/>
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"
/>
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用于显示图片。修改后的内容如下:
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">
android:layout_width="match_parent"
android:layout_height="match_parent" />
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中显示。