翻翻git之---可用作课程表/排班表的自定义table库ScrollTableView

Posted 王亟亟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了翻翻git之---可用作课程表/排班表的自定义table库ScrollTableView相关的知识,希望对你有一定的参考价值。

转载请注明出处:王亟亟的大牛之路

最近一直在写混合开发的东西,是时候温故下native的了。

一年多之前领导提了一个双性滚动+快点击的”TableView”那时候自己整了2 3天没整出来,本来想今天”圆梦”,但是发现轮子已经有了,但是少了一些小功能和足够多的解释,那就把这个轮子fork下来自己改!(我们不生产代码,我们只是代码的搬运工)

源码地址:https://github.com/ddwhan0123/ScrollTableView

按照习惯,安利下:https://github.com/ddwhan0123/Useful-Open-Source-Android (今天把search view也划分了出去)


效果图:
这里写图片描述

这里写图片描述

可以滚动,可以点击,基本满足了之前的要求


包结构:东西也不是很多,copy也不复杂

这里写图片描述

本文会详细的”拆”这个库

如何引用:

 <com.loopeer.android.librarys.scrolltable.ScrollTableView
        android:id="@+id/scroll_table_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

正常控件用就行了,没什么特别的姿势,这边讲下有哪些自定义标签

都在ScrollTable/src/main/res/values/attrs.xml里

dataMargin 数据间距 类型:dimension
itemHeight 每个块的高度 类型:dimension
itemWidth 每个块的宽度 类型:dimension
topPlaceHeight 头部的高度 类型:dimension
itemIndicatorCircleRadius 小圆圈的半径 类型:dimension
itemIndicatorLineWidth 分割线的宽度 类型:dimension
textTitleSize 标题大小 类型:dimension
textLeftTitleColor 左边标题颜色 类型:dimension
textTopTitleColor 上边标题颜色 类型:dimension
等等等。。。(一排可以自己看,不难理解)

组成

很明显,这是一个试图组,这边拆一下,给大家解释下

ScrollTable/src/main/res/layout/view_container.xml里

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

    <com.loopeer.android.librarys.scrolltable.view.IHorizontalScrollView
        android:id="@+id/scroll_header_horizontal"
        android:layout_width="match_parent"
        android:layout_height="@dimen/table_top_title_height"
        android:layout_marginLeft="@dimen/table_left_title_width"
        >
        <com.loopeer.android.librarys.scrolltable.view.TopTitleView
            android:id="@+id/header_horizontal"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"/>

    </com.loopeer.android.librarys.scrolltable.view.IHorizontalScrollView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">


        <com.loopeer.android.librarys.scrolltable.view.VerticalScrollView
            android:id="@+id/scroll_vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <com.loopeer.android.librarys.scrolltable.view.LeftTitleView
                    android:id="@+id/header_vertical"
                    android:layout_width="@dimen/table_left_title_width"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="24dp"/>

                <com.loopeer.android.librarys.scrolltable.view.IHorizontalScrollView
                    android:id="@+id/scroll_horizontal"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <com.loopeer.android.librarys.scrolltable.view.CustomTableView
                        android:layout_marginTop="@dimen/table_default_margin_top"
                        android:id="@+id/content_view"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"/>

                </com.loopeer.android.librarys.scrolltable.view.IHorizontalScrollView>
            </LinearLayout>

        </com.loopeer.android.librarys.scrolltable.view.VerticalScrollView>
    </LinearLayout>

</LinearLayout>

一个水平滚动试图里包着一个TopTitle的view
一个垂直滚动的视图包着一个LeftTitle的view
中间是一个自己绘画的CustomView


横向滚动试图IHorizontalScrollView

public class IHorizontalScrollView extends HorizontalScrollView implements IScroller {

    private IScroller scroller;

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

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

    public IHorizontalScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);

        if (scroller != null) {
            scroller.onScrollXY(l, t);
        }
    }

    public void setIScroller(IScroller scroller) {
        this.scroller = scroller;
    }

    @Override
    public void onScrollXY(int offsetX, int offsetY) {
        scrollTo(offsetX, offsetY);
    }
}

继承于HorizontalScrollView ,用于给titleview添加同步滚动的操作,让他们看上去是一体的

VerticalScrollView也是类似效果只不过一个横向一个纵向而已


横向的TopTitleView

因为有很多初始化的“没营养代码”,所以我只贴重要步骤

TopTitleView extends View

它是一个自定义的View

尺寸:
宽度=间距+字宽
高度=定义的高

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
        mItemHeight = sizeHeight;
        setMeasuredDimension(column * mItemWidth + (column - 1) * mItemMargin, mItemHeight);
    }

绘画:

循环便利数据源,因为仅为单行多列,所以一个循环搞定,画字,算间距即可

  private void drawItem(Canvas canvas) {
        for (int columnIndex = 0; columnIndex < column; columnIndex++) {
            String content = titles.get(columnIndex);
            Paint.FontMetrics fontMetrics = mPaintTextNormal.getFontMetrics();
            float fontHeight = fontMetrics.bottom - fontMetrics.top;
            float textWidth = mPaintTextNormal.measureText(content);
            float y = mItemPlaceHeight - (mItemPlaceHeight - fontHeight) / 2 - fontMetrics.bottom;

            float x = (mItemMargin + mItemWidth) * columnIndex + mItemWidth / 2 - textWidth / 2;

            canvas.drawText(content, x, y, mPaintTextNormal);

        }
    }

LeftTitleView 左侧标题

也是一个自定义view只不过比top多了点,多了圈

也是一样,只挑重要代码解释

   private void drawItem(Canvas canvas) {
        for (int rowIndex = 0; rowIndex < row; rowIndex++) {
            //获取文字内容
            String content = titles.get(rowIndex);
            //计算文字尺寸
            Paint.FontMetrics fontMetrics = mPaintTextNormal.getFontMetrics();
            float fontHeight = fontMetrics.bottom - fontMetrics.top;
            float textWidth = mPaintTextNormal.measureText(content);
            float y = rowIndex * (mItemHeight + mItemMargin) + mItemHeight - (mItemHeight - fontHeight) / 2 - fontMetrics.bottom - mItemHeight / 2 + getResources().getDimension(R.dimen.table_default_margin_top) - mItemMargin / 2 + mItemMargin;

            float x = mItemWidth - textWidth - 2 * mItemIndicatorCircleRadius - mItemIndicatorLineWidth - 12;
            //画字
            canvas.drawText(content, x, y, mPaintTextNormal);
            //画圈
            canvas.drawCircle(mItemWidth - mItemIndicatorLineWidth - mItemIndicatorCircleRadius,
                    rowIndex * (mItemHeight + mItemMargin) + getResources().getDimension(R.dimen.table_default_margin_top) - mItemMargin / 2 + mItemMargin,
                    mItemIndicatorCircleRadius, mPaintItemIndicatorCircle);
            //规划矩阵
            canvas.drawRect(mItemWidth - mItemIndicatorLineWidth,
                    rowIndex * (mItemHeight + mItemMargin) + getResources().getDimension(R.dimen.table_default_margin_top) - mItemMargin / 2 - mItemMargin / 2 + mItemMargin,
                    mItemWidth,
                    rowIndex * (mItemHeight + mItemMargin) + getResources().getDimension(R.dimen.table_default_margin_top) - mItemMargin / 2 + mItemMargin / 2 + mItemMargin,
                    mPaintItemIndicatorLine);
        }
    }

这是一个增量的绘画过程,每个循环都增量上一轮的参数值


CustomView

 //大小计算
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //(间距总和+宽度总和),(高度总和+间距总和)
        setMeasuredDimension(column * mItemWidth + (column - 1) * mItemMargin, row * mItemHeight + row * mItemMargin);
    }
 //实际画框的操作,循环画框,也就是说在初始化时所有的ui已经画出来了只是没滑到的时候不显示而已
    private void drawItem(Canvas canvas) {
        for (int rowIndex = 0; rowIndex < row; rowIndex++) {
            for (int columnIndex = 0; columnIndex < column; columnIndex++) {
                adJustSelectPaintColor(columnIndex, rowIndex);

                float left = mItemWidth * columnIndex + mItemMargin * columnIndex;
                float right = left + mItemWidth;
                float top = mItemHeight * rowIndex + mItemMargin * (rowIndex + 1);
                float bottom = top + mItemHeight;
                canvas.drawRect(left, top, right, bottom, mPaintItemBg);

                String content = getShowData(rowIndex, columnIndex);
                Paint.FontMetrics fontMetrics = mPaintTextNormal.getFontMetrics();
                float fontHeight = fontMetrics.bottom - fontMetrics.top;
                float textWidth = mPaintTextNormal.measureText(content);
                float y = top + mItemHeight - (mItemHeight - fontHeight) / 2 - fontMetrics.bottom;
                float x = left + mItemWidth / 2 - textWidth / 2;
                //画字
                canvas.drawText(content, x, y, mPaintTextNormal);
            }
        }
    }

双循环画字画方块画间距。

写个接口解决点击行为

 public interface OnPositionClickListener {
        void onPositionClick(Position position);
    }
  public boolean onTouchEvent(MotionEvent event) {
        Position position = getPositionFromLocation(event.getX(), event.getY());
        if (position == null) {
            return true;
        }
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:

                break;
            case MotionEvent.ACTION_UP:
                if (mPositionChangeListener != null) {
                    mPositionChangeListener.onPositionClick(position);
                }
                break;
        }
        return true;
    }

在onTouchEvent记录坐标点


内部的子View都讲完了,剩下就是”载体”ScrollTableView

public class ScrollTableView extends LinearLayout implements CustomTableView.OnPositionClickListener {

    //各种对象
    private IHorizontalScrollView scrollHeaderHorizontal;
    private IHorizontalScrollView scrollHorizontal;
    private LeftTitleView headerVertical;
    private TopTitleView headerHorizontal;
    private CustomTableView contentView;
    //被点击的坐标集合
    private ArrayList<Position> selectPositions;
    private ArrayList<String> topTitles;
    private ArrayList<String> leftTitles;
    //数据源
    private ArrayList<ArrayList<String>> datas;

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

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

    public ScrollTableView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }

    private void init(Context context, AttributeSet attrs, int defStyleAttr) {
        LayoutInflater.from(context).inflate(R.layout.view_container, this);
        setUpView();
        setUpData();
        selectPositions = new ArrayList<>();


        if (attrs == null) return;
        final TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ScrollTableView, defStyleAttr, 0);
        if (a == null) return;

        headerVertical.setUpAttrs(context, attrs, defStyleAttr);
        headerHorizontal.setUpAttrs(context, attrs, defStyleAttr);
        contentView.setUpAttrs(context, attrs, defStyleAttr);

        a.recycle();
    }

    //同步了2个横向 2个纵向滚动的行为
    private void setUpView() {
        scrollHeaderHorizontal = (IHorizontalScrollView) findViewById(R.id.scroll_header_horizontal);
        scrollHorizontal = (IHorizontalScrollView) findViewById(R.id.scroll_horizontal);
        headerVertical = (LeftTitleView) findViewById(R.id.header_vertical);
        headerHorizontal = (TopTitleView) findViewById(R.id.header_horizontal);
        contentView = (CustomTableView) findViewById(R.id.content_view);
        //传递滚动行为
        scrollHorizontal.setIScroller(scrollHeaderHorizontal);
        scrollHeaderHorizontal.setIScroller(scrollHorizontal);
    }

    public LeftTitleView getLeftTitleView() {
        return headerVertical;
    }

    public TopTitleView getTopTitleView() {
        return headerHorizontal;
    }

    public CustomTableView getContentView() {
        return contentView;
    }

    private void setUpData() {
        leftTitles = new ArrayList<>();
        topTitles = new ArrayList<>();
        datas = new ArrayList<>();
        contentView.setRowAndColumn(leftTitles.size(), topTitles.size());
        contentView.setOnPositionChangeListener(this);
    }

    //填充数据
    public void setDatas(ArrayList<String> topTitlesData, ArrayList<String> leftTitlesData, ArrayList<ArrayList<String>> itemData) {
        topTitles.clear();
        leftTitles.clear();
        datas.clear();
        topTitles.addAll(topTitlesData);
        leftTitles.addAll(leftTitlesData);
        datas.addAll(itemData);
        updateView();
    }

    //刷新数据
    private void updateView() {
        headerVertical.updateTitles(leftTitles);
        headerHorizontal.updateTitles(topTitles);
        contentView.setRowAndColumn(leftTitles.size(), topTitles.size());
        contentView.setDatas(datas);
    }

    //记录坐标点
    @Override
    public void onPositionClick(Position position) {
        if (selectPositions.contains(position)) {
            selectPositions.remove(position);
        } else {
            selectPositions.add(position);
        }
        contentView.setSelectPositions(selectPositions);
    }

    //获取被点击的集合
    public ArrayList<Position> getSelectPositions() {
        return selectPositions;
    }

}

整体不是很难,但是要考虑好各个空间的关系,对于View Group的入门学习还是不错的,解释的过程中省略了一些传递参数和逻辑代码,不明白的建议看源码!!

实在看不明白可以微信我,可以给你简单解释下

这里写图片描述

以上是关于翻翻git之---可用作课程表/排班表的自定义table库ScrollTableView的主要内容,如果未能解决你的问题,请参考以下文章

翻翻git之---"有趣效果"的自定义View EasyArcLoading

翻翻git之---自定义View实现水位上涨效果 WaveProgressView

翻翻git之---炫酷的自己定义翻滚View TagCloudView

翻翻git之---自己定义邮件发送buttonSendButton(流程分析,实现思路能够学习下)

翻翻git之---实现QQ空间点赞部分实现的自己定义控件 EasyLikeArea

翻翻git之---效果鲜明的类ViewPager库 ConvenientBanner(对图片载入部分进行改动)