画像¶

画像(背景色)の変更¶

プログラムの動きより、どのタイミングで、画像の色を変更することがあるかもしれないので方法は下記になる。１．ColorMatrixでRGB原色を修正する２．背景色しか変更しない*
１．ColorMatrixでRGB原色を修正する* ア・Canvas・Paintの準備

/**
 *イメージを色相などを調整して再度drawする 
 */
public void draw(){
  int color =getColor();
  Bitmap bitmapHue;
  bitmapHue=Bitmap.createBitmap(width,height,Bitmap.config.ARG_8888);
  Canvas canvas = new Canvas(bitmapHue);
  Paint paint=new Paint();
  paint setAntiAlias(true);
}

イ・ColorMatrix設定画像ファイルのColorMatrixは、下記より4x5の行列をfloat[20]で表現する
この変換が各ピクセル事に行われる

//色相をColorMatrixで設定
ColorMatrix hue= new ColorMatrix();
hue.reset();
int r=Color.red(Color);
int g=Color.green(Color);
int b=Color.blue(Color);
Log.v(Main.LOG_TAG,"r:"+String.valueOf(r)+" g:"+String.valueOf(g)+" b:"+String.valueOf(b));
float[] array={1,0,0,0,r,
    0,1,0,0,g,
    0,0,1,0,b,
    0,0,0,1,0};
hue.set(array);

ウ・飽和度(範囲：-100 ～ +100)

//saturation
ColorMatrix saturation=new ColorMatrix();
saturation.reset();
saturation.setSaturation(0);
hue.preConcat(saturation);

エ・明度(範囲：0＜暗い＞～ 255＜明るい＞)

//brightness
ColorMatrix brightness=new ColorMatrix();
brightness .reset();
int f=2;
brightness.setScale (f,f,f,1);
hue.preConcat(brightness);

オ・CanvasしてからImageViewにセットする

1
2
3

paint.setColorFilter(new ColorMatrixColorFilter(hue));
canvas.drawBitmap(bitmap,0,0,paint);
view.setImageBitmap(bitmapHue);

上記の手順で画像(bitmap)の色を変更できるが、元のイメージの色が違っていましたら、結果も違う単純に背景色を変更することをできなくなっている。

２．背景色しか変更しない

単純に背景色のみを変更使用とする場合は、下記の方法で変更できる。

ア・同じ表示エリアで二つImageViewを用意して、ひとつは、画像を表示して、もう一つ変更する背景色を表示する

View layout=inflater.inflater(R.layout.mid_image_move_view,null);
view =(ImageView)layout.findViewById(R.id.imageViewDesk);
View layout2=inflater.inflate(R.layout.mid_image_move_background,null);
background=(ImageView)layout2.findViewById(R.id.imageViewBackground);

イ・Imageviewへの画像をセットするときに、背景ImageViewと表示ImageViewを別々でセットして、表示ImageViewのアルファ(透明度)相対を小さく修正する

public void redraw() {
  int color = getColor();
  background.setImageBitmap(bitmap);
  background.setColorFilter(color);
  background.setAlpha(255);
  view.setImageBitmap(bitmap);
  view.setAlpha(175);
}

それで背景色しか変更できないという効果がうまく動ける

大きなビットマップを表示¶

大きなビットマップを表示する時に、異常発生の可能性がある。下記の方法（BitmapFactory.Options）で対応して、異常がなくなる。

  private static final int SCALE_HEIGHT = 200;
  public static void displayBitmap(String path,ImageView view){
  BitmapFactory.Options options=new BitmapFactory.Options();
  //If set to true,the decoder will return null (no bitmap),
  //but the out.. fields will still be set ,allowing the caller
  //to query the bitmap without having to allocation the memory for its pixels.
  options.inJustDecodeBounds=true;
  BitmapFactory.decodeFile(path,options);
  option.jinJustDecodeBounds=false;
  //拡大・縮小比率は固定とするため、高さ／広さの中に一つで計算するいいです
  int scale=(int)(option.outHeight/(float)SCALE_HEIGHT);
  if(scale<=0){
    scale=1;
  }
  //options.inSampleSizeはビットマップのサイズである、８ならば、今のサイズが以前の1/8になる。
  options.inSampleSize=scale;
  Bitmap bitmap=BitmapFactory.decodeFile(path,options);
  view.setImageBitmap(bitmap);
  }

画像の合成と切り取る¶

１.画像の合成
①空のbitmapを生成する: 注意：既に存在するbitmapを修正できないので、空のbitmapを生成する

1	Bitmap bitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);

②キャンバスを生成する：

1	Canvas cv = new Canvas(bitmap);

|関数|意味| |bitmap|ガフに①のbitmapを添加する|

③画像の合成。

1	cv.drawBitmap(bitmap, left, top, paint);

④存储新合成的图片

1 2	cv.save(Canvas.ALL_SAVE_FLAG); cv.restore();

２.画像の切り取る

1	Bitmap.createBitmap(bitmap, x, y, width, height)

例：

private Bitmap createBitmap(Bitmap bmp) {
  Bitmap bitmap = Bitmap.createBitmap(bmp.getWidth(), bmp.getHeight(), Config.ARGB_8888);  
  Canvas cv = new Canvas(bitmap);  
  //切り取るbitmapを画布（cv）に置く、そしてwidthとheightは元の画面(bmp)と同じ大きさとする    
  cv.drawBitmap(Bitmap.createBitmap(bmp, 0, 0, bmp.getWidth(), bmp.getHeight()), 0, 0, null);  
  bmp.recycle();  
  cv.save(Canvas.ALL_SAVE_FLAG);  
  cv.restore();  
  return bitmap;  
}

比率画面の計算¶

android:layout_width="wrap_content"

（１）上記のイメージで三つレイアウトは「android:layout_width="wrap_content"」を設定するが、画面比率は「1：2：1」となっています。下記のコーディングです。

<?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="horizontal"
  android:weightSum="10" >

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="3"
    android:background="@color/white"
    android:gravity="center" >

    <TextView
      android:id="@+id/textView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="layout1"
      android:textColor="@android:color/black"
      android:textSize="30sp" />
  </LinearLayout>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="4"
    android:background="@color/green"
    android:gravity="center" >

    <TextView
      android:id="@+id/textView2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="layout2"
      android:textColor="@android:color/black"
      android:textSize="30sp" />
  </LinearLayout>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="3"
    android:background="@color/yellow"
    android:gravity="center" >

    <TextView
      android:id="@+id/textView3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="layout3"
      android:textColor="@android:color/black"
      android:textSize="30sp" />
  </LinearLayout>
</LinearLayout>

（２）「layout2」と「layout3」を結合し、②の「layout2、layout3の結合」に変更するが、簡単になる。
　　layout2を削除すると、layout3のlayout_weighは元layout2ののlayout_weigh+layout3のlayout_weigh=1+2=3。

<?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:baselineAligned="false"
  android:orientation="horizontal"
  android:weightSum="5" >

  <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_weight="2"
    android:background="@color/white"
    android:gravity="center" >

    <TextView
      android:id="@+id/textView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/layout1"
      android:textColor="@android:color/black"
      android:textSize="30sp" />
  </LinearLayout>

  <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_weight="3"
    android:background="@color/green"
    android:gravity="center" >

    <TextView
      android:id="@+id/textView2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/layout2"
      android:textColor="@android:color/black"
      android:textSize="30sp" />
  </LinearLayout>

<!--   <LinearLayout -->
<!--     android:layout_width="wrap_content" -->
<!--     android:layout_height="match_parent" -->
<!--     android:layout_weight="2" -->
<!--     android:background="@color/yellow" -->
<!--     android:gravity="center" > -->

<!--     <TextView -->
<!--       android:id="@+id/textView3" -->
<!--       android:layout_width="wrap_content" -->
<!--       android:layout_height="wrap_content" -->
<!--       android:text="@string/layout3" -->
<!--       android:textColor="@android:color/black" -->
<!--       android:textSize="30sp" /> -->
<!--   </LinearLayout> -->
</LinearLayout>

android:layout_width="match_parent"

（１）上記の「（１）」android:layout_width="wrap_content"」⇒「android:layout_width="match_parent"」に変更すると、weightSumと各レイアウトのlayout_weighは再計算する必要があります。　・画面比率再計算：　　layout1：weightSum-layout1のlayout_weigh（5-2）＝3 　　layout2：weightSum-layout2のlayout_weigh（5-1）＝4 ⇒ 新しいweightSum：10 　　layout3：weightSum-layout3のlayout_weigh（5-2）＝3

<?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:baselineAligned="false"
  android:orientation="horizontal"
  android:weightSum="10" >

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="3"
    android:background="@color/white"
    android:gravity="center" >

    <TextView
      android:id="@+id/textView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/layout1"
      android:textColor="@android:color/black"
      android:textSize="30sp" />
  </LinearLayout>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="4"
    android:background="@color/green"
    android:gravity="center" >

    <TextView
      android:id="@+id/textView2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/layout2"
      android:textColor="@android:color/black"
      android:textSize="30sp" />
  </LinearLayout>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="3"
    android:background="@color/yellow"
    android:gravity="center" >

    <TextView
      android:id="@+id/textView3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/layout3"
      android:textColor="@android:color/black"
      android:textSize="30sp" />
  </LinearLayout>
</LinearLayout>

（２）「layout2」と「layout3」を結合し、②の「layout2、layout3の結合」に変更すると、weightSumと各レイアウトのlayout_weighは再計算する必要があります。　　・画面比率再計算：　　　①新しいweightSumの計算　　　　layout1：weightSum-layout1のlayout_weigh（10-3）＝7 　　　　layout2：weightSum-layout2のlayout_weigh（10-4）＝6 ⇒ 新しいweightSum：20 　　　　layout3：weightSum-layout3のlayout_weigh（10-3）＝7

②各レイアウトのlayout_weighの計算　　　　新しいlayout1：新しいweightSum-①のlayout1のlayout_weigh（20-7）＝13 　　　　新しいのlayout2とlayout3：新しいweightSum-①のlayout2とlayout3のlayout_weigh（20-6-7）＝7

・コーディングは下記の通りです。

<?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:baselineAligned="false"
  android:orientation="horizontal"
  android:weightSum="20" >

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="13"
    android:background="@color/white"
    android:gravity="center" >

    <TextView
      android:id="@+id/textView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/layout1"
      android:textColor="@android:color/black"
      android:textSize="30sp" />
  </LinearLayout>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="7"
    android:background="@color/green"
    android:gravity="center" >

    <TextView
      android:id="@+id/textView2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/layout2"
      android:textColor="@android:color/black"
      android:textSize="30sp" />
  </LinearLayout>

<!--   <LinearLayout -->
<!--     android:layout_width="match_parent" -->
<!--     android:layout_height="match_parent" -->
<!--     android:layout_weight="3" -->
<!--     android:background="@color/yellow" -->
<!--     android:gravity="center" > -->

<!--     <TextView -->
<!--       android:id="@+id/textView3" -->
<!--       android:layout_width="wrap_content" -->
<!--       android:layout_height="wrap_content" -->
<!--       android:text="@string/layout3" -->
<!--       android:textColor="@android:color/black" -->
<!--       android:textSize="30sp" /> -->
<!--   </LinearLayout> -->
</LinearLayout>

縦と横画面の自動識別、判断¶

1.縦と横画面を切り替えして、画面のレイアウトが不同ファイルに保存するが、自動識別可

2.アプリにソース判断を使う

/**
 * 横画面と縦画面の判断
 * 
 * @return
 */
public boolean isLand(){
    return getResources().getConfiguration().orientation==Configuration.ORIENTATION_LANDSCAPE;
}

ImageViewのborderカラーの設定¶

表示するイメージビューの外に、Borderのカラー色に付けて表示したい場合は、下記の方法になる

1.res/drawable/下にXMLファイルを定義する

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="3dp"
        android:color="#FF0000"/>
</shape>

Shape下のstrokeでImageViewの外BORDERを定義するほかの属性はサイト：http://developer.android.com/guide/topics/resources/drawable-resource.html#Shapeに参照する

2.Borderカラーして表示する

1
2
3

view.setBackgroundResource(R.drawable.focus_view);
view.setPadding(3,3,3,3);
view.invalidate();

3.２の状態を取り消す

1
2
3

view.setBackgroundResource(0);
view.setPadding(0,0,0,0);
view.invalidate();

★補足:画像に枠を付ける(imageviewのonDrawを使用する)

重写ImageView类，onDraw方法を実現する：

XxImageView.java

    /**
     * イメージ周囲色を設定
     * @param borderColor
     */
    public void setBorderColor(int borderColor){
        this.borderColor=borderColor;
    }

    /**
     * イメージ周囲幅を設定
     * @param borderWidth
     */
    public void setBorderWidth(int borderWidth){
        this.borderWidth=borderWidth;
    }
    @Override
    protected void onDraw(Canvas canvas){
        super.onDraw(canvas);
        Rcet rect =canvas.getClipBounds();
        rect.bottom--;
        rect.right--;
        Paint paint =new Paint();
        paint.setColor(borderColor);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(borderWidth);
        canvas.drawRcet(rect,paint);
    }

XxAdapter.java

    @Override
    public View getView(int position,View convertView,ViewGroup parent){
        GalleryImageView imageView =(GalleryImageView)getItem(position);
        imageView.setLayoutParams(new FinderGallery.LayoutParams(75,102));
        //２の状態を取り消す↓
        imageView.setBorderColor(Color.TRANSPARENT);
        imageView.setPadding(0,0,0,0);
        imageView.setBorderWidth(0);
        //２の状態を取り消す↑
        imageView.setAdjustViewBounds(true);
        Page page=listPage.get(position);
        if(page.isSelected()==true){
            //Borderカラーして表示する↓
            imageView.setBorderColor(Color.rgb(56, 177, 2222));
            imageView.setPadding(2,2,2,2);
            iamgeView.setBorderWidth(5);
            //Borderカラーして表示する↑
        }
        return imageView;
    }

TopCropImageViewの使用(イメージの上部を切り出す)¶

ImageViewにイメージの上部のみ表示するので、自分でImageViewクラスを実装する方法

public TopCropImageView(Context context,AttributeSet attrs){
    super(context,attrs);
    //mageViewのScaleTypeプローバティは「Matrix」を設定しなければならない
    setScaleType(ScaleType.MATRIX);
}

@Override
protected boolean setFrame(int l,int t,int r,int b){
    if(getDrawable()==null|| widget==null){
        return super.setFrame(l,t,r,b);
    }
    Matrix matrix=getImageMatrix();
    //インメージが横幅を表示するように
    float scaleFactor=widget.getWidth()/(float)getDrawable().getIntrinsicWidth();
    matrix.setScale(scaleFactor,scaleFactor,0,0);
    if(getDrawable().getIntrinsicHeight()*scaleFactor<widget.getHeight()){
        float tanslateY=((getDrawable().getIntrinsicHeight()*scaleFactor)-widget.getHeight*())/2;
        //ImageViewの高度はインメージ表示の高度より高いの時に、インメージの位置は垂直センターに表示する
        matrix.postTranslate(0, -tanslateY);
    }
    setImageMatrix(matrix);
    return super.setFrame(l,t,r,b);
    }