廣告

2014年11月30日 星期日

[Android 顯示從網路下載的圖片][Android show picture from url]

常常會用到即時從網路下載圖片,並顯示於原件上。
下載圖片的方式有很多種,這邊用AsyncTask 搭配 http GET的方式顯示
圖片在imageView上,(可以自行將imageView 改成其他元件,grid, list等等)。










































範例:


import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;

import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.HttpStatus;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;

import android.app.Activity;
import android.app.ProgressDialog;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.os.AsyncTask;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.Toast;

public class Lewis extends Activity {
 private ImageView imageView;
 private ProgressDialog simpleWaitDialog;
 private final static String url = "http://i.imgur.com/pJv6ccq.jpg";

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  imageView = (ImageView) findViewById(R.id.imageView);
  new DownloadImage().execute(url); 
 }

 private class DownloadImage extends AsyncTask {
  @Override
  protected Bitmap doInBackground(String... param) {
   return downloadBitmap(param[0]);
  }

  @Override
  protected void onPreExecute() {
   simpleWaitDialog = ProgressDialog.show(
     Lewis.this, "Wait",
     "Downloading Image");
  }

  protected void onPostExecute(Bitmap result) {
   imageView.setImageBitmap(result);
   simpleWaitDialog.dismiss();

  }

  private Bitmap downloadBitmap(String url) {
   final DefaultHttpClient client = new DefaultHttpClient();
   final HttpGet getRequest = new HttpGet(url);
   try {
    HttpResponse response = client.execute(getRequest);
    final int statusCode = response.getStatusLine().getStatusCode();
    if (statusCode != HttpStatus.SC_OK) {
     return null;
    }
    final HttpEntity entity = response.getEntity();
    if (entity != null) {
     InputStream inputStream = null;
     try {
      inputStream = entity.getContent();
      final Bitmap bitmap = BitmapFactory
        .decodeStream(inputStream);
      
      return bitmap;
      
     } finally {
      if (inputStream != null) {
       inputStream.close();
      }
      entity.consumeContent();
     }
    }
   } catch (Exception e) {

    getRequest.abort();
   }
   return null;
  }
 }
}

2014年11月29日 星期六

[Android_ColorPicker_Dialog][Android_調色盤_用dialog方式]






















將以下程式加入貼到專案中。

import android.app.Dialog;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.SweepGradient;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;

public class ColorPickerDialog extends Dialog {
 private final boolean debug = true;
 private final String TAG = "ColorPicker";
 
 Context context;
 private String title;
 private int mInitialColor;
    private OnColorChangedListener mListener;

 
    public ColorPickerDialog(Context context, String title, 
      OnColorChangedListener listener) {
     this(context, Color.BLACK, title, listener);
    }
    
  
    public ColorPickerDialog(Context context, int initialColor, 
      String title, OnColorChangedListener listener) {
        super(context);
        this.context = context;
        mListener = listener;
        mInitialColor = initialColor;
        this.title = title;
        
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WindowManager manager = getWindow().getWindowManager();
  int height = (int) (manager.getDefaultDisplay().getHeight() * 0.5f);
  int width = (int) (manager.getDefaultDisplay().getWidth() * 0.7f);
  ColorPickerView myView = new ColorPickerView(context, height, width);
        setContentView(myView);
        setTitle(title);
    }
    
    private class ColorPickerView extends View {
     private Paint mPaint;
     private Paint mCenterPaint;
     private Paint mLinePaint;
     private Paint mRectPaint;
     
     private Shader rectShader;
     private float rectLeft;
     private float rectTop;
     private float rectRight;
     private float rectBottom;
        
     private final int[] mCircleColors;
     private final int[] mRectColors;
     
     private int mHeight;
     private int mWidth;
     private float r;
     private float centerRadius;
     
     private boolean downInCircle = true;
     private boolean downInRect;
     private boolean highlightCenter;
     private boolean highlightCenterLittle;
     
  public ColorPickerView(Context context, int height, int width) {
   super(context);
   this.mHeight = height - 36;
   this.mWidth = width;
   setMinimumHeight(height - 36);
   setMinimumWidth(width);
   
   
      mCircleColors = new int[] {0xFFFF0000, 0xFFFF00FF, 0xFF0000FF, 
        0xFF00FFFF, 0xFF00FF00,0xFFFFFF00, 0xFFFF0000};
      Shader s = new SweepGradient(0, 0, mCircleColors, null);
            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mPaint.setShader(s);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeWidth(50);
            r = width / 2 * 0.7f - mPaint.getStrokeWidth() * 0.5f;
            
           
            mCenterPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mCenterPaint.setColor(mInitialColor);
            mCenterPaint.setStrokeWidth(5);
            centerRadius = (r - mPaint.getStrokeWidth() / 2 ) * 0.7f;
            
            
            mLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mLinePaint.setColor(Color.parseColor("#72A1D1"));
            mLinePaint.setStrokeWidth(4);
            
        
            mRectColors = new int[]{0xFF000000, mCenterPaint.getColor(), 0xFFFFFFFF};
            mRectPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mRectPaint.setStrokeWidth(5);
            rectLeft = -r - mPaint.getStrokeWidth() * 0.5f;
            rectTop = r + mPaint.getStrokeWidth() * 0.5f + 
              mLinePaint.getStrokeMiter() * 0.5f + 15;
            rectRight = r + mPaint.getStrokeWidth() * 0.5f;
            rectBottom = rectTop + 50;
  }

  @Override
  protected void onDraw(Canvas canvas) {
            canvas.translate(mWidth / 2, mHeight / 2 - 50);
            canvas.drawCircle(0, 0, centerRadius,  mCenterPaint);
            if (highlightCenter || highlightCenterLittle) {
                int c = mCenterPaint.getColor();
                mCenterPaint.setStyle(Paint.Style.STROKE);
                if(highlightCenter) {
                 mCenterPaint.setAlpha(0xFF);
                }else if(highlightCenterLittle) {
                 mCenterPaint.setAlpha(0x90);
                }
                canvas.drawCircle(0, 0, 
                  centerRadius + mCenterPaint.getStrokeWidth(),  mCenterPaint);
                
                mCenterPaint.setStyle(Paint.Style.FILL);
                mCenterPaint.setColor(c);
            }
            canvas.drawOval(new RectF(-r, -r, r, r), mPaint);
            if(downInCircle) {
             mRectColors[1] = mCenterPaint.getColor();
            }
            rectShader = new LinearGradient(rectLeft, 0, rectRight, 0, mRectColors, null, Shader.TileMode.MIRROR);
            mRectPaint.setShader(rectShader);
            canvas.drawRect(rectLeft, rectTop, rectRight, rectBottom, mRectPaint);
            float offset = mLinePaint.getStrokeWidth() / 2;
            canvas.drawLine(rectLeft - offset, rectTop - offset * 2, 
              rectLeft - offset, rectBottom + offset * 2, mLinePaint);
            canvas.drawLine(rectLeft - offset * 2, rectTop - offset, 
              rectRight + offset * 2, rectTop - offset, mLinePaint);
            canvas.drawLine(rectRight + offset, rectTop - offset * 2, 
              rectRight + offset, rectBottom + offset * 2, mLinePaint);
            canvas.drawLine(rectLeft - offset * 2, rectBottom + offset, 
              rectRight + offset * 2, rectBottom + offset, mLinePaint);
   super.onDraw(canvas);
  }
  
  @Override
  public boolean onTouchEvent(MotionEvent event) {
   float x = event.getX() - mWidth / 2;
            float y = event.getY() - mHeight / 2 + 50;
            boolean inCircle = inColorCircle(x, y, 
              r + mPaint.getStrokeWidth() / 2, r - mPaint.getStrokeWidth() / 2);
            boolean inCenter = inCenter(x, y, centerRadius);
            boolean inRect = inRect(x, y);
            
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                 downInCircle = inCircle;
                 downInRect = inRect;
                 highlightCenter = inCenter;
                case MotionEvent.ACTION_MOVE:
                 if(downInCircle && inCircle) {
                  float angle = (float) Math.atan2(y, x);
                        float unit = (float) (angle / (2 * Math.PI));
                        if (unit < 0) {
                            unit += 1;
                        }
                  mCenterPaint.setColor(interpCircleColor(mCircleColors, unit));
                  if(debug) Log.v(TAG, ": " + x + "," + y);
                 }else if(downInRect && inRect) {
                  mCenterPaint.setColor(interpRectColor(mRectColors, x));
                 }
                 if(debug) Log.v(TAG, "[MOVE] : " + highlightCenter + ": " + highlightCenterLittle + " : " + inCenter);
                 if((highlightCenter && inCenter) || (highlightCenterLittle && inCenter)) {
                  highlightCenter = true;
                  highlightCenterLittle = false;
                 } else if(highlightCenter || highlightCenterLittle) {
                  highlightCenter = false;
                  highlightCenterLittle = true;
                 } else {
                  highlightCenter = false;
                  highlightCenterLittle = false;
                 }
                    invalidate();
                 break;
                case MotionEvent.ACTION_UP:
                 if(highlightCenter && inCenter) {
                  if(mListener != null) {
                   mListener.colorChanged(mCenterPaint.getColor());
                      ColorPickerDialog.this.dismiss();
                  }
                 }
                 if(downInCircle) {
                  downInCircle = false;
                 }
                 if(downInRect) {
                  downInRect = false;
                 }
                 if(highlightCenter) {
                  highlightCenter = false;
                 }
                 if(highlightCenterLittle) {
                  highlightCenterLittle = false;
                 }
                 invalidate();
                    break;
            }
            return true;
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
   super.onMeasure(mWidth, mHeight);
  }

 
  private boolean inColorCircle(float x, float y, float outRadius, float inRadius) {
   double outCircle = Math.PI * outRadius * outRadius;
   double inCircle = Math.PI * inRadius * inRadius;
   double fingerCircle = Math.PI * (x * x + y * y);
   if(fingerCircle < outCircle && fingerCircle > inCircle) {
    return true;
   }else {
    return false;
   }
  }
  
 
  private boolean inCenter(float x, float y, float centerRadius) {
   double centerCircle = Math.PI * centerRadius * centerRadius;
   double fingerCircle = Math.PI * (x * x + y * y);
   if(fingerCircle < centerCircle) {
    return true;
   }else {
    return false;
   }
  }
  
 
  private boolean inRect(float x, float y) {
   if( x <= rectRight && x >=rectLeft && y <= rectBottom && y >=rectTop) {
    return true;
   } else {
    return false;
   }
  }
  
  
  private int interpCircleColor(int colors[], float unit) {
            if (unit <= 0) {
                return colors[0];
            }
            if (unit >= 1) {
                return colors[colors.length - 1];
            }
            
            float p = unit * (colors.length - 1);
            int i = (int)p;
            p -= i;

            // now p is just the fractional part [0...1) and i is the index
            int c0 = colors[i];
            int c1 = colors[i+1];
            int a = ave(Color.alpha(c0), Color.alpha(c1), p);
            int r = ave(Color.red(c0), Color.red(c1), p);
            int g = ave(Color.green(c0), Color.green(c1), p);
            int b = ave(Color.blue(c0), Color.blue(c1), p);
          //  Log.e("colort2222", Integer.toString(Color.argb(a, r, g, b)));
            return Color.argb(a, r, g, b);
        }
  
  
  private int interpRectColor(int colors[], float x) {
   int a, r, g, b, c0, c1;
         float p;
         if (x < 0) {
          c0 = colors[0]; 
          c1 = colors[1];
          p = (x + rectRight) / rectRight;
         } else {
          c0 = colors[1];
          c1 = colors[2];
          p = x / rectRight;
         }
         a = ave(Color.alpha(c0), Color.alpha(c1), p);
         r = ave(Color.red(c0), Color.red(c1), p);
         g = ave(Color.green(c0), Color.green(c1), p);
         b = ave(Color.blue(c0), Color.blue(c1), p);
         return Color.argb(a, r, g, b);
  }
  
  private int ave(int s, int d, float p) {
            return s + Math.round(p * (d - s));
        }
    }
    
    
    public interface OnColorChangedListener {
     
        void colorChanged(int color);
    }
    
    public String getTitle() {
  return title;
 }

 public void setTitle(String title) {
  this.title = title;
 }

 public int getmInitialColor() {
  return mInitialColor;
 }

 public void setmInitialColor(int mInitialColor) {
  this.mInitialColor = mInitialColor;
 }

 public OnColorChangedListener getmListener() {
  return mListener;
 }

 public void setmListener(OnColorChangedListener mListener) {
  this.mListener = mListener;
 }
}




用法:在你要改顏色地方加入以下程式碼。
AlertDialog.Builder editDialog = new AlertDialog.Builder(DragListActivity.this);
editDialog.setTitle("pick color");

 dialog = new ColorPickerDialog(mContext, tempColor, "11",
 new ColorPickerDialog.OnColorChangedListener() {
   public void colorChanged(int color2) 
   {
    //set your color variable
   }
 });
 dialog.show();



[Android Animation _use extends Animation_3DFlip ][Android 讓layout有動畫_用extends Animation的方式_3D翻頁效果 ]

這篇用extends Animation 來做特效。

先將以下程式加入專案。


public class Flip3dAnimation extends Animation {
 private final float mFromDegrees;
 private final float mToDegrees;
 private final float mCenterX;
 private final float mCenterY;
 private Camera mCamera;

 public Flip3dAnimation(float fromDegrees, float toDegrees, float centerX,
   float centerY) {
  mFromDegrees = fromDegrees;
  mToDegrees = toDegrees;
  mCenterX = centerX;
  mCenterY = centerY;
 }

 @Override
 public void initialize(int width, int height, int parentWidth,
   int parentHeight) {
  super.initialize(width, height, parentWidth, parentHeight);
  mCamera = new Camera();
 }

 @Override
 protected void applyTransformation(float interpolatedTime, Transformation t) {
  final float fromDegrees = mFromDegrees;
  float degrees = fromDegrees
    + ((mToDegrees - fromDegrees) * interpolatedTime);

  final float centerX = mCenterX;
  final float centerY = mCenterY;
  final Camera camera = mCamera;

  final Matrix matrix = t.getMatrix();

  camera.save();

  camera.rotateY(degrees);

  camera.getMatrix(matrix);
  camera.restore();

  matrix.preTranslate(-centerX, -centerY);
  matrix.postTranslate(centerX, centerY);

 }

}



使用方法:

如果你是要點擊按鈕或item以後轉跳畫面,想要等動畫跑完再轉跳畫面,可以用以下方法,
600代表0.6秒後再轉跳畫面


final float centerX = view.getWidth() / 2.0f;
final float centerY = view.getHeight() / 2.0f;
final Flip3dAnimation rotation =  new Flip3dAnimation(0, 90, centerX, centerY);
rotation.setDuration(500);
rotation.setFillAfter(true);
rotation.setInterpolator(new AccelerateInterpolator());
              
view.startAnimation(rotation);
               
view.postDelayed(new Runnable() {
                   
          public void run() {                
            //do things here            
          }
},600);

[Android Animation _use xml][Android 讓layout有動畫_用xml的方式 ]

將動畫的xml檔寫如下的資料夾中























範例:
這邊用兩段式動畫當例子。

animSlide_up = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_up); 
layout_login.setAnimation(animSlide_up);
layout_login.setVisibility(View.GONE); 

animSlide_down = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_down); 
layout_after_login.setAnimation(animSlide_down);
layout_after_login.setVisibility(View.VISIBLE);



fade_in.xml
<?xml version="1.0" encoding="utf-8"?>
    android:fillAfter="true" >
    <alpha
        android:duration="1000"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="1.0" />
</set>

fade_out.xml
<?xml version="1.0" encoding="utf-8"?>
    android:fillAfter="true" >
    <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="0.0" />
</set>
blink.xml
<?xml version="1.0" encoding="utf-8"?>
    <alpha android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:duration="600"
        android:repeatMode="reverse"
        android:repeatCount="infinite"/>
</set>
zoom_in.xml
<?xml version="1.0" encoding="utf-8"?>
    android:fillAfter="true" >
    <scale
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="3"
        android:toYScale="3" >
    </scale>
</set>
zoom_out.xml
<?xml version="1.0" encoding="utf-8"?>
    android:fillAfter="true" >
    <scale
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.5"
        android:toYScale="0.5" >
    </scale>
</set>
rotate.xml
<?xml version="1.0" encoding="utf-8"?>
    <rotate android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="600"
        android:repeatMode="restart"
        android:repeatCount="infinite"
        android:interpolator="@android:anim/cycle_interpolator"/>
</set>
move.xml
<?xml version="1.0" encoding="utf-8"?>
<set
    android:interpolator="@android:anim/linear_interpolator"
    android:fillAfter="true">
   <translate
        android:fromXDelta="0%p"
        android:toXDelta="75%p"
        android:duration="800" />
</set>
slide_up.xml
<?xml version="1.0" encoding="utf-8"?>
    android:fillAfter="true" >
    <scale
        android:duration="500"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/linear_interpolator"
        android:toXScale="1.0"
        android:toYScale="0.0" />
</set>
slide_down.xml
<?xml version="1.0" encoding="utf-8"?>
    android:fillAfter="true">
    <scale
        android:duration="500"
        android:fromXScale="1.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/linear_interpolator"
        android:toXScale="1.0"
        android:toYScale="1.0" />
</set>
bounce.xml
<?xml version="1.0" encoding="utf-8"?>
    android:fillAfter="true"
    android:interpolator="@android:anim/bounce_interpolator">
    <scale
        android:duration="500"
        android:fromXScale="1.0"
        android:fromYScale="0.0"
        android:toXScale="1.0"
        android:toYScale="1.0" />
</set>
sequential.xml
<?xml version="1.0" encoding="utf-8"?>
    android:fillAfter="true"
    android:interpolator="@android:anim/linear_interpolator" >
    <!-- Use startOffset to give delay between animations -->
    <!-- Move -->
    <translate
        android:duration="800"
        android:fillAfter="true"
        android:fromXDelta="0%p"
        android:startOffset="300"
        android:toXDelta="75%p" />
    <translate
        android:duration="800"
        android:fillAfter="true"
        android:fromYDelta="0%p"
        android:startOffset="1100"
        android:toYDelta="70%p" />
    <translate
        android:duration="800"
        android:fillAfter="true"
        android:fromXDelta="0%p"
        android:startOffset="1900"
        android:toXDelta="-75%p" />
    <translate
        android:duration="800"
        android:fillAfter="true"
        android:fromYDelta="0%p"
        android:startOffset="2700"
        android:toYDelta="-70%p" />
    <!-- Rotate 360 degrees -->
    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:interpolator="@android:anim/cycle_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="3800"
        android:repeatCount="infinite"
        android:repeatMode="restart"
        android:toDegrees="360" />
</set>
together.xml
<?xml version="1.0" encoding="utf-8"?>
    android:fillAfter="true"
    android:interpolator="@android:anim/linear_interpolator" >
    <scale
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="4000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="4"
        android:toYScale="4" >
    </scale>
    <!-- Rotate 180 degrees -->
    <rotate
        android:duration="500"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="infinite"
        android:repeatMode="restart"
        android:toDegrees="360" />
</set>


裡面的參數請自行微調。

最後副上一個也還不錯的animation lib

https://github.com/dkmeteor/ActivityAnimationLib

最近又有更新:http://developer.android.com/training/animation/cardflip.html