Android 사용자 정의 view 원형,원 각,타원 그림 구현(BitmapShader 그래 픽 렌 더 링)

머리말
Android 는 원 각 사각형,원형 또는 타원 등 도형 을 실현 하 는데 보통 사용자 정의View에 사용Xfermode을 더 해 이 루어 집 니 다.원 각 사진 을 실현 하 는 방법 은 사실 적지 않다.흔히 볼 수 있 는 것 은 이용Xfermode,Shader이다.본 고 는 직접 계승ImageView하고BitmapShader방법 으로 원형,원 각 과 타원 의 그리 기 를 실현 한다.여러분 이 제 본 고의 방법 을 본 후에 다른 유사 한 모양 도 하 나 를 보면 셋 을 들 어 그 릴 수 있 습 니 다.
2.효과 도:

3.BitmapShader 소개BitmapShaderShader의 하위 클래스 로Paint.setShader(Shader shader)를 통 해 설치 할 수 있 고,
우 리 는BitmapShader구조 방법 에 만 관심 을 가진다.

mBitmapShader = new BitmapShader(bitmap, TileMode.CLAMP, TileMode.CLAMP);
매개 변수 1:bitmap
매개 변수 2,매개 변수 3:TileMode;
TileMode 의 수 치 는 세 가지 가 있 습 니 다.
     CLAMP 스 트 레 칭
     반복 반복
     MIRROR 미 러
만약 에 여러분 이 컴퓨터 화면 에 스크린 을 설치 할 때 그림 이 너무 작 으 면 중복,스 트 레 칭,미 러 를 선택 할 수 있 습 니 다.
반복:가로,세로 로 이 bitmap 를 계속 반복 하 는 것 입 니 다.
미 러:가로 가 계속 뒤 집 히 고 세로 가 계속 뒤 집 히 며 반복 합 니 다.
스 트 레 칭:이것 은 컴퓨터 모니터 의 모델 과 좀 다 를 것 입 니 다.이것 은 그림 의 마지막 픽 셀 입 니 다.가로의 마지막 가로 픽 셀,끊임없이 반복,세로 항목 의 픽 셀,끊임없이 반복;
public   BitmapShader(Bitmap bitmap,Shader.TileMode tileX,Shader.TileMode tileY)
이 방법 을 사용 하면 비트 맵 이 그 려 진 렌 더러(Shader)를 만 듭 니 다.
bitmap   렌 더러 에 사용 할 비트 맵
tileX      The tiling mode for x to draw the bitmap in.   비트 맵 에서 X 방향 타일 모드
tileY     The tiling mode for y to draw the bitmap in.    비트 맵 에서 Y 방향 타일 모드
TileMode:(총 3 가지)
CLAMP  :렌 더러 가 원본 경계 범 위 를 넘 으 면 범위 내 가장자리 염색 을 복사 합 니 다.
REPEAT:가로 와 세로 의 중복 렌 더러 그림,평평 하 게 펴 기.
MIRROR:가로 와 세로 의 중복 렌 더러 그림 입 니 다.이것 은 REPEAT 중복 방식 과 다 릅 니 다.그 는 미 러 방식 으로 평평 하 게 깔 았 습 니 다.
4.원형,원 각,타원 을 사용자 정의 하 는 이미지 View 의 실현
1.View 의 크기 측정

@Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  // TODO Auto-generated method stub
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  //        ,         
  if (mType == TYPE_CIRCLE) {
   mWidth = Math.min(getMeasuredWidth(), getMeasuredHeight());
   mRadius = mWidth / 2;
   setMeasuredDimension(mWidth, mWidth);
  }

 }
2.BitmapShader 와 화필 Paint 설정

/**
  *   BitmapShader
  */
 private void setBitmapShader() {
  Drawable drawable = getDrawable();
  if (null == drawable) {
   return;
  }
  Bitmap bitmap = drawableToBitmap(drawable);
  //  bitmap          BitmapShader
  mBitmapShader = new BitmapShader(bitmap, TileMode.CLAMP, TileMode.CLAMP);
  float scale = 1.0f;
  if (mType == TYPE_CIRCLE) {
   //   bitmap      
   int bSize = Math.min(bitmap.getWidth(), bitmap.getHeight());
   scale = mWidth * 1.0f / bSize;

  } else if (mType == TYPE_ROUND || mType == TYPE_OVAL) {
   //           view      ,          ;         ,       view   ;         ;
   scale = Math.max(getWidth() * 1.0f / bitmap.getWidth(), getHeight() * 1.0f / bitmap.getHeight());
  }
  // shader     ,              
  mMatrix.setScale(scale, scale);
  //       
  mBitmapShader.setLocalMatrix(mMatrix);
  mPaint.setShader(mBitmapShader);

 }
3.마지막 으로 원 각,원형,타원 의 그림 을 그 려 서onDraw안에 있 을 것 이다.근본 적 인 원 리 는 바로 위mBitmapShader에서 보 여 준 붓 으로 그 리 는 것 이다.

@Override
 protected void onDraw(Canvas canvas) {

  if (null == getDrawable()) {
   return;
  }
  setBitmapShader();
  if (mType == TYPE_CIRCLE) {
   canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);
  } else if (mType == TYPE_ROUND) {
   mPaint.setColor(Color.RED);
   canvas.drawRoundRect(mRect, mRoundRadius, mRoundRadius, mPaint);
  }else if(mType == TYPE_OVAL){
   canvas.drawOval(mRect, mPaint);
  }
 }
5.보기 레이아웃 구현
이것 은 매우 간단 합 니 다.바로 3 개의 사용자 정의view입 니 다.

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".MainActivity" >

 <LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:gravity="center_horizontal"
  android:layout_marginTop="5dp"
  android:layout_marginBottom="25dp"
  android:orientation="vertical" >

  <com.czm.viewdrawtest.XCRoundAndOvalImageView
   android:id="@+id/cicleImageView"
   android:layout_width="200dp"
   android:layout_height="200dp"
   android:src="@drawable/img1" />

  <com.czm.viewdrawtest.XCRoundAndOvalImageView
   android:id="@+id/roundRectImageView"
   android:layout_width="200dp"
   android:layout_height="240dp"
   android:layout_marginTop="5dp"
   android:src="@drawable/img2" />

  <com.czm.viewdrawtest.XCRoundAndOvalImageView
   android:id="@+id/ovalImageView"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginTop="5dp"
   android:src="@drawable/img3" />
 </LinearLayout>

</ScrollView>
6.사용자 정의 View 사용 및 테스트
위 에 직접 그 려 진 사용자 정의View를 썼 습 니 다.다음은 이View를 사용 하 는 것 입 니 다.사용 방법 은 일반ImageView과 마찬가지 로 일반 컨트롤 로 사용 하면 됩 니 다.

package com.czm.viewdrawtest;


import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;
/**
 *      ImageView
 * @author caizhiming
 *
 */
public class MainActivity extends Activity {

 private XCRoundAndOvalImageView circleImageView;//    
 private XCRoundAndOvalImageView roundRectImageView;//      
 private XCRoundAndOvalImageView ovalImageView;//    
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  //      
  requestWindowFeature(Window.FEATURE_NO_TITLE); 
  //     
  getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 
    WindowManager.LayoutParams.FLAG_FULLSCREEN); 
  setContentView(R.layout.activity_main);
  
  initViews();
 }
 /**
  *    Views
  */
 private void initViews(){
  circleImageView = (XCRoundAndOvalImageView)findViewById(R.id.cicleImageView);
  roundRectImageView = (XCRoundAndOvalImageView)findViewById(R.id.roundRectImageView);
  ovalImageView = (XCRoundAndOvalImageView)findViewById(R.id.ovalImageView);
  
  roundRectImageView.setType(XCRoundAndOvalImageView.TYPE_ROUND);
  roundRectImageView.setRoundRadius(100);
  
  ovalImageView.setType(XCRoundAndOvalImageView.TYPE_OVAL);
  ovalImageView.setRoundRadius(50);
  
 }
}
7.총화
이상 이 본 고의 모든 내용 입 니 다.이 글 의 내용 이 안 드 로 이 드 개발 에 도움 이 되 기 를 바 랍 니 다.

좋은 웹페이지 즐겨찾기