android自定义view_android 自定义view

1 自定义view的简介

1.1为什么要自定义view

在Android开发中有很多业务场景，原生的控件是无法满足应用，并且经常也会遇到一个UI在多处 重复使用情况，那么就需要通过自定义View的方式来实现这些UI效果。

作为一个Android开发工程师自定义View属于一个必备技能。

1.2android自定义view几种方式

自定义View的实现方式有以下几种： 组合控件，继承控件，自绘控件

详细可分为：自定义组合控件，继承系统View控件，继承系统ViewGroup，自绘View控件，自绘

ViewGroup控件

1.3View和ViewGroup

 2自定义组合控件

组合控件就是将多个控件组合成一个新的控件，可以重复使用。

应用场景：在项目中经常会遇到一些比较复杂的UI块需要用在多处使用，那么我们就可以通过五大布局 和基本控件组合成一个新的布局View，这样就可以方便的将该UI用在项目的不同页面中，比如一个标题 栏。这种方式比较简单，只要通过布局文件实现相应的UI，然后将该UI加到适合的五大布局中即可。

2.1自定义组合控件的使用步骤

1. 编写布局文件

2. 实现构造方法

3. 初始化UI 4. 提供对外的方法

5. 在布局当中引用该控件

6. activity中使用

2.2示例

中间是title的文字，左边是返回按钮

1 . 编写布局文件 view_header.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#89CEED"
    android:id="@+id/rl"
    android:layout_height="60dp">
 
    <ImageView
        android:id="@+id/iv_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        app:srcCompat="@drawable/ic_baseline_arrow_back_24"/>
 
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="22sp"
        android:layout_centerInParent="true"
        android:textColor="@color/white"
        android:text="微信" />
 
 
</RelativeLayout>

2. 实现构造方法

3. 初始化UI

4. 提供对外的方法

//因为我们的布局采用RelativeLayout，所以这里继承RelativeLayout。
public class HeaderView extends RelativeLayout {
    private Button left_btn;
    private TextView title_tv;
    private RelativeLayout layout_root;
    public HeaderView(Context context) {
        super(context);
    }
 
    public HeaderView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }
    public HeaderView(Context context, AttributeSet attrs, int defStyleAttr)
    {
        super(context, attrs, defStyleAttr);
    }
    //初始化UI，可根据业务需求设置默认值。
    private void initView(Context context) {
        LayoutInflater.from(context).inflate(R.layout.view_header, this,
                true);
        left_btn = findViewById(R.id.left_btn);
        title_tv = findViewById(R.id.title_tv);
        layout_root = findViewById(R.id.header_root_layout);
        layout_root.setBackgroundColor(Color.BLACK);
        title_tv.setTextColor(Color.WHITE);
    }
    //设置标题文字的方法
    private void setTitle(String title) {
        if (!TextUtils.isEmpty(title)) {
            title_tv.setText(title);
        }
    }
    //对左边按钮设置事件的方法
    private void setLeftListener(OnClickListener onClickListener) {
        left_btn.setOnClickListener(onClickListener);
    }
}

5. 在布局当中引用该控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity2">
<com.hopu.customviewdemo.view.HeaderView
    android:id="@+id/title_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
</LinearLayout>

6. activity中使用

public class MainActivity2 extends AppCompatActivity {
    private HeaderView title_bar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        title_bar = findViewById(R.id.title_bar);
        title_bar.setLeftListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity2.this, "左侧按钮被点击",
                        Toast.LENGTH_SHORT).show();
            }
        });
    }
}

3.继承系统控件

通过继承系统控件（View子类控件或ViewGroup子类控件）来完成自定义View，一般是希望在原 有系统控件基础上做一些修饰性的修改，而不会做大幅度的改动，如在TextView的文字下方添加下 划线，在LinearLayout布局中加一个蒙板等。这种方式往往都会复用系统控件的onMeasure和onLayout方法，而只需要重写onDraw方法，在其中绘制一些需要的内容。

下面会分别继承View类控件和ViewGroup类控件来举例说明

3.1继承View类系统控件

1 . 继承View控件，并重写onDraw方法

2. 在布局文件中调用

3.2示例

为在TextView文字下方显示红色下划线，其基本步骤如下：

1 . 继承View控件，并重写onDraw方法

public class UnderlineTextView extends
        androidx.appcompat.widget.AppCompatTextView {
    public UnderlineTextView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(5);
        int width = getWidth();
        int height = getBaseline();
        canvas.drawLine(0, height, width, height, paint);
    }
}

2. 在布局文件中调用

就像使用一个普通TextView一样使用UnderlineTextView。

<com.hopu.customviewdemo.view.UnderlineTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="张三"/>

3.3 继承ViewGroup类系统控件

1 . 继承ViewGroup类系统控件

2. 在布局文件中调用

3.4示例

在layout布局上添加一个浅红色的半透明蒙板，这种需求在工作中也是非常常见的。

1 . 继承ViewGroup类系统控件

public class ForegroundLinearLayout extends LinearLayout{
    public ForegroundLinearLayout(Context context, @Nullable AttributeSet
            attrs) {
        super(context, attrs);
    }
    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        canvas.drawColor(Color.parseColor("#50FF0000"));
    }
}

2. 在布局文件中调用

对ForegroundLinearLayout的使用，就和使用其父类LinearLayout一样。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.hopu.customviewdemo.view.ForegroundLinearLayout
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_centerInParent="true"
    android:gravity="center">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Hello World!"
        android:textColor="@android:color/black"
        android:textSize="50dp" />
</com.hopu.customviewdemo.view.ForegroundLinearLayout>
</RelativeLayout>

3.5 继承系统控件小结

从上面两个例子可见，继承系统原有的控件来实现自定义View，步骤非常简单，比组合控件简单多了。 但是这一节需要对Canvas， paint， Path等绘制方面的知识有一定的了解，且还需要对ViewGroup的中 内容的绘制顺序有一定的了解，才能在原生控件的基础上做出想要的效果来。