Android: Custom Composite Control Weight (bottom menu bar of the imitation Cat's Eye) and androidweight

Android: Custom Composite Control Weight (bottom menu bar of the imitation Cat's Eye) and androidweight

In our actual development, we will encounter some interfaces with similar or identical layout structures, such as the application setting interface and the tab button interface. At this time, it may be the initial idea for beginners to draw xml files one by one. As experience increases, they may learn how to use the include tag to import similar or identical la S, this improves performance and reduces code. In the future, custom controls can achieve this purpose. This article uses custom composite controls to simulate the menu bar at the bottom of the Cat's Eye.

1. Custom composite control attributes: Create the 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"/> <! -- Display the default text --> <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/> definition of an attribute: for example, <attr name = "contentTextSize" format = "dimension"/> defines the size of the text, contentTextSize refers to the attribute name (and textSize commonly used in xml). format defines the specific attribute type of contentTextSize.

The following describes the specific types of formats:

(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. (10) flag: bitwise OR operation.

2. after defining the properties of the control, you need to obtain and use these properties in the Code. when looking at the source code, you will find that all the properties defined by the system are obtained through the TypedArray, the method is as follows:

       TypedArray ta = mContext.obtainStyledAttributes(attrs, R.styleable.TabItemView);

The custom property set returned by the preceding method. After the result is used up, you need to manually release it. ta. recycle ();

After the TypedArray attribute set is obtained, different attributes are obtained as needed. Different methods are available for obtaining different attributes. The following are some commonly used methods for obtaining attributes:

(1) getDimensionPixelSize: obtains the size (spacing, text size, etc)

(2) getResourceId: Get the resource id (image, etc)

(3) getString: Get the string

(4) getBoolean: Get a Boolean Value

(5) getColor: obtains the color value.

(6) getFloat: Get the floating point type value

The complete code of the TabItemView custom Composite Control is as follows:

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; // The tab image Displays private TextView contentText; // The tab text prompts private int logoBackResourceId; // image resource idprivate String textString; // text String private int textColor; // text display color private float textSize; // text display size private int contentLogoSize; // display the image size. private static final float defaultTextSize = 16; // default text color: private int defaultColor, selectedColor; // default color: private TabClickListner mClickListner; // click the listener 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 = context; init (attrs); addView ();} private void init (AttributeSet attrs) {this. setOnClickListener (this); TypedArray ta = mContext. obtainStyledAttributes (attrs, R. styleable. tabItemView); // obtain the attribute set logoBackResourceId = ta. getResourceId (R. styleable. tabItemView_contentLogoBack,-1); // obtain the image resource idtextColor = ta. getColor (R. styleable. tabItemView_contentTextColor, <span style = "font-family: Arial, Helvetica, sans-serif;"> getResources (). getColor (android. r. color. black); // obtain the text color </span>

TextSize = ta. getDimensionPixelSize (R. styleable. tabItemView_contentTextSize, <span style = "font-family: Arial, Helvetica, sans-serif;"> PhoneUtils. dp2px (mContext, defaultTextSize); // obtain the displayed text size </span>

TextString = ta. getString (R. styleable. tabItemView_contentTextString); // obtain the displayed text contentLogoSize = ta. getDimensionPixelSize (R. styleable. tabItemView_contentLogoSize, <span style = "font-family: Arial, Helvetica, sans-serif;"> LayoutParams. WRAP_CONTENT); // obtain the size of the displayed image </span>

Ta. recycle (); defaultColor = mContext. getResources (). getColor (R. color. textcolor_black_b3); selectedColor = mContext. getResources (). getColor (R. color. textcolor_red_d);} // Add the control private void addView () {contentLogo = new ImageView (mContext); contentLogo. setFocusable (false); contentLogo. setClickable (false); LayoutParams logoParams = new LayoutParams (contentLogoSize, contentLogoSize); contentLogo. setLayoutP Arams (logoParams); if (logoBackResourceId! =-1) {contentLogo. setBackgroundResource (logoBackResourceId);} else {throw new InflateException ("no filling image resource 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_UN IT_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 listening event */public void setTabClickListener (TabClickListner listner) {this. mClickListner = listner;}/*** set the filling image resource */public void setContentLogoBack (int resourceId) {contentLogo. setBackgroundResource (resourceId);}/*** set the filled text */public void setContentTextString (String text) {if (contentText! = Null) {contentText. setText (text) ;}/ *** set the selected status */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 click

3. Get the control, and then use it in the layout.

Create the tab_layout.xml file in res/layout/. The Code is as follows:

<?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"    android:layout_height="wrap_content"    android:orientation="horizontal"     android:background="@color/background_bg7"    android:paddingTop="@dimen/tab_padding"    android:paddingBottom="@dimen/tab_padding">    <com.dandy.weights.TabItemView        android:id="@+id/movie"        style="@style/TabItemStyle"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:layout_weight="1"        android:gravity="center"        android:orientation="vertical"        tabItem:contentLogoBack="@drawable/selector_tab_movie"        tabItem:contentTextString="@string/movie" />    <com.dandy.weights.TabItemView        android:id="@+id/cinema"        style="@style/TabItemStyle"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:layout_weight="1"        android:gravity="center"        android:orientation="vertical"        tabItem:contentLogoBack="@drawable/selector_tab_cinema"        tabItem:contentTextString="@string/cinema" />    <com.dandy.weights.TabItemView        android:id="@+id/community"        style="@style/TabItemStyle"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:layout_weight="1"        android:gravity="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"        android:layout_weight="1"        android:gravity="center"        android:orientation="vertical"        tabItem:contentLogoBack="@drawable/selector_tab_mine"        tabItem:contentTextString="@string/mine" /></LinearLayout>

In the Code: xmlns: tabItem = "http://schemas.android.com/apk/res/com.demo.dandy", this code is associated with your custom properties, where com. demo. dandy refers to the package name of your application, tabItem is the reference name

In fact, it is to copy xmlns: android = "http://schemas.android.com/apk/res/android, and replace" android" with "OK.

The specific process is: In the constructor, obtain the TypedArray attribute set, obtain the required attribute values, dynamically Add the controls ImageView and TextView, and assign the defined attributes to them.

Run the following command:

Source code download link

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.