我们在手机上查看相册时,首先看到的是网格状的图片展示界面,然后我们选择想要欣赏的照片点击进入,这样就可以全屏观看该照片,并且可以通过左右滑动来切换照片。如下图的显示效果:
实现Activity之间的跳转以及照片标记位置的传递需要用到intent,并分别使用putExtra以及getExtra,传入和获取照片的标记位置。
(关于intent,后期会有专门博文介绍具体使用,请大家持续关注哦)
下面我们开始功能的实现:
第一步:Layout中建立首页GridView布局grid_layout.xml文件:
第二步:Layout中建立GridView布局中每个item的布局griditem_layout.xml文件:
这里的设置需要根据实际展示图片的宽度以及要展示的容器(手机)分辨率来设置等比例缩放,避免排版混乱的情况出现。
第三步:Layout中建立图片展示界面(包含导航圆点)布局activity_main.xml文件:
这里主布局使用frameLayout,切换实现布局使用ImageSwitcher,导航圆点使用linearlayout实现(可通过配置文件实现):
第四步:Java中Activity的实现代码,首页GridView的实现代码GridActivity.java:
本次自定义适配器中getview方法已经优化:
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.baseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
public class GridActivity extends AppCompatActivity {
private GridView gv;
int[] images={R.mipmap.a1,R.mipmap.a2,R.mipmap.a3,R.mipmap.a4};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.grid_layout);
gv= (GridView) findViewById(R.id.gv);
gv.setAdapter(new MyAdapter());
//设置单击GridView中每个item的单击事件
gv.setonItemClickListener(new AdapterView.onItemClickListener() {
@Override
public void onItemClick(AdapterView> parent, View view, int position, long id) {
//使用intend获取要交互的Activity,也就是将要跳转的界面
Intent intent = new Intent(GridActivity.this,MainActivity.class);
//通过intent的putExtra方法获取点击图片的下标位置(用于Activity之间数据传输)
intent.putExtra("select",position);
//启动要交互的Activity(通过传入包含该Activity的intent)
startActivity(intent);
}
});
}
class MyAdapter extends baseAdapter{
@Override
public int getCount() {
return images.length;
}
@Override
public Object getItem(int position) {
return images[position];
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder vh;
if(convertView==null){
convertView=getLayoutInflater().inflate(R.layout.griditem_layout,null);
vh= new ViewHolder();
vh.iv= (ImageView) convertView.findViewById(R.id.imageView);
convertView.setTag(vh);
}
vh= (ViewHolder) convertView.getTag();
vh.iv.setImageResource(images[position]);
return convertView;
}
class ViewHolder{
ImageView iv;
}
}
}
第五步:Java中Activity的实现代码,跳转后的ImageSwicher的实现代码MainActivity.java:
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ViewSwitcher;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity implements ViewSwitcher.ViewFactory,View.OnTouchListener{
private ImageSwitcher is;//声明ImageSwitcher布局
private LinearLayout point_layout;//声明导航圆点的布局
//图片id数组(需要与GridActivity中的图片资源数组一一对应)
int[] images={R.mipmap.a1,R.mipmap.a2,R.mipmap.a3,R.mipmap.a4};
//实例化存储导航圆点的集合
ArrayList points = new ArrayList<>();
int index;//声明index,记录图片id数组下标
float startX;//手指接触屏幕时X的坐标(演示左右滑动)
float endX;//手指离开屏幕时的坐标(演示左右滑动)
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//获取GridActivity中设置的intent
Intent intent = getIntent();
//获取GridActivity中得到的图片下标,并随意设置默认值
index = intent.getIntExtra("select",0);
is = (ImageSwitcher) findViewById(R.id.is);
is.setFactory(this);//通过工厂实现ImageSwitcher
initpoint();
is.setonTouchListener(this);//设置触摸事件
}
//初始化导航圆点的方法
private void initpoint() {
point_layout= (LinearLayout) findViewById(R.id.point_layout);
int count = point_layout.getChildCount();//获取布局中圆点数量
for(int i =0;i30){
//三目运算判断当前图片已经为最后一张,则从头开始
index = index+130){
//三目运算判断当前图片已经为第一张,则上一张为数组内最后一张图片
index = index-1>=0?--index:images.length-1;
is.setInAnimation(this,android.R.anim.fade_in);
is.setOutAnimation(this,android.R.anim.fade_out);
}
//设置ImageSwitcher的图片资源
is.setImageResource(images[index]);
//调用方法设置圆点对应状态
setImageBackground(index);
}
return true;
}
}
本次代码展示到这里就结束了,按照前文所讲,大家可以尝试多种实现方法,本次使用到的intent,后面会有详细讲述,也希望大家多多支持考高分网。



