Android: Daily Learning Notes (7) ——— Explore UI Development (4)

Android: Daily Learning Notes (7) ——— Explore UI Development (4) UI Overview View and ViewGrou the

all user interface elements in Android apps are View built using and ViewGroup objects . Viewobject is used to draw content on the screen that the user can interact with. ViewGroupobjects are used to store other View (and ViewGroup ) objects to define the layout of the interface.

　　

Description

View is the most basic kind of UI in Android, it can draw a rectangular area on the screen, and can respond to various events in this area, the various controls we use are added and perfected on the basis of view. ViewGroup is a special view that can contain many view and sub-viewgroup, which is a container for placing controls and layouts.

Introducing Layouts

For example, now we're going to replace the system's default title bar, as shown below:

　　

That is, the two sides are two buttons, the middle is the title text, the XML configuration file is as follows:

<?XML version= "1.0" encoding= "Utf-8"?><LinearLayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Android:layout_width= "Match_parent"Android:layout_height= "Wrap_content"Android:background= "@color/colorprimary">    <ImageButtonAndroid:layout_width= "Wrap_content"Android:layout_height= "Match_parent"android:src= "@drawable/previous_24px"        />    <TextViewAndroid:id= "@+id/textview"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"android:layout_gravity= "Center"Android:layout_weight= "1"android:gravity= "Center"Android:text= "I am the title text"Android:textcolor= "#fff"android:textsize= "24SP" />    <ImageButtonAndroid:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"android:src= "@drawable/next_24px"        /></LinearLayout>

We are faced with a problem, we want to let all the activity page Use this title bar how to do?

We can write this title bar individually into an XML file, and then introduce this XML in any other active layout file that uses the title bar .

<?XML version= "1.0" encoding= "Utf-8"?><LinearLayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent">    <include  layout= "@layout/panel_title"/> </LinearLayout>

To create a custom control

Description

The technique of introducing layouts does solve the problem of repeating layout code, but if some controls in the layout require the ability to respond to events, we still need to write the code for the event registration individually for each of these controls in each activity, such as the return button in the title bar, which destroys the current activity. To avoid duplication of code, we can use custom controls to resolve them.

Code:

1. New Titlelayout (inherited from LinearLayout)

 Public class extends LinearLayout {    public  titlelayout (context context, @Nullable AttributeSet attrs) {         Super(context, attrs);        Layoutinflater.from (context). Inflate (R.layout.panel_title,this);}    }

Description

First we rewrite the Linerlayout constructor, which is called when the Titlelayout control is introduced into the layout. The title bar layout is then dynamically loaded in the constructor, which requires the use of layoutinflater. The Layoutinflater form () method allows you to build a Layoutinflater object and then call inflate () to dynamically load a layout file.

Inflate accepts two parameters:

• The first one is the ID of the layout file
• The second parameter is to add a parent layout to the loaded layout, which is this

　　2. Binding Events for buttons

 Public classTitlelayoutextendsLinearLayout { PublicTitlelayout (Context context, @Nullable AttributeSet attrs) {Super(context, attrs); Layoutinflater.from (context). Inflate (R.layout.panel_title, This); ImageButton Titleback=(ImageButton) Findviewbyid (r.id.title_back); Titleback.setonclicklistener (NewOnclicklistener () { Public voidOnClick (View v) {toast.maketext (GetContext (),"Activity Destruction", Toast.length_long). Show ();    }        }); }}

　　3. Add this custom control in the layout file

<?XML version= "1.0" encoding= "Utf-8"?><LinearLayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"> <com.example.zy.dealhelper.TitleLayout  android:layout_width= "Match_parent "  android:layout_height=" wrap_content "/> </LinearLayout>

Description

　　Adding a custom control is basically the same as adding a normal control, except that you need to indicate the specific class name of the control when you add a custom control.

　　

Android: Daily Learning Notes (7) ——— Explore UI Development (4)