Andorid 八角盘（风水八宅图）八圆轮简单实现

风水八角盘

困，为了开源精神，继续写点博客，证明一下自己的存在感。之前，项目需求说要做个八角八圆轮图。听了之后就蒙蔽了。卧槽，好难，想想之后，好像有点思路。思路其实挺简单，无非就是写几行代码嘛。废话不多说，先上预览图。

实现思路

1、八角背景图
2、自定义ViewGroup实现八个圆轮位置+LL线性垂直布局
3、采用FrameLayout布局层叠

上码不废话

八角底部图就不上了，UI一瞬间就秒出来~~~

XML码

这里就用帧布局来是先把。。

<FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="@dimen/x15">
                <com.eightbears.bear.ec.main.index.luopan.view.CircleLinearLayout
                    app:circleRadius="@dimen/x100"
                    android:layout_gravity="center_horizontal"
                    android:layout_width="@dimen/x300"
                    android:layout_height="@dimen/x300"
                    android:background="@mipmap/icon_bagua">
                    <android.support.v7.widget.LinearLayoutCompat
                        android:id="@+id/ll_gua1"
                        android:orientation="vertical"
                        android:layout_width="wrap_content"
                        android:gravity="center"
                        android:background="@mipmap/icon_baguaniu"
                        android:layout_height="wrap_content">
                        <TextView
                            android:id="@+id/tv_gua1"
                            android:layout_width="wrap_content"
                            android:textSize="@dimen/font_size_20"
                            android:textColor="@color/text_color_333"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:text="" />
                        <TextView
                            android:id="@+id/tv_wei1"
                            android:layout_marginTop="-2dp"
                            android:layout_width="wrap_content"
                            android:textSize="@dimen/font_size_15"
                            android:layout_height="wrap_content"
                            android:textColor="@color/text_bazai_red_c91d1d"
                            android:gravity="center"
                            android:text="" />
                    </android.support.v7.widget.LinearLayoutCompat>

                    <android.support.v7.widget.LinearLayoutCompat
                        android:id="@+id/ll_gua2"
                        android:orientation="vertical"
                        android:layout_width="wrap_content"
                        android:gravity="center"
                        android:background="@mipmap/icon_baguaniu"
                        android:layout_height="wrap_content">
                        <TextView
                            android:id="@+id/tv_gua2"
                            android:layout_width="wrap_content"
                            android:textSize="@dimen/font_size_20"
                            android:textColor="@color/text_color_333"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:text="" />
                        <TextView
                            android:id="@+id/tv_wei2"
                            android:layout_marginTop="-2dp"
                            android:layout_width="wrap_content"
                            android:textSize="@dimen/font_size_15"
                            android:layout_height="wrap_content"
                            android:textColor="@color/text_bazai_red_c91d1d"
                            android:gravity="center"
                            android:text="" />
                    </android.support.v7.widget.LinearLayoutCompat>

                    <android.support.v7.widget.LinearLayoutCompat
                        android:id="@+id/ll_gua3"
                        android:orientation="vertical"
                        android:layout_width="wrap_content"
                        android:gravity="center"
                        android:background="@mipmap/icon_baguaniu"
                        android:layout_height="wrap_content">
                        <TextView
                            android:id="@+id/tv_gua3"
                            android:layout_width="wrap_content"
                            android:textSize="@dimen/font_size_20"
                            android:textColor="@color/text_color_333"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:text="" />
                        <TextView
                            android:id="@+id/tv_wei3"
                            android:layout_marginTop="-2dp"
                            android:layout_width="wrap_content"
                            android:textSize="@dimen/font_size_15"
                            android:layout_height="wrap_content"
                            android:textColor="@color/text_bazai_red_c91d1d"
                            android:gravity="center"
                            android:text="" />
                    </android.support.v7.widget.LinearLayoutCompat>

                    <android.support.v7.widget.LinearLayoutCompat
                        android:id="@+id/ll_gua4"
                        android:orientation="vertical"
                        android:layout_width="wrap_content"
                        android:gravity="center"
                        android:background="@mipmap/icon_baguaniu"
                        android:layout_height="wrap_content">
                        <TextView
                            android:id="@+id/tv_gua4"
                            android:layout_width="wrap_content"
                            android:textSize="@dimen/font_size_20"
                            android:textColor="@color/text_color_333"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:text="" />
                        <TextView
                            android:id="@+id/tv_wei4"
                            android:layout_marginTop="-2dp"
                            android:layout_width="wrap_content"
                            android:textSize="@dimen/font_size_15"
                            android:layout_height="wrap_content"
                            android:textColor="@color/text_bazai_red_c91d1d"
                            android:gravity="center"
                            android:text="" />
                    </android.support.v7.widget.LinearLayoutCompat>

                    <android.support.v7.widget.LinearLayoutCompat
                        android:id="@+id/ll_gua5"
                        android:orientation="vertical"
                        android:layout_width="wrap_content"
                        android:gravity="center"
                        android:background="@mipmap/icon_baguaniu"
                        android:layout_height="wrap_content">
                        <TextView
                            android:id="@+id/tv_gua5"
                            android:layout_width="wrap_content"
                            android:textSize="@dimen/font_size_20"
                            android:textColor="@color/text_color_333"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:text="" />
                        <TextView
                            android:id="@+id/tv_wei5"
                            android:layout_marginTop="-2dp"
                            android:layout_width="wrap_content"
                            android:textSize="@dimen/font_size_15"
                            android:layout_height="wrap_content"
                            android:textColor="@color/text_bazai_red_c91d1d"
                            android:gravity="center"
                            android:text="" />
                    </android.support.v7.widget.LinearLayoutCompat>

                    <android.support.v7.widget.LinearLayoutCompat
                        android:id="@+id/ll_gua6"
                        android:orientation="vertical"
                        android:layout_width="wrap_content"
                        android:gravity="center"
                        android:background="@mipmap/icon_baguaniu"
                        android:layout_height="wrap_content">
                        <TextView
                            android:id="@+id/tv_gua6"
                            android:layout_width="wrap_content"
                            android:textSize="@dimen/font_size_20"
                            android:textColor="@color/text_color_333"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:text="" />
                        <TextView
                            android:id="@+id/tv_wei6"
                            android:layout_marginTop="-2dp"
                            android:layout_width="wrap_content"
                            android:textSize="@dimen/font_size_15"
                            android:layout_height="wrap_content"
                            android:textColor="@color/text_bazai_red_c91d1d"
                            android:gravity="center"
                            android:text="" />
                    </android.support.v7.widget.LinearLayoutCompat>
                    <android.support.v7.widget.LinearLayoutCompat
                        android:id="@+id/ll_gua7"
                        android:orientation="vertical"
                        android:layout_width="wrap_content"
                        android:gravity="center"
                        android:background="@mipmap/icon_baguaniu"
                        android:layout_height="wrap_content">
                        <TextView
                            android:id="@+id/tv_gua7"
                            android:layout_width="wrap_content"
                            android:textSize="@dimen/font_size_20"
                            android:textColor="@color/text_color_333"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:text="" />
                        <TextView
                            android:id="@+id/tv_wei7"
                            android:layout_marginTop="-2dp"
                            android:layout_width="wrap_content"
                            android:textSize="@dimen/font_size_15"
                            android:layout_height="wrap_content"
                            android:textColor="@color/text_bazai_red_c91d1d"
                            android:gravity="center"
                            android:text="" />
                    </android.support.v7.widget.LinearLayoutCompat>

                    <android.support.v7.widget.LinearLayoutCompat
                        android:id="@+id/ll_gua8"
                        android:orientation="vertical"
                        android:layout_width="wrap_content"
                        android:gravity="center"
                        android:background="@mipmap/icon_baguaniu"
                        android:layout_height="wrap_content">
                        <TextView
                            android:id="@+id/tv_gua8"
                            android:layout_width="wrap_content"
                            android:textSize="@dimen/font_size_20"
                            android:textColor="@color/text_color_333"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:text="" />
                        <TextView
                            android:id="@+id/tv_wei8"
                            android:layout_marginTop="-2dp"
                            android:layout_width="wrap_content"
                            android:textSize="@dimen/font_size_15"
                            android:layout_height="wrap_content"
                            android:textColor="@color/text_bazai_red_c91d1d"
                            android:gravity="center"
                            android:text="" />
                    </android.support.v7.widget.LinearLayoutCompat>
                </com.eightbears.bear.ec.main.index.luopan.view.CircleLinearLayout>

                <com.eightbears.bear.ec.main.index.luopan.view.CircleLinearLayout
                    app:circleRadius="@dimen/x55"
                    android:layout_gravity="center_horizontal"
                    android:layout_width="@dimen/x300"
                    android:layout_height="@dimen/x300"
                  >
                    <android.support.v7.widget.AppCompatImageView
                        android:id="@+id/iv_jx1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                         />
                    <android.support.v7.widget.AppCompatImageView
                        android:id="@+id/iv_jx2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                         />

                    <android.support.v7.widget.AppCompatImageView
                        android:id="@+id/iv_jx3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                         />

                    <android.support.v7.widget.AppCompatImageView
                        android:id="@+id/iv_jx4"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                         />

                    <android.support.v7.widget.AppCompatImageView
                        android:id="@+id/iv_jx5"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                         />

                    <android.support.v7.widget.AppCompatImageView
                        android:id="@+id/iv_jx6"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                         />

                    <android.support.v7.widget.AppCompatImageView
                        android:id="@+id/iv_jx7"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                         />

                    <android.support.v7.widget.AppCompatImageView
                        android:id="@+id/iv_jx8"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                         />
                </com.eightbears.bear.ec.main.index.luopan.view.CircleLinearLayout>
                <android.support.v7.widget.AppCompatTextView
                    android:id="@+id/tv_gua_xiang"
                    android:layout_width="wrap_content"
                    android:text="震"
                    android:textColor="@color/text_color_fff"
                    android:textStyle="bold"
                    android:layout_gravity="center"
                    android:textSize="@dimen/font_size_36"
                    android:layout_height="wrap_content" />
            </FrameLayout>

这里面的每个item其实就是一个LL再设置背景添加TV搞定。。。

 <android.support.v7.widget.LinearLayoutCompat
                        android:id="@+id/ll_gua1"
                        android:orientation="vertical"
                        android:layout_width="wrap_content"
                        android:gravity="center"
                        android:background="@mipmap/icon_baguaniu"
                        android:layout_height="wrap_content">
                        <TextView
                            android:id="@+id/tv_gua1"
                            android:layout_width="wrap_content"
                            android:textSize="@dimen/font_size_20"
                            android:textColor="@color/text_color_333"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:text="" />
                        <TextView
                            android:id="@+id/tv_wei1"
                            android:layout_marginTop="-2dp"
                            android:layout_width="wrap_content"
                            android:textSize="@dimen/font_size_15"
                            android:layout_height="wrap_content"
                            android:textColor="@color/text_bazai_red_c91d1d"
                            android:gravity="center"
                            android:text="" />
                    </android.support.v7.widget.LinearLayoutCompat>

自定义八等份View

这里的核心是按照Circle的方式排列算法。。。
这里我们可以通过设置半径来调整每个item到圆心的距离。。

public class CircleLinearLayout extends ViewGroup {

    private final String TAG = "CircleLinearLayout";
    private int radius;

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

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

    public CircleLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        final Resources res = getResources();
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleLinearLayout);
        this.radius = a.getDimensionPixelSize(R.styleable.CircleLinearLayout_circleRadius, 10);

        Log.d(TAG, "radius = " + radius);
        a.recycle();
    }

    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
//        return super.generateLayoutParams(attrs);
        return new MarginLayoutParams(getContext(),attrs);
    }

    /**
     * 计算所有ChildView的宽度和高度，然后根据ChildView的计算结果设置自己的宽度和高度
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        /**
         * 获取此ViewGroup上级容器为其推荐计算模式
         */
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        /**
         * 获取此ViewGroup上级容器为其推荐的宽和高
         */
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        //计算出所有childView的宽和高，（通过ViewGroup的measureChildren方法为其所有的孩子设置宽和高，此行执行完成后，childView的宽和高都已经正确的计算过了）
        measureChildren(widthMeasureSpec, heightMeasureSpec);

        /**
         * ViewGroup内子控件的宽度和高度
         */
        int widthContent = 0;
        int heightContent = 0;

        int itemHeight =getChildAt(0).getMeasuredHeight();//单个childView的高度

        heightContent = (itemHeight+radius)*2;
        widthContent = (itemHeight+radius)*2;
//        Log.d(TAG + "onMeasure", "heightContent:"+heightContent);

        /**
         * 测量ViewGroup的宽高，如果为wrap_content就按照内容计算得到的宽高
         */
        setMeasuredDimension((widthMode == MeasureSpec.EXACTLY) ? widthSize : widthContent, (heightMode == MeasureSpec.EXACTLY) ? heightSize : heightContent);

    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
//        drawInHorizontal();
        drawInCircle();
    }

    /**
     * 按照Circle的方式排列
     */
    private void drawInCircle() {
        int cCount = getChildCount();
        int lastW = 0;

        //圆心坐标
        float[] circleCentre = {getWidth()/2*1.0f, getHeight()/2*1.0f};

        //每个占多少个弧度
//        float oItem = 360/cCount*1.0f;
        float oItem = (float) (2*Math.PI/cCount*1.0f);

        //cCount个坐标
        float[][] xyPosition = new float[cCount][2];
        for (int i=0; i<cCount; i++)
        {
            xyPosition[i] = getXYPoint(circleCentre,radius,oItem*(i));

            //x坐标
            int xLabel = (int) xyPosition[i][0];
            //y坐标
            int yLabel = (int) xyPosition[i][1];

            Log.d(TAG, "position : (" + xLabel + "," + yLabel + ")");
            View view = getChildAt(i);
            view.layout((int) (xLabel - view.getMeasuredWidth() / 2 * 1.0f), (int) (yLabel - view.getMeasuredHeight() / 2 * 1.0f), (int) (xLabel + view.getMeasuredWidth() / 2 * 1.0f), (int) (yLabel + view.getMeasuredHeight() / 2 * 1.0f));
        }
    }

    /**
     * 按照horizontal的方式排列
     */
    private void drawInHorizontal() {
        int cCount = getChildCount();
        int lastW = 0;
        for (int i=0; i < cCount; i++){
            View view = getChildAt(i);
            view.layout(lastW,0,view.getWidth(),view.getHeight());
            lastW += view.getWidth();
            Log.i(TAG, "lastW = " + lastW);
        }
    }

    /**
     * 以原点为圆点，以radius维半径画圆，通过弧度o,获得坐标
     * @param radius 半径
     * @param o 弧度
     * @return
     */
    public  float[] getXYPoint(float[] centrePoint, int radius, float o){
        Log.d(TAG,"o: "+o);
        Log.d(TAG,"radius: "+radius);
        Log.d(TAG,"centrePoint: ["+centrePoint[0]+","+centrePoint[1]+"]");
        float[] xyPoint = {(float) (radius*Math.sin(o) + centrePoint[0]), (float) ((-1)*radius*Math.cos(o) + centrePoint[1])};
//        Log.d(TAG,"test: ["+xyPoint[0]+","+xyPoint[1]+"]");
        return xyPoint;
    }
}

在values的attrs.xml文件如下：
这里我们可以在XML定义自定义View然后设置半径 app:circleRadius=”@dimen/x55”
满足我们项目中的需求。

<resources>
    <declare-styleable name="CircleLinearLayout">
        <attr name="circleRadius" format="dimension" />
</resources>

这里就是嵌套2个自定义CircleLinearLayout+FrameLayout分层实现界面，然后每个Item都添加点击事件，完成。。。

当然，还有另外一种方法就是，动态添加item进行实现，或者添加item直接写在自定义View里面，这里就先不展开了，如果读者有更多方法欢迎开源。

需要源码的留言M我。