自定义view
自定义组合控件
示例
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控件使用步骤
一般用来做蒙版
-
继承ViewGroup类系统控件
-
在布局文件中调用
示例
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>