Android: Custom Combo Control weight (high imitation cat-eye bottom menu bar)

in our actual development, we will encounter some layout structure similar or the same interface, such as the application of the Settings Interface, tab interface and so on. At this time, for beginners, it may be the original idea that the XML is drawn out, perhaps with the accumulation of experience, but also learn to use the Include tag, import similar or the same layout, improve performance and reduce the code, and later, the custom control can achieve this goal. This article is simply the use of a custom combo control to mimic the cat's Eye bottom menu bar.

1. Custom Combo Control Properties: Create a Attrs.xml file in the Res/values directory

    <declare-styleable name= "Tabitemview" >        <attr name= "contenttextsize" format= "Dimension"/> <!-- Font Size-        <attr name= "contenttextcolor" format= "Color"/> <!--font Color--        <attr name= " Contenttextstring "format=" string "/> <!--default Text displayed--        <attr name=" contentlogoback "format=" reference "/> <!--Item background--        <attr name=" contentlogosize "format=" Dimension "/> </declare-styleable    >

Tabitemview: Simply put, it is the name of the attribute combination;

<attr/> The definition of an attribute: such as <attr name= "Contenttextsize" format= "Dimension"/>, defined as the size of the text, Contenttextsize refers to attribute names (and textsize that are commonly used in our XML), and format defines contenttextsize specific property types.

The following is simply the specific type of format:

(1) Reference: Refer to a resource ID. (2) Color: color value.
(3) Boolean: Boolean value. (4) Dimension: Dimension value.
(5) Float: floating point value. (6) Integer: integer value.
(7) String: String. (8) Fraction: percentage.
(9) Enum: enumeration value. (TEN) Flag: bitwise OR operation.

2. The properties of the control are defined, and then it is to get the use of these properties in the code, when looking at the source code, you will find that the system-defined properties are obtained by Typedarray this thing, get the method as follows:

       TypedArray ta = mcontext.obtainstyledattributes (attrs, R.styleable.tabitemview);

The above method returns a collection of our custom attributes, which need to be released manually after the last run, ta.recycle ();

After the Typedarray attribute collection is obtained, the following is the need to get different properties, for different properties have different access methods, the following is a few more commonly used property acquisition method:

(1) Getdimensionpixelsize: Get Size (spacing, text size, etc.)

(2) Getresourceid: Get resource ID (picture, etc.)

(3) getString: Get string

(4) Getboolean: Gets the Boolean value

(5) GetColor: Get color values

(6) GetFloat: Get floating-point type value

Here is the complete code for the Tabitemview custom combo control:

Package Com.dandy.weights;import Com.dandy.utils.phoneutils;import Com.demo.dandy.r;import android.content.Context ; Import Android.content.res.typedarray;import Android.text.textutils;import Android.util.attributeset;import Android.util.typedvalue;import Android.view.inflateexception;import Android.view.view;import Android.widget.imageview;import Android.widget.linearlayout;import Android.widget.textview;import Android.view.view.onclicklistener;public class Tabitemview extends LinearLayout implements Onclicklistener{private Context mcontext;private ImageView contentlogo;//tab picture shows private TextView contenttext;//tab text hint private int logobackresourceid;//Picture Resource idprivate string textstring;//literal string private int textcolor;//text display color private float textsize;// Text display size private int contentlogosize;//display picture size private static final float defaulttextsize = 16;//text default Big Bear private int defaultcolor,selectedcolor;//default Color Private Tabclicklistner mclicklistner;//Click Listen Callback Event public Tabitemview (Context Context) {This (context, null);}Public Tabitemview (context context, AttributeSet Attrs) {This (context, attrs, 0);} Public Tabitemview (context context, AttributeSet attrs, int defstyle) {Super (context, attrs, defstyle); this.mcontext = Co Ntext;init (attrs); AddView ();} private void init (AttributeSet attrs) {This.setonclicklistener (this); TypedArray ta = mcontext.obtainstyledattributes (attrs, R.styleable.tabitemview);//Get property Set Logobackresourceid = Ta.getresourceid (R.styleable.tabitemview_contentlogoback,-1);//Get picture resource Idtextcolor = Ta.getcolor ( R.styleable.tabitemview_contenttextcolor,<span style= "font-family:arial, Helvetica, Sans-serif;" >getresources (). GetColor (Android. R.color.black));//Get text color </span>

TextSize = ta.getdimensionpixelsize (R.styleable.tabitemview_contenttextsize,<span style= "font-family:arial, Helvetica, Sans-serif; " >PHONEUTILS.DP2PX (Mcontext, defaulttextsize));//Gets the displayed text size </span>

TextString = ta.getstring (r.styleable.tabitemview_contenttextstring);//Gets the displayed text Contentlogosize = Ta.getdimensionpixelsize (R.styleable.tabitemview_contentlogosize,<span style= "font-family:arial, Helvetica, Sans-serif; " >layoutparams.wrap_content);//Get the size of the display picture </span>

Ta.recycle ();d Efaultcolor = Mcontext.getresources (). GetColor (R.COLOR.TEXTCOLOR_BLACK_B3); Selectedcolor = Mcontext.getresources (). GetColor (r.color.textcolor_red_d);} Add a control that displays pictures and text private void AddView () {Contentlogo = new ImageView (mcontext); contentlogo.setfocusable (false); Contentlogo.setclickable (FALSE); Layoutparams logoparams = new Layoutparams (contentlogosize,contentlogosize); Contentlogo.setlayoutparams (logoParams ); if (Logobackresourceid! =-1) {Contentlogo.setbackgroundresource (Logobackresourceid);} Else{throw New Inflateexception ("Fill picture resource not set");} This.addview (Contentlogo); if (! Textutils.isempty (TextString)) {contenttext = new TextView (mcontext); contenttext.setfocusable (false); Contenttext.setclickable (FALSE); Layoutparams textparams = new Layoutparams (layoutparams.wrap_content,layoutparams.wrap_content); Textparams.topmargin = phoneutils.dp2px (mcontext,3); Contenttext.setlayoutparams (Textparams); Contenttext.settextcolor (TextColor); contenttext.settextsize (typedvalue.complex_unit_px,textsize); contEnttext.settext (TextString); This.addview (ContentText);}} @Overridepublic void OnClick (View v) {settabselected (true); if (mclicklistner! = null) {Mclicklistner.ontabclick (this) ;//Callback Click event}}/** * Set Click listen event */public void Settabclicklistener (Tabclicklistner listner) {this.mclicklistner = Listner;} /** * Set fill picture resource */public void setcontentlogoback (int resourceId) {contentlogo.setbackgroundresource (resourceId);} /** * Set fill text */public void setcontenttextstring (String text) {if (ContentText! = null) {contenttext.settext (text);}} /** * Sets the selected state */public void settabselected (Boolean enable) {if (Contentlogo! = null) {contentlogo.setselected (enable);} if (contenttext! = null) {if (enable) {Contenttext.settextcolor (selectedcolor);} Else{contenttext.settextcolor (DefaultColor);}}} public interface Tabclicklistner{void Ontabclick (view view);}}

Tabclicklistener: Callback Interface for control clicks

3. The control is done, then the specific use in the layout

Create the Tab_layout.xml file in res/layout/with the following code:

<?xml version= "1.0" encoding= "Utf-8"? ><linearlayout xmlns:android= "http://schemas.android.com/apk/res/ Android "xmlns:tabitem=" Http://schemas.android.com/apk/res/com.demo.dandy "android:layout_width=" Match_parent "an droid:layout_height= "wrap_content" android:orientation= "horizontal" android:background= "@color/background_bg7" a ndroid:paddingtop= "@dimen/tab_padding" android:paddingbottom= "@dimen/tab_padding" > < Com.dandy.weights.TabItemView android:id= "@+id/movie" style= "@style/tabitemstyle" Android:layout_widt        H= "0DP" android:layout_height= "Wrap_content" android:layout_weight= "1" android:gravity= "center" android:orientation= "vertical" tabitem:contentlogoback= "@drawable/selector_tab_movie" tabitem:contenttexts tring= "@string/movie"/> <com.dandy.weights.tabitemview android:id= "@+id/cinema" style= "@style/tabi Temstyle "android:layout_width=" 0DP "Android:layout_height= "Wrap_content" android:layout_weight= "1" android:gravity= "center" android:orientation= "ve Rtical "tabitem:contentlogoback=" @drawable/selector_tab_cinema "tabitem:contenttextstring=" @string/cinema "/ > <com.dandy.weights.tabitemview android:id= "@+id/community" style= "@style/tabitemstyle" and Roid:layout_width= "0DP" android:layout_height= "Wrap_content" android:layout_weight= "1" android:gravit        y= "center" android:orientation= "vertical" tabitem:contentlogoback= "@drawable/selector_tab_community"        tabitem:contenttextstring= "@string/community"/> <com.dandy.weights.tabitemview android:id= "@+id/mine" style= "@style/tabitemstyle" android:layout_width= "0DP" android:layout_height= "Wrap_content" Andro id:layout_weight= "1" android:gravity= "center" android:orientation= "vertical" tabitem:contentlogoback= "@drawable/selector_tab_Mine "tabitem:contenttextstring=" @string/mine "/></linearlayout> 

Code: xmlns:tabitem= "Http://schemas.android.com/apk/res/com.demo.dandy", this code is associated with your custom property, where Com.demo.dandy refers to the package name you apply, and TabItem is the reference name

It 's actually a copy . xmlns:android= "Http://schemas.android.com/apk/res/android, replace Android is OK.

The process is: in the constructor, get the Typedarray property collection, then get the individual property values you want, and then add the controls ImageView and TextView dynamically, and assign the corresponding defined properties to them.

Run as follows:

Source code Download link

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Android: Custom Combo Control weight (high imitation cat-eye bottom menu bar)