Several methods of drawing tables and chairs in Android (dynamically adding seat chairs) (1)

The first: custom View inherits ViewGroup implementation

To customize the viewgroup, obtain their width and height for each control in the xml, and then place the position according to the trigonometric relationship. OnMeasure is to
measure the width and height of each sub-control.
OnLayout is to determine where each sub-control is to be placed.

First, we define an xml file, and then get the subspace inside through a custom view, and then place the position.
Here is the xml file code:

<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>

Here is the layout file for 10 small circles and one big circle and the text (serial number) in the big circle.

Below is our custom view code

**
 * 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);

            }
        }

    }


}

In the activity, you can make an initial call and addview to the layout


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

This is the first method, implemented by custom View inheriting ViewGroup