android 界面设计基本知识

一个好的APP不仅有美观，好看的界面，更需要良好的性能和稳定性。作为一名开发人员，需要理解界面设计原则并写出优秀的界面设计代码。

本章主要讲述基本控件的使用，界面布局及一些常用的界面设计属性。

1.常用布局

(1) LinearLayout 相对布局

android:android:layout_weight=”1”      //百分比属性
android:layout_above                        //表示与某个元素绑定后，在某个元素之上
android:layout_toLeftOf                     // 表示与某个元素绑定后，在某个元素左边
android:layout_alignLeft                     //依赖于某个元素的左边（平行对齐）
android:layout_margin                       //表示与边界的距离，没有方向的margin是与四边的距离
android:padding                                           //是内边距

android:orientation=”vertical”             //垂直展示子控件列表

android:orientation=”horizontal”         //水平展示子控件列表

控件可见性设置：

设置成gone为隐藏（完全不在，不占用空间）

设置成invisible不可见（看不见，但还存在，占用空间）

 

(2) RelativeLayout
android:layout_alignParentRight          //相对于父控件；
android：layout_toRightOf                //相对于xx控件
android：alighLeft                           //控件左边和某控件的左边平行

(3)FrameLayout 帧布局

控件会一直叠加在一起

 

(4)AbsoluteLayout（很少用）

android不建议用，因为android屏幕很多

(5)TableLayout（很少用）

2.布局技巧及优化

  1. Android布局官方建议不超过10层。
  2. 布局尽量用相对布局，尽量使用layout_above、layout_toLeftOf、layout_alignLeft、layout_margin、padding等方法达到想要的布局效果。
  3. 重用布局文件
  4. 减少视图层级，替换相应的层级开头，并不会改变层级的结构
  5. 需要时才加载
  6. 不要嵌套多个使用layout_weight属性的LinearLayout
  7. <include /> 重用布局文件
  8. <merge /> 减少视图层级

两个小工具：

  1. Android lint：删除无用的资源、布局、文件、引用、类、控件。
  2. HierarchyViewer：分析布局层级

巧用LayoutInflater

LayoutInflater(加载资源文件格式)

LayoutInflater 是一个抽象类。LayoutInflater这个类，它的作用类似于findViewById()； 不同点是LayoutInflater是用来找res/layout/下的xml布局文件，并且实例化；而 findViewById()是找xml布局文件下的具体widget控件。

在文档中如下声明： public abstract class LayoutInflater extends Object

    1. LayoutInflater inflater = getLayoutInflater();//调用Activity的getLayoutInflater()
    2. LayoutInflater inflater = LayoutInflater.from(context);
    3. LayoutInflater inflater = (LayoutInflater)context.getSystemService
      (Context.LAYOUT_INFLATER_SERVICE);

layoutInflater在项目中的使用实例代码：

LayoutInflater inflater = (LayoutInflater)getSystemService(LAYOUT_INFLATER_SERVICE);       

View view = inflater.inflate(R.layout.custom, (ViewGroup)findViewById(R.id.test));       

EditText editText = (EditText)view.findViewById(R.id.content);

对于上面代码，指定了第二个参数 ViewGroup root，当然你也可以设置为 null 值。

View复用

View复用可以有效的提高页面加载的速度，从而提高整体程序的性能。View复用举例如下：

 1 public View getView(int i, View view, ViewGroup viewGroup) {
 2         LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
 3 
 4         ViewHolder viewHolder;
 5         //1、view复用：只有当view为空时，才读取xml布局文件；不为空则继续使用view，取控件。
 6         if (view == null) {
 7             view = inflater.inflate(R.layout.item_listview, null);
 8             viewHolder = new ViewHolder();
 9             viewHolder.avatarImageView = (ImageView) view.findViewById(R.id.avatar_imageview);
10             viewHolder.nameTextView = (TextView) view.findViewById(R.id.item_name);
11             viewHolder.ageTextView = (TextView) view.findViewById(R.id.item_age);
12 
13             //打标签
14             view.setTag(viewHolder);
15         } else {
16             viewHolder = (ViewHolder) view.getTag();
17         }
18 
19         viewHolder.avatarImageView.setImageResource(R.drawable.avatar);
20         viewHolder.nameTextView.setText(mUserInfo.get(i).getName());
21         viewHolder.ageTextView.setText(mUserInfo.get(i).getAge() + "");
22 
23         return view;
24     }
25 }
26 //2、创建一个类，用于缓存控件。
27 class ViewHolder {
28     ImageView avatarImageView;
29     TextView nameTextView;
30     TextView ageTextView;
31 }
ViewDemo

 

3.常用数据控件

android中常用的数据控件包括,ScrollView，GridView，ListView。作为数据交互，一般会结合adapter使用。

Adapter是连接后端数据和前端显示的适配器接口，是数据和UI（View）之间一个重要的纽带。在常见的View(ListView,GridView) 等地方都需要用到Adapter。如下图直观的表达了Data、Adapter、View三者的关系：

所以，界面显示的步骤是：

  1. 建立数据源
  2. 建立adapter，连接数据源
  3. 绑定adapter到界面组件

ArrayAdapter最为简单，只能展示一行字。
SimpleAdapter有最好的扩充性，可以自定义出各种效果。
SimpleCursorAdapter可以认为是SimpleAdapter对数据库的简单结合，可以方面的把数据库的内容以列表的形式展示出来。

ListView

常用属性:

  1. listSelector 选中时时的背景
  2. scrollingCahce 滑动缓存颜色
  3. cacheColorHint 缓存颜色值
  4. fastScrollEnable 快速滑动条（类似微博）

常用方法:

  1. addHeaderView    设置头
  2. addFooterView    设置尾

 数据绑定：

    mPhoneBookListView = (ListView) findViewById(R.id.list_view);
    PhoneBookAdapter phoneBookAdapter = new PhoneBookAdapter(ListViewDemoActivity.this);
    mPhoneBookListView.setAdapter(phoneBookAdapter);

    adapter定义如下：

 1 public class PhoneBookAdapter extends BaseAdapter {
 2 
 3 <pre><code>private Context mContext;
 4 
 5 private LayoutInflater mLayoutInflater;
 6 
 7 private String[] mNames = {"小明", "小花"};
 8 
 9 public PhoneBookAdapter(Context context) {
10      //构造器
11      mContext = context;
12      mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
13 }
14 
15 @Override
16 public int getCount() {
17     // 有多少条数据
18     return mNames.length;
19 }
20 
21 @Override
22 public Object getItem(int position) {
23     // 返回某一条数据对象
24     return mNames[position];
25 }
26 
27 @Override
28 public long getItemId(int position) {
29 
30     return position;
31 }
32 
33 @Override
34 public View getView(int position, View convertView, ViewGroup parent) {
35     // 返回一个视图
36      convertView = mLayoutInflater.inflate(R.layout.item_phone_book_friend, null);
37     //获取控件
38     TextView nameTextView = (TextView) convertView.findViewById(R.id.name_text_view);
39     //和数据之间进行绑定
40     nameTextView.setText(mNames[position]);
41     return convertView;//返回视图
42 }
PhoneBookAdapter

 

注：
getView(int position, View convertView, ViewGroup parent)
postion表示位置
convertView表示视图
parent表示所有者

convertView = mLayoutInflater.inflate(R.layout.item_phone_book_friend, null);
将找到的布局变为视图

TextView nameTextView = (TextView) convertView.findViewById(R.id.name_text_view);
读出来的视图里面找到TextView

构造器负责传递上下文

LayoutInflater负责解析Layout
调用时，需要使用getSystemService(Context.LAYOUT_INFLATER_SERVICE)方法

更新ListView中的数据:

                phoneBookAdapter.refreshData(mUserInfos);
                phoneBookAdapter.notifyDataSetChanged();   //执行刷新功能

在对应的Adapter方法中加入刷新方法:

public void refreshData(UserInfo userInfos) {
    mUserInfos = userInfos;
}

GridView

GridView和ListView的相似与区别：

相同：

  1. GridView extends AbsListView；ListView extends ABSListView。
  2. adapter、数据、点击事件、刷新都一样。

不同之处：

    样式（宫格式）

   下面是GridView特有重要的属性：

android:numColumns="3"              //显示3列

android:columnWidth="50dp"                    //每一列的宽度

android:horizontalSpacing="110dp"     //横向间距

android:verticalSpacing="110dp"      //纵向间距

ScrollView

让不是列表的内容区滚动

extents自FrameLayout

支持垂直滚动HorizontalScrollView

posted @ 2016-03-18 19:52  无涯Ⅱ  阅读(2074)  评论(0)  编辑  收藏  举报
前一篇 后一篇 底部 回到顶部