本章主要内容

一、自定义控件步骤

二、标题栏控件

三、结语

WP_9.jpg

正文

一、自定义控件步骤

1.创建自定义控件布局，根据已有控件搭建自定义控件的布局和样式

2.编写相应的View类，继承其父布局（LinearLayout/RelativeLayout/FramLayout等）

• 构造函数
• 引入控件布局
• 定义接口
• 设置属性
  1 准备属性文件values/attrs.xml
  2 View类中获取属性（注意：属性的设置要放在加载子控件之前，保证在子控件使用属性时属性值不为空）
  3 属性Get/Set方法

3.布局文件中使用自定义控件

4.在主活动中实现接口

二、标题栏控件

1. 效果图

无返回图标的标题栏.png

有返回图标的标题栏.png

2. 实现

2.1 创建自定义控件布局--custom_view_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="match_parent"
    android:orientation="vertical">

    <!--标题栏文本-->
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:background="#FFFFFF"
        android:gravity="center_vertical"
        android:text="标题"
        android:textColor="#000000"
        android:textSize="16sp" />

    <!--标题栏分割线-->
    <View
        android:id="@+id/line"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/colorPrimaryDark" />

</LinearLayout>

2.2 编写响应的View类--TitleView

• 构造函数

public class TitleView extends LinearLayout{
    public TitleView(Context context) {
        this(context, null);
    }

    public TitleView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TitleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //设置属性
        initAttrs(context,attrs);
        //加载子控件
        initView(context);
    }
}

• 引入控件布局--initView(context);

      private void initView(Context context) {
        //引入布局
        LayoutInflater.from(context).inflate(R.layout.custom_view_title, this, true);
        //加载控件
        mTitle = findViewById(R.id.title);
        View line = findViewById(R.id.line);
        //子控件事件监听
        mTitle.setOnClickListener(this);
        if(mIsBack){//设置带返回键
            Drawable drawable= getResources().getDrawable(R.mipmap.ic_back,null);
            drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
            mTitle.setCompoundDrawables(drawable,null,null,null);
        }
        mTitle.setText(getTitleText());//设置标题栏文本
    }

• 定义接口

    public void setOnClickTitleListener(OnClickTitleListener listener) {//对外暴露接口
        this.mOnClickTitleListener = listener;
    }

    /*该接口的作用是为点击标题栏实现返回功能做准备*/
    public interface OnClickTitleListener {//标题栏点击接口
        void onClickTitle();
    }

• 设置属性

1. 准备属性文件--values/attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="TitleView">
        <!-- 标题栏文本-->
        <attr name="titleText" format="string" />
        <!-- 是否显示返回图标-->
        <attr name="isBack" format="boolean" />
    </declare-styleable>
</resources>

2. View类中获取属性--initAttrs(context,attrs);

    private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.TitleView);
        mTitleText  =   typedArray.getString(R.styleable.TitleView_titleText);
        mIsBack = typedArray.getBoolean(R.styleable.TitleView_isBack,false);
        typedArray.recycle();
    }

3. 属性Get/Set方法

   public String getTitleText() {
        return mTitleText;
    }

    public void setTitleText(String titleText) {
        mTitleText = titleText;
    }

    public Boolean getBack() {
        return mIsBack;
    }

    public void setBack(Boolean back) {
        mIsBack = back;
    }

2.3 在配置文件中引用自定义控件--activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <!-- 自定义控件的使用-->
    <com.xiaosu.customtitleview.TitleView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:isBack="true"
        app:layout_constraintTop_toTopOf="parent"
        app:titleText="我是标题栏" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

2.4 在主活动中实现接口--MainActivity

public class MainActivity extends AppCompatActivity {
    private TitleView titleView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        titleView = findViewById(R.id.titleView);
        titleView.setOnClickTitleListener(new TitleView.OnClickTitleListener() {
            @Override
            public void onClickTitle() {
                Toast.makeText(MainActivity.this, titleView.getTitleText(), Toast.LENGTH_SHORT).show();
            }
        });
    }
}

三、结语

山河无恙，人间皆安。