Android cainiao study note 13 ---- Android controls (2) simple examples of custom controls, android Custom Controls

Android cainiao study note 13 ---- Android controls (2) simple examples of custom controls, android Custom Controls

Sometimes, you may feel that the control provided by the system is too ugly, and you need to customize the control to achieve the desired effect.

The following is a reference to the first line of code.

1. Customize a title bar:

The title bar that comes with the system is ugly and does not play a major role. Therefore, we will call requestWindowFeature (Window. FEATURE_NO_TITLE) in onCreate () before. The title bar is not displayed.

The following is a custom title bar with a title displayed in the middle and a button on the left and right:

Title. xml:

 1 <?xml version="1.0" encoding="utf-8"?> 2  3 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 4  5     android:layout_width="match_parent" 6  7     android:layout_height="wrap_content" 8  9     android:orientation="horizontal"10 11     android:background="#bbbbbb" >12 13     <Button14 15         android:id="@+id/btn_back"16 17         android:text="@string/back"18 19         android:layout_width="wrap_content"20 21         android:layout_height="wrap_content"22 23         android:layout_margin="5dp"24 25         android:layout_gravity="left|center_vertical"26 27         android:textColor="#0099cc"28 29         android:layout_weight="1"/>30 31     <TextView32 33         android:id="@+id/title"34 35         android:layout_width="wrap_content"36 37         android:layout_height="wrap_content"38 39         android:textSize="20sp"40 41         android:textColor="#0099cc"42 43         android:text="@string/this_is_title"44 45         android:layout_gravity="center"46 47         android:gravity="center"48 49         android:layout_weight="2"/>50 51     <Button52 53         android:id="@+id/btn_edit"54 55         android:layout_width="wrap_content"56 57         android:layout_height="wrap_content"58 59         android:text="@string/edit"60 61         android:layout_margin="5dp"62 63         android:layout_gravity="right|center_vertical"64 65         android:textColor="#0099cc"66 67         android:layout_weight="1"/>68 69 </LinearLayout>

Activity Code:

1 protected void onCreate(Bundle savedInstanceState) {2 3            super.onCreate(savedInstanceState);     4 5            requestWindowFeature(Window.FEATURE_NO_TITLE);6 7            setContentView(R.layout.title);8 9 }

Running result:

 

(⊙ O ⊙ )... It's a little ugly, but it looks a bit like the title bar.

2. Reuse the layout code:

How can I apply this title bar to every layout file in the future?

You cannot rewrite the xml code every time.

The android layout provides <include> labels similar to the c pre-processing command # include to reuse the layout code.

Create a first_layout.xml file as follows:

 1 <?xml version="1.0" encoding="utf-8"?> 2  3 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 4  5     android:layout_width="match_parent" 6  7     android:layout_height="match_parent" 8  9     android:orientation="vertical" >10 11     <include layout="@layout/title"/>12 13     <Button android:id="@+id/btn"14 15         android:text="@string/i_m_a_button"16 17         android:layout_width="wrap_content"18 19         android:layout_height="wrap_content"20 21         android:layout_gravity="center_horizontal"/>22 23 </LinearLayout>

Modify setContentView (R. layout. first_layout );

Display result:

 

Currently, the Back and Edit buttons do not have any event processing. How can I click the Back button to end the current Activity? The method is exactly the same as before. Use findViewById () to find the Back button Based on the id, and then set the click Event listener.

The Code is as follows:

 1 public class FirstActivity extends Activity { 2  3       @Override 4  5       protected void onCreate(Bundle savedInstanceState) { 6  7            super.onCreate(savedInstanceState);      8  9            requestWindowFeature(Window.FEATURE_NO_TITLE);10 11            setContentView(R.layout.first_layout);12 13            Button btn = (Button) findViewById(R.id.btn_back);14 15            btn.setOnClickListener(new OnClickListener() {16 17                  @Override18 19                  public void onClick(View v) {20 21                       // TODO Auto-generated method stub22 23                       FirstActivity.this.finish();24 25                  }26 27            });28 29       }30 31 }

 

The reuse of layout files has already been implemented through <include>, but it is still troublesome to re-write event listening every time ...... At this point, we usually think of abstracting a custom class. You can simply use this custom class whenever you need it. It is actually the practice of a custom control.

3. Custom Controls and functional code reuse

TitleLinearLayout. java code:

 1 public class TitleLinearLayout extends LinearLayout { 2  3       public TitleLinearLayout(Context context, AttributeSet attrs) { 4  5            super(context, attrs); 6  7            LayoutInflater.from(context).inflate(R.layout.title, this); 8  9            Button btn_back = (Button) findViewById(R.id.btn_back);10 11            btn_back.setOnClickListener(new OnClickListener() {12 13                  @Override14 15                  public void onClick(View v) {16 17                       // TODO Auto-generated method stub18 19                       Log.i("clicked","back");20 21                       ((Activity)getContext()).finish();22 23                  }24 25            });26 27       }28 29 }

Inherited from LinearLayout to implement the constructor with two parameters. In the constructor, load the layout file and configure the event listening settings for the Back button.

LayoutInflater. from (context). inflate (R. layout. title, this); Used to dynamically load layout files.

Note that there is a method to get LayoutInflater in the Activity. Therefore, you can use the following code to load the layout file:

(Activity) context). getLayoutInflater (). inflate (R. layout. title, this );This method is commonly used in Activity code, and type conversion is required here, which is troublesome and not as secure as the first method.

How to use custom controls?

The first_layout code is as follows:

 1 <?xml version="1.0" encoding="utf-8"?> 2  3 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 4  5     android:layout_width="match_parent" 6  7     android:layout_height="match_parent" 8  9     android:orientation="vertical" >10 11     <cn.csc.custom_ui.TitleLinearLayout12 13         android:layout_width="match_parent"14 15         android:layout_height="wrap_content">16 17     </cn.csc.custom_ui.TitleLinearLayout>18 19     <Button android:id="@+id/btn"20 21         android:text="@string/i_m_a_button"22 23         android:layout_width="wrap_content"24 25         android:layout_height="wrap_content"26 27         android:layout_gravity="center_horizontal"/>28 29 </LinearLayout>

Note:

1) in the layout file, to reference a custom control, you must use the complete class qualified name, that is, the package name. Class Name method;

2) In the definition control, when setting properties, use alt +/for code prompting that the complete function will often be unavailable. The label name can be set to the built-in control first, and then set the properties, then, change the tag name to the full qualified name of the custom control.