真正想要做成一件事才会花时间花精力耐心的去学习
最近呢，对八卦图感兴趣，那就查查资料吧
看到八卦还分两种，一种是文王后天八卦一种是伏羲先天八卦
然后呢，就想着如果动起来，什么算卦的好像就是先天后天八卦组合起来的吧,那就试试吧，下面展示效果图:
简要介绍下实现原理:
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="http://schemas.android.com/apk/res/android"
xmlns:example="http://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:嗯，我觉得真正的大佬是可以做出下面这样的效果图：
