欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Android中自定义属性&自定义控件

程序员文章站 2022-06-08 23:46:32
...

在Android开发中,有一些控件布局往往会多次用到,这时就可以用自定义view的方法对其进行封装,以便复用。下面以登录页面中的输入框为例进行介绍~

1 自定义属性

  • 在res中的values目录下新建一个资源文件并命名为attrs.xml,用来存放我们自定义的属性
  • 确定自定义控件中可配置的属性,以输入框为例,即为icon:输入框前面的图标 hint:输入框里的提示 password:是否需要密文显示
  • 在attrs文件中声明样式,format里面的内容表示该属性接收什么类型的内容
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 声明样式-->
    <declare-styleable name="inputView">
        <!-- icon:输入框前面的图标 hint:输入框里的提示 password:是否需要密文显示 -->
        <attr name="input_icon" format="reference"></attr>
        <attr name="input_hint" format="string"></attr>
        <attr name="is_password" format="boolean"></attr>
    </declare-styleable>
</resources>

2 自定义控件

在定义完属性之后需要在自定义控件中使用提供的若干可配置属性,具体步骤如下:

  • 新建一个Java文件,命名为InputView.java,表示我们自定义的控件

  • 让InputView继承FrameLayout,并重写所有的构造方法

  • 新建布局文件,命名为input_view.xml,包含ImageView和EditText

  • 在InputView类中新建一个init方法,用来初始化,并在构造方法中调用init方法
    其中init方法所应包含的内容:

    (1)获取自定义属性:调用context.obtainStyledAttributes方法,第二个参数是我们自定义的输入控件的属性样式名,即R.styleable.inputView
    (2)绑定layout布局:传入之前创建的input_view布局
    (3)将布局与属性相关联

  • 在activity_login.xml主布局文件中调用之即可

input_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:gravity="center_vertical"
    android:layout_width="match_parent"
    android:layout_height="44dp"
    android:paddingLeft="@dimen/marginSize"
    android:paddingRight="@dimen/marginSize">

    <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/user"/>

    <EditText
        android:id="@+id/et_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="用户名"
        android:background="@null"
        android:paddingRight="@dimen/marginSize"
        android:paddingLeft="@dimen/marginSize"
        android:textSize="18sp"/>

</LinearLayout>

InputView.java代码

public class InputView extends FrameLayout {

    private int inputIcon;
    private String inputHint;
    private boolean isPassword;

    private View mView;
    private ImageView ivIcon;
    private EditText etInput;

    public InputView(@NonNull Context context) {
        super(context);
        init(context,null);
    }

    public InputView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context,attrs);
    }

    public InputView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context,attrs);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public InputView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context,attrs);
    }

    /**
     * 初始化方法
     * @param context
     * @param attrs
     */
    private void init(Context context,AttributeSet attrs){
        if(attrs==null) return;
        //获取自定义属性
        TypedArray typedArray=context.obtainStyledAttributes(attrs, R.styleable.inputView);
        inputIcon=typedArray.getResourceId(R.styleable.inputView_input_icon,R.mipmap.ic_launcher);
        inputHint=typedArray.getString(R.styleable.inputView_input_hint);
        isPassword=typedArray.getBoolean(R.styleable.inputView_is_password,false);
        typedArray.recycle();
        //绑定layout布局
        mView= LayoutInflater.from(context).inflate(R.layout.input_view,this,false);
        ivIcon=mView.findViewById(R.id.iv_icon);
        etInput=mView.findViewById(R.id.et_input);
        //布局关联属性
        ivIcon.setImageResource(inputIcon);
        etInput.setHint(inputHint);
        etInput.setInputType(isPassword? InputType.TYPE_CLASS_TEXT|InputType.TYPE_TEXT_VARIATION_PASSWORD:InputType.TYPE_CLASS_TEXT);

        addView(mView);
    }

    /**
     * 返回输入内容
     * @return
     */
    public String getInput(){
        return etInput.getText().toString().trim();
    }
}

activity_login.xml

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include layout="@layout/nav_bar"/>

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/default_picture"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginTop="@dimen/marginSize"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/logo" />

    <com.example.viewdefinedtest.view.InputView
        android:layout_width="match_parent"
        android:layout_height="44dp"
        android:layout_marginTop="@dimen/marginSize"
        app:input_icon="@drawable/user"
        app:input_hint="用户名"
        app:is_password="false">
    </com.example.viewdefinedtest.view.InputView>

    <View style="@style/line" />

    <com.example.viewdefinedtest.view.InputView
        android:layout_width="match_parent"
        android:layout_height="44dp"
        android:layout_marginTop="@dimen/marginSize"
        app:input_icon="@drawable/password"
        app:input_hint="密码"
        app:is_password="true">
    </com.example.viewdefinedtest.view.InputView>

    <View style="@style/line" />

    <Button
        style="@style/commitBtn"
        android:text="登录"
        android:layout_marginTop="@dimen/marginSize"/>

</LinearLayout>

注:里面的button和分割线line也是自定义样式,这里不重点讲

到此,就完成了自定义输入控件了。
(ps:该内容的学习来自于慕课网~)

Android中自定义属性&自定义控件
相关标签: Android