关闭

并排ListView——仿京东分类列表

标签: listview京东
5369人阅读 评论(4) 收藏 举报
分类:

无意间看到京东的分类列表做的非常炫, 是那种横排列表的形式,本来是想截图上来的,但是公司没找到数据线。。。。好吧,今天我们也来实现个这种效果。 这次我选择的ListView,但是ListView默认是横向铺满屏的,怎么做到并排呢? 重写!!!

虽然京东的没法截图了,但是我自己做的效果可以在模拟器上运行,先来看看效果吧,界面有点丑,没关系,对吧? 我们主要研究的是如何实现这种框架,而不是界面本身。



恩, 界面确实有点丑,算了,还是直接看实现过程吧。

上面说了,这次我们选重写ListView, 那么我们的需求是什么呢? 很简单,重写它默认横向铺满屏的特性,让它可以wrap_content。

public class MyListView extends ListView {
	public MyListView(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}


	public MyListView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
	}
	
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		int height = getMeasuredHeight();
		int width = 0;
		
		int widthMode = MeasureSpec.getMode(widthMeasureSpec);
		int widthSize = MeasureSpec.getSize(widthMeasureSpec);
		if(widthMode == MeasureSpec.EXACTLY) {
			width = widthSize;
		}else {
			if(widthMode == MeasureSpec.AT_MOST) {
				final int childCount = getChildCount();
				for(int i=0;i<childCount;i++) {
					View view = getChildAt(i);
					measureChild(view, widthMeasureSpec, heightMeasureSpec);
					width = Math.max(width, view.getMeasuredWidth());
				}
			}
		}
		
		setMeasuredDimension(width, height);
	}
}


还是很简单的, 只重写了onMeasure()方法, 看看具体的逻辑吧。

13行,首先调用了super.onMeasure()方法,因为这里我们不考虑height,所以让ListView自己去算吧,我们只关心width/

14行,获取了ListView自己测量的结果,我们只需要height,因为width是我们自己需要计算的。

17~18行,不说了,获取父布局给推荐的mode和size。

接下来是一个if...else..., 在我们这个需求里,这个if...else...是多余的,但为了代码规范,还是加上了,有总比没有强吧。

if里,if的条件是widthMode == MeasureSpec.EXACTLY 即为精确值时, 这时候就不需要我们自己去计算了,直接赋值width为父布局给推荐的大小就ok。

看else里,这里又一个if,这个条件widthMode == MeasureSpec.AT_MOST 即当mode为尽量大时,也就是layout_width="wrap_content",好,这里需要我们自己做工作了。

23行,我们获取了所有的子item的个数。

接着24行一个for循环,获取所有的子view。

26行,通过measureChild(view, widthMeasureSpec, heightMeasureSpec);去测量一下该view的宽高。

27行,用width保存所有子view中宽度最大的那个的宽度。

最后的最后,32行,别忘了保存一下测量结果。


ok,重写的ListView搞定了,现在它就有了wrap_content的能力,赶紧来布局中布局它吧。

<RelativeLayout 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"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="3" >

        <org.loader.jdmemu.MyListView
            android:id="@+id/list1"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:background="@android:color/darker_gray" />
        <org.loader.jdmemu.MyListView
            android:id="@+id/list2"
            android:layout_width="0dip"
            android:layout_weight="2"
            android:layout_height="wrap_content" />
    </LinearLayout>

</RelativeLayout>

可以看到,这里是两个并排的ListView,占的宽度比为1:2。前期工作都做完了,去Activity中填充数据看看效果吧。

public class MainActivity extends Activity {
	private static final String[] mMenus = { "常用分类", "服饰内衣", "鞋靴", "手机",
			"家用电器", "数码", "电脑办公", "个护化妆", "图书" };

	private MyListView mListView1;
	private MyListView mListView2;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		mListView1 = (MyListView) findViewById(R.id.list1);
		mListView2 = (MyListView) findViewById(R.id.list2);
		
		mListView1.setAdapter(new ArrayAdapter<String>(this,
				R.layout.menu, mMenus));

		mListView1.setOnItemClickListener(new ItemClick());
	}
	
	private class ItemClick implements OnItemClickListener {
		@Override
		public void onItemClick(AdapterView<?> parent, View view, int position,
				long id) {
			mListView1.smoothScrollToPositionFromTop(position, 0);
			String[] items = new String[(position + 1) * 2];
			for(int i=0;i<items.length;i++) {
				items[i] = mMenus[position] + "中的数据:" + i;
			}
			mListView2.setAdapter(new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1, items));
		}
	}
}



恩,偷懒了,不过很好理解,就是为ListView1设置一个adapter,并通过ListView的itemClick动态改变ListView2的adapter。

重点看看

mListView1.smoothScrollToPositionFromTop(position, 0);

这句话的作用就是实现当我们点击该item时,让该ListView滑动,并到在该item到达顶部时停止,实现动画中那个自动滑动的ListView的效果。

如此简单,就可以达到文章刚开始的效果。

等等,突然想到,是不是可以把菜单做成侧滑的效果呢? 嘿嘿,应该还没有人这么干吧。 看来下篇文章可能就是“不一样的侧滑菜单了”。嘿嘿,今天下班回去研究研究。


3
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

Android实现淘宝体验的商品列表排序分类点击事件

本文为原创文章,转载请注明出处
  • u013475663
  • u013475663
  • 2016-06-30 16:39
  • 6391

仿京东分类功能(两个ListView联动)

实现思路:首先是布局,布局就非常简单了,一个线性布局里面放两个ListView 当点击左边ListView的item时切换当前Item中TextView的背景图片同时设置margins; 右边List...
  • Zheng_Jiao
  • Zheng_Jiao
  • 2016-05-13 13:16
  • 6917

Android GridView 分组显示(仿京东商品分类)

Android GridView 分组显示(仿京东商品分类)Gridview分组显示, 仿京东分类效果源码下载地址: http://www.tp-shop.cn/download.html “下载An...
  • wqhjfree
  • wqhjfree
  • 2016-08-15 11:45
  • 4161

android 实现仿美团点菜和京东分类导航

android 实现仿美团点菜和京东分类导航  欢迎大家进群:574605026   开启我们的开发之旅    废话不多说,看图说话 当看到标题的时候,每个人都想知道,到底是个什么样子呢?会...
  • MINGZHNGLEI
  • MINGZHNGLEI
  • 2017-01-11 14:48
  • 3394

Android开发之多级下拉列表菜单实现(仿美团,淘宝等)

注:本文转载于:http://blog.csdn.net/minimicall/article/details/39484493 我们在常用的电商或者旅游APP中,例如美团,手机淘宝等等,都能够看...
  • dai_zhenliang
  • dai_zhenliang
  • 2014-09-25 09:51
  • 203370

商城之商品分类

1.注意:根据不同分辨率写Value,layout,drawable。从而做到适配 2.布局 <LinearLayout xmlns:android="http://schemas.androi...
  • u012360634
  • u012360634
  • 2016-10-05 14:55
  • 1101

Android分类列表菜单实现

  • 2015-02-13 15:44
  • 2.30MB
  • 下载

仿京东App分类页面的实现

今天群里有人问了关于仿京东App分类页面的实现,而我之前正好查过这方面的资料,手上正好有一个demo,正好分享给大家看看,个人觉得效果棒棒哒!首先来看效果图吧是不是很6呢,来分析这个demo的主体构成...
  • qq_16131393
  • qq_16131393
  • 2016-03-16 11:16
  • 8618

Android 之仿京东分类(原理listview+fragment)

1.写一个fragmentimport android.os.Bundle; import android.support.v4.app.Fragment; import android.view.L...
  • jky_yihuangxing
  • jky_yihuangxing
  • 2016-08-16 13:35
  • 3232

Android仿京东左右分类

最近看到很多购物商城都是采用了一种布局,左边是list列表右侧是商品的列表 所以练练手,其实很简单,左边就是一个ListView,右边是一个Fragment,Fragment的内容可以自己定...
  • u010107250
  • u010107250
  • 2015-03-15 19:36
  • 6702
    个人资料
    • 访问:645441次
    • 积分:6893
    • 等级:
    • 排名:第3918名
    • 原创:80篇
    • 转载:0篇
    • 译文:2篇
    • 评论:625条
    文章分类
    博客专栏
    友情链接

    鸿洋_

    Aggie的博客

    梁肖技术中心

    极客导航

    最新评论