androidlistview & toolbar로 이루어진 멋진 효과 (원형 그림 추가 구현)

인터페이스의 효과에 사용되는 기술은 모두 매우 기본적이지만 실현된 사고방식은 매우 참신하고 코드와 구조는 각종 기교가 충만하여 배우고 참고할 만하다.
효과도:
원리도:
레이아웃 코드:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:roundIcon="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!--   -->
    <ImageView
        android:id="@+id/top_bg"
        android:scaleType="fitXY"
        android:src="@drawable/example"
        android:layout_width="match_parent"
        android:layout_height="220dp" />

    <View
        android:id="@+id/filter_bg"
        android:background="#00000000"
        android:layout_width="match_parent"
        android:layout_height="220dp" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="#00000000"
        android:minHeight="?attr/actionBarSize"
        app:popupTheme="@style/Theme.AppCompat.Light.DarkActionBar"
        app:theme="@style/Theme.AppCompat" />
    <TextView
        android:layout_marginTop="155dp"
        android:textSize="30sp"
        android:text="My Flexible Space"
        android:textColor="#ffffff"
        android:id="@+id/title"
        android:padding="16dp"
        android:gravity="center_vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />


    <com.temp.lin.temp1.RoundIcon
        android:id="@+id/round_icon"
        android:src="@drawable/round_icon"
        roundIcon:borderWidth="0dp"
        roundIcon:borderColor="#cfcfcf"
        android:layout_marginBottom="-40dp"
        android:layout_marginRight="22dp"
        android:layout_alignParentRight="true"
        android:layout_marginTop="180dp"
        android:layout_width="80dp"
        android:layout_height="80dp" />
    <!--   -->

    <!--   -->
    <!--
    wrap_content     
      listview   ,     header view   
    -->
    <View
        android:visibility="gone"
        android:id="@+id/list_background"
        android:background="#ffffff"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <!--
    ListView     background,         headerView     background 
    ListView        
    -->
    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></ListView>
    <!--   -->




</RelativeLayout>

구현 코드:
RoundIcon.java
public class RoundIcon extends ImageView {
    private Paint borderPaint;
    private int cx=-1,cy=-1,radius;
    private int borderColor,borderWidth;
    public RoundIcon(Context context) {
        super(context,null);
    }
    public RoundIcon(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray a=getResources().obtainAttributes(attrs, R.styleable.roundIcon);
        borderColor=a.getColor(R.styleable.roundIcon_borderColor,0xffffffff);
        borderWidth= (int) a.getDimension(R.styleable.roundIcon_borderWidth, 0f);
        a.recycle();
        borderPaint=new Paint();
        borderPaint.setAntiAlias(true);
        borderPaint.setStyle(Paint.Style.STROKE);
        borderPaint.setStrokeWidth(borderWidth);
        borderPaint.setColor(borderColor);
        borderPaint.setDither(true);
    }

    @Override
    protected void onDraw(Canvas canvas) {
//        super.onDraw(canvas);
        if (cx==-1){cx=getWidth()/2; radius=cx-borderWidth/2;}
        if (cy==-1){cy=getHeight()/2;}
        //draw border
        canvas.drawCircle(cx,cy,radius,borderPaint);
        //draw round picture
        canvas.drawBitmap(getRoundBitmap(((BitmapDrawable) getDrawable()).getBitmap(), radius*2),
                borderWidth / 2, borderWidth / 2, null);
    }

    private Bitmap getRoundBitmap(Bitmap bitmap, int len) {
        Bitmap squareBitmap,scaleBitmap;
        int bitmapW=bitmap.getWidth();
        int bitmapH=bitmap.getHeight();
        //
        Matrix matrix = new Matrix();
        float scale=Math.max(len/(bitmapW+0.0f),len/(bitmapH+0.0f));
        matrix.postScale(scale,scale);
        scaleBitmap=Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
        //
        bitmapW=scaleBitmap.getWidth();
        bitmapH=scaleBitmap.getHeight();
        if (bitmapH==bitmapW){
            squareBitmap=scaleBitmap;
        }else{
            int size=bitmapH<bitmapW?bitmapH:bitmapW;
            if (size!=len) size=len;
            squareBitmap=Bitmap.createBitmap(scaleBitmap,0,0,size,size);
        }
        //
//        Log.e("len w h",len+" "+squareBitmap.getWidth()+" "+squareBitmap.getHeight());
        Bitmap output=Bitmap.createBitmap(squareBitmap.getWidth(),squareBitmap.getHeight(),
                Bitmap.Config.ARGB_8888);
        Canvas myCanvas=new Canvas(output);
        Paint mPaint=new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setFilterBitmap(true);
        mPaint.setDither(true);
        //PorterDuffXfermode               
        //       
        myCanvas.drawCircle(cx,cy,radius,mPaint);
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        myCanvas.drawBitmap(squareBitmap,0,0,mPaint);
        return output;
    }
}
SildingUpWithImgActivity.java
.감사합니다.

좋은 웹페이지 즐겨찾기