Android development-custom component and interface callback and android callback

Android development-custom component and interface callback and android callback

When talking about custom controls, you have to mention interface callback. In Android development, there are still a lot of interface calls. At the beginning of this blog, I would like to talk about the custom controls of iOS. The idea of customizing controls in iOS is to inherit from the UIView and combine some controls in the subclass of the UIView to expose some attributes and callback interfaces, and leave necessary implementation methods. There are two types of callbacks commonly used in iOS custom controls: Delegate proxy callback (Delegate) and Block callback. If you want to understand the two, refer to delegate (proxy) in Objective-C in my previous blog) mode, the Block callback mode in Objective-C, and the design mode (13): identify Proxy Pattern from FQ.

The interface callbacks used in Android custom controls and Delegate callbacks and Block callbacks used in iOS development are similar, and the implementation methods are similar. The content of today is to customize an Android control. Based on this control, we will talk about interface callback in Android (specifically, interface callback in Java ). Let's talk about theme.

I. UI Implementation of Custom Controls

As mentioned above, in iOS development, custom controls generally inherit from UIView, and then do something in the subclass of UIView. In Android development, custom controls also inherit from views, but today our custom controls inherit from FrameLayout. On this basis, we can customize some things. Because layout methods such as FrameLayout and LinearLayout inherit from ViewGroup, while ViewGroup inherits from View, it is certainly possible to inherit from layout methods such as FrameLayout in custom controls.

1. Effect Analysis

Next, we need to customize a navigation bar, which imitates the NavigationBar in iOS. Because this control is not available in Android development, we need to customize this control for developers. Below is the effect we want to achieve. The navigation bar on the top is our custom NavigationBar, which is similar to the navigation bar on iOS. Click the return button on the left to exit the current Activity. Click "Callback test" on the right to display the Toast prompt in the current Activity in the form of interface callback. When calling this component, you can know the Title in the middle.

2. UI layout analysis and Xml layout file implementation

Next, we will split the UI. Let's take a closer look at the components of the NavigationBar above. After analysis, these basic controls are combined and assembled in some la s to become the custom controls we want to use. The following figure shows the UI schematic of the custom control manually drawn.

The bottom layout adopts the FrameLayout mode and sets the background color. The return icon (ImageView) and return text (TextView) are placed on a horizontal layout of LinearLayout. The two put a transparent Button to implement the return operation. Set the Title (TextView) in the middle to center in FrameLayout. Call Back is a Button used to test the callback of the following interface.

1 <? Xml version = "1.0" encoding = "UTF-8"?> 2 <FrameLayout xmlns: android = "http://schemas.android.com/apk/res/android" 3 android: layout_width = "match_parent" 4 android: layout_height = "wrap_content" 5 android: background = "# cccccc"> 6 <LinearLayout 7 android: orientation = "horizontal" 8 android: layout_width = "match_parent" 9 android: layout_height = "20pt" 10 android: background = "@ drawable/background"> 11 <ImageView12 android: id = "@ + id/back_title" 13 android: layout_width = "wrap_content" 14 android: layout_height = "18pt" 15 android: layout_gravity = "center" 16 android: src = "@ drawable/back"/> 17 <TextView18 android: layout_width = "wrap_content" 19 android: layout_height = "wrap_content" 20 android: layout_gravity = "center" 21 android: textSize = "8pt" 22 android: text = "return"/> 23 </LinearLayout> 24 25 <Button26 android: id = "@ + id/back_button" 27 android: layout_width = "50pt" 28 android: layout_height = "20pt" 29 android: layout_gravity = "center_vertical" 30 android: alpha = "0"/> 31 32 <TextView33 android: id = "@ + id/navigation_title" 34 android: layout_width = "wrap_content" 35 android: layout_height = "wrap_content" 36 android: textSize = "10pt" 37 android: layout_gravity = "center" 38 android: text = "title"/> 39 40 <Button41 android: id = "@ + id/call_back" 42 android: layout_width = "wrap_content" 43 android: layout_height = "wrap_content" 44 android: layout_gravity = "right" 45 android: text = "interface callback test"/> 46 </FrameLayout>

 

 

2. Bind events to the UI and set up callback Interfaces

After the UI is implemented, it indicates that the shell of the custom component is ready, but its internal things still need to be implemented. That is to say, You need to bind a Java class to the UI of the preceding implementation, process some response events of the control in the class, and set the necessary interfaces in the class to change the attributes of the custom component. Next we will implement the Java class corresponding to xml.

In the above layout, the outermost layer uses the FrameLayout layout. As mentioned above, we can inherit from FrameLayout to do something, because the parent class of FrameLayout is View, so we can do something on this basis. Similarly, if the above layout is implemented using other la S, you can inherit from other la s to do something. In this blog, we use FrameLayout as the parent class to implement the associated class of custom components.

1. inherit from FrameLayout and implement the corresponding constructor. below is the constructor we want to implement. In the constructor, We need to associate it with the xml layout file we implemented above. Of course, we use LayoutInflater to implement it. The constructor of the custom component is shown below.

/** Custom Component Construction Method */public mnmnavigationbar (Context context, AttributeSet attrs) {super (context, attrs); LayoutInflater. from (context ). inflate (R. layout. custom_navigation, this); // loads the layout file}

 

2. After constructing the corresponding constructor and associating the corresponding layout file, we need to process the events of the controls in the layout file. The code below is what you need to do when you click the return button. Because you need to click the return button to end the current Activity, you do not need to leave a callback interface for the caller, in the custom component internal processing. The following code gets the return button in the UI and processes the returned event. The method below must be called in the constructor to take effect. How can I execute a function without calling it ~. The code below is relatively simple, that is, to end the Activity currently displayed. The event for processing the return button is as follows:

1/* 2 * click the return Button method 3 */4 private void onClickBackButton () {5 button Button = (Button) findViewById (R. id. back_button); 6 button. setOnClickListener (new OnClickListener () {7 @ Override 8 public void onClick (View v) {9 (Activity) getContext ()). finish (); 10} 11}); 12}

　　　　

3. After processing the returned event, we need to set the title of the title bar. That is to say, when calling the custom component, we need to be able to set the title of the component. To meet this requirement, we need to set aside the Title setter method in the Custom component, and the access permission of this Setter method must be Public, otherwise, you will not be able to access this method. Below is the Public method for setting the title. In fact, the code below is relatively simple, that is, to get the TextView of the title through the ID, and set the corresponding title, the Code is as follows:

1 public String navigationTitle = "title bar"; 2 3/* 4 * set the title of the title bar 5 */6 public void setNavigationTitle (String navigationTitle) {7 this. navigationTitle = navigationTitle; 8 TextView textView = (TextView) findViewById (R. id. navigation_title); 9 textView. setText (navigationTitle); 10}

 

4. If the above is still simple, the lower part is a little difficult in the custom control. Next, we will implement the interface callback of the corresponding button. before implementation, we will introduce why the interface callback should be implemented. Sometimes, when you click a button in a custom control, the tasks you do cannot be completed independently within the custom control. You need to process the events in the caller. In this case, we can use the interface callback for processing.

You do not need to use the interface callback to process the returned event implemented above, because this function is fully available within the custom component. For example, when clicking a button in a custom control, we need to jump to another Activity, which is unknown when we implement a custom control, in this case, our interface callback is required. In iOS development, the above problems are also encountered. Therefore, various callbacks such as Block callback, Delegate callback, and Target-Action callback are commonly used in iOS development. Although the implementation form is different, its function is very similar to the interface callback in Java. Well, let's talk about this. Next we will pass the Click Event of the button with the id of call_back in the XML layout file to the caller through interface callback.

(1) The first step is to implement the interface callback, which is also required, because how can we implement the interface callback without an interface. This interface is Public, otherwise it cannot be used by the caller. Our interface is named onClickCallBackListener. There is a method in it, which is the method to be executed during interface callback.

1/* 2 * Create callback interface 3 */4 public static interface OnClickCallBackListener {5 public void OnClickButton (View v); 6}

 

(2) declare a private interface object and implement the setter method for this private object. This private interface object is used to accept the callback method passed by the custom component caller. The code is relatively simple, so I will not repeat it too much here.

1 private OnClickCallBackListener callBackListener; // declare interface object 2 public void setCallBackListener (OnClickCallBackListener callBackListener) {3 this. callBackListener = callBackListener; 4}

 

(3) After implementing the interface and receiving the variables of the callback object, the next thing to do is to get the event clicked by the corresponding button in the Custom component, click this button to execute the callback method of the passed interface object in the event. The following method is called in the constructor. The function of this method is to obtain the Click Event of the corresponding button of the custom component and execute the callback method of the interface object. The specific implementation is as follows:

/** Execute interface callback when you click the Button */private void callBackButton () {button Button = (Button) findViewById (R. id. call_back); button. setOnClickListener (new OnClickListener () {@ Override public void onClick (View v) {if (callBackListener! = Null) {callBackListener. OnClickButton (v );}}});}

 

The code is separated above, and the Implementation class of the entire custom component is below. The Code is as follows.

1 package com. example. lizelu. customnavigationbar; 2 3 import android. annotation. targetApi; 4 import android. app. activity; 5 import android. content. context; 6 import android. OS. build; 7 import android. util. attributeSet; 8 import android. view. layoutInflater; 9 import android. view. view; 10 import android. widget. button; 11 import android. widget. frameLayout; 12 import android. widget. textView; 13 14/** 15 * Created by lizelu on 15/11/29.16 */17 public class CustomNavigationBar extends FrameLayout {18 19/* 20 * Create callback interface 21 */22 public static interface OnClickCallBackListener {23 public void OnClickButton (View v ); 24} 25 26 27 private OnClickCallBackListener callBackListener; // declare the interface object 28 29 public String navigationTitle = "title bar "; 30 31/* 32 * Set Title 33 */34 public void setNavigationTitle (String navigationTitl E) {35 this. navigationTitle = navigationTitle; 36 TextView textView = (TextView) findViewById (R. id. navigation_title); 37 textView. setText (navigationTitle); 38} 39 40 public void setCallBackListener (OnClickCallBackListener callBackListener) {41 this. callBackListener = callBackListener; 42} 43 44/* 45 * Custom Component Construction Method 46 */47 public mnmnavigationbar (Context context, AttributeSet attrs) {48 super (context, Ttrs); 49 LayoutInflater. from (context ). inflate (R. layout. custom_navigation, this); // load the layout file 50 onClickBackButton (); 51 callBackButton (); 52} 53/* 54 * click return button Method 55 */56 private void onClickBackButton () {57 Button button = (Button) findViewById (R. id. back_button); 58 button. setOnClickListener (new OnClickListener () {59 @ Override60 public void onClick (View v) {61 (Activity) getContext ()). finish (); 62} 63}); 6 4} 65 66/* 67 * execute interface callback 68 */69 private void callBackButton () {70 Button button Button = (Button) findViewById (R. id. call_back); 71 button. setOnClickListener (new OnClickListener () {72 @ Override73 public void onClick (View v) {74 if (callBackListener! = Null) {75 callBackListener. OnClickButton (v); 76} 77} 78}); 79} 80}View Code

 

 

Iii. Call method of the custom component

After the above process, we have customized the control and implemented it, and then we will use it. In fact, the usage of custom components is not much different from that of the system's built-in components, and there is nothing special about them. Let's use the above custom controls in the Activity.

1. First, load the layout of our custom component in the layout file corresponding to the Activity that we want to use this component. One thing to note is that we need to use a comprehensive package for the tag of custom components. The usage of other system components is similar to that of Android. The specific code is as follows:

1         <com.example.lizelu.customnavigationbar.CustomNavigationBar2             android:id="@+id/custom_navigation_bar"3             android:layout_width="match_parent"4             android:layout_height="wrap_content"/>

 

2. In the Java class of Activity, obtain the object of the custom component by id and implement the corresponding callback. The Code is as follows:

1 private void setNavigationTitle (String title) {2 CustomNavigationBar navigationBar = (mnmnavigationbar) findViewById (R. id. custom_navigation_bar); 3 navigationBar. setNavigationTitle (title); 4 5 // implement the interface callback of the buttons on the Component 6 navigationBar. setCallBackListener (new CustomNavigationBar. onClickCallBackListener () {7 @ Override 8 public void OnClickButton (View v) {9 Toast. makeText (MainActivity. this, "Callback execution method", Toast. LENGTH_SHORT ). show (); 10} 11}); 12}

At this point, the implementation and call of custom components have been completed. Although the above custom control is relatively simple, it is small and dirty. Complicated custom controls are also made up of simple things. Therefore, it is important to understand the implementation principles of custom controls. Today's blog is here. below is the sharing address of the above Demo on GitHub. Please Clone your desired friends.

Github address: https://github.com/lizelu/AndroidCustomNavigationBar