android 圓形ListView實作，并附帶圓角ImageView

轉載請注明出處：王亟亟的大牛之路

平時 垂直向下的ListView已經司空見慣，換一種帶一定角度的圓角ListView應該會給使用者不同的體驗

項目目錄：

2個自定義View一個主Activity

MainActivity

public class MainActivity extends Activity {

    private ListView lv;
    //本地圖檔模拟資料源
    private int[] images = new int[] { R.drawable.p1, R.drawable.p2, R.drawable.p3 };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        lv = (ListView)findViewById(R.id.lv);
        lv.setAdapter(new MyAdapter(MakeData()));
        try {
            changeGroupFlag(lv);
        } catch (Exception e) {
            e.printStackTrace();
        }
        //翻滾的過程中不斷繪制
        lv.setOnScrollListener(new OnScrollListener() {
            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {
            }

            @Override
            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
                for (int i = ; i < lv.getChildCount(); i++) {
                    lv.getChildAt(i).invalidate();
                }
            }
        });
        //監聽事件，測試是否會出現item移位
        lv.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) {
                Toast.makeText(MainActivity.this,"第"+position+"個被按到了", Toast.LENGTH_SHORT).show();
            }
        });
    }
    //自定義擴充卡
    class MyAdapter extends BaseAdapter {

        public final class ViewHolder{
        public ImageView imageView;
        public TextView text;
        }
        //傳入的資料源
        private List<String> data;

        public MyAdapter(List<String> data){
            this.data=data;
        }

        @Override
        public int getCount() {
            return data.size();
        }

        @Override
        public Object getItem(int position) {
            return null;
        }

        @Override
        public long getItemId(int position) {
            return ;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
             ViewHolder holder = null;
             if (convertView == null) {
                holder=new ViewHolder(); 
                MatrixView m = (MatrixView)LayoutInflater.from(MainActivity.this).inflate(R.layout.view_list_item, null);
                m.setParentHeight(lv.getHeight());
                convertView = m;
                holder.text=(TextView)convertView.findViewById(R.id.text);
                holder.imageView = (ImageView)convertView.findViewById(R.id.image);
                convertView.setTag(holder);
              }else {
                 holder = (ViewHolder)convertView.getTag();
              }
             holder.text.setText(data.get(position)+"");
             holder.imageView.setImageResource(images[position % images.length]);          
            return convertView;
        }

    }

    public void changeGroupFlag(Object obj) throws Exception// 反射替換對所有String進行替換
    {
        Field[] f = obj.getClass().getSuperclass().getSuperclass().getSuperclass().getDeclaredFields(); // 獲得成員映射數組
        for (Field tem : f) // 疊代for循環
        {
            if (tem.getName().equals("mGroupFlags")) {
                tem.setAccessible(true);
                Integer mGroupFlags = (Integer)tem.get(obj); // 傳回内容
                int newGroupFlags = mGroupFlags & ;
                tem.set(obj, newGroupFlags);// 替換成員值
            }
        }
    }

    private List<String> MakeData(){
        List<String> data=new ArrayList<String>();
        for(int k=;k<;k++){
            data.add("麥麥你好 "+k);
        }
        return data;
    }
}
           

自定義圓角圖檔

public class RoundImageView extends ImageView {

    private float xRadius = ;
    private float yRadius = ;
    private Paint paint = new Paint();

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

    public RoundImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public float getxRadius() {
        return xRadius;
    }

    public void setxRadius(float xRadius) {
        this.xRadius = xRadius;
    }

    public float getyRadius() {
        return yRadius;
    }

    public void setyRadius(float yRadius) {
        this.yRadius = yRadius;
    }

    @SuppressWarnings("deprecation")
    @Override
    protected void onDraw(Canvas canvas) {
        // java.lang.ClassCastException: android.graphics.drawable.TransitionDrawable cannot be cast
        // to android.graphics.drawable.BitmapDrawable
        BitmapShader shader;
        if (getDrawable() instanceof BitmapDrawable) {
            BitmapDrawable bitmapDrawable = (BitmapDrawable)getDrawable();
            // clip
            shader = new BitmapShader(bitmapDrawable.getBitmap(), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            RectF rect = new RectF(f, f, getWidth(), getHeight());
            int width = bitmapDrawable.getBitmap().getWidth();
            int height = bitmapDrawable.getBitmap().getHeight();
            RectF src = null;
            if (((float)width) / height > ) {
                src = new RectF(f, f, height, height);
            } else {
                src = new RectF(f, f, width, width);
            }
            Matrix matrix = canvas.getMatrix();
            matrix.setRectToRect(src, rect, Matrix.ScaleToFit.CENTER);
            shader.setLocalMatrix(matrix);

            // 抗鋸齒
            paint.setAntiAlias(true);
            paint.setShader(shader);
            // draw round circle for HeadImage or other
            canvas.drawRoundRect(rect, this.getWidth() / , this.getHeight() / , paint);
            // canvas.drawRoundRect(rect, xRadius, yRadius / 2, paint);
        }
    }
}
           

自定義布局

public class MatrixView extends LinearLayout {
    private int h = ;
    private float fullAngelFactor = f;
    private float fullScaleFactor=;
    public MatrixView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void setParentHeight(int height) {
        h = height;
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        canvas.save();
        int top = getTop();

        float rotate = calculateAngel(top, h);
        float scale = calcuylateScale(top, h);

        Matrix m = canvas.getMatrix();
        m.preTranslate(- / getWidth(), - / getHeight());
        m.postScale(scale, scale);
        m.postTranslate( / getWidth(),  / getHeight());
        m.postRotate(rotate);
        canvas.concat(m);
        super.dispatchDraw(canvas);
        canvas.restore();
    }

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

    private float calculateAngel(int top, int h) {
        float result = f;
        if (top < h / f) {
            result = (top - (h / f)) / (h / f) * fullAngelFactor;
        } else if (top > h / f) {
            result = (top - (h / f)) / (h / f) * fullAngelFactor;
        }
        return result;
    }

    private float calcuylateScale(int top, int h) {
        float result = f;

        result = (f - f/f*Math.abs((top - h / f)) / (h / f)) * fullScaleFactor;
        return result;

    }
}
           

private float fullAngelFactor 為旋轉的角度

private float fullScaleFactor 為試圖放大縮小的比例

private float fullAngelFactor=40f時：

主布局就補貼了，就是一個ListView

每一個Item

<?xml version="1.0" encoding="utf-8"?>
<com.wjj.test.MatrixView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <com.wjj.test.RoundImageView
        android:id="@+id/image"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginLeft="30dp"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:gravity="left|center_vertical"
        android:paddingLeft="20dp"
        android:textSize="18sp" />

</com.wjj.test.MatrixView>
           

具體實作可以看代碼，附上源碼下載下傳位址：http://yunpan.cn/cmy9fi3fMDY7U 通路密碼 0982

部分代碼來源于網際網路，如有重複請見諒