android gallery 自定义边框+幻灯片效果

最近在项目中用到图片轮播，试了Gallery，ViewFlipper，ViewPager,感觉Gallery最符合需求，但是Gallery的系统边框很难看，项目中要求用自己的背景图片。

下面来看一下使用Gallery实现图片轮播

运行效果：

布局文件：

[java] view plain copy

<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="10dp">
<Gallery
android:id="@+id/gallery"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fadingEdge="none"
android:spacing="0dp"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="18dp"
android:layout_gravity="bottom"
android:layout_marginBottom="3dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:background="#80776f63"
android:gravity="center">
<ImageView
android:id="@+id/dot_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_dot_normal"/>
<ImageView
android:id="@+id/dot_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@+id/dot_1"
android:src="@drawable/ic_dot_normal"/>
<ImageView
android:id="@+id/dot_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="@+id/dot_2"
android:src="@drawable/ic_dot_normal"/>
</RelativeLayout>
</FrameLayout>

其中，android:fadingEdge="none"消除图片两边的阴影。使用FrameLayout在底部显示小圆点

[java] view plain copy

publicclassMainActivityextendsActivity{
privateGallerymGallery;
privateintindex=0;//记录选中的图片位置
privateImageView[]mImageViewIds;//小圆点ImageView数组
privatestaticfinalintIMAGE_COUNT=3;//小圆点个数
@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViews();
mImageViewIds[0].setImageDrawable(getBaseContext().getResources()
.getDrawable(R.drawable.ic_dot_focused));
ImageAdapteradapter=newImageAdapter(this);
mGallery.setAdapter(adapter);
Timertimer=newTimer();
timer.schedule(task,2000,2000);
mGallery.setOnItemSelectedListener(onItemSelectedListener);
mGallery.setOnItemClickListener(onItemClickListener);
}
privatevoidfindViews(){
mGallery=(Gallery)findViewById(R.id.gallery);
mImageViewIds=newImageView[]{(ImageView)findViewById(R.id.dot_1),
(ImageView)findViewById(R.id.dot_2),
(ImageView)findViewById(R.id.dot_3)};
}
privateTimerTasktask=newTimerTask(){
@Override
publicvoidrun(){
Messagemessage=newMessage();
message.what=2;
index=mGallery.getSelectedItemPosition();
index++;
handler.sendMessage(message);
}
};
/**
*开一个线程执行耗时操作
*/
privateHandlerhandler=newHandler(){
@Override
publicvoidhandleMessage(Messagemsg){
super.handleMessage(msg);
switch(msg.what){
case2:
mGallery.setSelection(index);
break;
default:
break;
}
}
};
/**
*设置小圆点显示，position会一直增加，如果要循环显示图片，需要对position取余，否则数组越界
*/
privateOnItemSelectedListeneronItemSelectedListener=newOnItemSelectedListener(){
@Override
publicvoidonItemSelected(AdapterView<?>parent,Viewview,
intposition,longid){
intpos=position%IMAGE_COUNT;
mImageViewIds[pos].setImageDrawable(getBaseContext().getResources()
.getDrawable(R.drawable.ic_dot_focused));
if(pos>0){
mImageViewIds[pos-1].setImageDrawable(getBaseContext()
.getResources().getDrawable(R.drawable.ic_dot_normal));
}
if(pos<(IMAGE_COUNT-1)){
mImageViewIds[pos+1].setImageDrawable(getBaseContext()
.getResources().getDrawable(R.drawable.ic_dot_normal));
}
if(pos==0){
mImageViewIds[IMAGE_COUNT-1]
.setImageDrawable(getBaseContext().getResources()
.getDrawable(R.drawable.ic_dot_normal));
}
}
@Override
publicvoidonNothingSelected(AdapterView<?>arg0){
//TODOAuto-generatedmethodstub
}
};
/**
*点击事件，点击图片进入SecondActivity
*/
privateOnItemClickListeneronItemClickListener=newOnItemClickListener(){
@Override
publicvoidonItemClick(AdapterView<?>arg0,Viewarg1,intpos,
longarg3){
Intentintent=newIntent();
intent.setClass(MainActivity.this,SecondActivity.class);
startActivity(intent);
}
};
}

ImageAdapter类，重写android.widget.BaseAdapter，用于描述图像信息。

[java] view plain copy

publicclassImageAdapterextendsBaseAdapter{
privateContextcontext;
privateint[]mImages={R.drawable.bg_timeline_01,
R.drawable.bg_timeline_02,R.drawable.bg_timeline_03};
privatestaticfinalintIMAGE_PX_HEIGHT=198;
publicImageAdapter(Contextcontext){
this.context=context;
}
@Override
publicintgetCount(){
returnInteger.MAX_VALUE;//实现循环显示
}
@Override
publicObjectgetItem(intposition){
returnposition;
}
@Override
publiclonggetItemId(intposition){
returnposition;
}
@Override
publicViewgetView(intposition,ViewconvertView,ViewGroupparent){
ImageViewimageView=newImageView(context);
imageView.setImageResource(mImages[position%mImages.length]);
imageView.setScaleType(ImageView.ScaleType.CENTER);
imageView.setLayoutParams(newGallery.LayoutParams(
Gallery.LayoutParams.FILL_PARENT,IMAGE_PX_HEIGHT));
RelativeLayoutborderImg=newRelativeLayout(context);
borderImg.setPadding(2,2,2,2);
borderImg.setBackgroundResource(R.drawable.bg_gallery);//设置ImageView边框
borderImg.addView(imageView);
returnborderImg;
}
}

如果用系统背景，可以这样写

[java] view plain copy

intmGalleryItemBackground;
privateContextmContext;
publicImageAdapter(Contextcontext)
{
mContext=context;
//获得Gallery组件的属性
TypedArraytypedArray=obtainStyledAttributes(R.styleable.Gallery);
mGalleryItemBackground=typedArray.getResourceId(
R.styleable.Gallery_android_galleryItemBackground,0);
}

在getview中设置

[java] view plain copy

imageView.setBackgroundResource(mGalleryItemBackground);

Gallery组件属性信息定义在res\values\attrs.xml

[java] view plain copy

<?xmlversion="1.0"encoding="utf-8"?>
<resources>
<declare-styleablename="Gallery">
<attrname="android:galleryItemBackground"/>
</declare-styleable>
</resources>

详细讲解见http://www.eoeandroid.com/forum.php?mod=viewthread&tid=182297

自定义边框参考http://stackoverflow.com/questions/4830173/change-border-style-in-gallery

更多相关文章

随机推荐