自定义控件 - 封装公用HeadView

作者: 沐左 | 来源:发表于2018-07-23 18:30 被阅读0次

自定义控件 - 封装公用HeadView
PullRefreshLayout--高度自定义headview
WPF-自定义控件
AndroidStudio发布项目到Maven(JCenter)
XIB和代码自定义控件的步骤
你真的懂Android的系统资源么？答案【6】
iOS-自定义控件相关
React Native封装iOS自定义原生组件
Android自定义控件：带动画效果的手机号输入框（3-4-4
UI-Xib

blog 中会记录一些自定义控件的实现过程，完整的使用和其他的自定义控件可以参考，常用控件库WidgetProductor整理

设计样式

这个控件的用途是替换项目中使用的界面的头部布局，减少重复代码的书写，提高效率。
为了通用，我们设计的样式如下，分别为：
左侧ImageView、左侧TextView、标题TextView、标题容器FrameLayout、右侧TextView、右侧ImageView

headView

实现

布局文件 `kingoit_head_view.xml`

<?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:id="@+id/kingo_head_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_vertical">

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

    <android.support.constraint.Guideline
        android:id="@+id/guideline8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.8" />
    <!--title-->
    <TextView
        android:id="@+id/kingo_head_title_tv"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:clickable="true"
        android:ellipsize="end"
        android:gravity="center"
        android:lines="1"
        android:paddingLeft="@dimen/padding2"
        android:paddingRight="@dimen/padding2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/guideline2"
        app:layout_constraintRight_toLeftOf="@+id/guideline8"
        app:layout_constraintTop_toTopOf="parent" />

    <!--left_img-->
    <ImageView
        android:id="@+id/kingo_head_left_img"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:clickable="true"
        android:paddingLeft="8dp"
        android:paddingStart="8dp"
        android:scaleType="centerInside"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />

    <!--left_tv-->
    <TextView
        android:id="@+id/kingo_head_left_tv"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:clickable="true"
        android:ellipsize="end"
        android:gravity="center"
        android:lines="1"
        android:paddingLeft="8dp"
        android:paddingStart="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/kingo_head_left_img"
        app:layout_constraintStart_toEndOf="@+id/kingo_head_left_img"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />

    <!--head_container-->
    <FrameLayout
        android:id="@+id/kingo_head_container"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:clickable="true"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/guideline2"
        app:layout_constraintRight_toLeftOf="@+id/guideline8"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_editor_absoluteY="0dp" />

    <!--right_img-->
    <ImageView
        android:id="@+id/kingo_head_right_img"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:clickable="true"
        android:paddingEnd="8dp"
        android:paddingRight="8dp"
        android:scaleType="centerInside"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints"
        tools:layout_editor_absoluteY="0dp" />

    <!--right_tv-->
    <TextView
        android:id="@+id/kingo_head_right_tv"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_toLeftOf="@+id/kingo_head_right_img"
        android:layout_toStartOf="@+id/kingo_head_right_img"
        android:clickable="true"
        android:ellipsize="end"
        android:gravity="center"
        android:paddingEnd="8dp"
        android:paddingRight="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/kingo_head_right_img"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints"
        tools:layout_editor_absoluteY="0dp" />

</android.support.constraint.ConstraintLayout>

设置属性 `res\values\attrs.xml`

在res\values\attrs.xml中设置使用该布局时可用的属性值

    <!--KingoitHeadView ，公用头部控件-->
    <declare-styleable name="KingoitHeadView">
        <!--左侧ImageView-->
        <attr name="headLeftImgSrc" format="reference|integer" />
        <attr name="headLeftImgVisible" format="boolean" />
        <attr name="headLeftImgColor" format="color" />
        <!--左侧TextView-->
        <attr name="headLeftText" format="string" />
        <attr name="headLeftTextColor" format="color" />
        <attr name="headLeftTextSize" format="dimension" />
        <attr name="headLeftTextBackground" format="reference|integer" />
        <!--标题TextView-->
        <attr name="headTitleText" format="string" />
        <attr name="headTitleTextColor" format="color" />
        <attr name="headTitleTextSize" format="dimension" />
        <attr name="headTitleTextVisible" format="boolean" />
        <!--右侧TextView-->
        <attr name="headRightText" format="string" />
        <attr name="headRightTextColor" format="color" />
        <attr name="headRightTextSize" format="dimension" />
        <attr name="headRightTextBackground" format="reference|integer" />
        <!--右侧ImageView-->
        <attr name="headRightImgSrc" format="reference|integer" />
        <attr name="headRightImgVisible" format="boolean" />
        <attr name="headRightImgColor" format="color" />
    </declare-styleable>

控件实现 `KingoitHeadView`

/**
 * 常用头部导航控件
 *
 * @author zuo
 * @date 2018/7/19 16:56
 */
public class KingoitHeadView extends FrameLayout implements View.OnClickListener {
    /**
     * 头部控件，以此为：左侧ImageView、左侧TextView、标题TextView、标题容器FrameLayout、右侧TextView、右侧ImageView
     */
    private ImageView headLeftImg;
    private TextView headLeftTv;
    private TextView headTitleTv;
    private FrameLayout headContainer;
    private TextView headRightTv;
    private ImageView headRightImg;
    private boolean mLeftViewClickable = true;
    private OnClickListener listener;

    public interface OnClickListener {
        /**
         * 左侧两个控件，点击事件默认一体处理，也可以把事件交给外部区分处理
         *
         * @param view
         */
        void leftView(View view);

        /**
         * 右侧两个控件，点击事件默认一体处理，也可以把事件交给外部区分处理
         *
         * @param view
         */
        void rightView(View view);

        /**
         * 头部两个控件，点击事件默认一体处理，也可以把事件交给外部区分处理
         *
         * @param view
         */
        void titleView(View view);
    }

    public KingoitHeadView(@NonNull Context context) {
        super(context);
    }

    public KingoitHeadView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        View view = View.inflate(context, R.layout.kingoit_head_view, this);
        headLeftImg = view.findViewById(R.id.kingo_head_left_img);
        headLeftTv = view.findViewById(R.id.kingo_head_left_tv);
        headTitleTv = view.findViewById(R.id.kingo_head_title_tv);
        headContainer = view.findViewById(R.id.kingo_head_container);
        headRightTv = view.findViewById(R.id.kingo_head_right_tv);
        headRightImg = view.findViewById(R.id.kingo_head_right_img);
        headLeftImg.setOnClickListener(this);
        headLeftTv.setOnClickListener(this);
        headTitleTv.setOnClickListener(this);
        headContainer.setOnClickListener(this);
        headRightTv.setOnClickListener(this);
        headRightImg.setOnClickListener(this);
        initAttributes(context, attrs);
    }

    /**
     * 初始化，KingoitHeadView 的自定义属性 ，并和相关控件关联上
     */
    private void initAttributes(@NonNull Context context, @Nullable AttributeSet attrs) {
        @SuppressLint("Recycle")
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.KingoitHeadView);
        headLeftImg.setImageResource(typedArray.getResourceId(R.styleable.KingoitHeadView_headLeftImgSrc, 0));
        headLeftImg.setVisibility(typedArray.getBoolean(R.styleable.KingoitHeadView_headLeftImgVisible, true) ? View.VISIBLE : View.GONE);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            headLeftImg.setImageTintList(ColorStateList.valueOf(typedArray.getColor(R.styleable.KingoitHeadView_headLeftImgColor, Color.LTGRAY)));
            headRightImg.setImageTintList(ColorStateList.valueOf(typedArray.getColor(R.styleable.KingoitHeadView_headRightImgColor, Color.LTGRAY)));
        }
        headLeftTv.setText(typedArray.getString(R.styleable.KingoitHeadView_headLeftText));
        headLeftTv.setTextColor(typedArray.getColor(R.styleable.KingoitHeadView_headLeftTextColor, Color.BLACK));
        headLeftTv.setTextSize(TypedValue.COMPLEX_UNIT_PX, typedArray.getDimension(R.styleable.KingoitHeadView_headLeftTextSize, 32));
        headLeftTv.setBackgroundResource(typedArray.getResourceId(R.styleable.KingoitHeadView_headLeftTextBackground, R.color.transparent));
        headTitleTv.setText(typedArray.getString(R.styleable.KingoitHeadView_headTitleText));
        headTitleTv.setTextColor(typedArray.getColor(R.styleable.KingoitHeadView_headTitleTextColor, Color.BLACK));
        headTitleTv.setTextSize(TypedValue.COMPLEX_UNIT_PX, typedArray.getDimension(R.styleable.KingoitHeadView_headTitleTextSize, 38));
        headTitleTv.setVisibility(typedArray.getBoolean(R.styleable.KingoitHeadView_headTitleTextVisible, true) ? View.VISIBLE : View.GONE);
        headRightTv.setText(typedArray.getString(R.styleable.KingoitHeadView_headRightText));
        headRightTv.setTextColor(typedArray.getColor(R.styleable.KingoitHeadView_headRightTextColor, Color.BLACK));
        headRightTv.setTextSize(TypedValue.COMPLEX_UNIT_PX, typedArray.getDimension(R.styleable.KingoitHeadView_headRightTextSize, 32));
        headRightTv.setBackgroundResource(typedArray.getResourceId(R.styleable.KingoitHeadView_headRightTextBackground, R.color.transparent));
        headRightImg.setImageResource(typedArray.getResourceId(R.styleable.KingoitHeadView_headRightImgSrc, 0));
        headRightImg.setVisibility(typedArray.getBoolean(R.styleable.KingoitHeadView_headRightImgVisible, true) ? View.VISIBLE : View.GONE);
    }

    //获取布局的相关控件，便于在代码中动态设置相关属性

    public ImageView getHeadLeftImg() {
        return headLeftImg;
    }

    public TextView getHeadLeftTv() {
        return headLeftTv;
    }

    public TextView getHeadTitleTv() {
        return headTitleTv;
    }

    public FrameLayout getHeadContainer() {
        return headContainer;
    }

    public TextView getHeadRightTv() {
        return headRightTv;
    }

    public ImageView getHeadRightImg() {
        return headRightImg;
    }

    /**
     * 控制右侧控件展示，地图和列表切换
     *
     * @param toggledToMap
     */
    public KingoitHeadView toggledRightView(boolean toggledToMap) {
        Drawable img;
        if (toggledToMap) {
            headRightTv.setText(getResources().getString(com.kingoit.onemap.device.R.string.list));
            img = getResources().getDrawable(com.kingoit.onemap.device.R.drawable.icon_top_list);
        } else {
            headRightTv.setText(getResources().getString(com.kingoit.onemap.device.R.string.map));
            img = getResources().getDrawable(com.kingoit.onemap.device.R.drawable.icon_top_map);
        }
        headRightImg.setImageDrawable(img);
        return this;
    }

    /**
     * 设置监听事件
     *
     * @param listener
     * @return
     */
    public KingoitHeadView setListener(OnClickListener listener) {
        this.listener = listener;
        return this;
    }

    /**
     * 控制右侧控件是否展示
     *
     * @param isShow
     * @return
     */
    public KingoitHeadView showRightView(boolean isShow) {
        headRightImg.setVisibility(isShow ? View.VISIBLE : View.INVISIBLE);
        headRightTv.setVisibility(isShow ? View.VISIBLE : View.INVISIBLE);
        return this;
    }

    /**
     * 控制左侧控件是否展示
     *
     * @param isShow
     * @return
     */
    public KingoitHeadView showLeftView(boolean isShow) {
        headLeftImg.setVisibility(isShow ? View.VISIBLE : View.INVISIBLE);
        headLeftTv.setVisibility(isShow ? View.VISIBLE : View.INVISIBLE);
        return this;
    }


    /**
     * 设置左侧TV控件展示内容
     *
     * @param leftText
     * @return
     */
    public KingoitHeadView setLeftText(@NonNull String leftText, boolean canClick) {
        setLeftView(leftText, null);
        this.mLeftViewClickable = canClick;
        return this;
    }

    /**
     * 设置左侧TV  和 IV 控件展示内容
     *
     * @param leftText
     * @return
     */
    public KingoitHeadView setLeftView(@NonNull String leftText, Drawable leftImg) {
        this.mLeftViewClickable = true;
        headLeftTv.setText(TextUtils.isEmpty(leftText) ? "" : leftText);
        if (leftImg == null) {
            headLeftImg.setImageResource(0);
        } else {
            headLeftImg.setImageDrawable(leftImg);
        }
        return this;
    }

    @Override
    public void onClick(View v) {
        if (CommonUtils.isFastClick() || listener == null) {
            return;
        }
        switch (v.getId()) {
            case R.id.kingo_head_left_img:
                if (mLeftViewClickable) {
                    listener.leftView(headLeftImg);
                }
                break;
            case R.id.kingo_head_left_tv:
                if (mLeftViewClickable) {
                    listener.leftView(headLeftTv);
                }
                break;
            case R.id.kingo_head_right_img:
                listener.rightView(headRightImg);
                break;
            case R.id.kingo_head_right_tv:
                listener.rightView(headRightTv);
                break;
            case R.id.kingo_head_title_tv:
                listener.titleView(headTitleTv);
                break;
            case R.id.kingo_head_container:
                listener.titleView(headContainer);
                break;
        }

    }
}

控件使用

公用头使用

布局文件
上图展示的两个HeadView的使用如下：

    <com.kingoit.navigation.KingoitHeadView
        android:id="@+id/head_view_0"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_marginBottom="10dp"
        android:background="@color/colorWhite"
        app:headLeftImgSrc="@drawable/arrow_left"
        app:headRightImgVisible="false"
        app:headRightText="菜单"
        app:headRightTextColor="@color/com_app_theme_color"
        app:headTitleText="第一个头"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <com.kingoit.navigation.KingoitHeadView
        android:id="@+id/head_view_1"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_marginBottom="10dp"
        android:background="@color/colorWhite"
        app:headLeftImgColor="@color/com_app_theme_color"
        app:headLeftImgSrc="@drawable/arrow_left"
        app:headRightImgColor="@color/com_app_theme_color"
        app:headRightImgSrc="@drawable/delete"
        app:headRightText="说明"
        app:headRightTextColor="@color/com_app_theme_color"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

其他代码
第二个HeadView 的使用有些不一样，我们在HeadView中引入了另外一个TextView的布局，并动态设置了一个样式。

        //动态设置shape
        GradientDrawable drawable = new GradientDrawable();
        drawable.setCornerRadius(2);
        drawable.setStroke(4, Color.parseColor("#3F51B5"));
        drawable.setColor(Color.parseColor("#FFFFFF"));
        headTitleTv.setBackground(drawable);

至于Spinner的效果是用到了另一个自定义控件，在我们的控件库中会有。

自定义控件 - 封装公用HeadView
blog 中会记录一些自定义控件的实现过程，完整的使用和其他的自定义控件可以参考，常用控件库WidgetProdu...
PullRefreshLayout--高度自定义headview
引言下拉刷新控件是非常常用的控件，但是github上少有可以自定义headview的开源库，所以这里自己造下轮子...
WPF-自定义控件
做界面，要想快，就得学会封装控件，对于一些比较常用的控件，封装成公用的控件，可以提升开发效率。在开发前，可以先看下...
AndroidStudio发布项目到Maven(JCenter)
写在前面：之前在写项目时，喜欢将重复的功能或者自定义控件封装到公用的模块中，方便其他项目共用。当项目越来...
XIB和代码自定义控件的步骤
title : XIB和代码自定义控件的步骤category : UI 代码和XIB自定义控件和封装子控件的步骤...
你真的懂Android的系统资源么？答案【6】
用什么办法可以同时控制多个控件的多个属性值？自定义style.xml设置公用属性在控件的xml中引入自定义的s...
iOS-自定义控件相关
本篇涵盖自定义控件、视图等. 1.iOS开发-轻松学会封装自定义视图view（自定义弹框封装详解）2.iOS开发-...
React Native封装iOS自定义原生组件
简单描述下RN如何封装iOS自定义原生组件，做了一个简单的demo，封装一个DatePicker控件，控件中有取消...
Android自定义控件：带动画效果的手机号输入框（3-4-4
项目中很多地方，使用到了自定义控件。简单点的，如个性控件的定制，多个组件的组合封装等。我们需要了解自定义控件的基...
UI-Xib
Xib的加载方法1 方法2 自定义控件view的步骤新建自定义控件类修改xib中view的类名封装xib的...

自定义控件 - 封装公用HeadView

设计样式

实现

布局文件 `kingoit_head_view.xml`

设置属性 `res\values\attrs.xml`

控件实现 `KingoitHeadView`

控件使用

相关文章

自定义控件 - 封装公用HeadView

PullRefreshLayout--高度自定义headview

WPF-自定义控件

AndroidStudio发布项目到Maven(JCenter)

XIB和代码自定义控件的步骤

你真的懂Android的系统资源么？答案【6】

iOS-自定义控件相关

React Native封装iOS自定义原生组件

Android自定义控件：带动画效果的手机号输入框（3-4-4

UI-Xib

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

自定义控件 - 封装公用HeadView

设计样式

实现

布局文件 kingoit_head_view.xml

设置属性 res\values\attrs.xml

控件实现 KingoitHeadView

控件使用

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

布局文件 `kingoit_head_view.xml`

设置属性 `res\values\attrs.xml`

控件实现 `KingoitHeadView`