Android UI (一)

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控件)