【UI交互效果】android UI效果二: 给选中的图片加边框

效果图如下:

图片点击时有蓝色边框出现.

根据该实例理解View的绘制过程,了解onMeatrue,onLayout,学会使用StateListDrawable以及自定义属性

主要有4个文件,一个activity，一个view, 一个layout,一个attr

activity:

public class BitmapAlphaActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
    }
}

view:

public class FixedGridLayout extends ViewGroup {
    int mCellWidth;
    int mCellHeight;

    public FixedGridLayout(Context context) {
        super(context);
    }

    public FixedGridLayout(Context context, AttributeSet attrs) {
        super(context, attrs);

        // Read the resource attributes.
        TypedArray a = context.obtainStyledAttributes(
                attrs, R.styleable.FixedGridLayout);
        mCellWidth = a.getDimensionPixelSize(
                R.styleable.FixedGridLayout_cellWidth, -1);
        mCellHeight = a.getDimensionPixelSize(
                R.styleable.FixedGridLayout_cellHeight, -1);
        a.recycle();
        
    }

    public void setCellWidth(int px) {
        mCellWidth = px;
        requestLayout();
    }

    public void setCellHeight(int px) {
        mCellHeight = px;
        requestLayout();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int cellWidthSpec = MeasureSpec.makeMeasureSpec(mCellWidth,
                MeasureSpec.AT_MOST);
        int cellHeightSpec = MeasureSpec.makeMeasureSpec(mCellHeight,
                MeasureSpec.AT_MOST);

        int count = getChildCount();
        for (int index=0; index<count; index++) {
            final View child = getChildAt(index);
            child.measure(cellWidthSpec, cellHeightSpec);
        }
        // Use the size our parents gave us
        setMeasuredDimension(resolveSize(mCellWidth*count, widthMeasureSpec),
                resolveSize(mCellHeight*count, heightMeasureSpec));
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int cellWidth = mCellWidth;
        int cellHeight = mCellHeight;
        int columns = (r - l) / cellWidth;
        if (columns < 0) {
            columns = 1;
        }
        int x = 0;
        int y = 0;
        int i = 0;
        int count = getChildCount();
        for (int index=0; index<count; index++) {
            final View child = getChildAt(index);

            int w = child.getMeasuredWidth();
            int h = child.getMeasuredHeight();

            int left = x + ((cellWidth-w)/2);
            int top = y + ((cellHeight-h)/2);

            child.layout(left, top, left+w, top+h);
            if (i >= (columns-1)) {
                // advance to next row
                i = 0;
                x = 0;
                y += cellHeight;
            } else {
                i++;
                x += cellWidth;
            }
        }
    }
    
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        int cnt = getChildCount();
        Paint p = new Paint();
        p.setColor(Color.CYAN);
        
        for (int i=0; i<cnt; i++) {
            View v = getChildAt(i);
            setStateDrawable((ImageView)v, p);
        }
    }
    
    private void setStateDrawable(ImageView v, Paint p) {
        BitmapDrawable bd = (BitmapDrawable) v.getDrawable();
        Bitmap b = bd.getBitmap();
        Bitmap bitmap = Bitmap.createBitmap(bd.getIntrinsicWidth(), bd.getIntrinsicHeight(), Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        canvas.drawBitmap(b.extractAlpha(), 0, 0, p);
        
        StateListDrawable sld = new StateListDrawable();
        sld.addState(new int[]{android.R.attr.state_pressed}, new BitmapDrawable(bitmap));
        
        v.setBackgroundDrawable(sld);
    }
}

layout:

<?xml version="1.0" encoding="utf-8"?>
<com.study.FixedGridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.study"
    android:id="@+id/grid"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    app:cellWidth="120dp"
    app:cellHeight="100dp">
    <ImageView
        android:layout_width="wrap_content"
        android:padding="3px"
        android:clickable="true"
        android:layout_height="wrap_content"
        android:src="@drawable/gimp"
        android:scaleType="fitCenter" />
    <ImageView
        android:layout_width="wrap_content"
        android:padding="3px"
        android:clickable="true"
        android:layout_height="wrap_content"
        android:src="@drawable/looknfeel" />
    <ImageView
        android:layout_width="wrap_content"
        android:padding="3px"
        android:clickable="true"
        android:layout_height="wrap_content"
        android:src="@drawable/penguin" />
    <ImageView
        android:layout_width="wrap_content"
        android:padding="3px"
        android:clickable="true"
        android:layout_height="wrap_content"
        android:src="@drawable/pinguimroot3" />
    <ImageView
        android:layout_width="wrap_content"
        android:padding="3px"
        android:clickable="true"
        android:layout_height="wrap_content"
        android:src="@drawable/pinguimuser" />
    <ImageView
        android:layout_width="wrap_content"
        android:padding="3px"
        android:clickable="true"
        android:layout_height="wrap_content"
        android:src="@drawable/pinguimuser2" />
</com.study.FixedGridLayout>

attr:

<resources>
    <declare-styleable name="FixedGridLayout">
        <attr name="cellWidth" format="dimension" />
        <attr name="cellHeight" format="dimension" />
    </declare-styleable>
</resources>

更多相关文章

随机推荐