相信大家对Gallery这个控件是再喜爱不过了,用它可以做出很炫的效果,这得意于Android优良的架构和MVC设计模式的
便利。下面我会介绍一个比较炫的自定义的Gallery效果。先上效果图:
如图,主要效果包括,中央文字变大,变亮,出现倒影,未选中项变小,变暗,gallery减慢滑动速度,循环gallery展
示。
由于涉及公司项目,这里只贴关键代码和xml文档。
首先默认的Gallery滑动时,滚动速度很快,会导致某些项一闪而过看不清楚,解决的办法是继承Gallery,自定义一个
CustomGallery类,覆盖Gallery的onFling()方法,让它返回false就行了,代码如下
02 | import android.content.Context; |
03 | import android.util.AttributeSet; |
04 | import android.view.MotionEvent; |
05 | import android.widget.Gallery; |
07 | public class CustomGallery extends Gallery { |
09 | public CustomGallery(Context context, AttributeSet attrs) { |
10 | super (context, attrs); |
13 | public boolean onFling (MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { |
接下来就是在xml文件中如何调用这个自定义的控件类的问题,解决方法很简单
1 | < LinearLayout android:id = "@+id/gallerylayout" |
2 | android:layout_width = "fill_parent" android:layout_height = "fill_parent" > |
3 | < com.widget.CustomGallery |
4 | android:layout_width = "fill_parent" android:layout_height = "wrap_content" |
5 | android:spacing = "10dip" android:unselectedAlpha = "0.5" android:id = "@+id/gallery" |
6 | android:layout_marginTop = "36dip" /> |
需要注意的是,Android支持的自定义控件类的构造函数,需要有Context和AttributeSet两个参数,否则会报异常!
另外
android:unselectedAlpha="0.5"
这个属性可以设置未选中项的半透明度,设置为0.5,这样有突显选中项的效果。
此时运行程序并不能显示我们自定义的Gallery,原因是,我们还没有向Gallery中添加数据,而向Gallery中添加数据需
要使用
Gallery的setAdapter方法,通过适配器来进行添加显示项,这里我们把大学的名称作为显示数据加入到适配器中,由于需要处理选
中项的倒影效果和变大效果,于是我们自定义一个Adapter来进行处理,代码如下
根据MVC,先是数据模型类University
01 | public class University{ |
04 | public String getName() { |
08 | public void setName(String name) { |
然后是自定义的Adapter
01 | public import java.util.ArrayList; |
02 | import com.model.Channel; |
03 | import com.util.BitmapUtil; |
04 | import android.content.Context; |
05 | import android.view.View; |
06 | import android.view.ViewGroup; |
07 | import android.widget.BaseAdapter; |
08 | import android.widget.ImageView; |
11 | public class UniversityAdapter extends BaseAdapter { |
13 | private Context context; |
14 | private ArrayList<University> universityList; |
16 | public UniversityAdapter(Context context, ArrayList<University> universityList) { |
17 | this .context = context; |
18 | this .universityList = universityList; |
22 | public int getCount() { |
24 | return Integer.MAX_VALUE; |
28 | public Object getItem( int position) { |
34 | public long getItemId( int position) { |
39 | private int select = 0 ; |
41 | public void notifyDataSetChanged( int albumId) { |
43 | super .notifyDataSetChanged(); |
45 | public View getView( int position, View convertView, ViewGroup parent) { |
47 | ImageView imageView = new ImageView(context); |
48 | if (select == position) { |
49 | University pro = universityList.get(position % universityList.size()); |
52 | imageView.setImageBitmap(BitmapUtil.createReflectedImage(BitmapUtil |
53 | .createTxtImage(pro.getName(), 28 ))); |
57 | University pro = universityList.get(position % universityList.size()); |
58 | imageView.setImageBitmap(BitmapUtil.createTxtImage(pro.getName(), |
上面代码中的BitmapUtil是封装好的Bitmap处理工具类,包括了传入文字和字体大小,返回绘制好的Bitmap 和传入Bitmap返回下方
加入了倒影效果的Bitmap的函数。代码如下
03 | import android.graphics.Bitmap; |
04 | import android.graphics.Bitmap.Config; |
05 | import android.graphics.Canvas; |
06 | import android.graphics.Color; |
07 | import android.graphics.LinearGradient; |
08 | import android.graphics.Matrix; |
09 | import android.graphics.Paint; |
10 | import android.graphics.PorterDuff.Mode; |
11 | import android.graphics.PorterDuffXfermode; |
12 | import android.graphics.Shader.TileMode; |
14 | public class BitmapUtil { |
16 | public static Bitmap createTxtImage(String txt, int txtSize) { |
17 | Bitmap mbmpTest = Bitmap.createBitmap(txt.length() * txtSize + 4 , |
18 | txtSize + 4 , Config.ARGB_8888); |
19 | Canvas canvasTemp = new Canvas(mbmpTest); |
20 | Paint p = new Paint(); |
22 | p.setColor(Color.WHITE); |
23 | p.setTextSize(txtSize); |
24 | canvasTemp.drawText(txt, 2 , txtSize - 2 , p); |
28 | public static Bitmap createReflectedImage(Bitmap originalImage) { |
30 | final int reflectionGap = 0 ; |
32 | int width = originalImage.getWidth(); |
33 | int height = originalImage.getHeight(); |
36 | Matrix matrix = new Matrix(); |
37 | matrix.preScale( 1 , - 1 ); |
41 | Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0 , |
42 | height / 2 , width, height / 2 , matrix, false ); |
45 | Bitmap bitmapWithReflection = Bitmap.createBitmap(width, |
46 | (height + height / 2 ), Config.ARGB_8888); |
50 | Canvas canvas = new Canvas(bitmapWithReflection); |
52 | canvas.drawBitmap(originalImage, 0 , 0 , null ); |
54 | Paint defaultPaint = new Paint(); |
55 | canvas.drawRect( 0 , height, width, height + reflectionGap, defaultPaint); |
57 | canvas.drawBitmap(reflectionImage, 0 , height + reflectionGap, null ); |
60 | Paint paint = new Paint(); |
61 | LinearGradient shader = new LinearGradient( 0 , |
62 | originalImage.getHeight(), 0 , bitmapWithReflection.getHeight() |
63 | + reflectionGap, 0x70ffffff , 0x00ffffff , TileMode.CLAMP); |
65 | paint.setShader(shader); |
67 | paint.setXfermode( new PorterDuffXfermode(Mode.DST_IN)); |
69 | canvas.drawRect( 0 , height, width, bitmapWithReflection.getHeight() |
70 | + reflectionGap, paint); |
72 | return bitmapWithReflection; |
最后就是主界面代码中对Gallery的调用了,关键代码如下
01 | private CustomGallery gallery; |
02 | private UniversityAdapter pAdapter; |
03 | private ArrayList<University> universityList = new ArrayList<University>(); |
05 | pAdapter = new UniversityAdapter(MainActivity. this , universityList); |
06 | University p = new University(); |
08 | universityList .add(p); |
09 | University p1 = new University(); |
11 | universityList .add(p1); |
12 | University p2 = new University(); |
14 | universityList .add(p2); |
15 | gallery.setAdapter(pAdapter); |
16 | gallery.setSelection(Integer.MAX_VALUE / 2 ); |
19 | gallery.setOnItemSelectedListener( this ); |
23 | public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, |
26 | pAdapter.notifyDataSetChanged(arg2); |
31 | public void onNothingSelected(AdapterView<?> arg0) { |