Android-自定义控件

文章目录[隐藏]

一、前言
二、继承已有控件
三、继承布局
四、继承根 View
五、小结

一、前言

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

1.1、自定义控件的长处

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

1.2、自定义控件的形式

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

二、继承已有控件

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

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

具体实现步骤如下所示：

新建资源文件 R.drawable.btn_submit

<code class="java"><?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 类

<code class="java">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);  // 红色
    }
}

应用

<code class="java"><?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，成果如下所示：

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

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

具体实现步骤如下所示：

新建单个 Item 的布局 item_layout

<code class="java">    <?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，并写一个设置内容与是否显示箭头的办法

<code class="java">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);
        }
    }
}

```

应用

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

<code class="java"> 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);

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

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

在 attrs.xml 中增加属性；

<code class="java"><?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>

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

<code class="java">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 中应用。

<code class="java"><?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。

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

具体代码如下所示：

<code class="java">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 自定义控件的三种形式，每一种形式都给出了一个简略的案例来解说。

搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]‍，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Android-自定义控件