Step 7: Android UI (sliding reflection effect) and androidui

Step 7: Android UI (sliding reflection effect) and androidui

Only when you learn to set your existing scores to zero can you free up space to accept more new things so that you can constantly surpass yourself.

Description: interface sliding reflection effect

I. reflection principle:

The reflection effect is mainly composed of the source image + spacing + reflection. The height is about 3/2 of the source image (the source image is 1 and the reflection is 1/2)

The source image is the first image we see.

The gap between the source image and the reflection, for example, reflectionGap = 4;

Reflection: the bottom half of the source image is 1/2 height. The matrix is transformed into matrix. preScale (1,-1); the inverted image is obtained, followed by a linear mask and shadow.

Example 1:

The layout file res/layout/activity_main.xml is as follows:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <TextView        android:id="@+id/tvTitle"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerHorizontal="true"        android:textSize="16sp" />        <com.example.imagereflect.myGallery        android:id="@+id/mygallery"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_below="@id/tvTitle"        android:layout_marginTop="10dip" /></RelativeLayout>

Com. example. imagereflect is the package name

The myGallery. java file is as follows:

Public class myGallery extends Gallery {private Camera mCamera = new Camera (); private int mMaxRotationAngle = 60; // Maximum Rotation Angle 60 private int mMaxZoom =-120; private int mCoveflowCenter; public myGallery (Context context) {super (context); this. setStaticTransformationsEnabled (true);} public myGallery (Context context, AttributeSet attrs) {super (context, attrs); this. setStaticTransformationsEnabled (true);} publi C myGallery (Context context, AttributeSet attrs, int defStyle) {super (context, attrs, defStyle); this. rotate (true) ;}public int getMaxRotationAngle () {return mMaxRotationAngle;} public void setMaxRotationAngle (int maxRotationAngle) {mMaxRotationAngle = maxRotationAngle;} public int getMaxZoom () {return mMaxZoom ;} public void setMaxZoom (int maxZoom) {mMaxZoom = maxZoom;}/** Get Ga Center x */private int getCenterOfCoverflow () {return (getWidth ()-getPaddingLeft ()-getPaddingRight ()/2 + getPaddingLeft ();} /** obtain the center x of the View */private static int getCenterOfView (View view) {return view. getLeft () + view. getWidth ()/2 ;}@ Overrideprotected void onSizeChanged (int w, int h, int oldw, int oldh) {mCoveflowCenter = getCenterOfCoverflow (); super. onSizeChanged (w, h, oldw, oldh);} @ Overri Deprotected boolean getChildStaticTransformation (View child, Transformation trans) {final int childCenter = getCenterOfView (child); final int childWidth = child. getWidth (); int rotationAngle = 0; trans. clear (); trans. setTransformationType (Transformation. TYPE_BOTH); // Both alpha and matrix Transform if (childCenter = mCoveflowCenter) {// childViewtransformImageBitmap (ImageView) child, trans, 0) in the middle );} else {// c on both sides HildViewrotationAngle = (int) (float) (mCoveflowCenter-childCenter)/childWidth) * mMaxRotationAngle); if (Math. abs (rotationAngle)> mMaxRotationAngle) {rotationAngle = (rotationAngle <0 )? -MMaxRotationAngle: mMaxRotationAngle;} rotate (ImageView) child, trans, rotationAngle);} return true;} private void transformImageBitmap (ImageView child, Transformation trans, int rotationAngle) {mCamera. save (); final Matrix imageMatrix = trans. getMatrix (); final int imageHeight = child. getLayoutParams (). height; final int imageWidth = child. getLayoutParams (). width; final int rotation = Ma Th. abs (rotationAngle); // forward the camera angle of view on the Z axis. The actual effect is to enlarge the image. If it moves on the Y axis, it moves up and down; if it moves on the X axis, it moves around the image. MCamera. translate (0.0f, 0.0f, 1001_f); // As the angle of the view gets less, zoom inif (rotation <mMaxRotationAngle) {float zoomAmount = (float) (mMaxZoom + (rotation * 1.5); mCamera. translate (0.0f, 0.0f, zoomAmount);} mCamera. rotateY (rotationAngle); // The rotationAngle is positive and rotates inward along the Y axis. It is negative and rotates outward along the Y axis. getMatrix (imageMatrix); imageMatrix. preTranslate (-(imageWidth/2),-(imageHeight/2); imageMatrix. postTranslate (imageWidth/2), (imageHeight/2); mCamera. restore ();}}

The following is the ImageAdapter. java file:

Public class ImageAdapter extends BaseAdapter {private ImageView [] mImages; // The array that saves the reflected image: private Context mContext; public List <Map <String, Object> list; public Integer [] imgs = {R. drawable. img01, R. drawable. img02, R. drawable. img03, R. drawable. img04, R. drawable. img05, R. drawable. img06, R. drawable. img07}; public String [] titles = {"country monsoon", "Live to", "Healthy Supermarket", "Every Monday drama", "hotline village pass", "Happy Life ", "fan time"}; public ImageAdapter (Context c) {this. mContext = c; list = new ArrayList <Map <String, Object> (); for (int I = 0; I  map = new HashMap <String, Object> (); map. put ("image", imgs [I]); list. add (map);} mImages = new ImageView [list. size ()];}/** reflection */public boolean createReflectedImages () {final int reflectionGap = 4; int index = 0; for (Map <String, Object> map: list) {Integer id = (Integer) map. get ("image"); Bitmap originalImage = BitmapFactory. decodeResource (mContext. getResources (), id); // get the original image int width = originalImage. getWidth (); int height = originalImage. getHeight (); Matrix matrix = new Matrix (); matrix. preScale (1,-1); // image matrix transformation (from low to top reflection) Bitmap reflectionImage = Bitmap. createBitmap (originalImage, 0, height/2, width, height/2, matrix, false); // captures Bitmap bitmapWithReflection = Bitmap in the lower part of the source image. createBitmap (width, (height + height/2), Config. ARGB_8888); // create a reflection image (the height is 3/2 of the source image) Canvas canvas = new Canvas (bitmapWithReflection); // draw a reflection image (the source image + spacing + reflection) canvas. drawBitmap (originalImage, 0, 0, null); // draw the original image Paint = new paint (); canvas. drawRect (0, height, width, height + reflectionGap, paint); // draw the canvas between the source image and the reflection. drawBitmap (reflectionImage, 0, height + reflectionGap, null); // draw the reflection image paint = new Paint (); LinearGradient shader = new LinearGradient (0, originalImage. getHeight (), 0, bitmapWithReflection. getHeight () + reflectionGap, 0x70ffffff, 0x00ffffff, TileMode. CLAMP); paint. setShader (shader); // linear gradient effect paint. setXfermode (new porterduduxfermode (Mode. DST_IN); // specifies the canvas of the reflection mask effect. drawRect (0, height, width, bitmapWithReflection. getHeight () + reflectionGap, paint); // draw the shadow effect of the reflection. ImageView imageView = new ImageView (mContext); imageView. setImageBitmap (bitmapWithReflection); // sets the imageView of the reflected image. setLayoutParams (new myGallery. layoutParams (180,240); imageView. setScaleType (ScaleType. MATRIX); mImages [index ++] = imageView;} return true ;}@ Overridepublic int getCount () {return imgs. length ;}@ Overridepublic Object getItem (int position) {return mImages [position] ;}@ Overridepublic long getItemId (int position) {return position ;}@ Overridepublic View getView (int position, view convertView, ViewGroup parent) {return mImages [position]; // display the reflected image (current focus)} public float getScale (boolean focused, int offset) {return Math. max (0, 1.0f/(float) Math. pow (2, Math. abs (offset )));}}

The main interface file MainActivity. java is as follows:

Public class MainActivity extends Activity {private TextView tvTitle; private myGallery gallery; private ImageAdapter adapter; @ Overridepublic void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); initRes ();} private void initRes () {tvTitle = (TextView) findViewById (R. id. tvTitle); gallery = (myGallery) findViewById (R. id. mygallery); adapter = New ImageAdapter (this); adapter. createReflectedImages (); // creates the galling effect gallery. setAdapter (adapter); gallery. setOnItemSelectedListener (new OnItemSelectedListener () {// set the selection event listener @ Overridepublic void onItemSelected (AdapterView <?> Parent, View view, int position, long id) {tvTitle. setText (adapter. titles [position]) ;}@ Overridepublic void onNothingSelected (AdapterView <?> Parent) {}}); gallery. setOnItemClickListener (new OnItemClickListener () {// sets the Click Event listener @ Overridepublic void onItemClick (AdapterView <?> Parent, View view, int position, long id) {Toast. makeText (MainActivity. this, "img" + (position + 1) + "selected", Toast. LENGTH_SHORT ). show ();}});}}

Take your time and enjoy it