动态八阵图移动开发zsxxn20001的博客-

真正想要做成一件事才会花时间花精力耐心的去学习
最近呢，对八卦图感兴趣，那就查查资料吧
看到八卦还分两种，一种是文王后天八卦一种是伏羲先天八卦

然后呢，就想着如果动起来，什么算卦的好像就是先天后天八卦组合起来的吧,那就试试吧，下面展示效果图:

简要介绍下实现原理:
1.背景采用自定义容器
(注:用不用容器也没关系,这里只是为了演示如何实现自定义容器
2.八个黑圆以及白色圆的放置位置是采用自定义控件
3.外边的旋转其实只是图片的帧动画

使用的文件
java文件:
1.chamber 继承了SurfaceView
2.customlayout_params继承了MarginLayoutParams
3.customlayout继承了ViewGroup
4.cham_main继承了Activity
5.attrs.xml自定义布局layout属性值
6.bazhen.xml主布局实现
八卦阵的八个图片,下载后一定要记住图片的大小
(注:摆放位置以及旋转后回到原点很有必要

原理1用到的文件2,3,5
原理2用到的文件1,5
原理3也就是主程序入口用到文件4,6

分析完毕，开始代码，正在加载…
文件1:

public class chamber extends SurfaceView implements SurfaceHolder.Callback,Runnable{ private float vie_z=0; //边缘与半径之和 private float al_sew=0; private Paint myPaint; //画笔,包含画几何图形文本等的样式和颜色信息. private int textColor; //设置文本颜色. private float tsiz = 0; //设置的字体大小 -40 private String Ttext=""; //控件上的文本 private int mode=1; //表示占据屏幕宽度的1/mode. //可变元素.. public int wh_peo=7; //在线人数,在线即显示目标颜色.. private int wh_ch=0; //圆在线过程.. public int cor_co;//0xFF8B0A50; //表示目标颜色,即内圆颜色 0xFF1E90FF private Thread thread; private SurfaceHolder surfaceholder; //surfaceview的控制器 private Canvas canvas; private boolean isThreadRunning=true; public chamber(Context context) { super(context); init(context); } public chamber(Context context, AttributeSet attrs) {//此构造方法允许布局编辑器来创造和编辑视图实例. super(context, attrs);         TypedArray typedArray1=context.getTheme().obtainStyledAttributes(attrs, R.styleable.Dot,0,0);         textColor=typedArray1.getColor(R.styleable.Dot_textColor,0xFF000000);         tsiz=typedArray1.getDimension(R.styleable.Dot_textSize,70.f);         Ttext=typedArray1.getString(R.styleable.Dot_texKey);         typedArray1.recycle(); init(context); } public chamber(Context context, AttributeSet attrs,int defStyleAttr) { super(context,attrs,defStyleAttr); init(context);         TypedArray typedArray=context.getTheme().obtainStyledAttributes(attrs, R.styleable.Dot,0,0);         tsiz=typedArray.getDimension(R.styleable.Dot_textSize, 5.f);         Ttext=typedArray.getString(R.styleable.Dot_texKey);         typedArray.recycle(); } public void init(Context context) {      surfaceholder=getHolder();       surfaceholder.addCallback(this); //给SurfaceView当前的持有者一个回调对象      cor_co=0xFF7A67EE;         int scr_wid=new Tool_4().getScreenWidth(context); al_sew=scr_wid/mode;         vie_z=(float)scr_wid/mode/2; vie_z=vie_z/3;         int with=getWidth(); int height=getHeight(); //画布的宽高(画布) }      @Override     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { //计算视图大小,即画布的大小 // TODO Auto-generated method stub super.onMeasure(widthMeasureSpec, heightMeasureSpec);         int widthMode=MeasureSpec.getMode(widthMeasureSpec);         int widthSize=MeasureSpec.getSize(widthMeasureSpec); //测量宽度         int heightMode=MeasureSpec.getMode(heightMeasureSpec); //测量高度         int heightSize=MeasureSpec.getSize(heightMeasureSpec); switch (widthMode) { case MeasureSpec.EXACTLY: break; //精确值模式,具体数值(父容器已为子容器设置尺寸,子容器应服从边界,不论其想要多大的空间) case MeasureSpec.AT_MOST: widthSize=(int)(al_sew);break; case MeasureSpec.UNSPECIFIED: break; //未指定模式(父容器对于子容器没有任何的限制,自定义View,想多大就多大). } switch (heightMode) { case MeasureSpec.EXACTLY: break; //精确值模式,具体数值(父容器已为子容器设置尺寸,子容器应服从边界,不论其想要多大的空间) case MeasureSpec.AT_MOST: heightSize=(int)(al_sew);break; //最大值模式,(子容器可以是声明大小内的任意大小,当空间宽高设置为wrap_content时为该模式) case MeasureSpec.UNSPECIFIED: break; //未指定模式(父容器对于子容器没有任何的限制,自定义View,想多大就多大). } setMeasuredDimension(widthSize, heightSize); //保存测量结果. } protected void drawView(Canvas canvas) { //Canvas含有很多画图的接口,利用该接口可画出想要的图形.(canvas+paint) // TODO Auto-generated method stub //super.onDraw(canvas);      myPaint = new Paint(); canvas.drawColor(Color.GRAY); //设置画布颜色         myPaint.setAntiAlias(true); //设置画笔为无锯齿,用来防止边缘的锯齿(对图像边缘进行柔化处理,使图像边缘看起来平滑更接近实物的物体)         myPaint.setColor(textColor); myPaint.setStrokeWidth(10); //al_sew/18         myPaint.setStyle(Paint.Style.STROKE); //填充和描边.Paint.STORKE(仅描边)         myPaint.setColor(0xFFFF0000); myPaint.setStyle(Paint.Style.STROKE); //canvas.drawCircle(vie_z*3, vie_z*3, vie_z*3-5, myPaint);//边界圆..         RectF recr=new RectF(vie_z, vie_z, vie_z*5, vie_z*5);         canvas.drawArc(recr, -90, 315/wh_peo*wh_ch, false, myPaint); //canvas.drawCircle(vie_z*3, vie_z*3, vie_z*2, myPaint); //外圈边界(运动的圆弧)                  myPaint.setColor(0xFF000000); myPaint.setStyle(Paint.Style.FILL); //四条交叉线         canvas.drawLine(vie_z*3, vie_z*3,(float)(vie_z*3+(vie_z*3/2+vie_z-5)/1.4),(float)(vie_z*3-(vie_z*3/2+vie_z-5)/1.4),myPaint);         canvas.drawLine(vie_z*3, vie_z*3,(float)(vie_z*3-(vie_z*3/2+vie_z-5)/1.4),(float)(vie_z*3-(vie_z*3/2+vie_z-5)/1.4),myPaint);         canvas.drawLine(vie_z*3, vie_z*3,(float)(vie_z*3+(vie_z*3/2+vie_z-5)/1.4),(float)(vie_z*3+(vie_z*3/2+vie_z-5)/1.4),myPaint);         canvas.drawLine(vie_z*3, vie_z*3,(float)(vie_z*3-(vie_z*3/2+vie_z-5)/1.4),(float)(vie_z*3+(vie_z*3/2+vie_z-5)/1.4),myPaint);                  myPaint.setColor(0xFFFFFFFF); myPaint.setStyle(Paint.Style.FILL);         canvas.drawCircle(vie_z*3, vie_z*3, vie_z/2, myPaint); //内圈边界(表目标)                  myPaint.setColor(0xFF000000); myPaint.setStyle(Paint.Style.FILL);         canvas.drawCircle(vie_z*3, vie_z/2, vie_z/2-5, myPaint);         canvas.drawLine(vie_z*3, vie_z*3-vie_z/2, vie_z*3, vie_z, myPaint); if (wh_ch>=2) myPaint.setColor(cor_co); else myPaint.setColor(0xFFFFFFFF); myPaint.setStyle(Paint.Style.FILL);         canvas.drawCircle(vie_z*3, vie_z*3/2, vie_z/3, myPaint); //上小圆 if (wh_ch>=3) myPaint.setColor(cor_co); else myPaint.setColor(0xFFFFFFFF); myPaint.setStyle(Paint.Style.FILL);         canvas.drawCircle((float)(vie_z*3+vie_z*3/2/1.4), (float)(vie_z*3-vie_z*3/2/1.4),           vie_z/3, myPaint); //右上         myPaint.setColor(0xFF000000); myPaint.setStyle(Paint.Style.FILL); //canvas.drawLine(vie_z*3, vie_z*3/2-vie_z/3, vie_z*3, vie_z, myPaint);         canvas.drawCircle((float)(vie_z*3+(vie_z*3/2+vie_z-5)/1.4), (float)(vie_z*3-(vie_z*3/2+vie_z-5)/1.4),           vie_z/2-5, myPaint);                  myPaint.setColor(0xFF000000); myPaint.setStyle(Paint.Style.FILL);         canvas.drawLine(vie_z*3+vie_z/2, vie_z*3, vie_z*5, vie_z*3, myPaint);         canvas.drawCircle(vie_z*5+vie_z/2, vie_z*3, vie_z/2-5, myPaint); if (wh_ch>=4) myPaint.setColor(cor_co); else myPaint.setColor(0xFFFFFFFF); myPaint.setStyle(Paint.Style.FILL);         canvas.drawCircle(vie_z*3+vie_z*3/2, vie_z*3, vie_z/3, myPaint); //右     if (wh_ch>=5) myPaint.setColor(cor_co); else myPaint.setColor(0xFFFFFFFF); myPaint.setStyle(Paint.Style.FILL);         canvas.drawCircle((float) (vie_z*3+vie_z*3/2/1.4), (float)(vie_z*3+vie_z*3/2/1.4),           vie_z/3, myPaint); //右下         myPaint.setColor(0xFF000000); myPaint.setStyle(Paint.Style.FILL);         canvas.drawCircle((float)(vie_z*3+(vie_z*3/2+vie_z-5)/1.4), (float)(vie_z*3+(vie_z*3/2+vie_z-5)/1.4),           vie_z/2-5, myPaint);                  myPaint.setColor(0xFF000000); myPaint.setStyle(Paint.Style.FILL);         canvas.drawLine(vie_z*3, vie_z*3+vie_z/2, vie_z*3, vie_z*5, myPaint);         canvas.drawCircle(vie_z*3, vie_z*5+vie_z/2, vie_z/2-5, myPaint); if (wh_ch>=6) myPaint.setColor(cor_co); else myPaint.setColor(0xFFFFFFFF); myPaint.setStyle(Paint.Style.FILL);         canvas.drawCircle(vie_z*3, vie_z*3+vie_z*3/2, vie_z/3, myPaint); //下 if (wh_ch>=7) myPaint.setColor(cor_co); else myPaint.setColor(0xFFFFFFFF); myPaint.setStyle(Paint.Style.FILL);         canvas.drawCircle((float) (vie_z*3-vie_z*3/2/1.4), (float)(vie_z*3+vie_z*3/2/1.4),           vie_z/3, myPaint);//左下         myPaint.setColor(0xFF000000); myPaint.setStyle(Paint.Style.FILL);         canvas.drawCircle((float)(vie_z*3-(vie_z*3/2+vie_z-5)/1.4), (float)(vie_z*3+(vie_z*3/2+vie_z-5)/1.4),           vie_z/2-5, myPaint);                  myPaint.setColor(0xFF000000); myPaint.setStyle(Paint.Style.FILL);         canvas.drawLine(vie_z*3-vie_z/2, vie_z*3, vie_z, vie_z*3, myPaint);         canvas.drawCircle(vie_z/2, vie_z*3, vie_z/2-5, myPaint); if (wh_ch>=8) myPaint.setColor(cor_co); else myPaint.setColor(0xFFFFFFFF); myPaint.setStyle(Paint.Style.FILL);         canvas.drawCircle(vie_z*3/2, vie_z*3, vie_z/3, myPaint); //左  if (wh_ch>=9) myPaint.setColor(cor_co); else myPaint.setColor(0xFFFFFFFF); myPaint.setStyle(Paint.Style.FILL);         canvas.drawCircle((float) (vie_z*3-vie_z*3/2/1.4), (float)(vie_z*3/2+(vie_z*3/2-vie_z*3/2/1.4)),           vie_z/3, myPaint);//左上         myPaint.setColor(0xFF000000); myPaint.setStyle(Paint.Style.FILL);         canvas.drawCircle((float)(vie_z*3-(vie_z*3/2+vie_z-5)/1.4), (float)(vie_z*3-(vie_z*3/2+vie_z-5)/1.4),           vie_z/2-5, myPaint); if (wh_ch>=wh_peo+1) isThreadRunning=false; else wh_ch+=1;//wh_ch=0;         myPaint.setStyle(Paint.Style.STROKE); } public void run() { //表示正在线上的代表.. // TODO Auto-generated method stub while (isThreadRunning) {    canvas=surfaceholder.lockCanvas(); //lockCanvas(Rect dirty)//锁定某区域进行画图(相对部分内存要求比较高的游戏来说); //锁定画布后就可以通过其返回的画布对象Canvas在其上面画图等操作; if (canvas!=null) { drawView(canvas); //锁定后才能画图     surfaceholder.unlockCanvasAndPost(canvas); //结束锁定画图,并提交改变给系统; } try { //if (wh_ch==wh_peo) Thread.interrupted(); //结束线程..      Thread.sleep(1000); }//相当于帧率,值越小越流畅(相当于速度(频率),根据模式进行修改) catch (Exception e) { e.printStackTrace();} } }       @Override  public void surfaceChanged(SurfaceHolder arg0, int arg1, int arg2, int arg3) { //surfaceview大小发生改变时调用;[运行时按了home键] //icon=BitmapFactory.decodeResource(context.getResources(), R.drawable.nova5); }  @Override  public void surfaceCreated(SurfaceHolder arg0) { // TODO Auto-generated method stub   thread=new Thread(this);   thread.start();   isThreadRunning=true; }  @Override  public void surfaceDestroyed(SurfaceHolder arg0) { // TODO Auto-generated method stub   isThreadRunning=false; } public String getText() { return Ttext; } public void setText(String str) { //重新设置文字后重绘界面. this.Ttext=str; invalidate(); }     @Override     public void invalidate() { //重绘界面 // TODO Auto-generated method stub super.invalidate(); } public boolean onTouchEvent(MotionEvent event) { return super.onTouchEvent(event); } } 

文件2:

//继承LayoutParams.. 定义布局参数类.. public class customlayout_params extends MarginLayoutParams{ //继承自MarginLayoutParams 则自动支持margin属性.. public static final int POSITION_MIDDLE=0; public static final int POSITION_LEFT=1; public static final int POSITION_RIGHT=2; public static final int POSITION_BOTTOM=3; public static final int POSITION_RIGHTANDBOTTOM=4; public int position=POSITION_LEFT; public customlayout_params(Context c, AttributeSet attrs) { super(c, attrs); // TODO Auto-generated constructor stub   TypedArray a=c.obtainStyledAttributes(attrs, R.styleable.customlay);   position=a.getInt(R.styleable.customlay_layout_position, position);   a.recycle(); } public customlayout_params(int width,int height) { // TODO Auto-generated constructor stub super(width,height); } public customlayout_params(ViewGroup.LayoutParams source) { // TODO Auto-generated constructor stub super(source); } } 

文件3:

//自定义布局管理器示例. public class customlayout extends ViewGroup{ public customlayout(Context context) { super(context); // TODO Auto-generated constructor stub } public customlayout(Context context,AttributeSet attrs) { super(context,attrs,0); } public customlayout(Context context,AttributeSet attrs,int defStyle) { super(context,attrs,defStyle); } protected void onMeasure(int widthMeasureSpec,int heightMeasureSpec) { //计算出所有的childView的宽和高..   int widthMode=MeasureSpec.getMode(widthMeasureSpec);   int heightMode=MeasureSpec.getMode(heightMeasureSpec);   int sizeWidth=MeasureSpec.getSize(widthMeasureSpec);   int sizeHeight=MeasureSpec.getSize(heightMeasureSpec);   int layoutWidth=0; int layoutHeight=0; measureChildren(widthMeasureSpec, heightMeasureSpec); //计算出所有的ChildView的宽和高..   int cWidth=0; int cHeight=0; int count=getChildCount(); for (int i=0; i<count; i++) {    View child=getChildAt(i); measureChildWithMargins(child, widthMeasureSpec, 0, heightMeasureSpec, 0); }   customlayout_params params=null; if (widthMode==MeasureSpec.EXACTLY) {    layoutWidth=sizeWidth; } else { for (int i=0;i<count;i++) {     View child=getChildAt(i);     cWidth=child.getMeasuredWidth();     int marginWidth=cWidth+params.leftMargin+params.rightMargin; //3     layoutWidth=marginWidth>layoutWidth?marginWidth:layoutWidth; //3 } } if (heightMode==MeasureSpec.EXACTLY) {    layoutHeight=sizeHeight; } else { for (int i=0;i<count;i++) {     View child=getChildAt(i);     cHeight=child.getMeasuredHeight(); //layoutHeight=cHeight>layoutHeight?cHeight:layoutHeight; //2     int marginHeight=cHeight+params.topMargin+params.bottomMargin; //3     layoutHeight=marginHeight>layoutHeight?marginHeight:layoutHeight; //3 } } setMeasuredDimension(layoutWidth, layoutHeight); //为布局容器自定义布局属性. //在布局文件中指定布局属性,就能控制子控件在什么位置..类似相对布局RelativeLayout.. /*1.自定义LayoutParams.. 即自定义属性,布局参数类.. (明确布局容器的需求,初步定义布局属性).. 在attrs.xml中设置..   *2.继承MarginLayoutParams.. 定义布局参数类.. 定义继承了LayoutParams的类..   *3.重写generateLayoutParams()..(获取布局参数的方法)..在继承了viewGroup中设置..   *4.在布局文件中使用布局属性.. (即xmlns:dw)..在布局文件xml中设置   *5.在onMeasure和onLayout中使用布局参数.. 在继承了viewGroup中设置..   */  @Override  public LayoutParams generateLayoutParams(AttributeSet attrs) { //将返回值设置为位MarginLayoutParams.. // TODO Auto-generated method stub return new customlayout_params(getContext(), attrs); }  @Override  protected ViewGroup.LayoutParams generateLayoutParams(LayoutParams p) { // TODO Auto-generated method stub return new customlayout_params(p); }  @Override  protected LayoutParams generateDefaultLayoutParams() { // TODO Auto-generated method stub return new customlayout_params(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); }  @Override  protected boolean checkLayoutParams(ViewGroup.LayoutParams p) { // TODO Auto-generated method stub return p instanceof customlayout_params; }    @Override  protected void onLayout(boolean changed, int left, int top, int right, int bottom) { // TODO Auto-generated method stub   final int count=getChildCount();   int childMeasureWidth=0;   int childMeasureHeight=0;      customlayout_params params=null;   int layoutWidth=0;   int layoutHeight=0;    int maxChildHeight=0; for (int i=0;i<count;i++) {    View child=getChildAt(i);    childMeasureWidth=child.getMeasuredWidth();    childMeasureHeight=child.getMeasuredHeight();    params=(customlayout_params)child.getLayoutParams(); switch (params.position) { case customlayout_params.POSITION_MIDDLE:      left=(getWidth()-childMeasureWidth)/2-params.rightMargin+params.leftMargin;      top=(getHeight()-childMeasureHeight)/2+params.topMargin-params.bottomMargin; break; case customlayout_params.POSITION_LEFT:      left=0+params.leftMargin; top=0+params.topMargin; break; case customlayout_params.POSITION_RIGHT:      left=getWidth()-childMeasureWidth-params.rightMargin;      top=0+params.topMargin; break; case customlayout_params.POSITION_BOTTOM:      left=0+params.leftMargin; top=getHeight()-childMeasureHeight-params.bottomMargin; break; case customlayout_params.POSITION_RIGHTANDBOTTOM:      left=getWidth()-childMeasureWidth-params.rightMargin;      top=getHeight()-childMeasureHeight-params.bottomMargin; break; default: break; }    child.layout(left, top, left+childMeasureWidth, top+childMeasureHeight); } } } 

文件4:

public class cham_main extends Activity{  ImageView a,b,c,d,e,f,g,h,Taiji,a0,b0,c0,d0,e0,f0,g0,h0;  app_ui.chamber cha1;  @Override  protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.bazhen);      cha1=(app_ui.chamber)findViewById(R.id.cham1);   Taiji=(ImageView)findViewById(R.id.taiji); //文王即后天八卦.   a=(ImageView)findViewById(R.id.a);   b=(ImageView)findViewById(R.id.b);   c=(ImageView)findViewById(R.id.c);   d=(ImageView)findViewById(R.id.d);   e=(ImageView)findViewById(R.id.e);   f=(ImageView)findViewById(R.id.f);   g=(ImageView)findViewById(R.id.g);   h=(ImageView)findViewById(R.id.h); //先天伏羲八卦.   a0=(ImageView)findViewById(R.id.a0);   b0=(ImageView)findViewById(R.id.b0);   c0=(ImageView)findViewById(R.id.c0);   d0=(ImageView)findViewById(R.id.d0);   e0=(ImageView)findViewById(R.id.e0);   f0=(ImageView)findViewById(R.id.f0);   g0=(ImageView)findViewById(R.id.g0);   h0=(ImageView)findViewById(R.id.h0); rolat(a,35,307,1); //270+35=305 rolat(b,-192+35,192+35,1); rolat(c,-234,35,1); //x=-270+35 rolat(d,-192+35,-192+35,1); rolat(e,35,-234,1); rolat(f,192+35,-192+35,1); rolat(g,308,35,1); rolat(h,192+35,192+35,1); rolat(Taiji, 60, 60,2); rolat(a0,35,35+440,0); rolat(b0,-314+35,314+35,0); rolat(c0,-440+35,35,0); rolat(d0,-314+35,-314+35,0); rolat(e0,35,-440+35,0); rolat(f0,314+35,-314+35,0); rolat(g0,440+35,35,0); rolat(h0,314+35,314+35,0); } public void rolat(View v,int rotex,int rotey,int mode) {   int dur=-1;switch (mode) { case 0:dur=30000;break; //先天八卦移动速度.. case 1:dur=10000;break; //后天八卦移动速度.. case 2:dur=50000;break; default: dur=-1; } //中心太极移动速度..      Animation anima=new RotateAnimation(0, 359,rotex,rotey); //指定中心的旋转..359   anima.setDuration(dur);  anima.setRepeatMode(-1);   anima.setRepeatCount(100); v.startAnimation(anima); } } 

文件5:

<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="Dot"> <attr name="textColor" format="color"></attr> <!-- format即自定义属性. --> <attr name="textSize" format="dimension"></attr> <attr name="texKey" format="string"></attr> </declare-styleable> <declare-styleable name="customlay"> <!-- 自定义布局layout属性值 --> <attr name="layout_position"> <enum name="center" value="0"/> <!-- 居中 --> <enum name="left" value="1"/> <!-- 左上 --> <enum name="right" value="2"/> <!-- 右上 --> <enum name="bottom" value="3"/> <!-- 左下 --> <enum name="rightandBottom" value="4"/> <!-- 右下 --> </attr> </declare-styleable> </resources> 

文件6:

<?xml version="1.0" encoding="utf-8"?> <app_ui.customlayout xmlns:android="https://schemas.android.com/apk/res/android"     xmlns:example="https://schemas.android.com/apk/res/com.example.g_game"     android:layout_width="match_parent"     android:layout_height="match_parent"> <app_ui.chamber          android:id="@+id/cham1"         android:layout_width= "wrap_content"         android:layout_height= "wrap_content"         example:layout_position="center"/> <!-- android:background="#191970" --> <!-- 后天文王八卦 --> <ImageView android:id="@+id/a"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:background="@drawable/c_li"         example:layout_position="center"         android:tag="2"         android:rotation="0"         android:layout_marginBottom="270px"/> <ImageView android:id="@+id/b"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:background="@drawable/b_kun"         example:layout_position="center"         android:rotation="45"         android:layout_marginBottom="192px"         android:layout_marginLeft="192px"/> <!-- 192=270/1.4 --> <ImageView android:id="@+id/c"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:background="@drawable/h_dui"         android:rotation="90"         example:layout_position="center"         android:layout_marginLeft="270px"/> <ImageView android:id="@+id/d"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:background="@drawable/a_qian"         example:layout_position="center"         android:rotation="135"         android:layout_marginTop="192px"         android:layout_marginLeft="192px"/> <ImageView android:id="@+id/e"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:background="@drawable/d_kan"         android:rotation="180"         example:layout_position="center"         android:layout_marginTop="270px"/> <ImageView android:id="@+id/f"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:background="@drawable/g_gen"         example:layout_position="center"         android:rotation="225"         android:layout_marginTop="192px"         android:layout_marginRight="192px"/> <ImageView android:id="@+id/g"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:background="@drawable/e_zhen"         android:rotation="270"         example:layout_position="center"         android:layout_marginRight="270px"/> <ImageView android:id="@+id/h"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:background="@drawable/f_xun"         example:layout_position="center"         android:rotation="315"         android:layout_marginBottom="192px"         android:layout_marginRight="192px"/> <!-- 八卦太极图 --> <ImageView android:id="@+id/taiji"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:background="@drawable/wuji"         example:layout_position="center"/> <!-- 先天伏羲八卦  --> <ImageView android:id="@+id/a0"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:background="@drawable/a_qian"         example:layout_position="center"         android:tag="2"         android:rotation="0"         android:layout_marginBottom="440px"/> <ImageView android:id="@+id/b0"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:background="@drawable/f_xun"         example:layout_position="center"         android:rotation="45"         android:layout_marginBottom="314px"         android:layout_marginLeft="314px"/> <ImageView android:id="@+id/c0"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:background="@drawable/d_kan"         android:rotation="90"         example:layout_position="center"         android:layout_marginLeft="440px"/> <ImageView android:id="@+id/d0"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:background="@drawable/g_gen"         example:layout_position="center"         android:rotation="135"         android:layout_marginTop="314px"         android:layout_marginLeft="314px"/> <ImageView android:id="@+id/e0"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:background="@drawable/b_kun"         android:rotation="180"         example:layout_position="center"         android:layout_marginTop="440px"/> <ImageView android:id="@+id/f0"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:background="@drawable/e_zhen"         example:layout_position="center"         android:rotation="225"         android:layout_marginTop="314px"         android:layout_marginRight="314px"/> <ImageView android:id="@+id/g0"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:background="@drawable/c_li"         android:rotation="270"         example:layout_position="center"         android:layout_marginRight="440px"/> <ImageView android:id="@+id/h0"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:background="@drawable/h_dui"         example:layout_position="center"         android:rotation="315"         android:layout_marginBottom="314px"         android:layout_marginRight="314px"/> </app_ui.customlayout> 

加载完毕，执行

ps:嗯，我觉得真正的大佬是可以做出下面这样的效果图：