如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

一、Weinre 說明



Weinre的本意是Web Inspector Remote，它是一種遠程調試工具。功能與Firebug、Webkit inspector類似，可以幫助我們即時更改頁面元素、樣式，調試JS等。



使用Weinre工具，Weinre的本意是Web Inspector Remote，它是一種遠程調試工具:



1.它可以將遠程的頁面經過代理在PC上調試頁面元素、樣式，JS。



2.可以監聽頁面內部的Ajax請求等。



3.可以監聽頁面加載成功時候的Console控制臺輸出



官網首頁：http://people.apache.org/~pmuellr/weinre/docs/latest/



Weinre的原理







三個端的含義：客戶端(client)：本地的WebInspector，遠程調試客戶端。服務端(agent)：本地的HTTPServer，為目標頁面與客戶端建立通信。目標頁面(target)：被調試的頁面，頁面已嵌入weinre的遠程js。



調試過程：



客戶端將指令(請求DOM、執行js)post到代理服務端，目標頁面定時(大概5s)從服務端get指令，然后將結果post回服務端，最終客戶端定時從服務端get結果。



PS：由于Weinre的客戶端是基于Web Inspector開發，而Web Inspector只兼容WebKit核心的瀏覽器，所以只能在Chrome/Safari瀏覽器打開Weinre客戶端進行調試。





二、Weinre安裝和使用



1.weinre是基于NodeJs，因此首先要安裝NodeJs，然后使用npm命令安裝weinre



npm -g install weinre

2.運行，啟動weinre服務器，默認端口8080



node.exe node_modules\weinre\weinre --boundHost -all-

node.exe node_modules\weinre\weinre --boundHost  192.168.1.125 

在windows下，系統防火墻可能會彈出是否允許其訪問網絡的提示，點擊充許即可。

3.從瀏覽器訪問,http://localhost:8080,或者，http://192.168.1.125:8080，顯示如下表示啟動服務器監視成功











三、Weinre需要監聽調試的Web頁面配置處理



1.在所有頁面引入js文件



2.特別說明，當前js文件的域名需要指定為本機的IP地址，因為在手機模擬器中無法訪問電腦‘localhost’



















更多：



cordova-plugin-whitelist 協議白名單配置整理 



VS Code插件安裝位置



Visual Studio Code插件之Atom One Dark Syntax Theme



相關參考文章：



http://blog.csdn.net/freshlover/article/details/42640253



http://www.cnblogs.com/diva/p/3995674.html

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

這是一個 app從獲取獲取數據 用于顯示的經典實踐項目，數據來源于 豆瓣官方公開的api接口：https://developers.douban.com/wiki/?title=movie_v2

先上圖：

      

   





項目使用了如下第三方library：

下拉刷新：Android-PullToRefresh

網絡數據加載：android-async-http

圖片加載：universal-image-loader



后面的博客，會把項目的制作流程發出來

豆瓣API實踐項目-前言-0（可下載源碼）: http://blog.csdn.net/mario_faker/article/details/79618210

豆瓣API實踐項目-數據api接口-1：http://blog.csdn.net/mario_faker/article/details/79618235

豆瓣API實踐項目-搭建項目基本框架-2：http://blog.csdn.net/mario_faker/article/details/79618245

豆瓣API實踐項目-導入第三方library-3：http://blog.csdn.net/mario_faker/article/details/79618261

豆瓣API實踐項目-單頁細講4: http://blog.csdn.net/mario_faker/article/details/79618272

豆瓣API實踐項目-apk打包:http://blog.csdn.net/mario_faker/article/details/79618291





項目源代碼下載地址：

http://download.csdn.net/download/mario_faker/10253201

或github：https://github.com/MarioFaker/DBMovie

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

作者：魯米

做人就象是一家客棧

每個早晨，都是一位新來的客人

喜悅、沮喪、卑鄙

一瞬的覺悟來臨

就像一個意外的訪客

歡迎和招待每一位客人！

即使他們是一群悲傷之徒

來掃蕩你的客房

將家具一掃而光

但你要款待每一位賓客

他或許會為你打掃

并帶來新的喜悅

如果是陰暗的思想、 羞恥和怨恨

你也要在門口笑臉相迎

邀請他們進來

無論誰來，都要感激

因為每一位都是

由世外派來

指引你的向導

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

5.0以后，materialDesign風格，出現了立體這種概念，高光，陰影，也就是Z軸，凸顯層次；同時，裁剪view也變得方便簡單了很多。
1，先說說陰影的實現。
方案1：在xml中設置 
xml中設置有兩個方式，android:elevation="2dp" 
android:translationZ="2dp"這兩句代碼是可以同時并存的，而且是疊加的效果；當然只使用其中一個屬性進行z軸的陰影設置也是OK的。

方案2：在代碼中設置 
（下面說這個實現方式，其實就是輪廓的實現）

設置陰影，有一個需要注意的地方：
①：view的大小要比它的父布局小，才會有陰影效果，如果相同大小，是看不到陰影效果的； 
②：給圖片設置陰影的時候，如果這種圖片的background屬性是shape，那直接通過xml設置陰影是OK的，但是，如果是一張png或者其他格式的圖片，直接通過xml設置android:elevation="2dp" 
android:translationZ="2dp"陰影是看不到效果的，得通過其他代碼設置才行。。。**

2，view的輪廓，輪廓其實也是陰影
默認情況下，所有的view都是矩形的，雖然可以給view設置背景圓形的圖片，即可以在界面顯示出圓形的內容，但是view的大小實際上依然是矩形，并且設置的圖片實際上也是矩形的，只是圓形以外的區域是透明色。 
如果根據view大小來生成對應的陰影，就會出現很奇怪的效果，（一個看起來圓形的view展示出的確實一個矩形的陰影）我了解決這個問題，view增加了一個新的描述來指明內容顯示的形狀，這就是 輪廓

輪廓的實現
①通過shape設置的背景，view會自動根據shape的形狀進行輪廓判定，
②通過color設置的背景，view默認其輪廓和view的大小一樣。
③但是通過圖片進行背景設置，view則無法獲知輪廓的形狀，這個時候就需要手動進行指定了。
1
2
3
一：在xml中可以通過android：outlineProvider來指定輪廓的判定方式： 
1，none即使設置了Z屬性，也不會顯示陰影 
2，background會按照背景來設置陰影形狀 
3，bounds會按照view的大小來描繪陰影

**對于①和②這種情況，也是可以通過設置`android：outlineProvider`
來改變陰影的形狀以及輪廓外觀的。**

對于③這種背景是一張png或者其他格式的圖片的情況，
`android：outlineProvider=“background”`
是沒有效果的，屬性設置成`android：outlineProvider=bounds`
雖然也是有效果的，但是陰影輪廓是一個方形的輪廓，
并不是我們想要的效果了。

不設置`android：outlineProvider`屬性就更沒有效果了。
1
2
3
4
5
6
7
8
9
10
對于這種使用了png圖片作為背景的view加陰影輪廓的時候情況解決辦法也非常簡單，解決辦法就是：
就通過Java代碼設置，也就是說，一個圓形的png圖（我們知道，看起來是圓形的，
但是它其實還是方形的圖片，只是圓形之外的區域是透明不可見的），
 通過Java代碼設置輪廓，就會顯示出圓形的陰影輪廓了。
1
2
3
具體實現，繼續看： 
二：在代碼中，課通過setOutlineProvider來指定一個view的輪廓。 
對于③這種情況在代碼中設置輪廓才會有效果。

TextView textView= findViewById(R.id.tv);
ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
         //x，y軸表示位置，后兩個參數表示長，寬 
               outline.setOval(0,0,textView.getWidth(),textView.getHeight());
            }
        };
textView.setOutlineProvider(viewOutlineProvider);
1
2
3
4
5
6
7
8
9
強調：
如果采用圓形圖片作為背景，即使在xml布局中指定android：outlineProvider=“background”，也不會顯示陰影，設置為android：outlineProvider=bounds，雖然也有效果，但是效果很差，所以一般都是通過代碼來指定輪廓顯示。

1，一個shape圓形作為背景，設置陰影，設置android：outlineProvider的4種屬性的效果：


2，一個圓形png作為背景，設置陰影，設置android：outlineProvider的4種屬性的效果：


3，一個png作為背景，設置陰影，通過代碼設置的效果：


3，view的裁剪
裁剪，默認的ImageView是矩形的，很多時候，需要的是圓角的ImageView或者圓形的ImageView，這就需要裁剪view了。

實現，裁剪圓形：

final TextView textView= findViewById(R.id.tv);

ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                //設置圓形oval
                outline.setOval(0,0,textView.getWidth(),textView.getHeight());
            }
        };
//設置裁剪
textView.setClipToOutline(true);
1
2
3
4
5
6
7
8
9
10
11
實現，裁剪圓角矩形：

final TextView textView= findViewById(R.id.tv);

ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                //設置圓角矩形
               outline.setRoundRect(0,0,view.getWidth(),view.getHeight(),25);
            }
        };
textView.setOutlineProvider(viewOutlineProvider);
//設置裁剪
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

一、簡介

TabLayout提供了一個水平布局用于展示tabs，繼承自HorizontalScrollView。一般與Viewpager結合使用實現頁面和標簽聯動的效果，是時下APP中非常常用的一個控件



二、基本用法

1. 添加design依賴
   
   compile 'com.android.support:design:25.3.1'
   
   1
   
2. xml引用
   
3. xml中添加tab
   
   <android.support.design.widget.TabLayout
   
       android:id="@+id/tab_layout"
   
       android:layout_width="match_parent"
   
       android:layout_height="wrap_content">
   
       <android.support.design.widget.TabItem
   
           android:layout_width="wrap_content"
   
           android:layout_height="wrap_content"
   
           android:text="Tab1"/>
   
       <android.support.design.widget.TabItem
   
           android:layout_width="wrap_content"
   
           android:layout_height="wrap_content"
   
           android:text="Tab2"/>
   
       <android.support.design.widget.TabItem
   
           android:layout_width="wrap_content"
   
           android:layout_height="wrap_content"
   
           android:text="Tab3"/>
   
       <android.support.design.widget.TabItem
   
           android:layout_width="wrap_content"
   
           android:layout_height="wrap_content"
   
           android:text="Tab4"/>
   
   </android.support.design.widget.TabLayout>
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14
   
   15
   
   16
   
   17
   
   18
   
   19
   
   20
   
   21
   
4. 代碼中添加tab
   
   <android.support.design.widget.TabLayout
   
       android:id="@+id/tab_layout"
   
       android:layout_width="match_parent"
   
       android:layout_height="wrap_content">
   
   </android.support.design.widget.TabLayout>
   
   1
   
   2
   
   3
   
   4
   
   5
   
   // tablayout，Tab是TabLayout的內部類，且Tab的構造方法是包訪問權限
   
   TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
   
   tabLayout.addTab(tabLayout.newTab().setText("Tab1"));
   
   tabLayout.addTab(tabLayout.newTab().setText("Tab2"));
   
   tabLayout.addTab(tabLayout.newTab().setText("Tab3"));
   
   tabLayout.addTab(tabLayout.newTab().setText("Tab4"));
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   
   
   
   
   三、屬性詳解
   
   <declare-styleable name="TabLayout">
   
       <!--指示器顏色-->
   
       <attr name="tabIndicatorColor" format="color"/>
   
       <!--指示器高度-->
   
       <attr name="tabIndicatorHeight" format="dimension"/>
   
       <!--tabs距TabLayout開始位置的偏移量，但app:tabMode="scrollable"才生效-->
   
       <attr name="tabContentStart" format="dimension"/>
   
       <!--僅是Tab背景，設置TabLayout背景用android:background-->
   
       <attr name="tabBackground" format="reference"/>
   
       <!--默認fixed，所有Tab只能在屏幕內顯示，超出會被擠壓；scrollable,tab數量多會超出屏幕，可滑動-->
   
       <attr name="tabMode">
   
           <enum name="scrollable" value="0"/>
   
           <enum name="fixed" value="1"/>
   
       </attr>
   
       <!--默認fill，tab填滿TabLayout,但tabMode=“fixed”才生效；center，tabs位于TabLayout的中間-->
   
       <attr name="tabGravity">
   
           <enum name="fill" value="0"/>
   
           <enum name="center" value="1"/>
   
       </attr>
   
       <!--Tab的最小寬度-->
   
       <attr name="tabMinWidth" format="dimension"/>
   
       <!--Tab的最大寬度-->
   
       <attr name="tabMaxWidth" format="dimension"/>
   
       <!--Tab文本設置樣式-->
   
       <attr name="tabTextAppearance" format="reference"/>
   
       <!--Tab未選中字體顏色-->
   
       <attr name="tabTextColor" format="color"/>
   
       <!--Tab選中字體顏色-->
   
       <attr name="tabSelectedTextColor" format="color"/>
   
       <!--Tab內填充相關-->
   
       <attr name="tabPaddingStart" format="dimension"/>
   
       <attr name="tabPaddingTop" format="dimension"/>
   
       <attr name="tabPaddingEnd" format="dimension"/>
   
       <attr name="tabPaddingBottom" format="dimension"/>
   
       <attr name="tabPadding" format="dimension"/>
   
   </declare-styleable>
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14
   
   15
   
   16
   
   17
   
   18
   
   19
   
   20
   
   21
   
   22
   
   23
   
   24
   
   25
   
   26
   
   27
   
   28
   
   29
   
   30
   
   31
   
   32
   
   33
   
   34
   
   35
   
   36
   
   使用示例
   
   
   
    <android.support.design.widget.TabLayout
   
       android:id="@+id/tab_layout"
   
       android:layout_width="match_parent"
   
       android:layout_height="wrap_content"
   
       app:tabIndicatorColor="@color/colorPrimaryDark"
   
       app:tabIndicatorHeight="2dp"
   
       app:tabContentStart="50dp"
   
       app:tabBackground="@color/colorAccent"
   
       app:tabMode="scrollable"
   
       app:tabGravity="fill"
   
       app:tabTextAppearance="@style/MyTabTextAppearance"
   
       app:tabTextColor="@android:color/black"
   
       app:tabSelectedTextColor="@android:color/white"/>
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   <style name="MyTabTextAppearance" parent="TextAppearance.Design.Tab">
   
       <item name="textAllCaps">false</item>
   
       <item name="android:textSize">18sp</item>
   
   </style>
   
   1
   
   2
   
   3
   
   4
   
   
   
   
   
   四、圖文混排，Tab中添加圖片
   
5. 通過SpannableString設置圖片
   
   @NonNull
   
   private SpannableString setImageSpan(String string,int drawableId) {
   
       SpannableString ss = new SpannableString("  "+string);
   
       Drawable drawable = ContextCompat.getDrawable(this, drawableId);
   
       drawable.setBounds(0,0,drawable.getIntrinsicWidth(),drawable.getIntrinsicHeight());
   
       ImageSpan imageSpan = new ImageSpan(drawable);
   
       ss.setSpan(imageSpan,0,1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
   
       return ss;
   
   }
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
   
   tabLayout.addTab(tabLayout.newTab().setText(setImageSpan("Tab1",R.drawable.ic_home)));
   
   tabLayout.addTab(tabLayout.newTab().setText(setImageSpan("Tab2",R.drawable.ic_info)));
   
   ……
   
   1
   
   2
   
   3
   
   4
   
   
   
   
   
   我們會發現個問題，通過ImageSpan設置的圖片和文字沒有對齊，先百度到一個可用方法解決：重寫ImageSpan的draw()方法
   
   
   
   package com.strivestay.tablayoutdemo;
   
   
   
   import android.graphics.Bitmap;
   
   import android.graphics.Canvas;
   
   import android.graphics.Paint;
   
   import android.graphics.drawable.Drawable;
   
   import android.support.annotation.NonNull;
   
   import android.text.style.ImageSpan;
   
   
   
   public class CenterImageSpan extends ImageSpan {
   
       public CenterImageSpan(Drawable drawable) {
   
           super(drawable);
   
   
   
       }
   
   
   
       public CenterImageSpan(Bitmap b) {
   
           super(b);
   
       }
   
   
   
       @Override
   
       public void draw(@NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom,
   
                        @NonNull Paint paint) {
   
   
   
           Drawable b = getDrawable();
   
           Paint.FontMetricsInt fm = paint.getFontMetricsInt();
   
           int transY = (y + fm.descent + y + fm.ascent) / 2 - b.getBounds().bottom / 2;//計算y方向的位移
   
           canvas.save();
   
           canvas.translate(x, transY);//繪制圖片位移一段距離
   
           b.draw(canvas);
   
           canvas.restore();
   
       }
   
   }
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14
   
   15
   
   16
   
   17
   
   18
   
   19
   
   20
   
   21
   
   22
   
   23
   
   24
   
   25
   
   26
   
   27
   
   28
   
   29
   
   30
   
   31
   
   32
   
   33
   
   將上面的ImageSpan替換為現在的CenterImageSpan，即可實現圖文混排時對齊
   
   
   
   
   
   
   
6. 通過Tab.setCustomView()設置圖片
   
7. 自定義view布局
   
   <?xml version="1.0" encoding="utf-8"?>
   
   <LinearLayout
   
       xmlns:android="http://schemas.android.com/apk/res/android"
   
       android:layout_width="wrap_content"
   
       android:layout_height="wrap_content"
   
       android:orientation="vertical"
   
       android:gravity="center">
   
       <ImageView
   
           android:id="@+id/iv"
   
           android:layout_width="wrap_content"
   
           android:layout_height="wrap_content"
   
           android:src="@drawable/ic_home"/>
   
       <TextView
   
           android:id="@+id/tv"
   
           android:layout_width="wrap_content"
   
           android:layout_height="wrap_content"
   
           android:layout_margin="2dp"
   
           android:textSize="16sp"
   
           android:text="首頁"/>
   
   </LinearLayout>
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14
   
   15
   
   16
   
   17
   
   18
   
   19
   
   20
   
8. 代碼設置
   
    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
   
   tabLayout.addTab(tabLayout.newTab().setCustomView(setCustomView(R.drawable.ic_home,"首頁")));
   
   tabLayout.addTab(tabLayout.newTab().setCustomView(setCustomView(R.drawable.ic_info,"資訊")));
   
   tabLayout.addTab(tabLayout.newTab().setCustomView(setCustomView(R.drawable.ic_live,"直播")));
   
   tabLayout.addTab(tabLayout.newTab().setCustomView(setCustomView(R.drawable.ic_me,"我")));
   
   1
   
   2
   
   3
   
   4
   
   5
   
    private View setCustomView(int drawableId,String tabText) {
   
       View view = View.inflate(this, R.layout.item_tab, null);
   
       ImageView iv = (ImageView) view.findViewById(R.id.iv);
   
       TextView tv = (TextView) view.findViewById(R.id.tv);
   
       iv.setImageResource(drawableId);
   
       tv.setText(tabText);
   
       return view;
   
   }
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   
   
   
   
   五、TabLayout與Viewpager聯動
   
9. xml設置TabLayout和Viewpager
   
   第一種：TabLayout放置在Viewpager的上方，放在AppbarLayout中會有陰影效果
   
   
   
   <?xml version="1.0" encoding="utf-8"?>
   
   <android.support.design.widget.CoordinatorLayout
   
       xmlns:android="http://schemas.android.com/apk/res/android"
   
       xmlns:app="http://schemas.android.com/apk/res-auto"
   
       xmlns:tools="http://schemas.android.com/tools"
   
       android:id="@+id/main_content"
   
       android:layout_width="match_parent"
   
       android:layout_height="match_parent"
   
       android:fitsSystemWindows="true"
   
       tools:context="com.strivestay.tablayoutdemo.MainActivity">
   
   
   
       <android.support.design.widget.AppBarLayout
   
           android:id="@+id/appbar"
   
           android:layout_width="match_parent"
   
           android:layout_height="wrap_content"
   
           android:paddingTop="@dimen/appbar_padding_top"
   
           android:theme="@style/AppTheme.AppBarOverlay">
   
   
   
           <android.support.v7.widget.Toolbar
   
               android:id="@+id/toolbar"
   
               android:layout_width="match_parent"
   
               android:layout_height="?attr/actionBarSize"
   
               android:background="?attr/colorPrimary"
   
               app:layout_scrollFlags="scroll|enterAlways"
   
               app:popupTheme="@style/AppTheme.PopupOverlay">
   
   
   
           </android.support.v7.widget.Toolbar>
   
   
   
           <android.support.design.widget.TabLayout
   
               android:id="@+id/tab_layout"
   
               android:layout_width="match_parent"
   
               android:layout_height="wrap_content"
   
               app:tabIndicatorColor="@color/colorAccent"
   
               app:tabIndicatorHeight="2dp"
   
               app:tabBackground="@android:color/white"
   
               app:tabTextAppearance="@style/MyTabTextAppearance"
   
               app:tabTextColor="@android:color/black"
   
               app:tabSelectedTextColor="@android:color/holo_blue_light">
   
           </android.support.design.widget.TabLayout>
   
   
   
       </android.support.design.widget.AppBarLayout>
   
   
   
       <android.support.v4.view.ViewPager
   
           android:id="@+id/container"
   
           android:layout_width="match_parent"
   
           android:layout_height="match_parent"
   
           app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
   
   
   
       <android.support.design.widget.FloatingActionButton
   
           android:id="@+id/fab"
   
           android:layout_width="wrap_content"
   
           android:layout_height="wrap_content"
   
           android:layout_gravity="end|bottom"
   
           android:layout_margin="@dimen/fab_margin"
   
           app:srcCompat="@android:drawable/ic_dialog_email"/>
   
   
   
   </android.support.design.widget.CoordinatorLayout>
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14
   
   15
   
   16
   
   17
   
   18
   
   19
   
   20
   
   21
   
   22
   
   23
   
   24
   
   25
   
   26
   
   27
   
   28
   
   29
   
   30
   
   31
   
   32
   
   33
   
   34
   
   35
   
   36
   
   37
   
   38
   
   39
   
   40
   
   41
   
   42
   
   43
   
   44
   
   45
   
   46
   
   47
   
   48
   
   49
   
   50
   
   51
   
   52
   
   53
   
   54
   
   55
   
   56
   
   57
   
   58
   
   
   
   
   
   第二種：TabLayout直接放在Viewpager，無陰影
   
   
   
   <android.support.v4.view.ViewPager
   
       android:id="@+id/container"
   
       android:layout_width="match_parent"
   
       android:layout_height="match_parent"
   
       app:layout_behavior="@string/appbar_scrolling_view_behavior">
   
       <android.support.design.widget.TabLayout
   
           android:id="@+id/tab_layout"
   
           android:layout_width="match_parent"
   
           android:layout_height="wrap_content"
   
           app:tabIndicatorColor="@color/colorAccent"
   
           app:tabIndicatorHeight="2dp"
   
           app:tabBackground="@android:color/white"
   
           app:tabTextAppearance="@style/MyTabTextAppearance"
   
           app:tabTextColor="@android:color/black"
   
           app:tabSelectedTextColor="@android:color/holo_blue_light">
   
       </android.support.design.widget.TabLayout>
   
   </android.support.v4.view.ViewPager>
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14
   
   15
   
   16
   
   17
   
   
   
   
   
10. 為Viewpager創建適配器
    
    /
    
      fragment
    
     /
    
    public static class PlaceholderFragment extends Fragment {
    
        private static final String ARG_SECTION = "section";
    
    
    
        public PlaceholderFragment() {
    
        }
    
    
    
        public static PlaceholderFragment newInstance(String section) {
    
            PlaceholderFragment fragment = new PlaceholderFragment();
    
            Bundle args = new Bundle();
    
            args.putString(ARG_SECTION, section);
    
            fragment.setArguments(args);
    
            return fragment;
    
        }
    
    
    
        @Override
    
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
    
                                 Bundle savedInstanceState) {
    
            View rootView = inflater.inflate(R.layout.fragment_main, container, false);
    
            TextView textView = (TextView) rootView.findViewById(R.id.section_label);
    
            textView.setText(getArguments().getString(ARG_SECTION));
    
            return rootView;
    
        }
    
    }
    
    
    
    /
    
      pagerAdapter
    
     /
    
    public class SectionsPagerAdapter extends FragmentPagerAdapter {
    
        String[] tabs = {"首頁","資訊","直播","我"};
    
    
    
        public SectionsPagerAdapter(FragmentManager fm) {
    
            super(fm);
    
        }
    
    
    
        @Override
    
        public Fragment getItem(int position) {
    
            return PlaceholderFragment.newInstance(tabs[position]);
    
        }
    
    
    
        @Override
    
        public int getCount() {
    
            return tabs.length;
    
        }
    
    
    
        @Override
    
        public CharSequence getPageTitle(int position) {
    
            return tabs[position];
    
        }
    
    }
    
    1
    
    2
    
    3
    
    4
    
    5
    
    6
    
    7
    
    8
    
    9
    
    10
    
    11
    
    12
    
    13
    
    14
    
    15
    
    16
    
    17
    
    18
    
    19
    
    20
    
    21
    
    22
    
    23
    
    24
    
    25
    
    26
    
    27
    
    28
    
    29
    
    30
    
    31
    
    32
    
    33
    
    34
    
    35
    
    36
    
    37
    
    38
    
    39
    
    40
    
    41
    
    42
    
    43
    
    44
    
    45
    
    46
    
    47
    
    48
    
    49
    
    50
    
    51
    
    52
    
    主要是重寫getPageTitle()方法
    
    
    
11. 代碼設置 TabLayout和Viewpager綁定
    
     // tablayout
    
    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
    
    
    
    // vp
    
    mViewPager = (ViewPager) findViewById(R.id.container);
    
    mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
    
    mViewPager.setAdapter(mSectionsPagerAdapter);
    
    
    
    // 綁定，要在viewpager設置完數據后，調用此方法，否則不顯示 tabs文本
    
    tabLayout.setupWithViewPager(mViewPager);
    
    1
    
    2
    
    3
    
    4
    
    5
    
    6
    
    7
    
    8
    
    9
    
    10
    
    調用setupWithViewPager()方法，則使用TabLayout.addtab()方法無效，TabLayout會清除之前添加的所有tabs，并將根據Viewpager的頁數添加Tab，Tab標題為對應頁通過getPageTitle()返回的文本
    
    
    
    
    
    
    
12. 圖文混排
    
13. 同上，使用SpannableString
    
    修改Adapter如下：
    
    
    
    /*
    
      pagerAdapter
    
     */
    
    public class SectionsPagerAdapter extends FragmentPagerAdapter {
    
    
    
        String[] tabs = {"首頁","資訊","直播","我"};
    
        int[] imgs = {R.drawable.ic_home,R.drawable.ic_info,R.drawable.ic_live,R.drawable.ic_me};
    
    
    
        public SectionsPagerAdapter(FragmentManager fm) {
    
            super(fm);
    
        }
    
    
    
        @Override
    
        public Fragment getItem(int position) {
    
            return PlaceholderFragment.newInstance(tabs[position]);
    
        }
    
    
    
        @Override
    
        public int getCount() {
    
            return tabs.length;
    
        }
    
    
    
        @Override
    
        public CharSequence getPageTitle(int position) {
    
    //            return tabs[position];
    
            return setImageSpan(tabs[position],imgs[position]);
    
        }
    
    }
    
    1
    
    2
    
    3
    
    4
    
    5
    
    6
    
    7
    
    8
    
    9
    
    10
    
    11
    
    12
    
    13
    
    14
    
    15
    
    16
    
    17
    
    18
    
    19
    
    20
    
    21
    
    22
    
    23
    
    24
    
    25
    
    26
    
    27
    
    28
    
    setImageSpan()方法同上
    
    
    
    
    
    
    
14. 同上，使用Tab.setCustomView()
    
    修改pagerAdapter如下：
    
    
    
    /
    
      pagerAdapter
    
     /
    
    public class SectionsPagerAdapter extends FragmentPagerAdapter {
    
    
    
        String[] tabs = {"首頁","資訊","直播","我"};
    
        int[] imgs = {R.drawable.ic_home,R.drawable.ic_info,R.drawable.ic_live,R.drawable.ic_me};
    
    
    
        public SectionsPagerAdapter(FragmentManager fm) {
    
            super(fm);
    
        }
    
    
    
        @Override
    
        public Fragment getItem(int position) {
    
            return PlaceholderFragment.newInstance(tabs[position]);
    
        }
    
    
    
        @Override
    
        public int getCount() {
    
            return tabs.length;
    
        }
    
    
    
        @Override
    
        public CharSequence getPageTitle(int position) {
    
    //            return tabs[position];
    
    //            return setImageSpan(tabs[position],imgs[position]);
    
            return null;
    
        }
    
    
    
        /
    
          設置自定義view
    
          @param position
    
          @return
    
         /
    
        public View setCustomView(int position) {
    
            View view = View.inflate(getApplicationContext(), R.layout.item_tab, null);
    
            ImageView iv = (ImageView) view.findViewById(R.id.iv);
    
            TextView tv = (TextView) view.findViewById(R.id.tv);
    
            iv.setImageResource(imgs[position]);
    
            tv.setText(tabs[position]);
    
            return view;
    
        }
    
    }
    
    1
    
    2
    
    3
    
    4
    
    5
    
    6
    
    7
    
    8
    
    9
    
    10
    
    11
    
    12
    
    13
    
    14
    
    15
    
    16
    
    17
    
    18
    
    19
    
    20
    
    21
    
    22
    
    23
    
    24
    
    25
    
    26
    
    27
    
    28
    
    29
    
    30
    
    31
    
    32
    
    33
    
    34
    
    35
    
    36
    
    37
    
    38
    
    39
    
    40
    
    41
    
    42
    
    43
    
    代碼修改如下：
    
    
    
    …………
    
    // 綁定，要在viewpager設置完數據后，調用此方法，否則不顯示 tabs文本
    
    tabLayout.setupWithViewPager(mViewPager);
    
    
    
    // 為綁定viewpager后的TabLayout的tabs設置自定義view
    
    for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) {
    
        tabLayout.getTabAt(i).setCustomView(mSectionsPagerAdapter.setCustomView(i));
    
    }
    
    1
    
    2
    
    3
    
    4
    
    5
    
    6
    
    7
    
    8
    
    發現問題：我使用的仍然是上面的item_tab,但是只顯示圖片，不顯示文字如下
    
    
    
    
    
    
    
    翻了翻源碼，也沒發現有對Tab的標題有特別的設置；后來，就感覺是不是顏色問題，給item_tab中的textview加上屬性android:textColor="@android:color/black",就顯示出來了
    
    
    
    
    
    
    
    六、FlycoTabLayout
    
    這是一個不錯的TabLayout開源項目，效果挺好，可以了解一下。
    
    
    
    
    
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
    

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

iPhone的歷史

每次蘋果發布會UI設計師可能是最睡不著覺的人啦。每次發布會蘋果推出全新iPhone時，我們在iPhone平臺上的APP應用程序必須跟隨iPhone的尺寸、規范等特性調整設計稿。也就是說，幾乎每次蘋果發布會都是UI設計師加班的通知書！這不，2018年9月13日凌晨，蘋果在Apple Park總部里的喬布斯劇院舉行了2018蘋果秋季新品發布會。這次蘋果發布了全新的iPhone Xs、iPhone Xs Max，iPhone Xr三款手機。噢，不要忘記我們也不能怠慢還在服役的iPhone X、iPhone Plus、iPhone6/7/8、iPhone SE等蘋果手機。作為一個移動端UI設計師，您必須對蘋果所有生產過和現役的iPhone有所了解。

起源

談到iPhone我們必須談談史蒂夫·喬布斯（Steve Jobs）。盡管喬布斯去世多年，但是他的理念仍然是現代智能手機設計的原則。喬布斯不僅重新定義了智能手機，也定義了移動端應用程序。這位被領養的猶太男孩在很早就對個人電腦產生了興趣。在游歷了印度和日本之后，他進入了大學校園。在校園里除了無線電和嬉皮士文化，他認為大學課程多半是無聊的。但他曾跑去特意選修了一門課程：字體設計。他所在大學的字體設計課是全美最著名的，在那個課堂上喬布斯學習到了網格設計、襯線體與無襯線體、字體的氣質等設計知識。當然在前面講過的具有搖滾精神的字體Helvetica也深深吸引了喬布斯。后來喬布斯選擇大學肄業并在自家車庫創立了蘋果公司，自此“車庫”也成了創業者最喜愛的地標。蘋果公司的第一代個人電腦內置了非常出色的用戶圖形界面系統（即GUI），并且內置了Helvetica等漂亮的字體。但是這并不是喬布斯事業的終點，在經歷了蘋果公司的權利斗爭后，成熟的喬布斯再次登上發布會的舞臺，推出了真正能改變世界的產品 - iPhone。一般產品名都會用名字加上產品的類型命名，比如百事可樂、英雄鋼筆等。而iPhone似乎本身就是一個類別。在那次發布會上，喬布斯指責當時的功能手機太“愚蠢”：當時的功能手機性能很差，并且屏幕很小，實體鍵盤占用了很大的空間。之后，他拿出了一部像外星科技的產品：iPhone。自此，蘋果重新發明了手機。喬布斯如此強調用戶界面和交互設計的重要性，這種理念改變了當時和現在的設計思維。喬布斯身后，移動端的格局在改變，接任喬布斯指揮棒的蒂姆·庫克和首席設計官喬納森·伊夫（Sir Jonathan Paul Ive）也陸續更新著蘋果手機的產品線，延續著這些偉大的產品。

年輕的喬布斯

初代iPhone

相關產品：iPhone（一代）、iPhone3G（二代）、iPhone3GS（三代）。

iPhone初代產品在2007年1月9日由史蒂夫·喬布斯在蘋果發布會上正式發布。初代的iPhone產品的共同特點是：玻璃屏、屏幕清晰度普通、3.5英寸屏（注意：我們所說的手機尺寸都是測量屏幕的對角線得出的）。iPhone沒有實體鍵而整體是屏幕的設計，在當時仿佛是外星科技降臨一般令人驚艷。為了讓大眾習慣直接在手機上點圖標（在此之前人機互動都是間接輸入的：比如實體鍵盤、鼠標、觸控筆等），喬布斯發布了革命性的操作系統iOS，手機的所有圖標都是圓角：這樣可以避免用戶認為會刺到手指。所有圖標和界面全部是擬物設計，這樣可以更好地讓用戶理解哪些是可以點擊操作的。按鈕在手機上呈現的大小都是7mm左右，這是因為人類手指點擊區域大概是7mm - 9mm。系統充分地應用了多點觸控的功能，你不僅僅可以點手機里的按鈕，還可以進行長按、滑動、捏等手勢操作。這些用戶體驗和人性化的設計在當時具有劃時代的意義。隨后，第二代產品iPhone 3G、第三代產品iPhone3GS先后由喬布斯發布。這種能聽歌、能打電話、能上網的手機真是太炸了！而且你可以在應用商店Appstore中下載第三方的應用程序，海量的第三方程序可謂是大千世界了。這塊3.5英寸屏的手機截圖出來后的實際分辨率是480x320px，所以如果你在當時做UI設計的話，那么做APP界面建圖的尺寸就應該是480x320px。

 蘋果初代產品 (2007)

iPhone 4

相關產品：iPhone 4（四代）、iPhone 4s（五代）。

iPhone 4于2010年6月8日發布。iPhone 4延續了iPhone一代的多點觸摸（Multi-touch）屏界面，并首次加入視網膜屏幕、前置攝像頭、陀螺儀、后置閃光燈，相機像素提高至500萬。對我們設計師最重要的就是加上了視網膜屏Retina。Retina是蘋果提出的標準，它的含義就是在應用場景的視距內讓人無法看清單個像素。我們都知道如果你貼的夠近，一般的屏幕上都會出現一格一格的像素矩陣。屏幕是由這些矩陣組成的。這種屏幕的問題就是稍微近一些我們就能看到那些網格和矩陣。如果我們希望用戶得到最好的體驗，自然是讓用戶看不到格子，那怎么辦？答案就是：加大屏幕的密度。如果屏幕的密度到達一個指定的水平（當然也要取決于用戶的視距，即用戶與屏幕通常離多遠），那么用戶的眼睛就無法分辨出細小的像素顆粒了。這種屏幕就被稱為Retina屏，也叫視網膜屏。這是用戶體驗的巨大進步，但是也是UI設計師的噩夢。原先的設計稿統統需要放大才可以在iPhone4里顯示得完美：比如原來我們一個界面的尺寸是480x320px，現在因為屏幕密度增加了一倍，我們就需要設計640x960px才夠用。在電腦上看這個尺寸要比手機大兩倍?。ó斎焕玻菚r的電腦屏幕通常不是Retina屏）。而且3GS并沒有完全被淘汰，那么如何讓一個APP適配兩個不同尺寸的手機呢？于是每個APP內預裝了兩套切圖，一套480x320px尺寸，也就是一倍圖（@1x）；一套960x640px尺寸，也就是二倍圖（@2x）。這兩套圖像資源的命名完全一樣，只是二倍圖結尾需要加上@2x標記它是高清尺寸，比如home_icon@2x.png。

 iPhone 4代產品 （2010）

邏輯像素和物理像素

邏輯像素（logic point）：邏輯像素的單位是PT，它是按照內容的尺寸計算的單位。比如iPhone 4的邏輯像素是480x320pt。但是由于每個邏輯的點因為視網膜屏密度增加了一倍，即1pt=2px，那么其實iPhone 4的物理像素是960x640px。iOS開發工程師和使用Sketch和AdobeXD軟件設計界面的設計師使用的單位都是PT。

物理像素的單位就是我們常說的pixel，簡寫成PX。它是我們在Photoshop和切圖中使用的單位，屏幕設計中最小的單位就是1px不可再分割。使用Photoshop設計移動端界面和網站的設計師使用的單位是PX。在以下的文章中，如果您使用Photoshop設計界面，那么只需要記住所有px單位的數值和支持Photoshop的工具，如果使用Sketch或Adobe XD設計界面，那么只需要記住所有pt單位的數值和對應的工具即可。

邏輯像素和實際像素計算方式不同

PPI

PPI(pixels per inch)指的是屏幕分辨率的單位，表示的是每英寸顯示的像素密度。屏幕的PPI值越高，那么這個屏幕每英寸能容納的像素顆粒也就越多，那這個產品的畫面的細節度也就越豐富。PPI值大于300一般我們就無法用肉眼察覺出屏幕上的“馬賽克”格子了。但是如果屏幕很大，那么需要呈現視網膜屏的PPI值也需要更大，所以iPhone Plus系列的PPI值比iPhone6/7/8要大。PPI在我們設計的工作中其實關系不大，但理解它對于幫助我們理解為什么iPhone4比iPhone3GS實際像素大一倍有幫助。

PPI的計算公式

iPhone 5

相關產品：iPhone 5（六代）、iPhone 5s和iPhone 5c（七代）

iPhone 5于2012年9月13日正式發布。iPhone5在設計上帶來了很多爭議，因為iPhone5沒有采用喬布斯認為人類最合適的手機尺寸3.5英寸屏，而是用了4英寸的屏幕。寬度沒變而高度加長了。這樣做的原因是市場上越大的手機越受歡迎。當時設計師也幾近崩潰，因為又要搞適配了。原來960x640px的尺寸變為了1136x640px，但是這個變化其實不大，就是高了點兒。于是@2x高清圖的設計稿就變成了640x1136px。因為iPhone4的手機看著也就是長了點兒，滑動不就完了嘛。除了閃屏這樣的界面需要單獨做iPhone4、iPhone5、3GS尺寸之外，其他界面仍然維持兩套設計稿即可。

iPhone 5 （2012）

iPhone 6/7/8 和iPhone Plus

相關產品：iPhone6和iPhone6 Plus（八代）、iPhone 6s和iPhone 6s Plus（九代）、iPhone7和iPhone7 Plus（十代）、iPhone8和iPhone8 Plus（十一代）。

這個產品迭代周期值得大家留意，從iPhone6到iPhone8這段時間蘋果新手機的物理像素都是750x1334px。而所有Plus手機的物理像素都是1242x2208px。如果按照邏輯像素來計算，那么iPhone6/7/8的邏輯像素就是375 x 667 pt（就是750x1334除以2）；而iPhone Plus的邏輯像素就是414 x 736 pt（就是1242x2208除以3，因為這個屏幕太大了視距不同所以屏幕密度更高）。歷史到這個時候，原來的手機全部被淘汰了。也就是說iPhone6/7/8成為了我們的設計標準，它的切圖就是@2x，iPhone Plus（1242x2208）使用@3x。從此沒有@1x倍圖了，只存在一個假想的概念。

iPhone 6/7/8  (自2014)

iPhone Plus (自2014)

iPhone X

相關產品：iPhone X（十一代）。

這四款手機全部是蘋果的全面屏手機。全面屏并不是新概念了，因為從iPhone初代產品開始，手機業內就在構思如何把手機做成全部都是屏幕區域的技術了。但是這個技術有很多難題，比如前置攝像頭和聽筒怎么處理。那么蘋果采用的方案是“齊劉?！保阉闹芴幚沓蓤A角的方式。IPhone X和后續三款全面屏我們設計師需要注意的就是齊劉海。因為需要規避攝像頭和麥克風聽筒，所以導航欄比其他iPhone系列產品要高；而底部Tab欄因為最下方有圓角同樣比其他iPhone系列要高。而且這兩個邊界是不應該放置任何操作功能的。也就是說只有看的份兒。

iPhone X的物理像素是1125 x 2436 px，而邏輯像素是375 x 812 pt。也就是說如果你使用Sketch或者Adobe XD等工具設計界面的話，iPhone X的寬度和iPhone 6/7/8是相同的；只是高了一些。那么如果需要出一套iPhone X效果圖只需要把頭和尾巴替換成新版即可。而如果你用Photoshop設計界面的話，寬度變化還是比較大的。需要做放大處理然后單獨調整那些亂了的尺寸。

iPhone X(2017)

iPhone XS Max

相關產品：iPhone XS、iPhone XS Max、iPhone XR（十二代）。

這三款產品的像素分辨率聽上去會比較眼暈：

iPhone XS Max：1242 x 2688 px

iPhone XS：1125 x 2436 px

iPhone XR：828 x 1792 px

但是如果我們用點的單位看就會得到：

iPhone XS Max：414 x 896 pt （iPhone Plus分辨率寬度）

iPhone XS：375x812 pt （iPhone 6/7/8分辨率寬度）

iPhone XR：414 x 896 pt （iPhone Plus分辨率寬度）

所以其實今年發布的iPhone都是比較友好的，如果使用矢量界面工具那么只需要調整設計稿頭和尾巴即可，如果使用Photoshop的設計師需要放大縮小設計稿然后調整頭和尾巴可以得到新版設計稿。而切圖其實和之前沒有變化，不管用什么工具設計還是得出兩套切圖：@2x（750x1334px）、@3x（1242x2208px）即可。

iPhone XS Max (2018)

以iPhone6/7/8為基準設計

在開始比賽之前，由于iPhone 6、iPhone 6S、iPhone7、iPhone7S、iPhone8屏幕和分辨率都是一致的750X1334px，所以我們可以稱它們為iPhone6/7/8。而iPhone 6 Plus、iPhone7 Plus、iPhone8 Plus、屏幕和分辨率都是一致的1242x2208，所以我們可以稱它們為iPhone Plus。而iPhone XS、iPhone X屏幕和分辨率都是一致的1125x2436，所以我們可以稱它們為iPhoneX。那這場比賽的贏家毫無疑問是價格美麗的iPhone6/7/8獲勝啦。那么我們做界面設計時需要按照iPhone6/7/8為基準設計。如果使用Photoshop就建750x1334px尺寸的畫布，如果是使用Sketch或Adobe XD等工具就建立375x667pt。當然如果要設計首頁之類的界面，它的界面很長你可以設計一個長的設計稿，比如750x8000px。

手機型號與像素對應圖

HIG設計指南

上文說我們建立界面可以根據750x1334px或375x667pt來建立畫布，但是具體狀態欄的高度、導航欄的高度、tab欄的高度是多少？那些UIKit組件里的東西去哪里找呢？蘋果已經為我們準備好了多個格式的規范了：

資源下載地址：https://developer.apple.com/design/resources/

設計方式

在iPhone6/7/8存量仍然很大的情況下，我們做設計稿仍然需要以iPhone6/7/8為尺寸來建圖。從蘋果官網下載好UIKit，上面有我們需要的一切元素。這些元素有PSD、Sketch以及XD版本，不管用什么設計軟件均可找到對應版本。打開之后你會發現蘋果已經將我們所需要的規范元素準備好了。如果你需要一些彈窗或者控件，那么就在UI Elements里找。如果需要界面的尺寸模板，就在Design Templates找。所有文件都有兩份，結尾帶有-iPhoneX的是為iPhone X系列設計的模板。沒有標識的是為iPhone6/7/8設計的模板。

UI Elements 文件夾中的源文件

 Design Templates中的源文件

狀態欄和導航欄

狀態欄（Status Bars）就是iPhone最上方用來顯示時間、運營商信息、電池電量的那個很窄的區域。導航欄（Navigation Bars）就是狀態欄之下的區域，一般來說導航欄中間是頁面標題，左右是放置功能圖標的區域。

在iPhone6/7/8設計中，狀態欄的高度為20pt（40px）。導航欄的高度是44pt（88px）。這兩個區域在iOS7代之后就進行了一體化設計。所以它們加起來的高度是64pt（128px）。

在iPhoneX設計中，狀態欄的高度為40pt（132px）。導航欄的高度也是44pt（132px）。這兩個區域同樣要進行一體化設計。所以它們加起來的高度是84pt（264px）。這里注意一下，因為iPhone X的PPI值為458，所以并不是如iPhone6/7/8一樣1pt=2px換算。

iPhone6/7/8和iPhone X導航區域的差別

 部分優秀APP的導航區域設計

大標題導航欄

在的蘋果設計中導航出現了一種新形式：大標題。出現這種形式就是為了減少視覺噪音，讓內容更加突出。很明顯大標題的設計很像報紙的版式設計，在第一眼我們就會明白頁面的主題。大標題導航欄的高度一般為116pt（232px）：這包括了20pt（40px）狀態欄的高度，同時也能放得下34pt（68px）的大標題和輔助信息（如返回等圖標）。但是注意一下，大標題并不應該像傳統導航一樣常駐在頁面之上，因為它太占空間了。所以在滑動頁面時大標題會變成正常導航欄的64pt（128px）的高度。當然如果設計稿為iPhone X那么數值需要另外換算。

大標題的尺寸

導航欄圖標

圖標作為文字的補充，在移動端中應用非常廣泛。在導航欄區域上的功能諸如搜索、添加、更多、返回等均需要用圖標來表達。說明：@2x和@3x在邏輯像素單位是一樣的，如果您使用如Sketch、Adobe XD等矢量工具設計，可以參照邏輯像素數值設計即可。但是如果您用Photoshop工具以iPhone6/7/8尺寸進行設計，就需按照@2x下的px單位數值設計。

導航欄圖標尺寸規范

標簽欄 （Tab Bars）

Tab就是點擊的意思，Tab欄（也叫標簽欄）指的是APP底部的區域，如微信底部常駐有聊天、通訊錄、發現、我的四個圖標。iOS規范中Tab欄一般有五個、四個、三個圖標的形式。也就是把寬度平分為五、四、三份。iPhone6/7/8設計中，標簽欄的高度為49pt（98px）。Tab欄的操作是最常用的，因為手指最方便點擊而且這個欄是常駐在頁面之上的。所以Tab欄的圖標至關重要，因為很多用戶可能因為看不懂圖標而找不到重要功能的入口，通常我們會在Tab欄圖標之下加上11pt（22px）的注釋文字，這個注釋文字一般來說都是非常淺的淺灰色。

標簽欄的尺寸

標簽欄圖標

我們在標簽欄上的圖標一般來說30pt（60px）大小左右，蘋果給出了四種不同形狀標簽欄圖標的尺寸參考供大家設計時考慮。其意義是讓不同外形的圖標看上去是差不多大的，保證圖標的平衡。標簽欄圖標的選中態應該是一個彩色，來區別于非選中狀態。

真實設計中的標簽欄

標簽欄圖標設計規范

標簽欄圖標應該盡量使用清晰地填充風格

工具欄 （ToolBars）

我們在蘋果自帶瀏覽器底部就能看到工具欄。工具欄提供了和當前任務相關的操作和按鈕，在滑動時可以收起。工具欄同Tab欄一樣都是位于底部，但是高度略窄，它的高度是44pt（88px）。

閃屏資源

由于閃屏是一張完整的靜態滿屏圖片，而不是諸如其他頁面一樣是由切圖和文本拼成的，所以閃屏的適配更簡單粗暴：我們需要提供不同尺寸的閃屏效果。閃屏資源就是滿尺寸的一張png，上端不需要狀態欄里的信息，程序會在開發完畢時自動在閃屏中補上狀態欄里的信息。我們需要提供的閃屏尺寸有：

我們需要提供的閃屏尺寸 一共6張

安全距離

作為iPhone全面屏系列手機，齊劉海無疑是一個特征。但是全面屏給我們帶來了使用上的問題：上下左右是圓角、頂部齊劉海使屏幕凹下一塊。所以在帶有圓角和齊劉海的紅色標注區域不應該放置任何功能，僅可在上端放置狀態欄，底部圓角區域留白。我們界面豎屏使用時左右臨近手機邊緣的區域不建議放任何操作，應留出一定的邊距（Margin）。這個邊距是多少呢？沒有明確嚴格的規定，但是一般的APP會留出16pt-24pt不等的邊距防止用戶在屏幕邊緣不好點擊。不過內容展現卻可以呈現在邊距里。如果我們橫屏使用手機時，左右同樣不好點對吧？橫屏同時還有令人鬧心的“齊劉?！?，所以同樣左右需留出一定的邊距來。所以我們就得到一個安全距離的矩形，內容可以完整地呈現在這個安全距離內。

iPhone X系列由于全面屏上下出現不可操作區域

色彩

其實在iPhone上顯示的色域要比我們作圖時的RGB色域要廣。所以在iPhone上設計怎樣的顏色都可以。只要符合產品氣質并且在色彩心理學理論上思考，用什么顏色是設計師的自由。官方建議的系統色彩如下：

iPhone的系統色

字體

iOS中英文使用的是San Francisco (SF)字體。（下載地址：https://developer.apple.com/fonts

），中文使用的是蘋方黑體。安裝好以后你會發現中文蘋方的字族有不少可供選擇的粗細，那么我們設計界面時需要根據信息的邏輯權重分配粗細：標題應該較粗，而說明字體應該較細并且可以設計成灰色。其實字體的設計最重要的考量就是信息層級。蘋果認為APP的字體信息層級有：大標題（Large Title）、標題一（Title 1）、標題二（Title 2）、標題三（Title 3）、頭條（Headline）、正文（Body）、標注（Callout）、副標題（Subhead）、注解（Footnote）、注釋一（Caption 1）、注釋二（Caption 2）這幾種。

HIG對APP的字體建議（基于@2x）

注意一下，以上HIG的建議全部是針對英文SF字體而言的，中文字體需要我們靈活運用，以最終呈現效果為基準調整。在設計具體界面時我們一定要以用戶的使用情景來考慮，把設計稿導入手機去思考行高與字體大小是否是可讀的。10pt（20px）是手機上顯示的最小字體，最大的應該是目前的大標題字體了，達到了34pt（68px）。

啟動圖標

在設計模板還沒有如今這么發達時，設計師需要設計啟動圖標（1024x1024px）之后按照程序員的要求切出幾十個不同尺寸的圖標。比如，在手機中@3x情況下桌面圖標尺寸為180x180px，在@2x情況下為120x120px；在應用商店圖標需要使用的尺寸是1024x1024px；這個工作太煩人了，好在現在我們只需要專注在啟動圖標設計本身上了。在蘋果給我們的這套資源中，有Template-AppIcons-iOS這個文件。打開這個文件，用我們自己設計的啟動圖標替換掉智能對象里的內容，你會發現所有尺寸的圖標都變成了我們的圖標。然后我們把背景隱藏，切出這些圖標即可。圖標設計建議使用AI等矢量軟件，然后使用規范切出圖像資源。

Template-AppIcons-iOS

控件

控件包括：輸入框、按鈕、滑桿、頁卡、開關等，在設計模板中已經全部列出。這里格外說明一下，為了讓設計更符合整體產品品牌調性，這些控件都可以做成自定義的設計樣式。但是會增加工作量和切圖資源，所以一般我們在諸如設置界面這些無需太體現設計感的頁面中都使用系統默認控件，而在一些品牌感需要強調的頁面或產品（諸如白噪音產品、游戲等）則會使用自定義的樣式。如果我們想自己設計控件，那么注意兩件事：第一，點擊區域基本符合44pt（88px）原則，也就是在手機上大小大概是7mm-9mm，適合手指點擊。第二，要設計操作的不同狀態，不要只設計一種狀態。

默認控件

自定控件和默認控件

控件中無處不在的44pt（88px）

之前我們介紹過，人手指點擊區域為7mm - 9mm，在@2x中就是44pt（88px）。蘋果的導航條、列表、工具欄都充滿了44pt（88px）這個神秘數字。我們在設計時一定也要考慮到手指的點擊區域。

無處不見的44pt（88px）

鍵盤

在設計模板中您也可以找到鍵盤的設計。這里需要提醒的是，很多朋友做界面設計時不考慮輸入時鍵盤會遮擋到的空間，如果考慮到鍵盤彈起遮擋住的內容，那么我們的一些界面中的輸入框和信息可能都需要上移了。當然也不是說可能被鍵盤遮擋的地方不可以防止任何內容，也有一種方式就是當輸入一個表單時，頁面會垂直定位到當前輸入的位置。

鍵盤高度

iTunes 上傳截圖

在程序上傳APPSTORE時我們需要提供多張APP截圖，供用戶了解APP的功能。很多設計師朋友不太清楚這個尺寸，這里我們需要提供1242 x 2688px和1125 x 2436px兩套截圖。有時我們也會在這個尺寸上做一些設計，讓用戶在APPSTORE打開APP介紹時獲得最好的體驗。

ITunes上傳用截圖

工作流程

前期調研階段

在我們設計界面之前，我們必須做用戶研究來了解產品的調性，比如用戶研究手段中的用戶畫像、用戶調研、用戶使用場景分析、設計競品分析等方法。不管工作再忙也建議大家做這些工作，他們對我們深入了解產品大有裨益。

原型圖階段

APP產品設計首先需要構建出原型圖，之后再開始視覺設計。這個工作有些公司是由產品經理負責的，也有交互設計師負責的，還有的公司因為人手較少，也會出現由UI設計師來負責的情況。就算有產品經理或其他職能人員來完成原型圖，那設計師也需要和產品經理等人員溝通需求和探討原型圖，并不是產品經理向設計師下發需求。設計師要站在視覺和交互的角度提出自己建設性的意見，而不是簡單等原型圖完成后照著上色而已。關于原型圖的工具，我們不僅僅可以用Axure RP設計原型圖，也可以使用像墨刀、Adobe XD等新工具來完成原型圖。

構建APP原型圖（工具：Adobe XD ）

視覺稿階段

視覺稿階段要根據原型圖確定的內容和大體版式完成APP的界面設計。但是這里請大家注意一下：目前業界主要是以Sketch、Adobe XD、Photoshop這三個軟件來完成APP的界面設計的。Sketch和Adobe XD都是以邏輯像素的單位（PT）來設計，然后導出圖像的時候再進行放大兩倍三倍來切圖。這樣做的好處是不用在設計的時候小心翼翼地使用偶數了。而Photoshop由于主要是處理圖像而非矢量圖形的軟件，所以在設計移動端界面時如果做成一倍的話切圖會變得很虛，所以要基于2倍圖來進行界面設計。比如如果我們以iPhone6/7/8的界面來進行設計，那么在Sketch和Adobe XD中我們建立的畫布就是375x667pt在Photoshop中則是750x1334px。

視覺稿設計階段（工具：Adobe XD）

視覺稿設計階段（工具：Adobe Photoshop）

iPhone6/7/8尺寸

在iPhone6/7/8尺寸下，狀態欄高度20pt(40px)、導航欄44pt(88px)、Tab欄49pt(98px)、導航標題字號建議17pt(34px)、導航欄圖標建議22pt(44px)、Tab欄圖標建議30pt(60px)、Tab欄圖標注釋文字11pt(22px)、左右安全距離建議12pt(24px)。字號從10pt（20px）到34pt（68px）均可，要視具體情況決定。

在iPhone6/7/8尺寸下的設計尺寸

實時預覽你的設計稿

我們在Sketch、Adobe XD、Photoshop等軟件中設計界面時有一個問題：電腦上的效果總和手機上呈現的效果不同。這是由于尺寸和觀察方式決定的，所以最好的方式是我們實時地查看設計稿在手機上的呈現效果。以下APP通過數據線或wifi鏈接電腦后，即可及時在手機中看到還沒有保存的設計稿呈現在手機中的樣子。

Design Mirror：可實時預覽Photoshop、XD等設計稿

Adobe XD：可實時預覽你的XD畫板

 Sketch Mirror：可實時預覽你的Sketch畫板

iPhoneX設計效果圖

雖然程序員對于iPhoneX等全面屏手機的適配只需要設計師提供切圖即可，但很多設計師比較青睞iPhone X和XR和XSM等的設計效果，也比較愿意把設計稿改成iPhoneX的設計圖放到作品集或者在匯報時展示。那么我們應該怎么做呢？如果設計稿需要調整為iPhone X的顯示效果，可以下載iOS 12設計源文件，把界面頭和尾替換成iPhoneX專用頭尾——專用頭尾在劉海和圓角處做了留白。Sketch和XD都是用一倍圖設計所以不涉及修改尺寸，改頭尾即可。而PS比較復雜一點：需要先等比例變大整個設計稿，再把寬度改為1125寬度自適應即可。PS變大會虛還得一個一個調一下，然后再改頭尾。

替換導航區域和Tab欄區域，即可得到iPhoneX設計效果

視覺規范

如果我們設計完了五六個主要界面，那么現在做什么呢？APP設計一套視覺規范是非常有必要的，有了視覺規范我們就可以把控整體的設計和語言。一般來說，一套APP應該有3-5種主題色和輔助色；5-10種不同變化的字體樣式。這些如果沒有落實到一套規范中，那么很容易跑偏。一套移動端應用的視覺規范應該包括:

主色/輔色/色彩規范: 規定APP所能使用的色彩種類；

文字顏色/大小規范: 規定APP主要使用文字的大小、顏色、應用場景等；

ICON規范: 規定APP的icon設計規范;

應用圖標規范: 規定APP的應用圖標使用規范；

按鈕和交互態規范: 規定APP內所有按鈕和交互態的樣式；

間距規范: 規定APP內所有間距的尺寸。

設計規范的重要性

設計規范中的色彩規范

設計規范的類型可以是png或者多個頁面組成的pdf文件。其他設計師打開我們制定的設計規范，可以清晰地找到當前項目適合使用的元素和字體大小、間距等。這樣盡管是多人協同工作也可以保證項目設計風格的一致性。

切圖

有了大小各異的iPhone尺寸，如果程序只有一套切圖，那么一定會造成有的手機顯示很差。所以我們要在程序里放置多套切圖，然后讓程序判斷“主人”的手機是什么型號，顯示不同的切圖。這樣才能夠完美地呈現給用戶最好的體驗。切圖的方法有很多種。Sketch和Adobe XD可以直接導出。Phtoshop不具備這個功能，但是我們可以使用cutterman、藍湖等插件導出切圖。不管是自帶功能還是插件，導出切圖都可以導出@2x和@3x圖，而設計稿只需要iPhone6/7/8一套即可。

某項目中的切圖文件

Adobe XD切圖功能

在Adobe XD中將需要切出的元素在圖層面板（Ctrl + Y）點擊添加批量導出標記記錄；然后點擊 菜單 > 導出 > 所選畫板 > 用于iOS > 導出所有畫板 即可。

Adobe XD自帶切圖功能

使用Cutterman協助Photoshop切圖

在Cutterman官網下載PS插件后，點擊窗口 > 擴展功能 > Cutterman 調出面板；然后選擇iOS 并高亮選中@3X和@2X；在圖層面板里選中需要切圖的元素，點擊“導出選中圖層”即可。

Photoshop中的Cutterman 插件

使用藍湖切圖

在藍湖平臺可以下載Sketch、Adobe XD或Photoshop對應的插件。然后在不同設計軟件插件中將設計稿上傳到藍湖（PS需要用插件標記需要切出的元素），然后在藍湖網頁版點擊切圖按鈕，選擇視網膜@2x和高清視網膜@3x，再點擊“下載該頁全部切圖”即可。

在藍湖平臺導出切圖

切圖命名規范

切圖最后需要命名成規范的格式，這樣方便程序員查找。切圖命名的格式建議全英文，如果大家英文不好需要想辦法提升一點簡單的詞匯量。借由上述工具切圖后，需要整理切圖命名，或在切圖之前對圖層命名亦可。以下是切圖元素的中英文對照：

切圖命名對照表

然后我們要按照 功能_類型_名稱_狀態@倍數 來命名每個切圖，比如我們導航條上有一個搜索圖標，那么它的名稱就是：

navi_icon_search_default@2x.png

(導航_圖標_搜索_正常@2x.png)

iOS開發語言

作為iOS開發工程師，最重要的三個工具是：Obiective-C、Swift、UIKit框架。Obiective-C是目前最有效率的語言；而Swift開發非常。一般iOS工程師會在這兩個語言中選擇一種作為開發工具。UIKit是蘋果系統自帶的一套框架，這個框架里有設置按鈕、滑竿、狀態欄、電池電量、鍵盤等接口可供調用。所以我們看到很多第三方APP的界面中，有許多控件和蘋果自帶程序是一致的，這就是UIKit的功勞。

開發視角 By @alvaroreyes

了解開發工程師的語言和工具對我們做設計也格外有幫助，我們會知道哪些效果能做，哪些效果不能做，哪些效果能做不好做等等。我找了大家關注的九個問題請教了iOS資深開發工程師程威：

和iOS工程師溝通

溝通完是不是學到了不少？我們明白了iOS工程師工作的機制后再設計界面時就可以做到心中有數了。在平時工作中我們也應該多和開發小哥哥聊聊，學習一下他們實現的方式，以便我們的設計能夠更好地落地。

標注

切圖后程序員得到了什么？一大堆碎片。把這些碎片重新用OC或者Swift構建回我們設計的界面并沒有想的那么簡單。所以開發工程師可能會總是在思考構架層面的問題，而忽視了視覺還原。并且由于iOS的開發人員不會使用設計軟件，所以很容易出現比如14pt或者28px的文字，實現后是16pt或者32px。那就亂了套了不是，那怎么辦呢？我們可以通過一些標注軟件把圖標之間的位置、字體的高度、字體的大小和色彩進行標注，讓程序員輕松省力地還原我們的設計稿。

藍湖平臺自動標注功能

將Sketch和Adobe XD、Photoshop的設計稿上傳至藍湖后，在藍湖平臺每個頁面左側有一個類似分享的圖標，點擊會獲取一個網址，這個網址就是系統生成的自動標注。它會自動識別設計稿中字體大小和間距等，甚至有代碼參考。

藍湖自動標注工具

使用Px像素大廚標注

像素大廚同樣提供了自動標注、手動標注兩種標注方法。自動標注需要上傳設計稿，手動標注需要設計師使用“尺子”來測量距離、“吸管”來吸取色號。在界面上部有單位選擇，如果我們給iOS開發做標注，那么單位最好選擇PT，與開發環境一致。

像素大廚標注工具

“標你妹啊”進行自動標注

國產標注在線神器。只需要登錄網站后，上傳設計稿可直接生成標注網址，發給程序員就可以啦。同樣提供代碼參考和自動標注間距尺寸等功能。

在線標注工具 - 標你妹啊

Markman 手動標注

Markman同樣是國產標注神器。而且是我使用的第一個標注工具，選用底部工具可以進行手動標注，標注后導出png標注圖即可。

Markman標注工具

動效

據資深iOS開發程威介紹，目前的iOS主流的動效實現方式有以下四種：第一種，設計師給到開發動效視頻或gif，開發人員照著效果編寫代碼調用靜態切圖重新做一遍，這樣的還原度可能會有問題，需要開發和設計師多溝通。第二種，可以使用序列幀的方式實現動畫，原理是給到開發按順序命名的png，比如1.png、2.png等，然后用代碼將它們快速替換實現動畫。第三種，我們也可以給到程序員avi等視頻文件直接插入視頻。第四種，使用Airbnb開源的Lottie（https://airbnb.design/lottie/）。具體來說是通過after effects來完成動效，然后通過BodyMovin插件導出json文件，里面記錄的就是動畫的細節，然后在安卓，iOS，React Native上都有一套對應的SDK，來解析這個json文件來還原成動畫。這個方式的還原度很高，除了部分AE不支持外堪稱完美。其實還有QuartzCode、CoreAnimator等工具，有興趣的大家可以去嘗試一下。但我認為不管使用什么方式，最優秀的動效還是要靠設計師和開發人員“真誠地交流”。

項目走查

當我們最終完成了界面設計，需要和我們的設計稿進行對照還原。除了用肉眼辨別之外，我們也可以把還原后的程序截圖下來放到PS中對照，尋找問題。那么我們給程序員的反饋就是一個有截圖對照和標注的文檔，這個文檔可以成為Buglist。

截圖后可在軟件中對比尋找問題

項目走查除了判斷視覺還原程度，也要兼顧動效、點擊狀態等動態效果是否符合設計預期。如果有問題需要及時和技術反饋，反饋的方式建議是文檔類型，保證有據可查。

總結

我們一起來小結一下：當我們設計iOS平臺的APP時，我們可以選擇使用Sketch、Adobe XD、Photoshop等工具。為了切圖和適配方便，設計時我們以iPhone6/7/8尺寸（750x1334px或375x667pt）為基準設計。設計過程中我們需要通過諸如Adobe XD或Mirror等工具隨時在手機上預覽設計效果。之后我們需要把圖像資源輸出成@2x視網膜屏幕和@3x高清視網膜屏幕兩套圖像資源，這時可以使用Cutterman或Sketch和XD自帶的切圖功能切圖。為了保證開發工程師能夠完美地還原我們的設計稿，我們需要提供標注。通過藍湖或像素大廚、Markman、標你妹啊等工具我們可以把設計稿完美標注給到程序員，這時程序員就清晰地明白每個元素的大小和間距了。最后，我們要對完成的程序進行驗收。本篇文章寫于二零一八年，按照慣例，每年蘋果都會舉辦兩場發布會發布新產品。如果后面發布了新的手機，也希望大家能夠理清脈絡，透過現象看到本質，找出合適的設計適配方法。

參考資料

蘋果開發者中心網址：

https://developer.apple.com/

蘋果人機交互規范：

https://developer.apple.com/design/human-interface-guidelines/

iOS設計資源下載：

https://developer.apple.com/design/resources/

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

jQuery對Ajax操作進行了封裝，常用的方法包括 $.get(),$.post(),$.ajax()。 
分別對其進行介紹

$.get()
$.get()方法使用GET方式來進行異步請求。
$.get()結構
$.get(url,[. data][. callback][. type])
1
$.get()方法參數解釋
參數名稱 類型 說明
url String 請求的HTML頁的url地址
data(可選) Object 發送至服務器的key/value數據會作為QueryString附加到請求的url中
callback(可選) Function 載入成功時回調函數（只有當Response的返回狀態是success才調用該方法）自動將請求結果和狀態傳遞給該方法
type(可選) String 服務器端返回內容的格式，包括xml、html、script、json、text和_default
示例 
json數據：data.json(后面的$.post()和$.ajax()方法都用這個數據)
{
    "name":"龍貓",
    "hobby":"睡覺",
    "friend":"加菲貓"
}

jq_get.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
    <input type="button" value="$.get方法" id="jQget">
    <div id="content"></div>
</body>
</html>
<!-- 導入jquery.js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#jQget').on('click',function(){

            /*

            參數1:url
                參數2:發送的數據 支持 直接寫js對象的方式
                參數3:回調函數
                參數4:從服務端獲取的 數據類型 可以不寫
                注意
                    如果type 為json 
                        并且服務端返回的就是 json格式字符串
                        jq內部 會幫助我們自動轉化
                        在回調函數中 獲取的 實參 就是轉化完成的 js對象 直接使用即可

                參數的 順序 是更換的
                    但是 如果 把data 放到后面 會出現 無法傳遞數據的問題,
                    所以 不要擅自更換 嚴格按照 jq文檔中的 順序 進行使用
            */
            $.get('jq_get.php',{name:"jack",age:18},function(data){
                    console.log(data);

                    $('#content').html('name:'+data.name+'<br>'+'hobby:'+data.hobby+'<br>'+'friend:'+data.friend); 

            },'json');
        });

    });
</script>

jq_get.php (后面的$.post()和$.ajax()方法都用這個頁面的內容，只是在html請求時分別對應的php頁面)

<?php
    header('content-type:text/html;charset=utf-8');
    echo file_get_contents('datas/data.json');
?>

結果展示： 


$.post()方法
  它與$.get()方法的結構和使用方式都相同，不過它們之間仍然有以下區別：

GET請求會將參數跟在URL后進行傳遞，而POST請求則是作為HTTP消息的實體內容發送個Web服務器，當然，在Ajax中，這種區別對用戶是不可見的。
GET方式對傳輸的數據有大小限制（通常不能大于2KB），而使用POST方式傳遞的數據量要比GET方式大得多（理論上不受限制，但是可以在服務端進行限制）。
GET方式請求的數據會被瀏覽器緩存起來，因此其他人就可以從瀏覽器的歷史記錄中讀取這些數據，例如賬號和密碼等。在某種情況下，GET方式會帶來嚴重的安全性問題，而POST方式相對來說就可以避免這些問題。（但是也是不安全的，所以密碼之類的還是要加密的）
GET方式和POST方式傳遞的數據在服務器的獲取方式也不相同。在PHP中，GET方式數據可以用$_GET[]獲取，而POST可以用$_POST[]獲取、兩種方式都可以用$_REQUEST[]來獲取。 
其實這完全是對這篇文章中post()和get()方法不同的總結?。?點擊查看) 
$.post()演示
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#jQpost').on('click',function(){
            // 跟$.get用法及其類似
            /*
                參數1:url
                參數2:發送的數據 支持 直接寫js對象的方式
                參數3:回調函數
                參數4:從服務端獲取的 數據類型 可以不寫,如果寫為json jq內部 會幫我們進行一個 JSON.parse()的轉化 
            */
             $.post('jq_post.php',{name:"kong",age:18},function(data){
                    console.log(data);
             },'json');
        });
    });
</script>

$.ajax()
$.ajax()方法是jQuery最底層的Ajax實現
其結構為
$.ajax(options)
1
該方法只有1個參數，但在這個對象里包含了$.ajax()方法所需要的請求設置以及回調函數等信息，參數以key/value的形式存在，所有參數都是可選的，只寫幾個常用的參數，如下：

參數名稱 類型 說明
url String 請求的HTML頁的url地址
type String 請求方式，默認GET。注意其他的HTTP請求方法，例如PUT和DELETE也可以使用，但僅部分瀏覽器支持
data Object或String 發送到服務器的數據，如果已經不是字符串，將自動轉換為字符串格式。
dataType String 服務器端返回內容的格式，包括xml、html、script、json、jsonp 、jQuery
beforeSend Function 發送請求前可以修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次Ajax請求。XMLHttpRequest對象的唯一參數。
success Function 請求成功后嗲用的回調函數，有兩個參數。
(1)由服務器返回，并根據dataType參數進行處理后的數據。
(2)描述狀態的字符串。
function(data,textStatus){
        //data可能是xmlDoc、jsonObj、html、text等等。
        this//調用本次Ajax請求時傳遞的options參數
  }
error Function 請求失敗時被調用的函數，該函數有3個參數，即
XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。
Ajax事件函數如下。
function(XMLHttpRequest,textStatus,errorThrown){//通常情況下textStatus和errorThown只有其中一個包含信息
this;//調用本次Ajax請求時傳遞的options參數
}
示例
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#jqAjax').on('click',function(){
    /*
                常見參數:
                    url:請求的地址
                    success:請求成功的回調函數
                    type:不寫是get 可以指定 get,post
                    dataType:數據的類型
                    data:發數據 可以寫js對象
                    beforeSend:發送之前調用的匿名函數
                        可以return false 阻止該次請求
                        驗證用戶的數據 是否填了
                    error:請求失敗以后 會調用
            */
            $.ajax({
                url:'jq_ajax.php',
                success:function(data){
                    console.log(data);
                    $('#box').append(data.name+'<br>'+data.hobby);
                },
                type:'post',
                dataType:'json',
                data:{"name":"張信哲","skill":"情歌王子"},
                beforeSend:function(){
                    console.log('發送之前調用');
                },
                error:function(){
                    console.log('請求失敗了');
                }
            });
        });

    });
</script>
--------------------- 
作者：diligentkong 
來源：CSDN 
原文：https://blog.csdn.net/diligentkong/article/details/72851443 
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。