Andriod实现类似excel布局

版权声明：本文为博主原创文章，未经博主允许不得转载。https://blog.csdn.net/chensenli/article/details/83536091

前言

“汽车报价大全”中的车型对比界面 ，可以左右滑动查看不同的车型，上下滑动查看不同的参数。所以我模仿写了一个，不过，本例子中车型数量最大为3。效果图见下：

下面来谈谈具体实现方法

界面布局

由于汽车车型和下面具体的参数值要报纸左右滑动同步，所以都采用水平的ScrollView进行包裹。

下面红色大块要上下滑动，用一个ScrollView包裹即可。

布局代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context="com.csl.carcompare.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="88dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="汽车名称" />

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#cccccc" />

        <com.csl.carcompare.MyScrollView
            android:id="@+id/sv_above"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:overScrollMode="never"
            android:scrollbars="none">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:orientation="horizontal">

                <RelativeLayout
                    android:id="@+id/rl1"
                    android:layout_width="120dp"
                    android:layout_height="40dp">

                    <TextView
                        android:id="@+id/tv1"
                        android:layout_width="120dp"
                        android:layout_height="40dp"
                        android:gravity="center"/>

                    <ImageView
                        android:id="@+id/iv_delete1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentTop="true"
                        android:src="@mipmap/ic_close" />
                </RelativeLayout>

                <View
                    android:id="@+id/view1"
                    android:layout_width="1dp"
                    android:layout_height="40dp"
                    android:background="#cccccc" />

                <RelativeLayout
                    android:id="@+id/rl2"
                    android:layout_width="120dp"
                    android:layout_height="40dp">

                    <TextView
                        android:id="@+id/tv2"
                        android:layout_width="120dp"
                        android:layout_height="40dp"
                        android:gravity="center"/>

                    <ImageView
                        android:id="@+id/iv_delete2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentTop="true"
                        android:src="@mipmap/ic_close" />
                </RelativeLayout>
                <View
                    android:id="@+id/view2"
                    android:layout_width="1dp"
                    android:layout_height="40dp"
                    android:background="#cccccc" />

                <RelativeLayout
                    android:id="@+id/rl3"
                    android:layout_width="120dp"
                    android:layout_height="40dp">

                    <TextView
                        android:id="@+id/tv3"
                        android:layout_width="120dp"
                        android:layout_height="40dp"
                        android:gravity="center"/>

                    <ImageView
                        android:id="@+id/iv_delete3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentTop="true"
                        android:src="@mipmap/ic_close" />
                </RelativeLayout>
                <View
                    android:id="@+id/view3"
                    android:layout_width="1dp"
                    android:layout_height="40dp"
                    android:background="#cccccc" />

                <RelativeLayout
                    android:id="@+id/rl4"
                    android:layout_width="100dp"
                    android:layout_height="40dp">

                    <ImageView
                        android:id="@+id/iv_add"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_centerInParent="true"
                        android:src="@mipmap/ic_add" />
                </RelativeLayout>
            </LinearLayout>
        </com.csl.carcompare.MyScrollView>
    </LinearLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#cccccc" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:overScrollMode="never"
        android:scrollbars="none">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">
            <com.csl.carcompare.MyListView
                android:id="@+id/lv_left"
                android:layout_width="88dp"
                android:layout_height="match_parent"
                android:overScrollMode="never"
                android:scrollbars="none">
            </com.csl.carcompare.MyListView>
            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="#cccccc"/>
            <com.csl.carcompare.MyScrollView
                android:id="@+id/sv_bottom"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:overScrollMode="never"
                android:scrollbars="none">
                <com.csl.carcompare.MyListView
                    android:id="@+id/lv_right"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:overScrollMode="never"
                    android:scrollbars="none"/>
            </com.csl.carcompare.MyScrollView>
        </LinearLayout>
    </ScrollView>
</LinearLayout>

逻辑代码

1.顶层汽车车型由于数量最大值有限，所以采用RelativeLayout的显示和隐藏来进行车型的增加和删除

2.自定义ListView，解决ScrollView嵌套ListView的问题

public class MyListView extends ListView {
    public MyListView(Context context) {
        super(context);
    }

    public MyListView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
                MeasureSpec.AT_MOST);
        super.onMeasure(widthMeasureSpec, expandSpec);
    }
}

3.自定义水平滑动的ScrollView，可以实现同步滑动

public class MyScrollView extends HorizontalScrollView {
    MyScrollView myScrollView;
    public void setScrollView(MyScrollView view){
        this.myScrollView = view;
    }
    public MyScrollView(Context context) {
        super(context);
    }

    public MyScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyScrollView(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(myScrollView != null){
            myScrollView.scrollTo(l,t);
        }
    }
}

在主界面的初始化View中，相互调用setScrollView的方法，即可实现同步滑动

  sv_above.setScrollView(sv_bottom);
  sv_bottom.setScrollView(sv_above);

4.其余就是listview的使用和制造模拟数据的代码，就不贴了

类似效果的博客，可参考 https://www.jianshu.com/p/791305fff837

本博客代码链接：https://download.csdn.net/download/chensenli/10758977