2017年8月15日更新

升級版 TableLayout

針對簡友的反饋，在TableView的基礎上做了一些小的提升：

• 內容超出屏幕范圍可以滑動顯示
• 單元格可被選中

在編輯模式下預覽，可以看出修改不同屬性產生的變化

編輯模式預覽

屬性表

使用方法

• 在GitHub上檢出此項目，將tableLayout這個library module導入到項目中，并在application module中添加對tableLayout的依賴

dependencies {
    compile project(':tableLayout')
}

• 在xml中定義表格基礎樣式

    <win.smartown.android.library.tableLayout.TableLayout
        android:id="@+id/main_table"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        app:backgroundColorSelected="@color/colorAccent"
        app:tableColumnPadding="32dp"
        app:tableDividerColor="#ddd"
        app:tableDividerSize="1px"
        app:tableRowHeight="48dp"
        app:tableTextColor="#333"
        app:tableTextColorSelected="#fff"
        app:tableTextSize="14dp" />

• 在Java代碼中填充展示數據

        TableLayout tableLayout = (TableLayout) findViewById(R.id.main_table);

        contentList = new ArrayList<>();
        contentList.add(new Content("姓名", "語文", "數學", "英語", "物理", "化學", "生物"));
        contentList.add(new Content("張三", newRandomNumber(), newRandomNumber(), newRandomNumber(), newRandomNumber(), newRandomNumber(), newRandomNumber()));
        contentList.add(new Content("李四", newRandomNumber(), newRandomNumber(), newRandomNumber(), newRandomNumber(), newRandomNumber(), newRandomNumber()));
        contentList.add(new Content("王二", newRandomNumber(), newRandomNumber(), newRandomNumber(), newRandomNumber(), newRandomNumber(), newRandomNumber()));
        contentList.add(new Content("王尼瑪", newRandomNumber(), newRandomNumber(), newRandomNumber(), newRandomNumber(), newRandomNumber(), newRandomNumber()));
        contentList.add(new Content("張全蛋", newRandomNumber(), newRandomNumber(), newRandomNumber(), newRandomNumber(), newRandomNumber(), newRandomNumber()));
        contentList.add(new Content("趙鐵柱", newRandomNumber(), newRandomNumber(), newRandomNumber(), newRandomNumber(), newRandomNumber(), newRandomNumber()));

        tableLayout.setAdapter(new TableAdapter() {
            @Override
            public int getColumnCount() {
                return contentList.size();
            }

            @Override
            public String[] getColumnContent(int position) {
                return contentList.get(position).toArray();
            }
        });

• 現在運行就可以看到下圖的效果了

Demo

部分源碼分析

這里由內而外的分析，從基礎的單元開始。

• win.smartown.android.library.tableLayout.TableColumn
  這個類表示表格中的一列，比較關鍵的點在于根據填充到此列的數據來確定此列的寬度

  1.根據填充內容確定一個單元格（TextView）顯示這些文本要占用的寬度：

    // 計算出該TextView中文字的長度(像素)
    public static float measureTextViewWidth(TextView textView, String text) {
        // 得到使用該paint寫上text的時候,像素為多少
        return textView.getPaint().measureText(text);
    }
  

  2.遍歷此列中所有的單元格，得到最大單元格的寬度maxTextViewWidth ，將其作為此列的寬度

    private void initContent() {
        int padding = callback.getTableLayout().getTableColumnPadding();
        maxTextViewWidth = 0;
        ArrayList<TextView> textViews = new ArrayList<>();
        for (String text : content) {
            TextView textView = new TextView(getContext());
            textView.setTextSize(TypedValue.COMPLEX_UNIT_PX, callback.getTableLayout().getTableTextSize());
            textView.setTextColor(callback.getTableLayout().getTableTextColor());
            maxTextViewWidth = Math.max(maxTextViewWidth, Util.measureTextViewWidth(textView, text));
            textView.setGravity(getTextGravity(callback.getTableLayout().getTableTextGravity()));
            textView.setPadding(padding, 0, padding, 0);
            textView.setText(text);
            textViews.add(textView);
        }
        LayoutParams layoutParams = new LayoutParams((int) (padding * 2 + maxTextViewWidth), callback.getTableLayout().getTableRowHeight());
        for (TextView textView : textViews) {
            addView(textView, layoutParams);
        }
    }
  
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension((int) (callback.getTableLayout().getTableColumnPadding() * 2 + maxTextViewWidth), callback.getTableLayout().getTableRowHeight() * getChildCount());
    }
  
  

• win.smartown.android.library.tableLayout.TableLayout
  TableLayout就是最終呈現的完整表格，實際上他就是多個TableColumn的組合，其主要負責整個表格的大小測量、分割線繪制和接受數據填充。
  1.單元格大小測量

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = 0;
        int height = 0;
        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            width += child.getMeasuredWidth();
            height = Math.max(height, child.getMeasuredHeight());
        }
        setMeasuredDimension(width, height);
    }
  

  2.繪制分割線

  在ViewGroup要重寫onDraw()，需要設置setWillNotDraw(false)，否者onDown()中的繪制不會生效，具體的分割線繪制參見TableLayout源碼的onDraw()；

  3.數據的填充

    public void setAdapter(TableAdapter adapter) {
        this.adapter = adapter;
        useAdapter();
    }
    
    //設置adapter后，先清空原來的數據，然后根據新數據添加TableColumn
    private void useAdapter() {
        removeAllViews();
        int count = adapter.getColumnCount();
        for (int i = 0; i < count; i++) {
            addView(new TableColumn(getContext(), adapter.getColumnContent(i), this));
        }
    }
  

• win.smartown.android.library.tableLayout.FreeScrollView
  顧名思義，此類用來實現子View的自用滾動，當子view大小超過FreeScrollView的大小，就可以拖動顯示超出的內容
  1.處理滾動

            @Override from GestureDetector （重寫GestureDetector 的onScroll()）
            public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
                View view = getChildAt(0);
                int childHeight = view.getHeight();
                int childWidth = view.getWidth();
                int toX, toY;
                if (distanceX > 0) {
                    if (childWidth > getWidth()) {
                        if (getScrollX() + getWidth() >= childWidth) {
                            toX = childWidth - getWidth();
                        } else {
                            toX = (int) (getScrollX() + distanceX);
                        }
                    } else {
                        toX = 0;
                    }
                } else {
                    if (getScrollX() + distanceX < 0) {
                        toX = 0;
                    } else {
                        toX = (int) (getScrollX() + distanceX);
                    }
                }
                if (distanceY > 0) {
                    if (childHeight > getHeight()) {
                        if (getScrollY() + getHeight() >= childHeight) {
                            toY = childHeight - getHeight();
                        } else {
                            toY = (int) (getScrollY() + distanceY);
                        }
                    } else {
                        toY = 0;
                    }
                } else {
                    if (getScrollY() + distanceY < 0) {
                        toY = 0;
                    } else {
                        toY = (int) (getScrollY() + distanceY);
                    }
                }
                scrollTo(toX, toY);
                return false;
            }
  

  2.處理點擊事件，達到選中效果

            //由于FreeScrollView攔截了TouchEvent，所以要在FreeScrollView處理點擊事件，
            //通過計算坐標來定位點擊的是哪個單元格，點擊處理順序：
            //FreeScrollView.onSingleTapUp() -> TableLayout.onClick()  -> TableLayout.onClick() -> TableColumn.onClick()
            @Override from GestureDetector 
            public boolean onSingleTapUp(MotionEvent e) {
                View view = getChildAt(0);
                if (view instanceof TableLayout) {
                    ((TableLayout) view).onClick(e.getX() + getScrollX(), e.getY() + getScrollY());
                }
                return false;
            }
  

Github

• TableLayout
• TableView
  
  TableView