Android表格自定义控件

开启博客的第一天

近期公司要做报表功能，在网上搜索下表格的样式后便自己写了一个自定义的表格控件，该表格控件能根据设置的数据中数据的最大值自动设置左侧信息栏显示的值，使得条形图能尽量的充满控件，条形图部分支持左右滑动，数据的长度可能超过控件本身所能容纳的长度，所以在绘制的时候做了判断，当需要绘制的部分不再控件范围内则不进行绘制，具体请阅读代码，目前只支持一个名称对应一条数据，如有不足之处，大家提出帮忙修改

使用方法如下：

在xml文件中定义控件属性

<RelativeLayout
    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:background="#333333"
    tools:context=".MainActivity">

    <com.example.administrator.widget.MyChatView
        android:id="@+id/chatView"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:layout_marginTop="100dp"
        android:background="#FFFFFF"
        />

</RelativeLayout>

在Activity中设置控件要显示的数据、设置显示的样式

public class MainActivity extends AppCompatActivity {
   

    private MyChatView mMyChatView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mMyChatView = (MyChatView) this.findViewById(R.id.chatView);

        mMyChatView.setData(getData1())
                .setDataCompany("美元")
                .setDataTitle("测试")
                .setLeftTextColor(Color.RED)
                .setBottomTextColor(Color.BLUE)
                .setmDataTopTextColor(Color.RED)                         .setDataBackgroundColor(Color.parseColor("#ABCDEF"))
                .setDataColor(Color.RED)
                .setTitleColor(Color.BLUE)
                .setLeftTextSize(12)
                .setBottomTextSize(15)
                .setDataTopTextSize(10)
                .setTitleTextSize(20)
                .setSpanBottomText(15);
    }

    /**
     * 获取测试数据
     * @return 测试用的数据
     */
    private List<Map<String, String>> getData1(){
        List<Map<String, String>> data = new ArrayList<>();
        HashMap<String, String> map;
        int temp;
        for (int i=0; i<100; i++) {
            map = new HashMap<>();
            map.put(MyChatView.NAME, "name:"+i);
            temp = (int) (Math.random()*100);
            map.put(MyChatView.VALUE, temp +"."+i*i);
            data.add(map);
        }
        return data;
    }
}

自定义控件代码：

public class MyChatView extends View {
   

    /** 数据集合中的 Map 集合存放信息的键 */
    public static final String NAME = "name";
    /** 数据集合中的 Map 集合存放数据的键 */
    public static final String VALUE = "value";

    /** 上下文 */
    private Context mContext;
    /** 控件的高度 */
    private int mHeight;
    /** 控件的宽度 */
    private int mWidget;
    /** 数据 */
    private List<Map<String, String>> mData;
    /** 数据单位 */
    private String mDataCompany = "单位: ";
    /** 底部表格名称 */
    private String mDataTitle = null;
    /** 底部信息栏文字的大小 */
    private int mBottomTextSize;
    /** 左侧等分信息栏文字的大小 */
    private int mLeftTextSize;
    /** 柱状图顶部文字的大小 */
    private int mDataTopTextSize;
    /** 表格标题文字大小 */
    private int mTitleTextSize;
    /** 左侧文字与数据区域的间隔 */
    private int mSpanLeftText;
    /** 柱状图顶部文字与柱状图的间隔 */
    int mSpanDataTopText;
    /** 底部信息字符串间隔 */
    int mSpanBottomText;
    /** 底部信息字符串与控件底部间隔 */
    int mSpanBottom;
    /** 绘制数据部分的背景颜色 */
    private int mDataBackgroundColor = Color.WHITE;
    /** 底部信息字符串颜色 */
    private int mBottomTextColor = Color.BLACK;
    /** 柱状图柱状部分颜色 */
    private int mDataColor = Color.BLACK;
    /** 左边信息栏文字颜色 */
    private int mLeftTextColor = Color.BLACK;
    /** 柱状图顶部文字颜色 */
    private int mDataTopTextColor = Color.BLACK;
    /** 标题颜色 */
    private int mTitleColor = Color.BLACK;
    /** 表格移动的位置 */
    private int mChartMovedSize = 0;
    /** 用户按下时 X 方向位置 */
    private int mDownX = 0;
    /** 用户松手是 X 方向位置 */
    private int mUpX = 0;
    /** 表格 X 方向移动的最大距离 */
    private int mChartMaxMovedLengthX;


    public MyChatView(Context context) {
        this(context, null);
    }

    public MyChatView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }