Android实现平板的类股票列表联动

转载自：http://blog.csdn.net/elinavampire/article/details/42142551

最近遇到了一个很恶心的问题,要实现类似于股票列表联动的问题,一般手机上基本用不着,这个效果一般用在平板上,要是手机上用这种效果那就没得聊了,我只能呵呵了...

下面开始正题部分,先上效果图,便于理解:



先来说明一下这个效果,首先上下移动通过scrollview实现左右侧同时滑动,右侧listview通过重写HorizontalScrollView实现右侧上下部分能够同时联动

下面贴一下主要代码:

[java] view
plaincopy

package com.thea.guo.leftrightscrool.view;



import android.content.Context;

import android.util.AttributeSet;

import android.view.View;

import android.widget.HorizontalScrollView;

/**

* @Description:这个类也是从网上找的参考

*/

public class SyncHorizontalScrollView extends HorizontalScrollView {



private View mView;



public SyncHorizontalScrollView(Context context) {

super(context);

}



public SyncHorizontalScrollView(Context context, AttributeSet attrs) {

super(context, attrs);

}



protected void onScrollChanged(int l, int t, int oldl, int oldt) {

super.onScrollChanged(l, t, oldl, oldt);

//设置控件滚动监听，得到滚动的距离，然后让传进来的view也设置相同的滚动具体

if(mView!=null) {

mView.scrollTo(l, t);

}

}



/**

* 设置跟它联动的view

* @param view

*/

public void setScrollView(View view) {

mView = view;

}

}

通过重写HorizontalScrollView的onScrollChanged方法使用scrollto实现联动,其实上面这个功能主要就在于这里,如果这里实现了,后面的就so easy了,后面的可看可不看,贴一下代码,方便理解
主布局文件:

[html] view
plaincopy

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



<!-- 此部分是标题部分 -->



<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal" >



<!-- 左侧标题的父容器 -->



<LinearLayout

android:id="@+id/left_title_container"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="3"

android:orientation="vertical" >



<include layout="@layout/layout_left_title" />

</LinearLayout>



<!-- 右侧标题的父容器可实现水平滚动 -->



<com.thea.guo.leftrightscrool.view.SyncHorizontalScrollView

android:id="@+id/title_horsv"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:scrollbars="@null" >



<LinearLayout

android:id="@+id/right_title_container"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal" >



<include layout="@layout/layout_right_tab" />

</LinearLayout>

</com.thea.guo.leftrightscrool.view.SyncHorizontalScrollView>

</LinearLayout>



<!-- 此部分是内容部分 用ScrollView实现上下滚动效果 -->



<ScrollView

android:layout_width="match_parent"

android:layout_height="wrap_content" >



<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent" >



<!-- 左侧内容的父容器 -->



<LinearLayout

android:id="@+id/left_container"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight="3"

android:gravity="center_vertical"

android:orientation="vertical" >



<ListView

android:id="@+id/left_container_listview"

android:layout_width="match_parent"

android:layout_height="match_parent" >

</ListView>

</LinearLayout>



<!-- 右侧内容的父容器 实现水平滚动 -->



<com.thea.guo.leftrightscrool.view.SyncHorizontalScrollView

android:id="@+id/content_horsv"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:scrollbars="@null" >



<LinearLayout

android:id="@+id/right_container"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center_vertical"

android:orientation="horizontal" >



<ListView

android:id="@+id/right_container_listview"

android:layout_width="match_parent"

android:layout_height="match_parent" >

</ListView>



</LinearLayout>

</com.thea.guo.leftrightscrool.view.SyncHorizontalScrollView>

</LinearLayout>

</ScrollView>



</LinearLayout>

activity部分代码:

[java] view
plaincopy

package com.thea.guo.leftrightscrool;



import java.util.ArrayList;

import java.util.List;



import android.app.Activity;

import android.graphics.Color;

import android.os.Bundle;

import android.widget.LinearLayout;

import android.widget.ListView;



import com.thea.guo.leftrightscrool.adapter.MyLeftAdapter;

import com.thea.guo.leftrightscrool.adapter.MyRightAdapter;

import com.thea.guo.leftrightscrool.model.RightModel;

import com.thea.guo.leftrightscrool.tool.UtilTools;

import com.thea.guo.leftrightscrool.view.SyncHorizontalScrollView;



public class TableActivity extends Activity {

private LinearLayout leftContainerView;

private ListView leftListView;

private List<String> leftlList;

private LinearLayout rightContainerView;

private ListView rightListView;

private List<RightModel> models;

private SyncHorizontalScrollView titleHorsv;

private SyncHorizontalScrollView contentHorsv;



@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.layout_tab_view);

leftContainerView = (LinearLayout) findViewById(R.id.left_container);

leftListView = (ListView) findViewById(R.id.left_container_listview);

rightContainerView = (LinearLayout) findViewById(R.id.right_container);

rightListView = (ListView) findViewById(R.id.right_container_listview);

titleHorsv = (SyncHorizontalScrollView) findViewById(R.id.title_horsv);

contentHorsv = (SyncHorizontalScrollView) findViewById(R.id.content_horsv);

// 设置两个水平控件的联动

titleHorsv.setScrollView(contentHorsv);

contentHorsv.setScrollView(titleHorsv);



// 添加左边内容数据

leftContainerView.setBackgroundColor(Color.YELLOW);

initLeftData();

MyLeftAdapter adapter=new MyLeftAdapter(this, leftlList);

leftListView.setAdapter(adapter);

UtilTools.setListViewHeightBasedOnChildren(leftListView);

// 添加右边内容数据

rightContainerView.setBackgroundColor(Color.GRAY);

initRightData();

MyRightAdapter myRightAdapter=new MyRightAdapter(this, models);

rightListView.setAdapter(myRightAdapter);

UtilTools.setListViewHeightBasedOnChildren(rightListView);

}



/**

* 初始化右侧listview数据

*/

private void initRightData() {

models=new ArrayList<RightModel>();

...

}



/**

* 初始左侧侧listview数据

*/

private void initLeftData() {

leftlList=new ArrayList<String>();

...

}

}

这里需要注意的是在ScrollView中使用ListView时,需要计算ListView子项目的高度,否则可能只给你显示一行

[java] view
plaincopy

package com.thea.guo.leftrightscrool.tool;



import android.view.View;

import android.view.ViewGroup;

import android.widget.ListAdapter;

import android.widget.ListView;



public class UtilTools {



public static void setListViewHeightBasedOnChildren(ListView listView) {

ListAdapter listAdapter = listView.getAdapter();

if (listAdapter == null) {

return;

}

int totalHeight = 0;

for (int i = 0, len = listAdapter.getCount(); i < len; i++) {

View listItem = listAdapter.getView(i, null, listView);

listItem.measure(0,0);

totalHeight += listItem.getMeasuredHeight();

}



ViewGroup.LayoutParams params = listView.getLayoutParams();

params.height = totalHeight + (listView.getDividerHeight() * (listAdapter.getCount() - 1));

listView.setLayoutParams(params);

}

}

好了,就扯这么多

代码下载地址:http://download.csdn.net/detail/elinavampire/8297359

github托管地址:https://github.com/zimoguo/LeftRightScroll