仿网页列表的实现

序言

       最近遇到了一项需求，用Android实现网页中的列表效果；首先我便想到了用ListView的方式来实现，由于网页的表格数据通常都是以一行的形式展现的，因此，我把需要展现的数据放在了一行，可是需要展示的数据有很多，一行是无法显示完的，为了能够显示超出的那部分，我便想到了在ListView的外面嵌套了一层水平滚动条(HorizontalScrollView)来实现ListView能够水平移动的效果，虽然效果是初步实现了，可是ListView却无法实现上下对其的效果，虽然可以对ListView的Item设置固定的文本的长度，但是总觉得这不是一个好方法，PS:毕竟数据长度是不可控的嘛；在网上翻阅了各种资料后，发现了一个满足我这个需求的大神博客，但他写的太复杂了，于是最终决定自己来实现。

实现思路

       下面来说说我的思路；首先我们要用到TableLayout这个布局，其次就是以代码的方式不断的往这个布局里塞TableRow，最后在TableLayout的外面套上HorizontalScrollView和ScrollView即可

代码实现

<?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">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <HorizontalScrollView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scrollbars="none">

            <TableLayout
                android:id="@+id/tl_device_list_content"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

        </HorizontalScrollView>
    </ScrollView>

</LinearLayout>

向TableLayout中添加TableRow

public class MainActivity extends Activity {
    private TableLayout tlContent;
    private List<TextView> tvList = new ArrayList<TextView>();
    private static final int WC = ViewGroup.LayoutParams.WRAP_CONTENT;
    private static final int MP = ViewGroup.LayoutParams.MATCH_PARENT;

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

        tlContent = (TableLayout) findViewById(R.id.tl_device_list_content);
        tlContent.setStretchAllColumns(true);

        drawView();
    }

    /**
     * 绘制界面
     */
    private void drawView(){
        initTV();
        addHead();
        for(int i = 0; i < 10; ++i){
            initTV();
            addBody(i);
        }
    }

    /**
     * 初始化TextView
     */
    private void initTV() {
        if (tvList == null) {
            tvList = new ArrayList<>();
        } else {
            tvList.clear();
        }
        for (int i = 0; i < 10; ++i) {
            TextView tv = new TextView(MainActivity.this);
            tv.setTextSize(20.0f);
            tv.setPadding(10, 5, 10, 5);
            tvList.add(tv);
        }
    }

    /**
     * 添加表头
     */
    private void addHead() {
        TableRow row = new TableRow(MainActivity.this);
        row.setBackgroundColor(Color.parseColor("#FFFFFF"));
        for (int i = 0; i < tvList.size(); ++i) {
            tvList.get(i).setText("标题" + i);
            row.addView(tvList.get(i));
        }
        tlContent.addView(row, new TableLayout.LayoutParams(MP, WC));
    }

    /**
     * 添加行
     * @param position 当前行数
     */
    private void addBody(int position) {
        TableRow row = new TableRow(MainActivity.this);
        if (position % 2 == 0) {
            row.setBackgroundColor(Color.parseColor("#CCCCCC"));
        } else {
            row.setBackgroundColor(Color.parseColor("#FFFFFF"));
        }
        for (int i = 0; i < tvList.size(); ++i) {
            tvList.get(i).setText("内容" + i);
            row.addView(tvList.get(i));
        }
        tlContent.addView(row, new TableLayout.LayoutParams(MP, WC));
    }
}         row.setBackgroundColor(Color.parseColor("#FFFFFF"));
        }
        for (int i = 0; i < tvList.size(); ++i) {
            tvList.get(i).setText("内容" + i);
            row.addView(tvList.get(i));
        }
        tlContent.addView(row, new TableLayout.LayoutParams(MP, WC));
    }
}

效果展现

总结

       这个方法明显不是一个最优的办法，但却是一种比较简单的实现方式；毕竟在Android中实现网页的效果还是太鸡肋了，如果非要实现的话，最简单的还是搞个网页，然后把url地址丢过来直接展示比较容易吧。。。