自定义view(不包含绘制)

自定义view

自定义组合控件

  1. 组合控件就是将多个控件组合到一起,可以重复使用

    使用步骤

  2. 编写布局文件

  3. 实现构造方法

  4. 初始化UI

  5. 提供对外的方法

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

  7. activity中使用

示例

1、编写布局文件

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="260dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardCornerRadius="20dp"
    android:id="@+id/cd"
    app:cardBackgroundColor="#5AD35F"
    android:layout_height="200dp">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        >
        <TextView
            android:layout_marginTop="20dp"
            android:layout_centerHorizontal="true"
            android:id="@+id/tv_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="核酸检测结果"
            android:textColor="@color/white"
            android:textSize="22sp" />

        <TextView
            android:id="@+id/tv_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/tv_1"
            android:layout_marginTop="15dp"
            android:layout_marginStart="20dp"
            android:text="48"
            android:textColor="@color/white"
            android:textSize="80sp" />

        <TextView
            android:id="@+id/tv_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@id/tv_2"
            android:text="小时内"
            android:layout_alignTop="@id/tv_2"
            android:textColor="@color/white"
            android:textSize="36sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="阴性"
            android:textSize="48sp"
            android:layout_toRightOf="@id/tv_2"
            android:layout_alignBottom="@id/tv_2"
            android:layout_marginLeft="10dp"
            android:textColor="@color/white"/>
    </RelativeLayout>

</androidx.cardview.widget.CardView>

2、实现构造方法

3、初始化UI

4、提供对外的方法

package com.shy.customwork;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.RelativeLayout;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.cardview.widget.CardView;

public class Card extends CardView {
    private CardView cd;

    public Card(@NonNull Context context) {
        super(context);
        initView(context);
    }

    public Card(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

    public Card(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
    }
    //初始化UI
    public void initView(Context context){
        LayoutInflater.from(context).inflate(R.layout.healthcode_layout,this,true);
        cd=findViewById(R.id.cd);
    }
    //提供对外的方法
    public void setCdBackground(int background){
        cd.setCardBackgroundColor(background);
    }
}

5、在布局中引用

    <com.shy.customwork.Card
        android:id="@+id/cd2"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

6、在Activity中使用

package com.shy.customwork;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    Button btn_red,btn_green,btn_yellow;
    Card cd2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btn_red=findViewById(R.id.btn_red);
        btn_green=findViewById(R.id.btn_green);
        btn_yellow=findViewById(R.id.btn_yellow);
        cd2=findViewById(R.id.cd2);

        btn_red.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                cd2.setCdBackground(Color.parseColor("#EF4949"));
            }
        });
        btn_green.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                cd2.setCdBackground(Color.parseColor("#5AD35F"));
            }
        });
        btn_yellow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                cd2.setCdBackground(Color.parseColor("#FFF174"));
            }
        });

    }
}

继承系统控件

继承View控件使用步骤

​ 1、继承View控件,并重写onDraw方法

​ 2、在布局文件中调用

示例

为在TextView文字下方显示红色下划线,具体步骤如下

1、继承TextView并重写onDraw方法

package com.shy.viewtest;


import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

public class TextTest extends androidx.appcompat.widget.AppCompatTextView {
    public TextTest(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }



    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //创建画笔
        Paint paint=new Paint();
        //给画笔设置颜色
        paint.setColor(Color.parseColor("#fff222"));
        //设置画笔粗细
        paint.setStrokeWidth(5);
        //设置宽高
        int width=getWidth();
        int height=getBaseline();
        //在画布上画
        canvas.drawLine(0,height,width,height,paint);
    }
}

2、在布局文件中使用

<?xml version="1.0" encoding="utf-8"?>
<com.shy.viewtest.LinearLayoutTest 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:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
    
    <com.shy.viewtest.TextTest
        android:id="@+id/tt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="测试"
        android:layout_gravity="center"/>

</com.shy.viewtest.LinearLayoutTest>

继承ViewGroup控件使用步骤

一般用来做蒙版

  1. 继承ViewGroup类系统控件

  2. 在布局文件中调用

示例

1、创建activity

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="60dp"
    android:background="#333"
    android:id="@+id/rl">

    <ImageView
        android:layout_centerVertical="true"
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/ic_baseline_arrow_back_24" />

    <TextView
        android:layout_centerInParent="true"
        android:id="@+id/tv"
        android:textSize="22sp"
        android:textColor="@color/white"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="微信" />

</RelativeLayout>

2、继承ViewGroup类系统控件

package com.shy.viewtest;

import android.content.Context;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class HeardView extends RelativeLayout {
    private RelativeLayout rl;
    private ImageView iv;
    private TextView tv;
    public HeardView(Context context) {
        super(context);
    }

    public HeardView(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.heard_layout,this,true);
        rl=findViewById(R.id.rl);
        iv=findViewById(R.id.iv);
        tv=findViewById(R.id.tv);
    }

    public HeardView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public HeardView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }
    //设置文字
    public void setTitle(String title) {
        if (!TextUtils.isEmpty(title)) {
            tv.setText(title);
        }
    }
    //设置点击事件
    public void setImageView(OnClickListener onClickListener){
        iv.setOnClickListener(onClickListener);
    }
}

3、在布局中使用

<?xml version="1.0" encoding="utf-8"?>
<com.shy.viewtest.LinearLayoutTest 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:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.shy.viewtest.HeardView
        android:id="@+id/hv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</com.shy.viewtest.LinearLayoutTest>

猜你喜欢

转载自blog.csdn.net/m0_60623666/article/details/126269191