Android里所有的控件都是直接或间接继承自View,所有布局都是直接或间接继承自ViewGroup。View是Android中最基本的一种UI组件,它可以在屏幕上绘制一块矩形区域,并能响应这块区域的各种事件。因此,我们使用的各种控件其实就是在View的基础上又添加了各自特有的功能。而ViewGroup则是一种特殊的View,它可以包含很多子View和子ViewGroup,是一个用于放置控件和布局的容器。常用控件和布局的继承结构如下。
引入布局
我们要创建一个自定义的标题栏,放在界面顶部。一般我们的程序中很多个活动都需要这样的标题栏,如果在每个活动布局中都编写一遍同样的标题栏代码,会导致大量的代码重复。这时候,就可以通过引入布局来解决。
新建一个布局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:id="@+id/title_back"
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"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:gravity="center"
android:text="Title Text"
android:textColor="#fff"
android:textSize="24sp"/>
<Button
android:id="@+id/tile_edit"
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="Edit"
android:textColor="#fff"/>
</LinearLayout>
我们在LinearLayout中加入了两个Button和一个TextView。如果我们需要在界面中加入这个标题栏的话,就可以使用include来进行引用。比如,在activity_main.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="match_parent">
<include layout="@layout/title"/>
</LinearLayout>
最后在MainActivity中将系统自带的标题栏隐藏掉即可,代码如下:
package com.example.rex.test;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
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();
}
}
效果如下:
创建自定义控件
标题栏中的按钮控件要求能够响应事件,如果仅仅是引入布局的话,我们还要在每个活动中为这些控件单独编写一次事件注册代码。比如,标题栏中的BACK按钮,不管是在哪一个活动,它的功能都是相同的,即销毁当前活动。如果在每一个活动中都要重新注册一遍按钮的点击事件,会有很多重复代码,这种情况下最好使用自定义空间的方式来解决。
新建TitleLayout继承自LinearLayout,让它成为我们自定义的标题栏控件,代码如下:
public class TitleLayout extends LinearLayout {
public TitleLayout(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.title, this);
}
首先,我们重写了LinearLayout中带有两个参数的构造函数,在布局中引入TitleLayout就会调用这个构造函数。然后在构造函数中需要对标题栏布局进行动态加载,这就需要借助LayoutInflater来实现了。通过LayoutInflater的from()方法可以构建一个LayoutInflater对象,然后调用inflate()方法就可以动态加载一个布局文件,inflate()方法接收两个参数,第一个是需要加载的布局文件的id,这里传入R.layout.title,第二个参数是给加载好的布局再添加一个父布局,这里我们想要指定为TitleLayout,于是直接传入this。
接着,我们为标题栏的按钮注册点击事件,修改TitleLayout,完整代码如下:
package com.example.rex.test;
import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.Toast;
/**
* Created by Rex on 2018/4/22.
*/
public class TitleLayout extends LinearLayout {
public TitleLayout(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.title, this);
Button back = (Button) findViewById(R.id.title_back);
Button edit = (Button) findViewById(R.id.tile_edit);
back.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
((Activity)getContext()).finish(); //结束当前活动
}
});
edit.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
//Edit按钮的点击事件是 弹出Toast
Toast.makeText(getContext(), "You clicked Edit Button.", Toast.LENGTH_SHORT).show();
}
});
}
}
现在,自定义控件创建完毕,我们只需要在布局文件中添加这个自定义控件,修改activity_main.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="match_parent">
<com.example.rex.test.TitleLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
添加自定义控件时候,需要指明控件的完整类名,包名不可以省略。
运行效果:
点击EDIT按钮