自定义控件——组合控件

  • 先看效果图
    这里写图片描述
    在这里先不考虑这个控件的实用性,主要是为了学习组合控件的方法。

  • 1.首先要做的是创建布局文件

  • testtest.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_name"
        android:layout_marginTop="30dp"
        android:layout_width="50dp"
        android:layout_height="20dp"
        android:gravity="center_vertical"
        android:text="类型:"
        android:textSize="15sp"/>

    <FrameLayout
        android:layout_marginTop="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ProgressBar
            android:id="@+id/pb"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:progressDrawable="@drawable/pb_bg_style"/>

        <TextView
            android:id="@+id/tv_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="xxx已用"
            android:textSize="15sp"/>

        <TextView
            android:id="@+id/tv_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:text="xxx可用"
            android:textSize="15sp"/>
    FrameLayout>

LinearLayout>
  • 修改进度条样式,pb_bg_style.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <item android:id="@android:id/background">
        <shape>
            <solid android:color="#D0CED1" />
        shape>
    item>
    
    <item android:id="@android:id/progress">
        
        <clip>
            <shape>
                <solid android:color="@android:color/holo_red_light" />
            shape>
        clip>
    item>
layer-list>

效果:这里写图片描述

  • 2.创建类继承布局的根节点
public class CustomProgress extends LinearLayout {
    public ProgressView2(Context context) {
        this(context,nul); 
    }
    public CustomProgress (Context context, AttributeSet attrs) {
        super(context, attrs);
        //注意这里使用打气筒的第三个参数要使用this,相当于把加载的这个view对象传给父类
        View.inflate(context, R.layout.testtest, this);
    }
}  
  • 3.创建自己的属性标签

<resources> 
 
    <declare-styleable name="CustomProgress ">
        <attr name="pgText" format="reference|string" />
    declare-styleable>
resources>
  • 4.在布局文件中使用自定义属性标签
"http://schemas.android.com/apk/res/android"
    xmlns:myPb="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="com.test.qrcode.view.TestActitivy">

    <com.test.qrcode.view.CustomProgress
        android:id="@+id/custom_pb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        myPb:pgText="自定义"/>

  • 5.获取属性值,并给控件对外提供方法,设置值
public CustomProgress(Context context, AttributeSet attrs) {
        super(context, attrs);
        View.inflate(context, R.layout.testtest, this);
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ProgressView);
        String name = ta.getString(R.styleable.ProgressView_pgText);

        tv_name = (TextView) findViewById(R.id.view_psv_tv_title);
        tv_left = (TextView) findViewById(R.id.view_psv_tv_left);
        tv_right = (TextView) findViewById(R.id.view_psv_tv_right);
        pb = (ProgressBar) findViewById(R.id.view_psv_progress);

        tv_name.setText(name);
        ta.recycle();
    }
    // 设置进度条左边的信息
    public void setTextLeft(String text) {
        tv_left.setText(text);
    }
    // 设置进度条右边的信息
    public void setTextRight(String text) {
        tv_right.setText(text);
    }
    // 设置进度条最大值
    public void setPbMax(int max) {
        pb.setMax(max);
    }
    // 设置进度条进度值
    public void setProgress(int progress) {
        pb.setProgress(progress);
    } 

使用

CustomProgress pb = (CustomProgress) findViewById(R.id.custom_pb);
pb.setPbMax(100);
pb.setProgress(20);
pb.setTextLeft("已使用 20%");
pb.setTextRight("未使用 80%");

你可能感兴趣的:(ui)