自定义控件之组合控件

发表于 | 更新于 | 分类于 | 阅读次数
好记性不如烂笔头

概述

日常开发中经常会有这样的需求，组合多个控件。这样既是顺应设计需求，也能是有减少代码工作量、重用控件、解耦等好处。因此，将自定义组合控件的步骤记录下来。毕竟好记性不如烂笔头！

本文Demo，点我下载！

步骤

1.定义一个类，并继承ViewGroup或者它的子类如RelativeLayout，LinearLayout等
2.实现构造方法
3.加载需要将控件组合起来的布局
4.找到并绑定布局中的控件
5.为控件赋值。方式有两种：
  • （1）.通过XML赋值（p.s：继续步骤6、7、8、9）
  • （2）.在代码中写一个public方法供外界调用赋值
6.在values目录下新建attrs.xml文件，并在文件中指定我们组合控件需要的属性

文件中name属性可随意填，最好起对应属性的名字；

format属性是这个attr的数据类型，具体有：

属性值 解析
boolean 表示attr是布尔类型的值，取值只能是true或false
string 表示attr是字符串类型
integer 表示attr是整数类型，取值只能是整数，不能是浮点数
float 表示attr是浮点数类型，取值只能是浮点数或整数
fraction 表示attr是百分数类型，取值只能以%结尾，例如30%、120.5%等
color 表示attr是颜色类型，例如#ff0000，也可以使用一个指向Color的资源，比如@android:color/background_dark，但是不能用0xffff0000这样的值
dimension 表示attr是尺寸类型，例如取值16px、16dp，也可以使用一个指向类型的资源
reference 表示attr的值只能指向某一资源的ID，例如取值@id/textView
enum 表示attr是枚举类型，在定义enum类型的attr时，可以将attr的format设置为enum，也可以不用设置attr的format属性，但是必须在attr节点下面添加一个或多个enum节点。取值时只能取其中一个枚举值
flag 表示attr是bit位标记，flag与enum有相似之处，定义了flag的attr，在设置值时，可以通过|设置多个值，而且每个值都对应一个bit位，这样通过按位或操作符|可以将多个值合成一个值，我们一般在用flag表示某个字段支持多个特性，需要注意的是，要想使用flag类型，不能在attr上设置format为flag，不要设置attr的format的属性，直接在attr节点下面添加flag节点即可。
细心的童鞋可能已经明白了flag与enum的差别，flag表示这几个值可以做或运算，比如dogFood，你可以叠加使用，狗狗食物可同时选牛肉、猪肉等。而狗狗的性别只能有一种。 format 可以选择多个类型 值 用 连接即可
7.在需要引入组合控件的布局文件中添加命名空间：
1
 xmlns:app="http://schemas.android.com/apk/res-auto"
8.引入组合控件
9.通过android:app的命名方式来指定组合控件的属性

实战案例

案例需求：组合一个登陆按钮，在点击登陆的时候显示一个progress和正在登陆文字

实现步骤
1.新建一个空项目，取名为customewidget
2.新建一个Activity，取名LoginActivity
3.从AndroidManifest将项目入口修改为LoginActivity，如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.lyichao.customewidget">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity"></activity>
        <activity android:name=".LoginActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
4.步入正题，开始组合控件。新建一个LoginButton类，并继承RelativeLayout
5.实现前两个构造函数

1577246220165

第一个构造函数用在代码中动态添加，第二个可以再代码和XML中都可以用。

6.从构造方法中添加init()方法，用于加载布局和获取属性值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public class LoginButton extends RelativeLayout {

    public LoginButton(Context context) {
        super(context);
        init(context,null);
    }


    public LoginButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, null);
    }

    private void init(Context context, AttributeSet attrs) {

    }
}
7.从init()方法中获取组合控件布局和绑定控件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
    private void init(Context context, AttributeSet attrs) {
        //设定默认textSize大小
        mDefaultTextSize = getResources().getDimensionPixelSize(R.dimen.text_default_size);
        //设定默认progress隐藏
        mIsLoadingShowing = false;
        //加载组合控件布局
        LayoutInflater.from(getContext()).inflate(R.layout.view_loading_button, this, true);

        //绑定mProgressBar和mTextView
        mProgressBar = (ProgressBar) findViewById(R.id.progress);
        mTextView = (TextView) findViewById(R.id.text);

        //因为通过xml赋值，所以需要定义attrs.xml组合控件属性集合
        if (attrs != null) {
            //这里说一下obtainStyledAttributes()方法中的俩个参数，第一个就是我们构造函数的attrs，第二个就是我们刚刚定义的属性集合的名字。
            TypedArray a = context.getTheme().obtainStyledAttributes(attrs,R.styleable.LoadingButton,0, 0);
            try {
                //赋值给未登陆时的登陆按钮文字大小
                float textSize = a.getDimensionPixelSize(R.styleable.LoadingButton_textSize, mDefaultTextSize);
                setTextSize(textSize);

                //赋值给未登陆时的登陆按钮文字
                String text = a.getString(R.styleable.LoadingButton_text);
                setText(text);

                //赋值给登陆中的登陆按钮文字
                mLoadingText = a.getString(R.styleable.LoadingButton_loadingText);

                if (mLoadingText == null) {
                    mLoadingText = getContext().getString(R.string.default_loading);
                }

                //赋值给progress颜色
                int progressColor = a.getColor(R.styleable.LoadingButton_progressColor, DEFAULT_COLOR);
                setProgressColor(progressColor);
                //赋值给登陆中的登陆按钮文字颜色
                int textColor = a.getColor(R.styleable.LoadingButton_textColor, DEFAULT_COLOR);

                setTextColor(textColor);

            } finally {
                a.recycle();
            }
        } else {
            //attrs未空时，设置默认属性
            int white = getResources().getColor(DEFAULT_COLOR);
            mLoadingText = getContext().getString(R.string.default_loading);
            setProgressColor(white);
            setTextColor(white);
            setTextSize(mDefaultTextSize);
        }


    }
8.在vaules目录先创建组合控件属性集合attr_loading_button.xml，如下所示：
1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="LoadingButton">
        <attr name="text" format="string"/>
        <attr name="loadingText" format="string"/>
        <attr name="textSize" format="dimension"/>
        <attr name="textColor" format="color|reference"/>
        <attr name="progressColor" format="color|reference"/>
    </declare-styleable>
</resources>
9.在activity_login.xml中添加两个EditText和引入组合控件LoadingButton
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".LoginActivity"
    android:id="@+id/activity_login"
    android:orientation="vertical"
    android:background="#F1F1F1">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"

        android:paddingLeft="15dp"
        android:paddingRight="15dp"

        android:paddingTop="20dp"
        android:paddingBottom="50dp"
        >

        <EditText
            android:id="@+id/txt_mobi"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/account"
            />

        <EditText
            android:id="@+id/txt_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/password"
            android:inputType="textPassword"/>
		
        //这里注意自定义组件应用的方式
        <com.lyichao.customewidget.LoginButton
            android:id="@+id/btn_login"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginTop="30dp"
            app:textColor="@color/colorAccent"
            android:enabled="false"
            app:text="登陆"
            android:background="@color/colorPrimary"
            app:loadingText="@string/loading"
            app:progressColor="@color/colorAccent"/>

    </LinearLayout>

</LinearLayout>
10.在LoginActivity.java添加登陆功能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
package com.lyichao.customewidget;

import android.content.Intent;
import android.os.CountDownTimer;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class LoginActivity extends AppCompatActivity {

    private LoginButton mButton;
    private EditText txt_mobi;
    private EditText txt_password;
    private CountDownTimer mCountDownTimer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        mButton = findViewById(R.id.btn_login);
        txt_mobi = findViewById(R.id.txt_mobi);
        txt_password = findViewById(R.id.txt_password);
        mButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                checkout(txt_mobi.getText().toString(),txt_password.getText().toString());
            }
        });

    }

    private void checkout(String txt_mobi, String txt_password) {
        System.out.println("触发===============>    "+"txt_mobi:"+txt_mobi+" "+"txt_password:"+txt_password);
        if (txt_mobi.equals("lyichao") && txt_password.equals("123456")){
            //模拟网络请求登陆
            mCountDownTimer = new MyCountDownTimer(2000,1000);
            mCountDownTimer.start();
        }else {
            Toast.makeText(this, "账号密码有误", Toast.LENGTH_SHORT).show();

        }

    }

    private class MyCountDownTimer extends CountDownTimer{

        /**
         * @param millisInFuture    The number of millis in the future from the call
         *                          to {@link #start()} until the countdown is done and {@link #onFinish()}
         *                          is called.
         * @param countDownInterval The interval along the way to receive
         *                          {@link #onTick(long)} callbacks.
         */
        public MyCountDownTimer(long millisInFuture, long countDownInterval) {
            super(millisInFuture, countDownInterval);
        }

        @Override
        public void onTick(long millisUntilFinished) {
            mButton.showLoading();
        }

        @Override
        public void onFinish() {

            Toast.makeText(LoginActivity.this, "登陆成功", Toast.LENGTH_SHORT).show();
            mButton.showButtonText();
            Intent intent = new Intent();
            intent.setClass(LoginActivity.this,MainActivity.class);
            startActivity(intent);
            finish();


        }
    }

}
最后效果如下：

坚持原创技术分享，您的支持将鼓励我继续创作！
0%