Android 使用jQuery實(shí)現(xiàn)item點(diǎn)擊顯示或隱藏的特效的示例

更新時(shí)間：2018年03月05日 13:45:26 作者：ZHU_文濤

本篇文章主要介紹了Android 使用jQuery實(shí)現(xiàn)item點(diǎn)擊顯示或隱藏的特效的示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文介紹了Android 使用jQuery實(shí)現(xiàn)item點(diǎn)擊顯示或隱藏的特效的示例，分享給大家，具體如下：

效果圖

這里寫(xiě)圖片描述

分析

上圖中的功能在很多APP上都可能用到過(guò)，例如app的幫助界面，告訴用戶(hù)如何使用APP

一般的實(shí)現(xiàn)方式都是通過(guò)ListView來(lái)實(shí)現(xiàn)的，實(shí)際上此類(lèi)需求非常簡(jiǎn)單，完全可以用WebView加載HTML來(lái)實(shí)現(xiàn)

抽屜樣式的顯示隱藏特效可以使用jQuery來(lái)實(shí)現(xiàn)，一個(gè)函數(shù)就可以搞定

實(shí)現(xiàn)

集成jQuery

網(wǎng)頁(yè)中需要使用到j(luò)Query，最新版本可以去官網(wǎng)下載

http://jquery.com/download/

不推薦使用超鏈接關(guān)聯(lián)的方式把jQuery集成到網(wǎng)頁(yè)中，如幫助頁(yè)面就需要考慮在不聯(lián)網(wǎng)的情況下被訪問(wèn)，所以建議把jQuery放入工程中

這里使用的是發(fā)布的精簡(jiǎn)版本，直接對(duì)鏈接右鍵另存為文本

這里寫(xiě)圖片描述

將另存為的文本重命名為jquery.js，在HTML中通過(guò)以下代碼將jQuery集成進(jìn)來(lái)

<script src="jquery.js"></script>

記得要根據(jù)集成的路徑修改對(duì)應(yīng)的引入路徑

編寫(xiě)網(wǎng)頁(yè)

實(shí)現(xiàn)一個(gè)簡(jiǎn)單的單條item顯示/隱藏特效

<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>

<!-- 網(wǎng)頁(yè)樣式 -->
<style type="text/css">
 body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微軟雅黑";
  font-size: 16px;
 }

 div.div300 {
  margin:0px;
  padding:5px;
  background:#ffffff;
  border:solid 1px #c3c3c3;
 }

 h3.h300 {
  margin:0px;
  padding:5px;
  background:#F5F5F5;
  border:solid 1px #c3c3c3;
  color:black;
 }
</style>

<!-- 控制邏輯 -->
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".h300").click(function(){
  $(".div300").slideToggle("fast");
 });
});
</script>

<title>標(biāo)題</title>
</head>
<body>

<div style="padding:10px; text-align: justify;">
 <h3 class="h300">item點(diǎn)擊顯示或隱藏0</h3>
 <div class="div300">
  <p>
   1.上圖中的功能在很多APP上都可能用到過(guò)，例如app的幫助界面，告訴用戶(hù)如何使用APP。<br><br>
   2.一般的實(shí)現(xiàn)方式都是通過(guò)ListView來(lái)實(shí)現(xiàn)的，實(shí)際上此類(lèi)需求非常的簡(jiǎn)單，完全可以用HTML來(lái)實(shí)現(xiàn)。<br><br>
   3.顯示隱藏的特效可以使用jQuery來(lái)實(shí)現(xiàn)，一個(gè)函數(shù)就可以搞定。<br><br>
   4.網(wǎng)頁(yè)中需要使用到j(luò)Query，最新版本可以去官網(wǎng)下載。<br>
  </p>
 </div>
</div>
</body>
</html>

控制邏輯中slideToggle的值可以選擇“slow”或“fast”來(lái)改變滑動(dòng)的速度

body中div300表示要顯示或隱藏的內(nèi)容，h300表示一個(gè)item條目

把寫(xiě)好的html文件和jquery.js文件一起放入Android工程下的assets中

加載網(wǎng)頁(yè)

在Activity中使用WebView加載網(wǎng)頁(yè)

加載網(wǎng)頁(yè)的代碼

public class GuideActivity extends AppCompatActivity {
 private final String htmlPath = "file:///android_asset/guide.html";
 private WebView mContentWv;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_guide);
  mContentWv = (WebView) findViewById(R.id.web_guide_content);
  mContentWv.getSettings().setJavaScriptEnabled(true);
  mContentWv.loadUrl(htmlPath);
 }
}

使用WebView的要小心各種坑，最需要注意的就是內(nèi)存泄露問(wèn)題，目前最好的處理方式，就是給界面中含有WebView的界面開(kāi)啟一個(gè)新的進(jìn)程，然后在退出該界面的時(shí)候結(jié)束這個(gè)進(jìn)程
具體做法如下：

在AndroidManifest.xml中給含有WebView的Activity開(kāi)啟新的進(jìn)程

<activity
 android:name=".modules.main.GuideActivity"
 android:launchMode="singleTask"
 android:process=":guide.process"/>

通過(guò)process屬性指定新進(jìn)程的名稱(chēng)，這里設(shè)置的是一個(gè)私有進(jìn)程

界面退出時(shí)關(guān)閉進(jìn)程

Activity退出時(shí)在onDestroy中使用System.exit(0)關(guān)閉進(jìn)程

@Override
protected void onDestroy(
 ViewGroup view = (ViewGroup) getWindow().getDecorView();
 view.removeAllViews();

 super.onDestroy();
 System.exit(0);
}

進(jìn)程退出后，不管它是正常退出的還是異常退出的，操作系統(tǒng)都會(huì)去釋放掉這個(gè)進(jìn)程的資源。如內(nèi)存資源和打開(kāi)的文件資源等等，這個(gè)是由內(nèi)核控制的，比較靠譜

使用此方法也要注意以下兩點(diǎn)：

Activity頁(yè)面中是否引用了不同進(jìn)程的資源，如果有的話就需要使用IPC機(jī)制來(lái)處理不同進(jìn)程間的通信了
啟動(dòng)的頁(yè)面的速度會(huì)慢很多，因?yàn)閮?nèi)存被清空了，無(wú)緩存的情況下啟動(dòng)變慢，還有就是新開(kāi)進(jìn)程需要消耗一定的資源

總結(jié)

簡(jiǎn)單的頁(yè)面使用HTML來(lái)做可以節(jié)約開(kāi)發(fā)成本，可移植性強(qiáng)

如果需要?jiǎng)討B(tài)改變頁(yè)面的數(shù)據(jù)，可以用到WebView與JavaScript互相調(diào)用

WebView的使用存在各種坑，開(kāi)發(fā)中需要仔細(xì)測(cè)試并盡量避免

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: