真正想要做成一件事纔會花時間花精力耐心的去學習
最近呢，對八卦圖感興趣，那就查查資料吧
看到八卦還分兩種，一種是文王后天八卦一種是伏羲先天八卦
然後呢，就想着如果動起來，什麼算卦的好像就是先天后天八卦組合起來的吧,那就試試吧，下面展示效果圖:
簡要介紹下實現原理:
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:嗯，我覺得真正的大佬是可以做出下面這樣的效果圖：
