benutzerdefinierte Ansicht

Benutzerdefinierte zusammengesetzte Steuerelemente

Durch das Kombinieren von Steuerelementen werden mehrere Steuerelemente miteinander kombiniert und können wiederverwendet werden

Schritte zur Verwendung
Schreiben Sie die Layoutdatei
Implementieren Sie den Konstruktor
Initialisieren Sie die Benutzeroberfläche
Stellen Sie eine externe Methode bereit
Verweisen Sie auf das Steuerelement im Layout
Verwendete Aktivität

Beispiel

1. Schreiben Sie die Layoutdatei

<?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. Verwirklichen Sie die Bauweise

3. Initialisieren Sie die Benutzeroberfläche

4. Stellen Sie externe Methoden bereit

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. Referenz im Layout

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

6. Verwendung in Aktivitäten

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"));
            }
        });

    }
}

Systemsteuerungen erben

Erben Sie das View-Steuerelement, um die Schritte zu verwenden

1. Erben Sie das View-Steuerelement und schreiben Sie die onDraw-Methode neu

2. Rufen Sie die Layoutdatei auf

Beispiel

Um eine rote Unterstreichung unter dem TextView-Text anzuzeigen, sind die spezifischen Schritte wie folgt

1. Erben Sie TextView und schreiben Sie die onDraw-Methode neu

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. Verwendung in der Layoutdatei

<?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>

Schritte zum Erben der ViewGroup-Steuerung

Wird normalerweise als Maske verwendet

Erben Sie die Systemsteuerung der ViewGroup-Klasse
Wird in der Layoutdatei aufgerufen

Beispiel

1. Aktivität erstellen

<?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. Erben Sie die Systemsteuerung der ViewGroup-Klasse

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. Verwendung im Layout

<?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>