当前位置: 编程技术>移动开发
本页文章导读:
▪option menu跟onTouchEvent option menu和onTouchEvent
本人使用魅族MX2 今天下午调了一个下午的bug 由于未知原因option menu 嵌套进Tab layout 无法显示menu键
其实在原生安卓上是正常的
而option menu单独使用 不嵌套进Tab layout也是.........
▪ 利用facebook api开展登录，并调用api 利用facebook api进行登录，并调用api
1.先在facebook官网上下载 facebook-facebook-android-sdk-v1.2.1-0-g5a72863.zip（下载地址 ： https://github.com/facebook/facebook-android-sdk）2. new --Android Proje.........
▪ 应用jQuery Mobile快速开发手机站点 使用jQuery Mobile快速开发手机站点
来自：http://brooky.cc/2011/04/18/jquery-mobile-for-fast-mobile-website-development/
當你看著 Apple 的 iOS device 和 Android 各自來勢洶洶，不知道到底該讓你的服務選哪邊站的.........
[1]option menu跟onTouchEvent
来源: 互联网 发布时间: 2014-02-18
option menu和onTouchEvent
本人使用魅族MX2 今天下午调了一个下午的bug 由于未知原因option menu 嵌套进Tab layout 无法显示menu键
其实在原生安卓上是正常的
而option menu单独使用 不嵌套进Tab layout也是正常的
代码延续上一篇的
只是在ImgActivity中override了onTouchEvent，onCreateMenu 和onOptionsItemSelected
optionMenu部分
private static final String TAG = "com.example.hw2";
private static final int OPTION1 = 1;
private static final int OPTION2 = 2;
private static final int OPTION3 = 3;
private static final int OPTION4 = 4;
private static final int OPTION5 = 5;
private static final int OPTION6 = 6;
/* Creates the menu items */
public boolean onCreateOptionsMenu(Menu menu) {
menu.add(Menu.NONE, OPTION1, Menu.NONE, "Bookmark").setIcon(android.R.drawable.ic_menu_agenda);
menu.add(Menu.NONE, OPTION2, Menu.NONE, "Save").setIcon(android.R.drawable.ic_menu_save);
menu.add(Menu.NONE, OPTION3, Menu.NONE, "Search").setIcon(android.R.drawable.ic_menu_search);
menu.add(Menu.NONE, OPTION4, Menu.NONE, "Share").setIcon(android.R.drawable.ic_menu_share);
menu.add(Menu.NONE, OPTION5, Menu.NONE, "Delete").setIcon(android.R.drawable.ic_menu_delete);
menu.add(Menu.NONE, OPTION6, Menu.NONE, "Preferences").setIcon(android.R.drawable.ic_menu_preferences);
return true;
}
/* Handles item selections */
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId())
{
case OPTION1:
Toast.makeText(getApplicationContext(), "Bookmark is selected", Toast.LENGTH_SHORT).show();
Log.i(TAG, "----------- Option 1 selected");
return true;
case OPTION2:
Toast.makeText(getApplicationContext(), "Save is selected", Toast.LENGTH_SHORT).show();
Log.i(TAG, "----------- Option 2 selected");
return true;
case OPTION3:
Toast.makeText(getApplicationContext(), "Search is selected", Toast.LENGTH_SHORT).show();
Log.i(TAG, "----------- Option 3 selected");
return true;
case OPTION4:
Toast.makeText(getApplicationContext(), "Share is selected", Toast.LENGTH_SHORT).show();
Log.i(TAG, "----------- Option 4 selected");
return true;
case OPTION5:
Toast.makeText(getApplicationContext(), "Delete is selected", Toast.LENGTH_SHORT).show();
Log.i(TAG, "----------- Option 5 selected");
return true;
case OPTION6:
Toast.makeText(getApplicationContext(), "Preferences is selected", Toast.LENGTH_SHORT).show();
Log.i(TAG, "----------- Option 6 selected");
return true;
}
return false;
}
OnTouchEvent部分
这部分参照了 http://www.ourunix.org/android/post/82.html 多谢多谢！
@Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
int touchEvent = event.getAction();
switch(touchEvent){
case MotionEvent.ACTION_DOWN:
openOptionsDialog()
Log.i(TAG, "MotionEvent.Action_down!!");
break;
default:
break;
}
return super.onTouchEvent(event);
}
private void openOptionsDialog(){
new AlertDialog.Builder(ImgActivity.this)
.setTitle("Save File...")
.setIcon(android.R.drawable.ic_menu_save)
.setMessage("Do you want to save this file?").setPositiveButton("YES", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
// TODO Auto-generated method stub
}
})
.setNegativeButton("NO", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
// TODO Auto-generated method stub
}
})
.setNeutralButton("CANCEL", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
// TODO Auto-generated method stub
}
})
.show();
}
之前一直不知道Log和TAG是做什么用的，现在终于知道了：在runtime的时候，在logcat中用的，Log.i可以用来debug
[2] 利用facebook api开展登录，并调用api
来源: 互联网 发布时间: 2014-02-18
利用facebook api进行登录，并调用api
1.先在facebook官网上下载
facebook-facebook-android-sdk-v1.2.1-0-g5a72863.zip（下载地址 ： https://github.com/facebook/facebook-android-sdk）
2. new --Android Project -----create project from existing source ----选择facebook ，
3.创建一个新的应用，要引用 facebook项目，方法（右键---properties---Android----Add library 选择facebook项目）
4.在facebook平台上创建应用 ，获得APP_ID。
验证 登录的代码
public static final String APP_ID = "374076005970091";
private Facebook mFacebook= new Facebook(APP_ID);
private AsyncFacebookRunner mAsyncRunner= new AsyncFacebookRunner(mFacebook);
private static final String[] PERMISSIONS =
new String[] {"publish_stream", "read_stream", "offline_access"};
public void onClick(View v) {
// TODO Auto-generated method stu
mFacebook.authorize(this,
PERMISSIONS, new LoginDialogListener());
}
获得个人信息的代码：
mAsyncRunner.request("me", new SelfListener());
class SelfListener implements com.facebook.android.AsyncFacebookRunner.RequestListener{
@Override
public void onComplete(String response, Object state) {
// TODO Auto-generated method stub
Intent intent = new Intent();
intent.setClass(FaceBookTestActivity.this, ResultActivity.class);
//response是个人信息的json字符串
intent.putExtra("response", response);
startActivity(intent);
}
发表说说的代码：
mFacebook.dialog(ResultActivity.this, "stream.publish",
new WallPostDialogListener());
public class WallPostDialogListener implements
com.facebook.android.Facebook.DialogListener {
/**
* Called when the dialog has completed successfully
*/
public void onComplete(Bundle values) {
final String postId = values.getString("post_id");
if (postId != null) {
Log.d("FB Sample App", "Dialog Success! post_id=" + postId);
mAsyncRunner.request(postId, new WallPostRequestListener());
} else {
Log.d("FB Sample App", "No wall post made");
}
}
@Override
public void onCancel() {
// No special processing if dialog has been canceled
}
@Override
public void onError(DialogError e) {
// No special processing if dialog has been canceled
}
@Override
public void onFacebookError(FacebookError e) {
// No special processing if dialog has been canceled
}
}
public class WallPostRequestListener implements
com.facebook.android.AsyncFacebookRunner.RequestListener {
/**
* Called when the wall post request has completed
*/
@Override
public void onComplete(String response, Object state) {
// TODO Auto-generated method stub
Log.d("Facebook-Example", "Got response: " + response);
}
@Override
public void onIOException(IOException e, Object state) {
// TODO Auto-generated method stub
}
@Override
public void onFileNotFoundException(FileNotFoundException e,
Object state) {
// TODO Auto-generated method stub
}
@Override
public void onMalformedURLException(MalformedURLException e,
Object state) {
// TODO Auto-generated method stub
}
@Override
public void onFacebookError(FacebookError e, Object state) {
// TODO Auto-generated method stub
}
}
1.先在facebook官网上下载
facebook-facebook-android-sdk-v1.2.1-0-g5a72863.zip（下载地址 ： https://github.com/facebook/facebook-android-sdk）
2. new --Android Project -----create project from existing source ----选择facebook ，
3.创建一个新的应用，要引用 facebook项目，方法（右键---properties---Android----Add library 选择facebook项目）
4.在facebook平台上创建应用 ，获得APP_ID。
验证 登录的代码
public static final String APP_ID = "374076005970091";
private Facebook mFacebook= new Facebook(APP_ID);
private AsyncFacebookRunner mAsyncRunner= new AsyncFacebookRunner(mFacebook);
private static final String[] PERMISSIONS =
new String[] {"publish_stream", "read_stream", "offline_access"};
public void onClick(View v) {
// TODO Auto-generated method stu
mFacebook.authorize(this,
PERMISSIONS, new LoginDialogListener());
}
获得个人信息的代码：
mAsyncRunner.request("me", new SelfListener());
class SelfListener implements com.facebook.android.AsyncFacebookRunner.RequestListener{
@Override
public void onComplete(String response, Object state) {
// TODO Auto-generated method stub
Intent intent = new Intent();
intent.setClass(FaceBookTestActivity.this, ResultActivity.class);
//response是个人信息的json字符串
intent.putExtra("response", response);
startActivity(intent);
}
发表说说的代码：
mFacebook.dialog(ResultActivity.this, "stream.publish",
new WallPostDialogListener());
public class WallPostDialogListener implements
com.facebook.android.Facebook.DialogListener {
/**
* Called when the dialog has completed successfully
*/
public void onComplete(Bundle values) {
final String postId = values.getString("post_id");
if (postId != null) {
Log.d("FB Sample App", "Dialog Success! post_id=" + postId);
mAsyncRunner.request(postId, new WallPostRequestListener());
} else {
Log.d("FB Sample App", "No wall post made");
}
}
@Override
public void onCancel() {
// No special processing if dialog has been canceled
}
@Override
public void onError(DialogError e) {
// No special processing if dialog has been canceled
}
@Override
public void onFacebookError(FacebookError e) {
// No special processing if dialog has been canceled
}
}
public class WallPostRequestListener implements
com.facebook.android.AsyncFacebookRunner.RequestListener {
/**
* Called when the wall post request has completed
*/
@Override
public void onComplete(String response, Object state) {
// TODO Auto-generated method stub
Log.d("Facebook-Example", "Got response: " + response);
}
@Override
public void onIOException(IOException e, Object state) {
// TODO Auto-generated method stub
}
@Override
public void onFileNotFoundException(FileNotFoundException e,
Object state) {
// TODO Auto-generated method stub
}
@Override
public void onMalformedURLException(MalformedURLException e,
Object state) {
// TODO Auto-generated method stub
}
@Override
public void onFacebookError(FacebookError e, Object state) {
// TODO Auto-generated method stub
}
}
[3] 应用jQuery Mobile快速开发手机站点
来源: 互联网 发布时间: 2014-02-18
使用jQuery Mobile快速开发手机站点
宣告 HTML5 documnt
include the the jQuery mobile css, jQuery, jQuery mobile library (你可以透過 jQuery or google code CDN, 或是你也可以自己 download 這些檔案放在自己的 server)
使用 jquery mobile 所定義的語法，如 data-role 等來定義 page structure
將文件以 <!DOCTYPE html> 宣告成 HTML5 的格式
在 header 中間，以 <link>, <script> 將必要的 CSS & javascript library include 進來
data-role=”page”, data-role=”header”, data-role=”content”, data-role=”footer” 是 jQuery Mobile 所定義的 tags。這裡使用了 HTML5 custom data attributes 的 data-* 語法, 分別告訴 jQuery Mobile 哪邊是 header, content, footer。其中 page & content 是一定要有的，header & footer 則視自己的需要。
List View
在 <ul> 上加上 data-role=”listview”
data-inset=”true” 主要指定這個 listview 是不是出現在文中間。如果是的話， jQuery Mobile 會自動幫你在最上面的 item 及最下面的 item 加上圓弧邊
如果你希望幫 list 分成一個個區塊 (有點像 HTML 裡的 <optgroup> tag)，你可以在 li 上面加上一個 data-role=”list-divider” 的 item。如上面這個範例中的 <li data-role=”list-divider”>Overview</li>
Advanced List View
来自：http://brooky.cc/2011/04/18/jquery-mobile-for-fast-mobile-website-development/
當你看著 Apple 的 iOS device 和 Android 各自來勢洶洶，不知道到底該讓你的服務選哪邊站的時候， 是否曾經偷偷地希望在完成一個平台的開發工作之後，可以將這個 app 也 port 到另外一個平台？ jQuery Mobile 就是一個這麼方便的 framework， 尤其是小公司人手不足，jQuery Mobile 更可以大幅省下你將你的 application 發佈不同平台的力氣。
這篇文章會簡單介紹 jQuery Mobile 運作的哲學、jQuery Mobile 所提供的工具、並且會以實際的例子帶大家認識 jQuery Mobile, 以及 jQuery Mobile 所提供種種便利的功能。
認識 jQuery Mobile使用過 jQuery 的人一定都愛死 jQuery 有名的 “write less, do more” 。只要透過 jQuery, 我們就不用再擔心惱人的跨瀏覽器問題。但隨著手持式裝置的漸漸普及，大家開始發現跨覽器問題到了手機上反而比 PC 上更加嚴重：在手機上不只是瀏覽器不同，OS 的歧異度也比 PC 上來得更加嚴重。於是，在 2010 的 10 月 jQuery 終於在大家的期待之下推出了 jQuery Mobile。只要使用這個簡單易用的 framework, 很快就可以做出跨 device 的 mobile appilcation。jQuery Mobile 幾個重要的 features 包括：
- jQuery mobile 可以跨不同的移動裝置
jQuery mobile 可以 support 許多不同的平台，包括：iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, bada, MeeGo，以及其他可以看得懂 HTML 的devices。 詳細的支援狀況可以參考 Mobile Graded Browser Support - Progressive Enhancement & Graceful Degradation
“taking a fully functional HTML web page, layering on additional JavaScript functionality, and giving capable browsers a top-of-the-line experience.”
讓較舊的手機一樣可以看到基本的功能(even 不支援 javascipt !! )，同時又可以讓支援度比較好的瀏覽器享受較先進的功能。 - 透過設定 HTML 標籤來完成 jQuery Mobile 的設定
jQuery 主要是透過 HTML5 data-* tag 來達成種種 UI 的設定，只要認識了大概的語法，不用寫一行 javascript，就可以快速建出 app 的雛型。對於對JavaSript 不熱的設計師，或是對談到 UI 設計就一個頭兩個大的工程師，jQuery mobile 的方便絕對讓你愛不釋手。
jQuery mobile 運作的方式很簡單，他主要的流程包括三個步驟
下面是一個簡單的範例：
<!DOCTYPE html> <html> <head> <title>jQuery Mobile Tutorial on Codeforest.net</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Title</h1> </div><!-- /header --> <div data-role="content"> <p>The content</p> </div><!-- /content --> <div data-role="footer"> <h4>The Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
幾個重點：
在瀏覽器輸入這個檔案的位址，就可以看到下面這個畫面：
jquery mobile sample 1 on android
jquery mobile sample 1 on ipad
List View 可以算是手機上常常使用的 UI，它的長相如上圖。在 jQuery Mobile 要實作這樣的 UI 非常簡單，只要用一般 HTML 常常使用的 ordered list (<ol> + <li>), 或是 unordered list (<ul> + <li>) ，並在 <ul> 加上 data-role=”listview” 就可以了。像上圖的 UI ，它的 HTML 其實非常簡單：
... <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <li data-role="list-divider">Overview</li> <li><a href="/blog_article/docs/about/intro.html">Intro to jQuery Mobile</a></li> <li><a href="/blog_article/docs/about/features.html">Features</a></li> <li><a href="/blog_article/docs/about/accessibility.html">Accessibility</a></li> <li><a href="/blog_article/docs/about/platforms.html">Supported platforms</a></li> </ul> ...
幾個重點：
List View 可以有很多種變化，詳細的說明可以參考 jQuery Mobile 上的對 List views 的說明。這裡簡單介紹三種常用的變化：
- Nested list：只要將 list 加上多層的結構，jQuery Mobile 就會自動幫 list view 加上切換上下層的效果
- List views with thumbnails
在每個 li 的一開始加上一個 <img> , jQuery Mobile 就會自動把它放在最左邊當做縮圖。如：<ul data-role="listview"> <li><a href="/blog_article/index.html"> <img src="/blog_article/images/album-bb.jpg" /> <h3>Broken Bells</h3> <p>Broken Bells</p> </a></li> ... </ul> - List views with Count Bubbles
在 <li> 裡面加上一個 <span>，jQuery Mobile 會把內容包在 bubble 放在每個 item 的最右邊，如：<h2 >A list with count bubbles</h2> <ul data-role="listview" data-inset="true"> <li><a href="#">SuperWidgets</a> <span>14</span></li> <li><a href="#">MegaWidgets</a> <span>0</span></li> <li><a href="#">WonderWidgets</a> <span>327</span></li> </ul>
just 將 <ul> & <li> 放在一個 data-role=”navbar” 的 div 裡面，就可以馬上做出一個 navigation bar, 還可以更簡單嗎
<div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#" data-icon="grid" data-iconpos="top">Summary</a></li> <li><a href="#" data-icon="star" data-iconpos="top">Favs</a></li> <li><a href="#" data-icon="gear" data-iconpos="top">Setup</a></li> </ul> </div><!-- /navbar --> </div><!-- /footer -->
幾個重點：
- jQuery Mobile 裡面原本就有很多內建的 icon 可以使用，你可以用 data-icon=”xxx” 將 icon 加到 navigation bar 裡面（詳細有哪些 icon 可參考 icon 列表），並用 data-iconpos 指定 icon 的位置 (分成 left, right, top, bottom, notext, default 設成 left)
- 如果你想要的話，只要稍微多做一些設定，你也可以使用自己的 icon :)
<style type="text/css"> .nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; } .nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; } #chat .ui-icon { background: url(/blog_article/glyphish-icons/09-chat2.png) 50% 50% no-repeat; background-size: 24px 22px; } #email .ui-icon { background: url(/blog_article/glyphish-icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px; } #login .ui-icon { background: url(/blog_article/glyphish-icons/30-key.png) 50% 50% no-repeat; background-size: 12px 26px; } #beer .ui-icon { background: url(/blog_article/glyphish-icons/88-beermug.png) 50% 50% no-repeat; background-size: 22px 27px; } #coffee .ui-icon { background: url(/blog_article/glyphish-icons/100-coffee.png) 50% 50% no-repeat; background-size: 20px 24px; } #skull .ui-icon { background: url(/blog_article/glyphish-icons/21-skull.png) 50% 50% no-repeat; background-size: 22px 24px; } </style> <div data-role="footer" > <div data-role="navbar" data-grid="d"> <ul> <li><a href="#" id="chat" data-icon="custom">Chat</a></li> <li><a href="#" id="email" data-icon="custom">Email</a></li> <li><a href="#" id="skull" data-icon="custom">Danger</a></li> <li><a href="#" id="beer" data-icon="custom">Beer</a></li> <li><a href="#" id="coffee" data-icon="custom">Coffee</a></li> </ul> </div> </div>
- 為觸控設計的 UI (Touch input optimized controls)
為了讓表單在多為觸控操作的 portable device 可以方便地操作，jQuery Mobile 會自動將很多表單的元素轉換為觸控較好操作的形式(可參考完整的 Form elements 列表）。如果不想用 jQuery Mobile 自動幫你轉換的 UI，可以在元件加上 data-role=”none”，便會回到未優化前的形式 - 除了原本 Form 就有的 text, textarea, radio, checkbox, select menus, jQuery Mobile 也提供了 Slider, Flip, DatePicker (似乎仍在開發中）
- 彈性化的表單呈現 (Dynamic form layout)
jQuery Mobile 為了讓利用它的 app 可以 port 到不同的平台，會針對不同的螢幕寬度做不同的 layout，其中一個最明顯的例子就是表單 (Form)。如果螢幕是較窄的 (~480px)，jQuery mobile 會將 label 視為 block element; 如果是較寬的螢幕，看起就會是 2-column layout。要利用這個方便的功能，你只要將 data-role=”fieldcontain” 的 div 裡就可以了，如：<div data-role="fieldcontain"> <label for="name">Text Input:</label> <input type="text" name="name" id="name" value="" /> </div>
jQuery Mobile 提供了許多開發 mobile app 的工具。這篇文章帶大家簡單認識了 jQuery Mobile Progressive Enhancement 為不同裝置提供不同工具的哲學、知道 jQuery mobile 設定的定程，也認識了 jQuery Mobile 所提供的工具，包括：list view , navigation bar, form elements 等等。希望能夠讓大家體會到 jQuery mobile 的便利性，讓我們一起來 “write less, do more”
Reference-
How to Build an RSS Reader with jQuery Mobile
一篇內容簡單易懂的教學。使用 jQuery mobile List view ，並用 Yahoo! YQL 來實做一個簡單的 RSS reader -
jQuery Mobile Framework – A Forms Tutorial
用一個表單的程式示範 jQuery mobile 如何用在典型透過 Ajax 與 server 端程式的串接 -
jQuery Mobile: What Can It Do for You?
very detailed explaination for different components of jQuery Mobile
几个不错的 jQuery Mobile 页面设计及样例参考站点：
http://www.jqmgallery.com/
http://view.jquerymobile.com/master/demos/
附几个简单的例子：
最新技术文章: