Android custom controls-my phone keypad

Source: Internet
Author: User

For Android user-defined controls, I have previously written two. One is to simply inherit the view, and the other is to inherit the layout to implement a provincial/municipal linkage control. In this article, we will inherit the viewgroup to implement a phone call keypad. I have a consistent style, so I am too lazy to talk about a lot of things. I can directly write the code and make everything in comments!

1. myphonecard. Java

/***** Customize a 4*3 layout Control for dialing, ***/public class myphonecard extends viewgroup {Private Static final int columns = 3; private Static final int rows = 4; Private Static final int num_button = columns * Rows; private view [] mbuttons = new view [num_button]; private int mbuttonwidth; private int mbuttonheight; private int mpaddingleft; private int mpaddingright; private int mpaddingtop; private int mpaddingbottom; PR Ivate int mwidthinc; private int mheightinc; private int mwidth; private int mheight; Public myphonecard (context) {super (context);} public myphonecard (context, attributeset attrs) {super (context, attrs);} public myphonecard (context, attributeset attrs, int defstyle) {super (context, attrs, defstyle );} /*** when all controls are transferred from XML to the memory, the triggered action * obtains the control size here and calculates the total width and height required by the entire viewgroup */@ overrideprotected Void onfinishinflate () {super. onfinishinflate (); final view [] btns = mbuttons; For (INT I = 0; I <num_button; I ++) {btns [I] = This. getchildat (I); btns [I]. measure (measurespec. unspecified, measurespec. unspecified);} // cache size final view child = btns [0]; mbuttonwidth = child. getmeasuredwidth (); mbuttonheight = child. getmeasuredheight (); mpaddingleft = This. getpaddingleft (); mpaddingright = This. getpaddingright (); mpad Dingtop = This. getpaddingtop (); mpaddingbottom = This. callback (); mwidthinc = mbuttonwidth + mpaddingleft + mpaddingright; mheightinc = mbuttonheight + mpaddingtop + mpaddingbottom; mwidth = mwidthinc * columns; mheight = done* rows; log. V ("Finish inflate:", "btnwidth =" + mbuttonwidth + ", btnheight =" + mbuttonheight + ", padding:" + mpaddingleft + "," + mpaddingtop + ", "+ mpaddingright +", "+ mpaddingbottom );}/** * This method is called after onfinishinflate and before onlayout. This method calls twice */@ overrideprotected void onmeasure (INT widthmeasurespec, int heightmeasurespec) {super. onmeasure (widthmeasurespec, heightmeasurespec); log. V ("viewgroup size: width =", mwidth + ""); log. V ("viewgroup size: Height =", mheight + ""); Final int width = resolvesize (mwidth, widthmeasurespec); // input the expected width, obtain the measured width final int Height = resolvesize (mheight, heightmeasurespec); // input the desired height to obtain the measured height log. V ("viewgro Up measured size: width = ", width +" "); log. V ("viewgroup measured size: Height =", height + ""); // you need to set the result after re-calculation. The following method must call setmeasureddimension (width, height);}/***. This method is executed after onmeasure. This custom control contains 12 child controls (each small key ), therefore, rewrite this method to * call the layout of each key and place them one by one * 4*3, which is very simple, A nested loop */@ overrideprotected void onlayout (Boolean changed, int left, int top, int right, int bottom) {final view [] buttons = mbuttons; int I = 0; log. V ("bottom:", bottom + ""); log. V ("TOP", top + ""); int y = (bottom-top)-mheight + mpaddingtop; // actually, bottom-Top = mheight, so y = mpaddingtoplog. V ("Y =", Y + ""); For (int row = 0; row <rows; row ++) {int x = mpaddingleft; for (INT Col = 0; Col <columns; Col ++) {buttons [I]. layout (X, Y, x + mbuttonwidth, Y + mbuttonheight); X = x + mwidthinc; I ++ ;}y = Y + mheightinc ;}}}

2. layout file:

<?xml version="1.0" encoding="utf-8"?><demo.phone.card.MyPhoneCard  xmlns:android="http://schemas.android.com/apk/res/android"   android:id = "@+id/dialpad"   android:paddingLeft="7dp"   android:paddingRight="7dp"   android:paddingTop="6dp"   android:paddingBottom="6dp"   android:layout_gravity="center"   android:layout_width="wrap_content"  android:layout_height="wrap_content"   android:layout_marginBottom="5dp">    <ImageButton android:id="@+id/one"   android:src="@drawable/dial_num_1_no_vm"   style="@style/dial_btn_style"   />    <ImageButton android:id="@+id/two"   android:src="@drawable/dial_num_2"   style="@style/dial_btn_style"/>      <ImageButton android:id="@+id/three"   android:src="@drawable/dial_num_3"   style="@style/dial_btn_style"/>      <ImageButton android:id="@+id/four"   android:src="@drawable/dial_num_4"   style="@style/dial_btn_style"/>      <ImageButton android:id="@+id/five"   android:src="@drawable/dial_num_5"   style="@style/dial_btn_style"/>    <ImageButton android:id="@+id/six"   android:src="@drawable/dial_num_6"   style="@style/dial_btn_style"/>     <ImageButton android:id="@+id/seven"   android:src="@drawable/dial_num_7"   style="@style/dial_btn_style"/>    <ImageButton android:id="@+id/eight"   android:src="@drawable/dial_num_8"   style="@style/dial_btn_style"/>    <ImageButton android:id="@+id/nine"   android:src="@drawable/dial_num_9"   style="@style/dial_btn_style"/>      <ImageButton android:id="@+id/star"   android:src="@drawable/dial_num_star"   style="@style/dial_btn_style"/>       <ImageButton android:id="@+id/zero"   android:src="@drawable/dial_num_0"   style="@style/dial_btn_style"/>       <ImageButton android:id="@+id/pound"   android:src="@drawable/dial_num_pound"   style="@style/dial_btn_style"/>                                    </demo.phone.card.MyPhoneCard>

In this way, the keyboard is implemented. For this example, refer to the implementation of the Android app. It can be seen that in development, the flexible use of custom controls can achieve unique and attractive results!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.