自定义控件

最新推荐文章于 2025-07-14 22:21:47 发布

原创最新推荐文章于 2025-07-14 22:21:47 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Android控件

第一行代码专栏收录该内容

2 篇文章

订阅专栏

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按钮