android開發-介面設計基本知識，android介面設計

android開發-介面設計基本知識，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.布局技巧及最佳化

兩個小工具：

巧用LayoutInflater

LayoutInflater(載入資源檔格式)

LayoutInflater 是一個抽象類別。LayoutInflater這個類，它的作用類似於findViewById()； 不同點是LayoutInflater是用來找res/layout/下的xml布局檔案，並且執行個體化；而 findViewById()是找xml布局檔案下的具體widget控制項。

在文檔中如下聲明： public abstract class LayoutInflater extends Object

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三者的關係：

所以，介面顯示的步驟是：

ArrayAdapter最為簡單，只能展示一行字。
SimpleAdapter有最好的擴充性，可以自訂出各種效果。
SimpleCursorAdapter可以認為是SimpleAdapter對資料庫的簡單結合，可以方面的把資料庫的內容以列表的形式展示出來。

ListView

常用屬性:

常用方法:

 資料繫結：

    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 @Override16 public int getCount() {17 // 有多少條資料18 return mNames.length;19 }20 21 @Override22 public Object getItem(int position) {23 // 返回某一條資料對象24 return mNames[position];25 }26 27 @Override28 public long getItemId(int position) {29 30 return position;31 }32 33 @Override34 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的相似與區別：

相同：

不同之處：

    樣式（宮格式）

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

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

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

android:horizontalSpacing="110dp"     //橫向間距

android:verticalSpacing="110dp"      //縱向間距

ScrollView

讓不是列表的內容區滾動

extents自FrameLayout

支援垂直滾動HorizontalScrollView