Android UI (一)

最新推荐文章于 2024-01-30 21:31:52 发布

kirstin_zhang

最新推荐文章于 2024-01-30 21:31:52 发布

阅读量253

点赞数 1

文章标签： Android基础 Android UI Common Layout Adapter View

本文链接：https://blog.csdn.net/kirstin_zhang/article/details/51592848

版权

User Interface是Android中用来呈现数据，实现与用户交互的一组用户接口。分为用于布局或呈现view的容器view（ViewGroup）和呈现数据的非容器view，其中容器view可分为commonLayout和adapter Layout。

一、常用Common Layout

1.基础属性

a） Relative Layout

① 相对布局：其中放置的view位置灵活可变，如需对位置能够精确方便的进行调整，可以考虑采用Relative Layout。

② 常用属性：alignPrentRight/Left/Bottom/Top/BaseLine

toEndOf/toStartOf

Below/above

Layout_padding/left/right/bottom/top(内边距设置)

Layout_margin/left/right/bottom/top(外边距设置)

b） Linear Layout

① 线性布局：线性布局中控件按照代码节点的先后，在界面上顺序显示

② 常用属性：orientation(默认水平)

Layout_Gravity= center_Horizotal/Vertical(水平布局只能设置为垂直居中，垂直方向布局设为水平居中)

Layout_Weight（可以先设置对应宽度或高度为0dp）

c） Grid Layout

① 网格布局：4.0以上添加的布局方式，按水平/垂直方向依次排列。典型Demo：简单计算器的实现。

② 常用属性：columnCount/rowCount

Layout_columnSpan和Layout_gravity配合使用

d） Frame Layout

① 帧布局：用于布局融合，控件重叠

② 常用属性：

2.布局优化

a）优化对象个数（用帧布局改为merge便签）

b）优化加载时间（用ViewStub延迟加载实现）

c）优化布局重用（用include标签调用需要重用的布局代码）

3.布局扩展

a）ScrollView和HorizontalScrollView

水平滚动条和垂直滚动条：内嵌LinearLayout布局

xml文件代码如下：

<?xml version="1.0"?>
-<RelativeLayout tools:context=".MainActivity" android:layout_height="match_parent" android:layout_width="match_parent" xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android"> -<HorizontalScrollView android:layout_height="64dp" android:layout_width="match_parent" android:scrollbars="none" android:id="@+id/hsvId"> <LinearLayout android:layout_height="match_parent" android:layout_width="wrap_content" android:id="@+id/topId" android:orientation="horizontal" android:background="#ff000000"> </LinearLayout> </HorizontalScrollView> <FrameLayout android:layout_height="match_parent" android:layout_width="match_parent" android:id="@+id/frmLayoutId" android:layout_below="@id/hsvId"> </FrameLayout> </RelativeLayout>

向scrollview里添加view

	    contentLayout=(FrameLayout) findViewById(R.id.frmLayoutId);
		//获得线性布局对象
		titleLayout=
		(LinearLayout) 
		findViewById(R.id.topId);
		//构建线性布局参数对象
		LayoutParams params=
		new LayoutParams(
		LayoutParams.WRAP_CONTENT,
		LayoutParams.WRAP_CONTENT);
		params.rightMargin=5;
		params.gravity=Gravity.CENTER_VERTICAL;
		//在线性布局添加几个TextView
		for(int i=1;i<=20;i++){
		TextView tv=new TextView(this);
		
		TextView contentTv=new TextView(this);
		contentTv.setText("Content"+i);
		contentTv.setTextSize(30);
		contentTv.setVisibility(View.GONE);
		//contents.add(contentTv);
		contentLayout.addView(contentTv);
		tv.setText("Text"+i);
		//tv.setText(R.string.hello_world);
		tv.setTextSize(24);
		//tv.setTextColor(Color.WHITE);
		tv.setTextColor(Color.parseColor("#ffffffff"));
		//添加触摸事件
		tv.setOnTouchListener(this);
		//设置Tv对象的LayoutParams(使用哪个由布局决定)
		tv.setLayoutParams(params);
		titleLayout.addView(tv);

b）Switcher:TextSwitcher和ImageSwitcher

文本切换器和图片切换器：setFactory()——产生view控件，通过setImageResource()和setText()为view添加数据。

向相对布局中添加标签：

<ImageSwitcher android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_centerInParent="true" android:id="@+id/tSwitherId"/> <Button android:layout_height="wrap_content" android:layout_width="match_parent" android:onClick="onClick" android:text="Button" android:layout_alignParentBottom="true"/>

点击按钮实现图片切换：

 textSwither=(ImageSwitcher) findViewById(R.id.tSwitherId);
	    //设置view工厂(要掌握)
	    textSwither.setFactory(this);
	    //设置view动画
	    textSwither.setInAnimation(
	    AnimationUtils.loadAnimation(this,
	    android.R.anim.slide_in_left));
	    textSwither.setOutAnimation(
	    AnimationUtils.loadAnimation(this,
	    android.R.anim.slide_out_right));
	    //设置默认图片
	    textSwither.setImageResource(res[count++]);
	}
	private int res[]=
	{R.drawable.png_01,
	 R.drawable.png_02,
	 R.drawable.png_03};
	private int count;
	public void onClick(View v){
		textSwither.setImageResource(res[count]);
		count++;
		if(count==res.length){
		count=0;
		}
	}

	/**借助此方法创建view对象*/
	@Override
	public View makeView() {
		Log.i("TAG", "makeView()");
		ImageView tv=new ImageView(this);
		tv.setScaleType(ScaleType.CENTER);
		return tv;
	}

二、Adapter Layout

AdapterLayout是一组viewGroup，同时需要适配器adapter构建数据，才能把数据呈现出来的控件。

1. ListView：以列表的形式显示数据。例：微信好友列表

1）设置ListView控件显示数据

2）创建listView对象

3）创建适配器对象

4）将适配器关联到listView对象

//1.获得ListView
ListView lsv=(ListView) 
findViewById(R.id.lsvId);
//2.构建Adapter
ArrayAdapter<String> adapter=
new ArrayAdapter<String>(
this, //context
android.R.layout.simple_list_item_1,//resource
new String[]{"北京","深圳","上海"});
//3.ListView关联Adapter
lsv.setAdapter(adapter);

5）给listView对象设置监听器

private Object [][]datas={
	{R.drawable.png_01,"宝马"},
	{R.drawable.png_02,"奔驰"}
	};//将此数组中的数据取出来交给ListView显示
	private List<Map<String,Object>> brands=
	new ArrayList<Map<String,Object>>();
	
	private void loadDatasFromNet() {
		for(int i=0;i<datas.length;i++){
		 Map<String,Object> map=new HashMap<String, Object>();
		 map.put("logo", datas[i][0]);
		 map.put("name", datas[i][1]);
		 brands.add(map);
		 }
	}
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		//setContentView(R.layout.activity_main);
		//模拟加载数据
		loadDatasFromNet();
		//构建ListView
		ListView lsv=new ListView(this);
		//构建适配器对象
		SimpleAdapter adapter=
		new SimpleAdapter(this,
		brands,//data(List<? Map<String,?>>)
		R.layout.list_item_02, //resource (item view 模板)
		new String[]{"logo","name"},//map中的key
		new int[]{R.id.imageView1,R.id.textView1});//resource中的viewId
		//关联适配器
		lsv.setAdapter(adapter);
		//添加监听器
		lsv.setOnItemClickListener(this);
		//将listview添加到activity对应的window窗口
		setContentView(lsv);
	}
	@Override
	public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
		Map<?,?> map=(Map<?,?>)
		parent.getItemAtPosition(position);
		Toast.makeText(this,
		map.get("name").toString(),0).show();
	}
}

2. GridView：以表格的形式显示数据

1）设置GridView控件显示数据

2）创建GridView对象

3）创建适配器对象

4）将适配器关联到GridView对象

5）给GridView对象设置监听器

3.Spinner

1）设置Spinner控件显示数据

2）创建Spinner对象

3）创建适配器对象

4）将适配器关联到Spinner对象

5）给Spinner对象设置监听器

//2.设置listview的选择模式
	lsv.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);<pre name="code" class="java">lsv.setOnItemClickListener(this);
	}
	@Override
	public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
	ArrayAdapter<?> adapter=
	(ArrayAdapter<?>)
	parent.getAdapter();
	adapter.notifyDataSetChanged();
	}

4.ViewPager

1）设置ViewPager控件显示数据

2）创建ViewPager对象

3）创建适配器对象

4）将适配器关联到ViewPager对象

5）给ViewPager对象设置监听器

5. Adapter

1）ArrayAdapter(数据：数组，List);

2）SimpleAdapter(数据：List<? extends Map<String,?>>)

3）BaseAdapter(抽象类，有部分抽象方法)

4）ListAdapter(接口，标准)

5.1 Adapter构建数据方式（包饺子）

1）构建item view

2）获取item数据

3）将item数据放到创建的item view里

4）返回该view对象

*：viewPager对应的PagerAdapter需要将view对象放进container容器中。

@Override
public Object instantiateItem(ViewGroup container, int position) {
<span style="white-space:pre">	</span>Log.i("TAG", "instantiateItem.position="+position);
	//1.item view
	ImageView iv=new ImageView(MainActivity.this);
	//2.item data
	int bannerImg=bannerImgs[position];
	//3.set item data to item view
	iv.setImageResource(bannerImg);
	//4.add item view to container
	container.addView(iv);
	return iv;//key
}

5.2 Adapter优化：前提：满足客户需求

解决方法：构建一个Adapter子类继承BaseAdapter或其他Adapter，根据需求主要重写getView()方法。

1）减少item view的构建次数（重用convertView参数）

2）减少findViewById的次数（借助viewHolder对象记录查找到的对象）

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		Log.i("TAG", "getView.convertView="+convertView);
		//1.item view (饺子皮对象)
	    View v=null;
	    ViewHolder vh=null;
		if(convertView==null){
		//构建Item view对象(饺子皮)
		v=View.inflate(getContext(),
		R.layout.list_item_02,null);
		//构建viewholder,借助此对象记录item view中子元素的位置
		vh=new ViewHolder();
		vh.imageView=(ImageView) 
		v.findViewById(R.id.imageView1);
		vh.textView=(TextView) 
		v.findViewById(R.id.textView1);
		//item view关联view holder
		v.setTag(vh);//每个view都有此方法
		}else{
		v=convertView;//实现ConvertView对象的重用
		vh=(ViewHolder)v.getTag();
		}
		//2.item data (饺子馅)
		City c=getItem(position);
		//3.set item data to item view(包饺子，对号入座)
		//将city中的数据放到对应位置
		vh.imageView.setImageURI(Uri.fromFile(new File(c.getLogo())));
		vh.textView.setText(c.getName());
		return v;//包好的饺子
	}
	/**要借助此类型的对象记录
	 * itemview中子元素的位置*/
	class ViewHolder{
		ImageView imageView;
		TextView textView;
	}

6. 各种点击事件汇总

SetOnClickListener()

SetOnItemClickListener()

SetOnItemLongClickListener()

SetOnItemCheckedListener()

SetOnItemSelectedListener()(针对Spinner控件)