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

来源：互联网发布：魔法特效制作软件编辑：程序博客网时间：2024/05/16 11:23

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

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

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

下面贴一下主要代码:

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了,后面的可看可不看,贴一下代码,方便理解

主布局文件:

<?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部分代码:

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;@Overrideprotected 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子项目的高度,否则可能只给你显示一行

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

6 0