Android中画桌子椅子的几种方法（动态添加座子椅子）（一）

第一种：自定义View继承ViewGroup实现

自定义viewgroup,通过对xml中的每个控件获取他们的宽高，然后根据三角函数关系进行位置的放置
onMeasure是测量每个子控件的宽高
onLayout 是确定每个子控件要摆放到哪

首先是我们定义一个xml文件，然后通过自定义view获取里面的子空间，然后进行位置摆放
下面是xml文件代码：

<com.myview.MyWeiZhi
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:zph="http://schemas.android.com/apk/res-auto"
    android:id="@+id/id_menu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    zph:radius1="12dp" >
    <RelativeLayout
        android:layout_width="15dp"
        android:id="@+id/sp_user_imager"
        android:background="@drawable/yuan_dan"
        android:layout_height="15dp">
        <TextView
            android:id="@+id/sp_user_text"
            android:layout_width="15dp"
            android:layout_centerInParent="true"
            android:text="01"
            android:textSize="8sp"
            android:gravity="center"
            android:textColor="@color/colorbasse"
            android:layout_height="15dp" />
    </RelativeLayout>
    <ImageView
        android:id="@+id/image1"
        android:layout_width="4dp"
        android:layout_height="4dp"
        android:background="@drawable/hui_yuan"
        />

    <ImageView
        android:id="@+id/image2"
        android:layout_width="4dp"
        android:layout_height="4dp"
        android:background="@drawable/hui_yuan"
        />

    <ImageView
        android:id="@+id/image3"
        android:layout_width="4dp"
        android:layout_height="4dp"
        android:background="@drawable/hui_yuan"
        />

    <ImageView
        android:id="@+id/image4"
        android:layout_width="4dp"
        android:layout_height="4dp"
        android:background="@drawable/hui_yuan"
        />

    <ImageView
        android:id="@+id/image5"
        android:layout_width="4dp"
        android:layout_height="4dp"
        android:background="@drawable/hui_yuan"
        />

    <ImageView
        android:id="@+id/image6"
        android:layout_width="4dp"
        android:layout_height="4dp"
        android:background="@drawable/hui_yuan"
        />

    <ImageView
        android:id="@+id/image7"
        android:layout_width="4dp"
        android:layout_height="4dp"
        android:background="@drawable/hui_yuan"
        />

    <ImageView
        android:id="@+id/image8"
        android:layout_width="4dp"
        android:layout_height="4dp"
        android:background="@drawable/hui_yuan"
        />


    <ImageView
        android:id="@+id/image9"
        android:layout_width="4dp"
        android:layout_height="4dp"
        android:background="@drawable/hui_yuan"
        />

    <ImageView
        android:id="@+id/image10"
        android:layout_width="4dp"
        android:layout_height="4dp"
        android:background="@drawable/hui_yuan"
        />
        </com.myview.MyWeiZhi>

这里是10个小圆和一个大圆和大圆中的文字(序号)的布局文件.

下面是我们的自定义view代码

**
 * Created by adminZPH on 2016/12/21.
 * 这里是对桌位的每一个小的座位的划线，包含一个大的圆，并且大圆周边有12个小的圆
 * 默认的属性是：大圆的背景是#FAE4E7  小圆的背景是#D5D3D4
 * 选中的状态的属性是：大圆背景是红色 小圆也一样
 *
 *
 * 总共的个数是不确定的
 *
 */
public class MyWeiZhi extends ViewGroup {
/*
 10个椅子的时候
    private static final Double sin= Math.sin(36*Math.PI/180);
    private static final Double sin18= Math.sin(18*Math.PI/180);
    private static final Double cos=  Math.cos(36*Math.PI/180);
    private static final Double cos18=  Math.cos(18*Math.PI/180);*/
    private int mRadius;

    private int seatnumber=10;//默认是10个防止出错

    private int seatnumbernumber=0;
    //如果想安装坐标点进行摆放的话，可以将onLayout中的x和y换成xx,yy;
    private int xx;//坐标点
    private int yy;//坐标点


    private View mCButton;//中间大圆
    public MyWeiZhi(Context context,int seatnumber,int seatnumbernumber,int xx,int yy)
    {
        this(context,null, 0,seatnumber,seatnumbernumber,xx,yy);
    }

    public MyWeiZhi(Context context, AttributeSet attrs)
    {
        this(context, attrs, 0,0,0,0,0);
    }

    public MyWeiZhi(Context context, AttributeSet attrs, int defStyle,int seatnumber,int seatnumbernumber,int xx,int yy)
    {
        super(context, attrs, defStyle);

        this.seatnumber=seatnumber;
        this.seatnumbernumber=seatnumbernumber;
        this.xx= (int) SizeUtils.pxTodp(context,xx);
        this.yy= (int) SizeUtils.pxTodp(context,yy);


        mRadius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                50, getResources().getDisplayMetrics());

        TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
                R.styleable.MyWeizhi, defStyle, 0);
        mRadius = (int) a.getDimension(R.styleable.MyWeizhi_radius1, TypedValue
                .applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20,
                        getResources().getDisplayMetrics()));
        a.recycle();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        int count = getChildCount();
        for (int i = 0; i < count; i++)
        {
            measureChild(getChildAt(i), widthMeasureSpec, heightMeasureSpec);
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b)
    {
        if (changed)
        {
            /**
             * 当前控件的父控件的中心坐标
             * */
            int x=getMeasuredWidth()/2;
            int y=getMeasuredHeight()/2;
            /**
             * 中心点绘制
             * */
            mCButton = getChildAt(0);
            int cl1 = x;
            int ct1 = y;
            int cWidth1 = mCButton.getMeasuredWidth();
            int cHeight1 = mCButton.getMeasuredHeight();
            mCButton.layout(cl1-cWidth1/2, ct1-cHeight1/2, cl1 + cWidth1/2, ct1 +cHeight1/2);
            /**
             * 接着进行绘制小椅子，根据服务器获得的seatnumber个数进行
             * layout(Left,Top,Right,Bottom)
             * 绘制全部都根据每个控件的中心点坐标进行绘制，保证刚好平均分配并且在当前父控件的中心位置
             * 根据三角函数关系 sin和cos进行获得每个子控件的中心点位置
             *
             * */
            for (int i = 0; i < seatnumber; i++)
            {
                View child = getChildAt(i + 1);
                // L  T  R  B
                int cl = (int) (x+mRadius*Math.sin((360/seatnumber*i)*Math.PI/180));
                int ct = (int) (y-mRadius*Math.cos((360/seatnumber*i)*Math.PI/180));
                int cWidth = child.getMeasuredWidth();
                int cHeight = child.getMeasuredHeight();
                child.layout(cl-cWidth/2, ct-cHeight/2, cl + cWidth/2, ct + cHeight/2);

            }
        }

    }


}

在activity中可以进行初始话，并addview到布局中去


MyWeiZhi mMyWeiZhi=new MyWeiZhi(this,1,12,100,100);

这是第一种方法，通过自定义View继承ViewGroup实现