进阶三之Android UI介面之（滑动效果之Gallery + GridView）
浏览数：21 /
时间：2015年06月11日
人一生下就会哭，笑是后来才学会的。所以忧伤是一种低级的本能，而快乐是一种更高级的能力。
本讲内容：滑动效果之Gallery + GridView
Android系统自带一个GridView和Gallery两个控件，GridView网格显示，Gallery单个浏览，两者结合起来可以真正实现Gallery浏览图片效果。
示例效果图
下面是res/layout/activity_main.xml
布局文件：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<GridView
android:id="@+id/myGrid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical|center_horizontal"
android:numColumns="3"
android:paddingTop="5dp"
android:stretchMode="columnWidth"
android:verticalSpacing="6dp"/>
</LinearLayout>下面是res/layout/gallery.xml 布局文件：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal"
android:padding="10dip" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#000000"
android:padding="2dp" >
<com.example.gallery_01.myGallery
android:id="@+id/mygallery"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:spacing="16dp" />
</RelativeLayout>
</LinearLayout>下面是res/drawable/bg.xml 文件：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#ff0000"/>
</shape>下面是res/anim/scale.xml 文件：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator" >
<scale
android:duration="2000"
android:fromXScale="0.0"
android:fromYScale="0.0"
android:pivotX="50%p"
android:pivotY="50%p"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
下面是ImageSource.java文件：
public class ImageSource {
static Integer[] mThumbIds = { R.drawable.img1, R.drawable.img2,
R.drawable.img3, R.drawable.img4, R.drawable.img5, R.drawable.img6,
R.drawable.img7, R.drawable.img8, R.drawable.img9, R.drawable.img10 };
}下面是myGallery.java文件：
package com.example.gallery_01;
import android.content.Context;
import android.util.AttributeSet;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.widget.Gallery;
import android.widget.Toast;
import com.example.gallery_01.GalleryActivity.ImageAdapter;
public class myGallery extends Gallery {
boolean isFirst = false;
boolean isLast = false;
public myGallery(Context context) {
super(context);
}
public myGallery(Context context, AttributeSet paramAttributeSet) {
super(context, paramAttributeSet);
}
/** 是否向左滑动（true - 向左滑动； false - 向右滑动） */
private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2) {
return e2.getX() > e1.getX();
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
ImageAdapter ia = (ImageAdapter) this.getAdapter();
int p = ia.getOwnposition(); // 获取当前图片的position
int count = ia.getCount(); // 获取全部图片的总数count
int kEvent;
if (isScrollingLeft(e1, e2)) {
if (p == 0 && isFirst) {
Toast.makeText(this.getContext(), "已是第一页", Toast.LENGTH_SHORT).show();
} else if (p == 0) {
isFirst = true;
} else {
isLast = false;
}
kEvent = KeyEvent.KEYCODE_DPAD_LEFT;
} else {
if (p == count - 1 && isLast) {
Toast.makeText(this.getContext(), "已到最后一页", Toast.LENGTH_SHORT).show();
} else if (p == count - 1) {
isLast = true;
} else {
isFirst = false;
}
kEvent = KeyEvent.KEYCODE_DPAD_RIGHT;
}
onKeyDown(kEvent, null);
return true;
}
}下面是MainActivity.java主界面文件：(不忘了注册)
public class GalleryActivity extends Activity {
public int position = 0; // 当前显示图片的位置
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.gallery);
myGallery galllery = (myGallery) findViewById(R.id.mygallery);
Intent intent = getIntent();
position = intent.getIntExtra("position", 0); // 获取GridViewActivity传来的图片位置position
ImageAdapter imgAdapter=new ImageAdapter(this);
galllery.setAdapter(imgAdapter); // 设置图片ImageAdapter
galllery.setSelection(position); // 设置当前显示图片
Animation an= AnimationUtils.loadAnimation(this,R.anim.scale ); // Gallery动画
galllery.setAnimation(an);
}
public class ImageAdapter extends BaseAdapter {
private Context mContext;
private int mPos;
public ImageAdapter(Context context) {
mContext = context;
}
public void setOwnposition(int ownposition) {
this.mPos = ownposition;
}
public int getOwnposition() {
return mPos;
}
@Override
public int getCount() {
return ImageSource.mThumbIds.length;
}
@Override
public Object getItem(int position) {
mPos=position;
return position;
}
@Override
public long getItemId(int position) {
mPos=position;
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
mPos=position;
ImageView imageview = new ImageView(mContext);
imageview.setBackgroundColor(0xFF000000);
imageview.setScaleType(ImageView.ScaleType.FIT_CENTER);
imageview.setLayoutParams(new myGallery.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
imageview.setImageResource(ImageSource.mThumbIds[position]);
return imageview;
}
}
}下面是MainActivity.java主界面文件：
public class MainActivity extends Activity {
private GridView gridView;
private GridImageAdapter gridImageAdapter;
private DisplayMetrics dm;
private int imageCol = 3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
gridView = (GridView) findViewById(R.id.myGrid);
gridImageAdapter = new GridImageAdapter(this);
gridView.setAdapter(gridImageAdapter);
gridView.setOnItemClickListener(listener); // 设置点击监听事件
checkOrientation();
dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
}
/** 检查是横屏或竖屏，横屏每行4列，竖屏每行3列 */
private void checkOrientation(){
if (this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
imageCol = 5;
} else if (this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {
imageCol = 3;
}
gridView.setNumColumns(imageCol);
}
@Override
public void onConfigurationChanged(Configuration newConfig) { // 屏幕方向改变调用（横屏与竖屏切换）
super.onConfigurationChanged(newConfig);
try {
checkOrientation();
gridView.setAdapter(new GridImageAdapter(this));
} catch (Exception ex) {
ex.printStackTrace();
}
}
AdapterView.OnItemClickListener listener = new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int position, long id) {
Intent intent = new Intent();
intent.setClass(MainActivity.this, GalleryActivity.class);
intent.putExtra("position", position);
startActivity(intent);
}
};
public class GridImageAdapter extends BaseAdapter {
private Context mContext;
Drawable btnDrawable;
public GridImageAdapter(Context context) {
mContext = context;
Resources resources = context.getResources();
btnDrawable = resources.getDrawable(R.drawable.bg);
}
@Override
public int getCount() {
return ImageSource.mThumbIds.length;
}
@Override
public Object getItem(int position) {
return position;
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageViewExt imageView;
int space;
if (convertView == null) {
imageView = new ImageViewExt(mContext);
if (imageCol == 5) {
space = dm.heightPixels / imageCol - 6;
imageView.setLayoutParams(new GridView.LayoutParams(space, space));
} else {
space = dm.widthPixels / imageCol - 6;
imageView.setLayoutParams(new GridView.LayoutParams( space, space));
}
imageView.setAdjustViewBounds(true);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); // 缩放图片使其长和宽一样
imageView.setPadding(3, 3, 3, 3);
} else {
imageView = (ImageViewExt) convertView;
}
imageView.setImageResource(ImageSource.mThumbIds[position]);
return imageView;
}
}
public class ImageViewExt extends ImageView {
private int color;
public ImageViewExt(Context context) {
super(context);
color = Color.GRAY;
}
public ImageViewExt(Context context, AttributeSet attrs) {
super(context, attrs);
color = Color.GRAY;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Rect rec = canvas.getClipBounds();
rec.bottom--;
rec.right--;
Paint paint = new Paint();
paint.setColor(color);
paint.setStrokeWidth(5);
paint.setStyle(Paint.Style.STROKE);
canvas.drawRect(rec, paint);
}
}
}
Take your time and enjoy it
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
