版权声明:本文为博主原创文章,未经博主允许不得转载。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