自定義控件 - 引入布局

常見控件和布局的繼承結(jié)構(gòu)

image

所有的控件都是直接或者間接繼承于View
所有的布局都是直接或者間接繼承于ViewGroup
View是Android中最基本的一種UI控件,它可以在屏幕上繪制一塊矩形區(qū)域,并能響應(yīng)這塊區(qū)域的各種事件。
ViewGroup是特殊的一種View,是一個(gè)用于放置控件和布局的容器

以添加iPhone風(fēng)格的標(biāo)題欄為例：
當(dāng)多個(gè)活動(dòng)界面都要使用這個(gè)標(biāo)題欄時(shí),我們可以通過引入布局的方式,這樣可以避免每個(gè)活動(dòng)界面都要寫一遍同樣的標(biāo)題代碼,減少代碼重復(fù)。

創(chuàng)建布局文件

新建一個(gè)title.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/title_bg">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        android:background="@drawable/back_bg"
        android:text="Back"
        android:textColor="#fff"
        android:id="@+id/title_back"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Title Text"
        android:id="@+id/title_text"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:textColor="#fff"
        android:textSize="24sp"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/title_edit"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        android:background="@drawable/edit_bg"
        android:text="Edit"
        android:textColor="#fff"/>

</LinearLayout>

android:background用于為控件或布局制定一個(gè)背景,可以使用顏色或者圖片
android:layout_margin 指定控件在上下左右方向上偏移的距離

引入布局

在創(chuàng)建了布局后,我們要引入布局。在需要引入界面的Activity界面布局中,添加<include layout="@layout/title"/>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
  <include layout="@layout/title"/>
</LinearLayout>

隱藏系統(tǒng)自帶的標(biāo)題欄

通過調(diào)用getSupportActionBar()方法來獲得ActionBar的實(shí)例,然后再調(diào)用ActionBar的hide()方法將標(biāo)題欄隱藏。

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null){
            actionBar.hide();
        }
    }
}

image

創(chuàng)建自定義控件

引入布局的方式雖然可以減少很多重復(fù)的布局代碼,但是當(dāng)布局中的控件要求能夠響應(yīng)事件,我們還是需要在每個(gè)活動(dòng)中去為這些控件單獨(dú)編寫事件響應(yīng)代碼。以標(biāo)題欄為例,這些控件在每一個(gè)布局中所需的功能都是一樣的,這時(shí)我們可以使用自定義控件的方式,避免每個(gè)活動(dòng)都要去編寫同樣的代碼。

新建TitleLayout

新建TitleLayout并繼承LinearLayout。

public class TitleLayout extends LinearLayout {

    public TitleLayout(Context context , AttributeSet attributeSet){
        super(context,attributeSet);
        LayoutInflater.from(context).inflate(R.layout.title,this);  
    }
}

重寫LinearLayout中帶有兩個(gè)參數(shù)的構(gòu)造函數(shù)。
通過LayoutInflater來對(duì)標(biāo)題欄進(jìn)行動(dòng)態(tài)加載。
LayoutInflater.from(context).inflate(R.layout.title,this);

• from（）方法構(gòu)建出一個(gè)LayoutInflater對(duì)象
• 調(diào)用inflate（）方法就可以動(dòng)態(tài)加載一個(gè)布局文件。inflate接受兩個(gè)參數(shù)
  • 一個(gè)是加載的布局文件id
  • 另一個(gè)是給加載好的布局再添加一個(gè)父布局

修改活動(dòng)布局.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

  //完整類名
   <com.example.hwy01.uicustomviews.TitleLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"></com.example.hwy01.uicustomviews.TitleLayout>

</LinearLayout>

添加自定義控件需要先指明控件的完整類名,如代碼中的com.example.hwy01.uicustomviews.TitleLayout

添加按鈕注冊(cè)事件

修改TitleLayout

public class TitleLayout extends LinearLayout {

    public TitleLayout(Context context , AttributeSet attributeSet){
        super(context,attributeSet);

        LayoutInflater.from(context).inflate(R.layout.title,this);
        Button back = (Button) findViewById(R.id.title_back);
        Button edit = (Button) findViewById(R.id.title_edit);

        back.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
           ((Activity)getContext()).finish();
            }
        });

        edit.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getContext(),"You clicked Edit Button",Toast.LENGTH_SHORT).show();
            }
        });
    }

}