首页 > 技术文章 > 如何自定义组件

liuliangliang 2018-02-28 14:30 原文

自定义组件的作用是用于重复使用的东西

1.自定义标题栏

public class ConstraintLayout_Title_Top extends ConstraintLayout {
    @BindView(R.id.iv_back)
    ImageView iv_back;
    @BindView(R.id.tv_title_name)
    TextView tvTitleName;
    @BindView(R.id.iv_search)
    ImageView ivSearch;
    @BindView(R.id.iv_share)
    ImageView ivShare;

    public void initView(Context context) {
        //加载布局
        View.inflate(context, R.layout.activity_constraint_layout__title__top, ConstraintLayout_Title_Top.this);
        ButterKnife.bind(this);
    }

    public ConstraintLayout_Title_Top(Context context) {
        super(context);
        initView(context);
    }

    public ConstraintLayout_Title_Top(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

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

    //提供back键接口 用于返回页面
    public void setBackOnlickListener(OnClickListener listener){
        iv_back.setOnClickListener(listener);
    }

    //提供tv_title_name接口  用于文字展示
    public void setTitleName(String name){
        tvTitleName.setText(name);
    }

    //提供iv_search接口 用于跳转店铺内搜索
    public void setSearchOnlickListener(OnClickListener listener){
        ivSearch.setOnClickListener(listener);
    }

    //提供iv_share接口 用于分享
    public void setShareOnclickListener(OnClickListener listener){
        ivShare.setOnClickListener(listener);
    }

    //根据传入的值 隐藏不同的UI
    //"0" back键 文字
    //"1" back键 文字 搜索
    //"2" back键 文字 搜索 分享
    //"3" 文字
    public void showUI(int num){
        switch (num){
            case 0:
                ivSearch.setVisibility(View.GONE);
                ivShare.setVisibility(View.GONE);
                break;
            case 1:
                ivSearch.setVisibility(View.VISIBLE);
                ivShare.setVisibility(View.GONE);
                break;
            case 2:
                ivSearch.setVisibility(View.VISIBLE);
                ivShare.setVisibility(View.VISIBLE);
                break;
            case 3:
                iv_back.setVisibility(View.GONE);
                ivSearch.setVisibility(View.GONE);
                ivShare.setVisibility(View.GONE);
                break;
        }

    }
}

布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="70dp"
    android:background="@mipmap/btn_background">


    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline2"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline3"
        app:layout_constraintGuide_percent="0.34"
        android:orientation="horizontal" />

    <ImageView
        android:id="@+id/iv_back"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="15dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:srcCompat="@mipmap/goods_category_return"
        app:layout_constraintTop_toTopOf="@+id/guideline3"
        android:layout_marginTop="8dp" />

    <TextView
        android:id="@+id/tv_title_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textSize="18sp"
        android:textStyle="bold"
        android:textColor="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp"
        app:layout_constraintTop_toTopOf="@+id/guideline3"
        android:layout_marginTop="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent" />

    <ImageView
        android:visibility="gone"
        android:id="@+id/iv_search"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_marginBottom="8dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline3"
        app:srcCompat="@mipmap/goods_category_search"
        app:layout_constraintVertical_bias="0.4" />

    <ImageView
        android:visibility="gone"
        android:id="@+id/iv_share"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/share"
        app:layout_constraintTop_toTopOf="@+id/guideline3"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp"
        android:layout_marginRight="42dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintVertical_bias="0.4" />


</android.support.constraint.ConstraintLayout>

使用

 @BindView(R.id.constraintLayout_Title_Top)
 ConstraintLayout_Title_Top constraintLayoutTitleTop;

//标题栏设置
    private void initTitle(){
        //back键
        constraintLayoutTitleTop.setBackOnlickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        constraintLayoutTitleTop.setTitleName("webview页面");
    }

 

推荐阅读