先上效果图:
实现思路:
1.先说右边标题:
首先,右边的数据源集合中的Javabean中含有三个属性name,type,title,而每个条目中会默认含有一个标题.
如果这是第一个条目,就让标题显示出来,再如果这个条目的类型和上一个条目的类型不一样,就让这个条目的标题显示出来,否则,就隐藏标题, 这样我们就做到了每种类型只有第一个数据标题显示出来
接着,在Listview的外层(也就是MainActivity的布局文件中),默认放一个标题(下面都称作是主标题)
最后,设置右边Listview的滚动监听事件 在onScroll方法中,我们要做两件事:
第一件事是每当前第一个可见条目的类型和当前左边Listview选择的类型(红色字体的类型) 不一样时,需要将主标题的内容改变
第二件事 同时切换左边Listview的选中状态
2.再说左边的Listview
左边的Listview需要设置条目点击事件,在点击事件中需要干三件事:
第一 将左边点击条目的字体颜色改变
第二 将右边Listview滚动至左边Listview所选择类型相同的区域
第三 改变主标题的内容
说到这,大家可能还是云里雾里的,还是不知道左边的类型和右边的类型是怎么关联起来的?没关系,在下面的代码解析中你就会明白!下边是具体的实现步骤:
一.写布局
1.在MainActivity的布局文件中 添加应有的控件
12 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_ 4 android:layout_ 5 android:orientation="horizontal" 6 tools:cOntext=".MainActivity" > 7 8 <ListView 9 android:id="@+id/lv_left" 10 android:layout_ 11 android:layout_ 12 android:layout_weight="1" > 13 14 15 <RelativeLayout 16 android:layout_ 17 android:layout_ 18 android:layout_weight="3" > 19 20 <ListView 21 android:id="@+id/lv_Right" 22 android:layout_ 23 android:layout_ > 24 25 26 <TextView 27 android:id="@+id/tv_title" 28 android:layout_ 29 android:layout_ 30 android:background="#9f9f9f" 31 android:gravity="center" 32 android:padding="5dp" 33 android:textColor="#000000" 34 android:textSize="18sp" /> 35 36 37
注意 这里边将Listview和主标题textView放在一个相对布局中,并且先放Listview,后放textView,目的是将主标题放在Listview的空间的上方
2.左边Listview的Item布局文件
1 23 android:layout_ 4 android:layout_ 5 android:background="#f9f9f9" 6 android:gravity="center" 7 android:orientation="vertical" > 8 9 <TextView 10 android:id="@+id/tv_left" 11 android:layout_ 12 android:layout_ 13 android:text="左边条目" 14 android:textColor="#000000" 15 android:textSize="18sp" /> 16 17 18 19 3.右边Listview的Item布局文件 20 21 2223 android:layout_ 24 android:layout_ 25 android:background="#f9f9f9" 26 android:gravity="center" 27 android:orientation="vertical" > 28 29 <TextView 30 android:id="@+id/tv_right" 31 android:layout_ 32 android:layout_ 33 android:background="#9f9f9f" 34 android:gravity="center" 35 android:padding="5dp" 36 android:text="右边条目" 37 android:textColor="#000000" 38 android:textSize="18sp" /> 39 40 <LinearLayout 41 android:layout_ 42 android:layout_ 43 android:gravity="center_vertical" 44 android:orientation="horizontal" > 45 46 <ImageView 47 android:layout_ 48 android:layout_ 49 android:background="@drawable/jipai" /> 50 51 <TextView 52 android:id="@+id/tv_content" 53 android:layout_ 54 android:layout_ 55 android:layout_marginLeft="50dp" 56 android:text="左边条目" 57 android:textColor="#000000" 58 android:textSize="18sp" /> 59 60 61
二.创建Javabean
1 public class BaseData { 2 private String name; 3 private int type;// 类型 后边要根据类型显示标题 4 private String title;// 5 6 public BaseData(String name, int type, String title) { 7 super(); 8 this.name = name; 9 this.type = type; 10 this.title = title; 11 } 12 13 public BaseData() { 14 super(); 15 } 16 17 public String getTitle() { 18 return title; 19 } 20 21 public void setTitle(String title) { 22 this.title = title; 23 } 24 25 public String getName() { 26 return name; 27 } 28 29 public void setName(String name) { 30 this.name = name; 31 } 32 33 public int getType() { 34 return type; 35 } 36 37 public void setType(int type) { 38 this.type = type; 39 } 40 41 }
三.创建两个adapter
1.左边Listview的adapter
1 /** 2 * 左边的adapter 注意要给textview设置tag 3 * @author HaiPeng 4 * 5 */ 6 public class LeftAdapter extends BaseAdapter { 7 8 private Context context; 9 String data[]={"蔬菜1","水果1","姓氏1","蔬菜2","水果2","姓氏2","蔬菜3","水果3","姓氏3"}; 10 11 public LeftAdapter(Context context) { 12 super(); 13 this.cOntext= context; 14 } 15 16 @Override 17 public int getCount() { 18 return data.length; 19 } 20 21 @Override 22 public Object getItem(int position) { 23 return null; 24 } 25 26 @Override 27 public long getItemId(int position) { 28 return 0; 29 } 30 31 @Override 32 public View getView(final int position, View convertView, ViewGroup parent) { 33 ViewHold vh = null; 34 if (cOnvertView== null) { 35 cOnvertView= View.inflate(context, R.layout.item_left, null); 36 vh = new ViewHold(); 37 convertView.setTag(vh); 38 vh.tv_left = (TextView) convertView.findViewById(R.id.tv_left); 39 } else { 40 vh = (ViewHold) convertView.getTag(); 41 } 42 vh.tv_left.setTag(position); 43 vh.tv_left.setText(data[position]); 44 return convertView; 45 } 46 47 public class ViewHold { 48 TextView tv_left; 49 50 } 51 }
2.右边Listview的adapter
1 /** 2 * 右边listview的adapter 3 * 4 * @author HaiPeng 5 * 6 */ 7 public class RightAdapter extends BaseAdapter { 8 private Context context; 9 private ArrayListdata = new ArrayList (); 10 11 public RightAdapter(Context context) { 12 super(); 13 this.cOntext= context; 14 } 15 16 /** 17 * 这个方法是用来更新数据源 18 * 19 * @param context 20 */ 21 22 public void updateData(ArrayList lists) { 23 data.clear(); 24 data.addAll(lists); 25 this.notifyDataSetChanged(); 26 } 27 28 @Override 29 public int getCount() { 30 // TODO Auto-generated method stub 31 return data.size(); 32 } 33 34 @Override 35 public Object getItem(int position) { 36 37 return null; 38 } 39 40 @Override 41 public long getItemId(int position) { 42 // TODO Auto-generated method stub 43 return 0; 44 } 45 46 @Override 47 public View getView(int position, View convertView, ViewGroup parent) { 48 ViewHold vh = null; 49 if (cOnvertView== null) { 50 cOnvertView= View.inflate(context, R.layout.item_right, null); 51 vh = new ViewHold(); 52 convertView.setTag(vh); 53 vh.tv_cOntent= (TextView) convertView 54 .findViewById(R.id.tv_content); 55 vh.tv_right = (TextView) convertView.findViewById(R.id.tv_right); 56 } else { 57 vh = (ViewHold) convertView.getTag(); 58 } 59 vh.tv_content.setText(data.get(position).getName()); 60 if (position == 0) {//如果是第一个 需要显示标题 61 vh.tv_right.setVisibility(View.VISIBLE); 62 vh.tv_right.setText(data.get(position).getTitle()); 63 } else if (!TextUtils.equals(data.get(position).getTitle(), 64 data.get(position - 1).getTitle())) {//如果这个标题和上一个不一样 也需要将标题显示出来 65 vh.tv_right.setVisibility(View.VISIBLE); 66 vh.tv_right.setText(data.get(position).getTitle()); 67 } else { 68 vh.tv_right.setVisibility(View.GONE); 69 } 70 return convertView; 71 } 72 73 public class ViewHold { 74 TextView tv_content; 75 TextView tv_right; 76 } 77 78 }
四.MainActivity中操作
1.初始化数据
京公网安备 11010802041100号