Android的ListView——适配器模式-创新互联

安卓中有一个重要的控件ListView,安卓通过让用户实现BaseAdapter类来连接ListView和数据列表，将数据绑定显示在ListView中。适配器模式连接两个不兼容的接口，使两个不能一起工作的两个接口实现一起工作的功能。

创新互联公司专注于企业成都营销网站建设、网站重做改版、巨野网站定制设计、自适应品牌网站建设、H5场景定制、商城网站建设、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为巨野等各大城市提供网站开发制作服务。

例子通过模仿Android的ListView实现过程来验证适配器模式，类图结构如下：

Android的ListView——适配器模式

实现代码：

var Adapter = Class.extend({
	listview:null,
	dataChanged:function(){
		if (this.listview != null)
		{
			listview.draw();
		}
	},
	getView:function(position){
		return "";
	},
	getCount:function(){
		return 0;
	},
	getObject:function(index){
		return null;
	}
});
var ListView = Class.extend({
	id:null,
	adapter:null,
	ctor:function(_id){
		this.id = _id;
	},
	setAdapter:function(_adapter){
		this.adapter = _adapter;
		_adapter.listview = this;
	},
	setOnItemClick:function(_callback){
		this.callback = String(_callback).replace(/^function(\s|\n)+(.+)\((.|\n)+$/,'$2');
	},
	draw:function(){
		var txt = "";
		if(this.adapter != null){
			for(var i = 0;i < this.adapter.getCount();i++){
				txt += "<div onclick = '" + this.callback + "(" + i + ")"+ "'>" + this.adapter.getView(i) + "</div>";
			}
		}
		document.getElementById(this.id).innerHTML = txt;
	}

});
var MyAdapter = Adapter.extend({
	bean:[],
	ctor:function(_data){
		this.bean = _data
	},
	getCount:function(){
		return this.bean.length;	
	},
	getView:function(position){
		var data = this.bean[position];
		var tmpl = "<div class = 'row'><div class = 'col-xs-3'>姓名</div><div class = 'col-xs-7' style = 'text-align:right'>${name}</div></div><div class = 'row'><div class = 'col-xs-4'>${sex}</div><div class = 'col-xs-4'>${age}</div><div class = 'col-xs-4'>${address}</div></div>";	
		while(tmpl.indexOf("${") > 0){
			var start = tmpl.indexOf("${");
			var end = tmpl.indexOf("}");
			var key = tmpl.substring(start,end+1);
			tmpl = tmpl.replace(key,data[key.replace("${","").replace("}","")]);
		}
		return tmpl;
	},
	getObject:function(position){
		return bean[position];
	}

});
<body>
    <button onclick = "loadData()">加载数据</button>
    <div id = "listview">
		
    </div>
	
</body>
<script>
    var beans = [{name:'小红',sex:'女',age:11,address:"厦门"},{name:'小明',sex:'男',age:12,address:'温州'}];
    var myAdapter = null;
    var listview = null;
    (function(){
        myAdapter = new MyAdapter(beans);
        listview = new ListView("listview");
        listview.setAdapter(myAdapter);
		
    })();
    function loadData(){
        myAdapter.dataChanged();
    }
</script>

运行的效果图：

Android的ListView——适配器模式

适配器模式的优点主要是将两个没有关联的类连接在一起，提高了复用，正如上面的例子ListView作为列表可以用在任何场合，数据类也可以在任何场合下继续使用，适配器将两者连接成整体工作达到效果。

适配器过多会造成系统的混乱，不易于程序的可读性。

附件：http://down.51cto.com/data/2368474

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

名称栏目：Android的ListView——适配器模式-创新互联
路径分享：https://www.cdcxhl.com/article16/dochgg.html

成都网站建设公司_创新互联，为您提供全网营销推广、定制网站、移动网站建设、网站收录、域名注册、云服务器

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容