Android 中的UI

1.何为UI ?


一组用户接口(User Interface)?


2.UI 的职责？


1)呈现数据(业务数据)
2)实现与用户的交互


3.Android 中的UI 的实现？


1)用于呈现数据的View对象(例如TextView,Button,...)
2)用于呈现view的对象(例如Activity,...)


4.Android 中的View对象？


1)容器view (ViewGroup):用于布局view.

a)Commom Layout

1.常用Common Layout
1.RelativeLayout

    应用场合

RelativeLayout 采用相对布局的方式
对UI中的view进行布局，一般假如需要
对ViewGroup中的元素进行精确定位时
我们可以考虑使用RelativeLayout.
2.LinearLayout
3.FrameLayout
4.GridLayout

b)Adapter Layout
1.Adapter Layout 是什么？
1)ViewGroup
2)View
3)AdapterView


这些Layout对象在显示数据需要借助
adapter加载数据，并将数据构建成
相应的item,然后交给adapter layout
显示。


2.Adapter Layout 的应用场合？


Adapter Layout的应用场合应该由具体
的Adapter Layout决定，常用的Adapter
Layout对象有：

1)ListView (以列表形式显示数据)

      应用举例

使用ListView显示列表信息，并实现点击高亮显示

private List<String> datas;
private ArrayAdapter<String> adapter;
private ListView lsv;


/**
* 初始化ListView
*/
public void setListView() {
datas = DataUtils.loadDatas();
lsv = (ListView) findViewById(R.id.livi);


// 2.设置listview的选择模式
lsv.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
adapter = new ArrayAdapter<String>(this, R.layout.xingdui, R.id.tv_1, datas) {


private View v;


@Override
public View getView(int position, View convertView, ViewGroup parent) {
v = super.getView(position, convertView, parent);
int count;
// 获得listview点击事件


int checked = lsv.getCheckedItemPosition();


if (checked == position) {
v.setBackgroundColor(Color.GREEN);
} else {
v.setBackgroundColor(Color.WHITE);
}


// imageview获得点击事件
ImageView imageview = (ImageView) v.findViewById(R.id.iv1);
// 获得item的指定位置
imageview.setTag(position);
// 当点击时删除指定位置的item
// 获得点击事件
imageview.setOnClickListener(new OnClickListener() {


@Override
public void onClick(View v) {
deleteItem((Integer) v.getTag());
}
});
return v;
}


};


// 3.关联适配器
lsv.setAdapter(adapter);
// 4.添加点击事件
lsv.setOnItemClickListener(this);
// imageview.setOnClickListener(this);
}


// @Override
// public void onClick(View v) {
//
// }


@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
ArrayAdapter<?> adapter = (ArrayAdapter<?>) parent.getAdapter();
adapter.notifyDataSetChanged();
// 点击获得item
//// String item=(String) parent.getItemAtPosition(position);
//// Toast.makeText(this, item, 0).show();
// //更改颜色
//
//
}


private void deleteItem(int position) {
datas.remove(position);
/*
* 更新listview中的 数据会重新加载（重新加载会调用adapterd的gerview
*/
adapter.notifyDataSetChanged();
}

2)GridView (以网格形式显示数据)

应用实例

// 获得对象
GridView gv = (GridView) findViewById(R.id.gv_1);
// 构建适配器
ArrayAdapter<Item> adapter = new ArrayAdapter<Item>(this, R.layout.zidingyi_111, R.id.tv_1, list) {
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View v = View.inflate(getContext(), R.layout.zidingyi_111, null);
Item item = getItem(position);
ImageView iv = (ImageView) v.findViewById(R.id.imv_1);
TextView tv = (TextView) v.findViewById(R.id.tv_1);
iv.setImageResource(item.getLogo());
tv.setText(item.getName());
return v;
}
};
// 关联适配器
gv.setAdapter(adapter);
// 添加监听事件
gv.setOnItemClickListener(this);
}


class Item {
private String name;
private int logo;


public Item(String name, int logo) {
this.name = name;
this.logo = logo;
}


public int getLogo() {
return logo;
}


public String getName() {
return name;
}
}


@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Item item=(Item)parent.getItemAtPosition(position);
Toast.makeText(this,item.getName(),0).show();

}

3)Spinner  (以下拉列表显示数据)

应用实例 城市信息三级联动

// 自定义方法
setgroupSpinner();
setchildSpinner();
setchildSpinner12();
}


private void setchildSpinner12() {
childList12.addAll(Arrays.asList(child12[0][0]));
childSpinner12 = (Spinner) findViewById(R.id.spinner3);
childAdapter12 = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, childList12);
// 3)关联适配器对象
childSpinner12.setAdapter(childAdapter12);
}


private void setchildSpinner() {
childList.addAll(Arrays.asList(child11[0]));
// 1)获得Spinner对象
childSpinner = (Spinner) findViewById(R.id.spinner2);
// 2)构建适配器对象
childAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, childList);
// 3)关联适配器对象
childSpinner.setAdapter(childAdapter);
// 4)添加监听器
childSpinner.setOnItemSelectedListener(new OnItemSelectedListener() {


@Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
// 修改Spinner中的数据
childList12.clear();
childList12.addAll(Arrays.asList(child12[i][position]));
// 刷新Spinner02
childAdapter12.notifyDataSetChanged();
}


@Override
public void onNothingSelected(AdapterView<?> parent) {
// TODO Auto-generated method stub

}
});
}





private void setgroupSpinner() {


// 1)获得Spinner对象
groupSpinner = (Spinner) findViewById(R.id.spinner1);
groupadapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, group11);
// 3)关联适配器对象
groupSpinner.setAdapter(groupadapter);
// 4)添加监听器
groupSpinner.setOnItemSelectedListener(this);
}

@Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
// 修改Spinner中的数据
childList.clear();
childList.addAll(Arrays.asList(child11[position]));
childList12.clear();
childList12.addAll(Arrays.asList(child12[position][0]));
// 刷新Spinner02
childAdapter12.notifyDataSetChanged();
childAdapter.notifyDataSetChanged();
i=position;
}


@Override
public void onNothingSelected(AdapterView<?> parent) {


}

4)ViewPager(以分页形式显示数据)

应用实例 并实现只显示最后分页上的按钮功能

btnStart=(Button) findViewById(R.id.startId);
setViewPager();
setViewPagerIndicator();
}
private LinearLayout indicatorLayout;
private void setViewPagerIndicator(){
indicatorLayout=(LinearLayout) findViewById(R.id.indicatorLayoutId);
for(int i=0;i<bannerImgs.length;i++){
ImageView v=new ImageView(this);
v.setBackgroundResource(R.drawable.indicator_selector_01);
LayoutParams params=
new LayoutParams(
LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
params.rightMargin=8;
v.setLayoutParams(params);
v.setTag(i);
v.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
vPager.setCurrentItem((Integer)v.getTag());
}
});
indicatorLayout.addView(v);
}
//设置第一个view的状态为不可用状态
indicatorLayout.getChildAt(0).setEnabled(false);
}
private ViewPager vPager;
private void setViewPager() {
for (int i = 0; i < bannerImgs.length; i++) {
ImageView iv = new ImageView(this);
iv.setScaleType(ScaleType.FIT_XY);
iv.setImageResource(bannerImgs[i]);
list.add(iv);
}
// 1)获得ViewPager对象(android.support.v4.view.ViewPager)
vPager = (ViewPager) findViewById(R.id.bannerId);
// 2)构建适配器对象
PagerAdapter adapter = new BannerAdapter();
// 3)关联适配器对象
vPager.setAdapter(adapter);
// 4)添加监听器
vPager.setOnPageChangeListener(this);
}
private int bannerImgs[]={R.drawable.guide_1,R.drawable.guide_2,R.drawable.guide_3};
private List<ImageView> list=new ArrayList<ImageView>();

class BannerAdapter extends PagerAdapter{
/**要构建的Item个数*/
@Override
public int getCount() {return 3;}
/**判定instantiateItem方法的返回值与view的对应关系，
* instantiateItem方法的返回值等同于isViewFromObject方法中
* 第二参数的值*/
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0==list.get((Integer)arg1);
}
/**借助此方法构建item对象(包饺子)*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
Log.i("TAG", "instantiateItem.position="+position);
//1.item view
//2.item data
//3.set item data to item view
//4.add item view to container
ImageView iv=list.get(position);
container.addView(iv);
return position;//key=position,value=iv
}
/**销毁item时执行,
* destroyItem方法的第三个参数与
* instantiateItem方法的返回值相关**/
   @Override
   public void destroyItem(ViewGroup container, 
    int position, Object object) {
    Log.i("TAG", "destroyItem.position="+position);
    container.removeView(list.get(position));
   }
}
/**滚动状态发生变化时执行*/
@Override
public void onPageScrollStateChanged(int arg0) {
}
/**pager页面滚动时执行*/
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
//借助此变量记录上个页面的位置
private int prePos;
    /**页面完全显示时执行*/
@Override
public void onPageSelected(int position) {
 //修改指示器状态(不同状态对应的图片是不一样的)
 indicatorLayout.getChildAt(position)
 .setEnabled(false);//不可用状态(不可点击)
 indicatorLayout.getChildAt(prePos)
 .setEnabled(true);//可用状态(可点击)
 prePos=position;
 //============================
 //显示或隐藏Button
 if(position==2){
  btnStart.setVisibility(View.VISIBLE);
 }else{
  btnStart.setVisibility(View.GONE);
 }
}

5).....


3.Adapter Layout的构成及原理分析？


1)Adapter Layout对象(负责显示)
2)Adapter 对象(构建Item)
a)Context 对象(资源访问对象)
b)View 对象(呈现item数据)
c)data 对象(代表数据)


Adapter Layout中要显示的item对象
都需要借助Adapter对象构建。

2)非容器view:呈现数据