关于android:Android-自定义控件

7次阅读

共计 8061 个字符，预计需要花费 21 分钟才能阅读完成。

对于 Android 开发者来说，原生控件往往无奈满足要求，须要开发者自定义一些控件，因而，须要去理解自定义 view 的实现原理。这样即便碰到须要自定义控件的时候，也能够熟能生巧。

多个中央复用；
对立的逻辑款式；
精简代码。

继承已有控件；
继承布局；
继承根 View。

咱们要自定义的控件和已有控件十分类似，那么咱们就能够在已有控件的根底上，继承组件，减少属性，来实现本人想要的成果。

案例一： 自定义提交按钮（按钮点击变色）, 成果如下所示：

具体实现步骤如下所示：

新建资源文件 R.drawable.btn_submit

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/btn_submit_p" android:state_pressed="true"/>
    <item android:drawable="@mipmap/btn_submit_n" />
</selector>

新建 SubmitButton 类继承 Button 类

public class SubmitButton extends Button {public SubmitButton(Context context, AttributeSet attrs) {super(context, attrs);
        init();}

    private void init() {setBackgroundResource(R.drawable.btn_submit);
        setText("自定义提交按钮");
        setTextSize(18);
        setTextColor(0xffffffff);  // 红色
    }
}

应用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn_normal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="45dp"
        android:layout_marginTop="30dp"
        android:layout_marginEnd="45dp"
        android:text="一般 Button"
        android:textSize="15sp" />

    <com.zjgsu.customviewdemo.SubmitButton
        android:id="@+id/btn_custom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="45dp"
        android:layout_marginTop="30dp"
        android:layout_marginEnd="45dp" />

</LinearLayout>

当单个控件不好实现咱们须要的成果的时候，即须要有多个已有控件来实现咱们的成果，这时候咱们能够利用继承布局的形式来实现，能够继承线性布局或者绝对布局等。

案例二： 自定义 Item，成果如下所示：

咱们能够看到第一个 Item 上三个因素都是全的，右边的内容、左边的内容和左边的箭头，然而第二个和第三个则是只有箭头和只有内容，这个是依据咱们写的办法设置的。

具体实现步骤如下所示：

新建单个 Item 的布局 item_layout

    <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical"
       tools:context=".MainActivity">
   
       <View
           android:layout_width="wrap_content"
           android:layout_height="1px"
           android:background="#898888" />
   
       <RelativeLayout
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:background="@drawable/selector_item"
           android:clickable="true"
           android:focusable="true"
           android:padding="10dp">
   
           <TextView
               android:id="@+id/tv_left"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_alignParentStart="true"
               android:layout_centerVertical="true"
               android:textColor="#333333"
               android:textSize="15sp" />
   
           <LinearLayout
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_alignParentEnd="true"
               android:layout_centerVertical="true"
               android:gravity="center_vertical">
   
               <TextView
                   android:id="@+id/tv_right"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:layout_marginEnd="5dp"
                   android:textColor="#646464"
                   android:textSize="14sp" />
   
               <ImageView
                   android:id="@+id/iv_arrow"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:src="@mipmap/arrow" />
   
           </LinearLayout>
   
       </RelativeLayout>
   
       <View
           android:layout_width="wrap_content"
           android:layout_height="1px"
           android:background="#898888" />
   
   </LinearLayout>

新建 ItemView 继承自 RelativeLayout，并写一个设置内容与是否显示箭头的办法

public class ItemView extends RelativeLayout {

    private TextView tvLeft;
    private TextView tvRight;
    private ImageView ivArrow;

    public ItemView(Context context, AttributeSet attrs) {super(context, attrs);

        LayoutInflater.from(context).inflate(R.layout.item_layout, this);

        tvLeft = findViewById(R.id.tv_left);
        tvRight = findViewById(R.id.tv_right);
        ivArrow = findViewById(R.id.iv_arrow);
    }

    /**

     *
     * @param tvLeftStr   右边内容
     * @param tvRightStr  左边内容
     * @param isShowArrow 是否显示箭头
     */
    public void setView(String tvLeftStr, String tvRightStr, boolean isShowArrow) {if (tvLeftStr != null) {tvLeft.setText(tvLeftStr);
        }

        if (tvRightStr != null) {tvRight.setText(tvRightStr);
        }

        if (isShowArrow) {ivArrow.setVisibility(VISIBLE);
        } else {ivArrow.setVisibility(GONE);
        }
    }
}

```

应用

<com.zjgsu.customviewdemo.ItemView
    android:id="@+id/item_1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp" />

 item1 = findViewById(R.id.item_1);
 item2 = findViewById(R.id.item_2);
 item3 = findViewById(R.id.item_3);

 item1.setView("姓名", "Bob", true);
 item2.setView("年龄", null, true);
 item3.setView("学校", "中国人民大学", false);

自定义属性个别有以下三个步骤：

在 attrs.xml 中增加属性；

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ItemView">
        <attr name="leftText" format="string"/>
        <attr name="rightText" format="string"/>
        <attr name="showArrow" format="boolean"/>
    </declare-styleable>
</resources>

在自定义的控件中绑定属性；

public class ItemView extends RelativeLayout {

    private TextView tvLeft;
    private TextView tvRight;
    private ImageView ivArrow;

    public ItemView(Context context, AttributeSet attrs) {super(context, attrs);

        LayoutInflater.from(context).inflate(R.layout.item_layout, this);

        tvLeft = findViewById(R.id.tv_left);
        tvRight = findViewById(R.id.tv_right);
        ivArrow = findViewById(R.id.iv_arrow);

        // 获取自定义属性
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ItemView);

        String leftText = a.getString(R.styleable.ItemView_leftText);
        String rightText = a.getString(R.styleable.ItemView_rightText);
        boolean showArrow = a.getBoolean(R.styleable.ItemView_showArrow, true);

        setView(leftText, rightText, showArrow);

        a.recycle();}

    /**

     *
     * @param tvLeftStr   右边内容
     * @param tvRightStr  左边内容
     * @param isShowArrow 是否显示箭头
     */
    public void setView(String tvLeftStr, String tvRightStr, boolean isShowArrow) {if (tvLeftStr != null) {tvLeft.setText(tvLeftStr);
        }

        if (tvRightStr != null) {tvRight.setText(tvRightStr);
        }

        if (isShowArrow) {ivArrow.setVisibility(VISIBLE);
        } else {ivArrow.setVisibility(GONE);
        }
    }
}
```

在 xml 中应用。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ItemView="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ItemActivity">

    <com.zjgsu.customviewdemo.ItemView
        android:id="@+id/item_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        ItemView:leftText="姓名"
        ItemView:rightText="Bob1"
        ItemView:showArrow="true" />

    <com.zjgsu.customviewdemo.ItemView
        android:id="@+id/item_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        ItemView:leftText="年龄" />

    <com.zjgsu.customviewdemo.ItemView
        android:id="@+id/item_3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        ItemView:leftText="学校"
        ItemView:rightText="中国人民大学"
        ItemView:showArrow="false" />

</LinearLayout>

当咱们须要实现一些非凡款式并且继承已有控件和布局都无奈实现，那么咱们就须要通过继承根 View 的形式本人去画了，即自定义 View。

案例三： 自定义 View，实现折线图，成果如下所示：

具体代码如下所示：

public class LineView extends View {

    Paint linePaint;

    public LineView(Context context, @Nullable AttributeSet attrs) {super(context, attrs);

        initPaint();}

    // 初始化画笔
    private void initPaint() {linePaint = new Paint();
        linePaint.setColor(Color.BLUE);
        linePaint.setStrokeWidth(3);
    }

    @Override
    protected void onDraw(Canvas canvas) {super.onDraw(canvas);


        // 原点
        int xPoint = 200;
        int yPoint = 400;

        // y 轴
        canvas.drawLine(xPoint, 400 - 300, xPoint, yPoint, linePaint);
        // x 轴
        canvas.drawLine(xPoint, yPoint, xPoint + 500, yPoint, linePaint);

        // 画线  上一条线的起点就是要画的线的终点
        canvas.drawLine(xPoint, yPoint, xPoint + 80, yPoint - 150, linePaint);
        canvas.drawLine(xPoint + 80, yPoint - 150, xPoint + 160, yPoint - 100, linePaint);
        canvas.drawLine(xPoint + 160, yPoint - 100, xPoint + 240, yPoint - 200, linePaint);
        canvas.drawLine(xPoint + 240, yPoint - 200, xPoint + 400, yPoint - 100, linePaint);
    }
}

这里的自定义 View 案例很简略，然而 Android 外面的自定义 View 所波及的常识还是很多的，也算是 Android 进阶的一个内容，然而这篇博客并不是讲自定义 View 的，所以这里就不开展讲了。

这篇博客次要讲了 Android 自定义控件的三种形式，每一种形式都给出了一个简略的案例来解说。

正文完

android

发表至： android

2020-10-13

0

关于android:Mtk-Camera-MtkCam3架构学习

关于android:2年Android开发经验字节跳动腾讯OPPO小米Android开发面试总结

关于android:Kotlin实战三表示与选择

关于android:适用于-Flutter-的-Google-移动广告-SDK-正式版现已发布

关于react.js:2020前端面试系列之JSX是什么

关于android:Android-自定义控件

一、前言

1.1、自定义控件的长处

1.2、自定义控件的形式

二、继承已有控件

三、继承布局

3.1、通过调用办法设置 Item 的内容

3.2、通过自定义属性设置 Item 的内容

四、继承根 View

五、小结

站内搜索