An analysis of the effect of Android custom View on the satellite menu _android

An overview:

Recently has been committed to the Android custom view learning, mainly in the "Android Heroes biography", as well as Csdn blog, the great God and wing of the great God of some articles, wrote in detail, his whim, learned to write a similar satellite effect to achieve a custom view, Share to the blog, look at you pointing twos. Write more rough, forgive me. (because it is written under the Linux system, the effect chart I shoot directly with the mobile phone, ugly, we pay attention to see an effect, do not spray).

First look at the effect of the picture, a little can not bear looking straight:

customizing View Preparation:

(1) Create a class that inherits from view;

(2) Rewrite the constructor function;

(3) Define attributes.

(4) rewrite onmeasure (), OnLayout () method.

OK, no more nonsense, ready to serve.

Two related implementations

First is the custom view, the rewrite constructor, where I'm directly inheriting the viewgroup and pasting the code:

Public Moonview {This 
(context,null); 
} 
Public Moonview (context, AttributeSet attrs) {This 
(context, attrs,0); 
} 
Public Moonview (context, AttributeSet attrs, int defstyleattr) { 
Super (context, attrs, defstyleattr); 
}

Here you need to read the properties that are taken from the definition, so call the constructor with three arguments.

Custom properties, I know that the definition of two, one is the radius of the menu arc, there is a menu in the position of the screen, here can be set in the upper left corner, lower left corner, upper right corner, lower right corner. The code is as follows:

<?xml version= "1.0" encoding= "Utf-8"?> 
<resources> 
<declare-styleable name= "Moonattrs" > 
<attr name= "Mradius" format= "integer" ></attr><!--menu round radius--> <attr name= 
"Mposition" ><!--Satellite Menu screen location--> 
<enum name= "Lefttop" value= "-2" ></enum><!--upper left corner--> 
<enum Name= "Leftbottom" value= "-1" ></enum><!--lower left corner--> 
<enum name= "Righttop" value= "-3" ></ enum><!--upper right corner--> 
<enum name= "Rightbottom" value= "-4" ></enum><!--lower right corner--> 
</ attr> 
</declare-styleable> 
</resources>

Then in the layout file, refer to the custom view, configuration properties:

<?xml version= "1.0" encoding= "Utf-8"?> <com.example.liujibin.testmyview3.myview.moonview xmlns:android= " Http://schemas.android.com/apk/res/android "xmlns:custom=" http://schemas.android.com/apk/res/ COM.EXAMPLE.LIUJIBIN.TESTMYVIEW3 "android:orientation=" vertical "android:layout_width=" Match_parent "Android: layout_height= "Match_parent" custom:mradius= "custom:mposition=" Rightbottom <imageview > Android:layout_ Width= "Wrap_content" android:layout_height= "wrap_content" android:background= "@mipmap/sapi_icon_add_account" > <imageview android:layout_width= "wrap_content" android:layout_height= "Wrap_content" @ Mipmap/sapi_icon_add_account "/> <imageview android:layout_width=" wrap_content "android:layout_height=" Wrap_ Content "android:background=" @mipmap/sapi_icon_add_account "/> <imageview android:layout_width=" wrap_content 
"Android:layout_height=" wrap_content "android:background=" @mipmap/sapi_icon_add_account "/><imageview android:layout_width= "wrap_content" android:layout_height= "Wrap_content" @ Mipmap/sapi_icon_add_account "/> <imageview android:layout_width=" wrap_content "android:layout_height=" Wrap_ Content "android:background=" @mipmap/sapi_icon_add_account "/> </ Com.example.liujibin.testmyview3.myview.moonview>

Finally, we need to get the associated property values in the constructor in the custom view class:

Public Moonview (context, AttributeSet attrs, int defstyleattr) { 
Super (context, attrs, defstyleattr); 
Get related properties 
TypedArray ta = Context.gettheme (). Obtainstyledattributes (Attrs, R.styleable.moonattrs, 
defstyleattr,0); 
Mraius = Ta.getint (r.styleable.moonattrs_mradius,500); 
Position = Ta.getint (r.styleable.moonattrs_mposition,-1); 
}

By doing the above preparation, we can measure and layout the components.

@Override 
protected void onmeasure (int widthmeasurespec, int heightmeasurespec) { 
super.onmeasure ( Widthmeasurespec, Heightmeasurespec); 
Count = Getchildcount ()-1; 
Angle = 90/(count-1); 

int count = Getchildcount (); 
for (int i =0;i< count;i++) { 
measurechild (Getchildat (i), widthmeasurespec,heightmeasurespec); 
} 

Count gets the number of buttons, one is the center point, does not participate in the calculation, angle is the angle of each button from the baseline, here to 90 degrees, fixed in this range evenly distributed.

First fix the center point in place:

 @Override protected void OnLayout (Boolean b, int i, int i1, int i2, int i3) {if (Ischa 
nged) {layoutbottom (); 
} private void Layoutbottom () {View view = Getchildat (0); 
Switch (position) {case-1: btml = 0; 
btmt = Getmeasuredheight ()-view.getmeasuredheight (); 
BTMR = View.getmeasuredwidth (); 
BTMB = Getmeasuredheight (); 
Break 
Case-2: btml = 0; 
btmt = 0; 
BTMR = View.getmeasuredwidth (); 
BTMB = View.getmeasuredheight (); 
Break 
Case-3: btml = Getmeasuredwidth ()-view.getmeasuredwidth (); 
btmt = 0; 
BTMR = Getmeasuredwidth (); 
BTMB = View.getmeasuredheight (); 
Break 
Case-4: btml = Getmeasuredwidth ()-view.getmeasuredwidth (); 
btmt = Getmeasuredheight ()-view.getmeasuredheight (); 
BTMR = Getmeasuredwidth (); 
BTMB = Getmeasuredheight (); 
Break 
} btmwidth = View.getmeasuredwidth (); 
Btmheight = View.getmeasuredheight (); 
View.setonclicklistener (this); 
View.layout (BTML,BTMT,BTMR,BTMB); }

The value of the position to see the attribute is clear, the center point of the fixed position. and register the Click event.

Now start to give the rest of the button layout and hide the button:

@Override protected void OnLayout (Boolean b, int i, int i1, int i2, int i3) {if (ischanged) {layoutbottom (); 
int count = Getchildcount (); 
for (int k = 0;k < count-1;k++) {View view = Getchildat (k+1); 
int childwidth = View.getmeasuredwidth (); 
int childheight = View.getmeasuredheight (); 
int childx = (int) (Mraius* (Math.sin (angle* (k) *math.pi/180))); 
int childy = (int) (Mraius* (Math.Cos (angle* (k) *math.pi/180))); 
int left = 0; 
int top = 0; 
int right = 0; 
int bottom = 0; 
Switch (position) {case-1: left = CHILDX+BTMWIDTH/2-CHILDWIDTH/2; 
Top =getmeasuredheight ()-(CHILDY+CHILDHEIGHT/2+BTMHEIGHT/2); 
right = CHILDX+BTMWIDTH/2+CHILDWIDTH/2; 
Bottom =getmeasuredheight ()-(Childy + BTMHEIGHT/2) + CHILDHEIGHT/2; 
Break 
Case-2: left = CHILDX+BTMWIDTH/2-CHILDWIDTH/2; 
Top =CHILDY-CHILDHEIGHT/2+BTMHEIGHT/2; 
right = CHILDX+BTMWIDTH/2+CHILDWIDTH/2; 
Bottom = Childy + BTMHEIGHT/2 + childheight/2; 
Break Case-3: left = Getmeasuredwidth ()-(CHILDX+BTMWIDTH/2+CHILDWIDTH/2);
Top =CHILDY-CHILDHEIGHT/2+BTMHEIGHT/2; 
right = Getmeasuredwidth ()-(CHILDX+BTMWIDTH/2+CHILDWIDTH/2) +childwidth; 
Bottom = Childy + BTMHEIGHT/2 + childheight/2; 
Break 
Case-4: left = Getmeasuredwidth ()-(CHILDX+BTMWIDTH/2+CHILDWIDTH/2); 
Top =getmeasuredheight ()-(CHILDY+CHILDHEIGHT/2+BTMHEIGHT/2); 
right = Getmeasuredwidth ()-(CHILDX+BTMWIDTH/2+CHILDWIDTH/2) +childwidth; 
Bottom =getmeasuredheight ()-(Childy + BTMHEIGHT/2) + CHILDHEIGHT/2; 
Break 
} view.layout (Left,top,right,bottom); 
View.setvisibility (View.gone); } 
} 
}

Now we implement the Click event:

@Override public void OnClick (view view) {if (ischanged) {int count = Getchildcount (); 
for (int i = 0;i < count-1;i++) {View Childview = Getchildat (i+1); 
int childx = (int) (Mraius* (Math.sin (angle* (i) *math.pi/180))); 
int childy = (int) (Mraius* (Math.Cos (angle* (i) *math.pi/180))); 
int childwidth = View.getmeasuredwidth (); 
int childheight = View.getmeasuredheight (); 
int left = 0; 
int top = 0; 
Translateanimation ta = null; 
Switch (position) {case-1: left = CHILDX+BTMWIDTH/2-CHILDWIDTH/2; 
Top =getmeasuredheight ()-(CHILDY+CHILDHEIGHT/2+BTMHEIGHT/2); 
Ta = new Translateanimation (-(Left+childview.getmeasuredwidth ()), 0,getmeasuredheight ()-top,0); 
Break 
Case-2: left = CHILDX+BTMWIDTH/2-CHILDWIDTH/2; 
Top =CHILDY-CHILDHEIGHT/2+BTMHEIGHT/2; 
Ta = new Translateanimation (-(Left+childview.getmeasuredwidth ()), 0,-top,0); 
Break 
Case-3: left = Getmeasuredwidth ()-(CHILDX+BTMWIDTH/2+CHILDWIDTH/2); 
Top =CHILDY-CHILDHEIGHT/2+BTMHEIGHT/2; Ta = new Translateanimation (GetmeasuRedwidth ()-(Left+childview.getmeasuredwidth ()), 0,-top,0); 
Break 
Case-4: left = Getmeasuredwidth ()-(CHILDX+BTMWIDTH/2+CHILDWIDTH/2); 
Top =getmeasuredheight ()-(CHILDY+CHILDHEIGHT/2+BTMHEIGHT/2); 
Ta = new Translateanimation (Getmeasuredwidth ()-(Left+childview.getmeasuredwidth ()), 0,getmeasuredheight ()-top,0); 
Break 
} ta.setduration (500); 
Childview.setanimation (TA); 
Childview.setvisibility (view.visible); 
} ischanged = false; 
}else{int count = Getchildcount (); 
for (int i = 0;i < count-1;i++) {View Childview = Getchildat (i+1); 
int childx = (int) (Mraius* (Math.sin (angle* (i) *math.pi/180))); 
int childy = (int) (Mraius* (Math.Cos (angle* (i) *math.pi/180))); 
int childwidth = View.getmeasuredwidth (); 
int childheight = View.getmeasuredheight (); 
int left = 0; 
int top = 0; 
Translateanimation ta = null; 
Switch (position) {case-1: left = CHILDX+BTMWIDTH/2-CHILDWIDTH/2; 
Top =getmeasuredheight ()-(CHILDY+CHILDHEIGHT/2+BTMHEIGHT/2); Ta = new Translateanimation (0,-(left+chIldview.getmeasuredwidth ()), 0,getmeasuredheight ()-top); 
Break 
Case-2: left = CHILDX+BTMWIDTH/2-CHILDWIDTH/2; 
Top =CHILDY-CHILDHEIGHT/2+BTMHEIGHT/2; 
Ta = new Translateanimation (0,-(Left+childview.getmeasuredwidth ()), 0,-top); 
Break 
Case-3: left = Getmeasuredwidth ()-(CHILDX+BTMWIDTH/2+CHILDWIDTH/2); 
Top =CHILDY-CHILDHEIGHT/2+BTMHEIGHT/2; 
Ta = new Translateanimation (0,getmeasuredwidth ()-(Left+childview.getmeasuredwidth ()), 0,-top); 
Break 
Case-4: left = Getmeasuredwidth ()-(CHILDX+BTMWIDTH/2+CHILDWIDTH/2); 
Top =getmeasuredheight ()-(CHILDY+CHILDHEIGHT/2+BTMHEIGHT/2); 
Ta = new Translateanimation (0,getmeasuredwidth ()-(Left+childview.getmeasuredwidth ()), 0,getmeasuredheight ()-top); 
Break 
} ta.setduration (500); 
Childview.setanimation (TA); 
Childview.setvisibility (View.gone); 
} ischanged = true; } 
}

Set up to click on the display as well as hide it with a fluttering animation effect.

Four corner effects are as follows:

The above is a small set to introduce the Android custom view to achieve the Satellite menu effect analysis, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!