Custom component of the satellite button (i)

The programme, which is based on the web, is documented here because of its limited level and memory.

Mobile development A good application can not be separated from the beautiful UI, the beautiful UI is inseparable from the imaginative UI components. Documenting a case of a custom UI component here is also the beginning of learning a custom UI. This example is an implementation of Satellite-menu . satellite-menu effects such as:

　　

We need to recognize this component. This component has two special properties compared to other components. One is the location of the component and the other is the distance of the component item from the button. These two properties, we hope that developers can customize.

First, in the value folder, we create an XML file Attr.xml, which puts the names of these two properties, and the custom component, in:

<?XML version= "1.0" encoding= "Utf-8"?><Resources>    <attrname= "position">        <enumname= "Left_top"value= "0"/>        <enumname= "Left_bottom"value= "1"/>        <enumname= "Right_top"value= "2"/>        <enumname= "Right_bottom"value= "3"/>    </attr>    <attrname= "radius"format= "Dimension"/>    <declare-styleablename= "CustomButton">        <attrname= "position"/>        <attrname= "radius"/>    </declare-styleable></Resources>

Whereposition is the position of the button, which is an enumerated property, the button can only exist in the corners of the screen. radius is a dimension property that represents the distance of the component item from the button. declare-styleable is used to add custom properties to custom components. The above paragraph is to add two custom attributes to declare-styleable .

The second step is to create a new CustomButton class and complete the initialization.

　　

ImportAndroid.content.Context;ImportAndroid.content.res.TypedArray;ImportAndroid.util.AttributeSet;ImportAndroid.util.TypedValue;ImportAndroid.view.View;ImportAndroid.view.ViewGroup;ImportCOM.MEMEDA.LSY.MYCUSTOMBUTTON.R;/*** Created by Administrator on 2015/4/15.*/ Public classCustomButtonextendsViewGroup {Private Static Final intPos_left_top = 0; Private Static Final intPos_left_bottom = 1; Private Static Final intPos_right_top = 2; Private Static Final intPos_right_bottom = 3; PrivatePosition mposition=Position.right_bottom; Private intMradius = 100; PrivateStatus Mstatus =Status.close; PrivateOnitemclicklistener Monitemclicklistener; /*** Menu's main button*/    PrivateView Mcbutton;  Public voidSetmonitemclicklistener (Onitemclicklistener monitemclicklistener) { This. Monitemclicklistener =Monitemclicklistener; }     Public voidsetmposition (Position mposition) { This. mposition =mposition; }     Public voidSetmradius (intMradius) {         This. Mradius =Mradius; }    /*** Menu Position Enumeration class*/     Public enumposition{left_top, Left_bottom, Right_top, right_bottom}/*** Menu Switch Enumeration class*/     Public enumstatus{Open,close}/*** Click on the callback interface of the sub-menu*/     Public Interfaceonitemclicklistener{voidOnClick (View view,intposition); }     PublicCustomButton (Context context) { This(Context,NULL); }     PublicCustomButton (Context context, AttributeSet attrs) { This(context,attrs,0); }     PublicCustomButton (context context, AttributeSet attrs,intdefstyleattr) {        Super(context, attrs, defstyleattr); //gets the initial value of the Mradius 100DPMradius = (int) Typedvalue.applydimension (typedvalue.complex_unit_dip,100, Getresources (). Getdisplaymetrics ()); //get an array of component parametersTypedArray a = Context.gettheme (). Obtainstyledattributes (Attrs, r.styleable.custombutton,defstyleattr,0); //Get button Position        intpos =A.getint (R.styleable.custombutton_position,pos_right_bottom); Switch(POS) { Casepos_left_top:mposition=Position.left_top;  Break;  Casepos_left_bottom:mposition=Position.left_bottom;  Break;  Casepos_right_top:mposition=Position.right_top;  Break;  Casepos_right_bottom:mposition=Position.right_bottom;  Break; }        //get the item's distance from the buttonMradius = (int) a.getdimension (R.styleable.custombutton_radius, Mradius);    A.recycle (); } @Overrideprotected voidOnLayout (BooleanChangedintLintTintRintb) {}}

At this point, the custom component's properties and read-out properties have been implemented, and we can use it in the layout file.

　　

Xmlns:custombutton = "Http://schemas.android.com/apk/res-auto"
    < Com.memeda.lsy.mycustombutton.view.CustomButton         Android:layout_width = "Match_parent"         android:layout_height= "Match_parent"        custombutton:position= "Right_ Bottom "        custombutton:radius=" 120DP ">        </  Com.memeda.lsy.mycustombutton.view.CustomButton>

Above, the next section will start drawing the appearance of the custom component.

　　

Custom component of the satellite button (i)