在我們平時生活當中,經常會看到一些表白女朋友的html網頁,但是Android端的表白軟體可以說是基本沒有,筆者在全網搜了一下,就沒有一個可以用的。安卓端可以給人一種定製和精美的感覺,這是網頁所做不到的,網頁鏈接不見了就沒了。因此在這裡將自己寫的Android軟體製作流程以及代碼全部開源,這裡採用了 ...
-
在我們平時生活當中,經常會看到一些表白女朋友的html網頁,但是Android端的表白軟體可以說是基本沒有,筆者在全網搜了一下,就沒有一個可以用的。安卓端可以給人一種定製和精美的感覺,這是網頁所做不到的,網頁鏈接不見了就沒了。因此在這裡將自己寫的Android軟體製作流程以及代碼全部開源,這裡採用了web與安卓原生混合開發的技術,引入了騰訊X5內核替換WebView,可以讓軟體載入速度提高百分之三十。在github里,我也導入了了幾款不同的背景動態模板,可以供你們進行挑選,也導入了不同的背景音樂可供選擇,具體的更換方法也會在下麵的博客當中詳細解釋的(如果不想自己敲代碼的話),麻煩在Github給顆星,小弟將不勝感激!不會打包生成安裝包apk的,可以直接安裝的apk文件我也直接上傳到github上了!零基礎也可以玩兒!看了博客還能自己改!
- Github鏈接:https://github.com/Geeksongs/ExpressLove
- 安裝包APK文件鏈接(debug版本,可直接使用):https://github.com/Geeksongs/ExpressLove/tree/master/app/debug
軟體表白流程:
1.首頁開屏暫停三秒,固定背景圖
2.進入表白界面
3.如果想要離開,點擊手機上的返回按鈕,但不管怎麼點也退不出去
4.開始表白
5.表白成功之後,出現煙花場景,然後跳轉至微信,自動和小哥哥聊天(也可以跳轉到QQ等任何軟體,只需要改一個字元串就可以了)
下麵是軟體演示:
一.首先是我們的Mainactivity.java
這個活動(Java文件)在文件夾:ExpressLove\app\src\main\java\com\example\lenovo\expresslove下。我們在這個活動當中寫進去一個hander,進入延時,延時到了之後跳轉到第二個活動,這個活動讓我們的首頁開屏暫停三秒,固定背景圖,如果想要更換背景圖的你,則可以在下載下來的文件夾:ExpressLove\app\src\main\res\drawable當中的timg.png圖片進行自行更換,但更換後的名稱要保持一致。想要更改延時長短的你,則可以在下麵的代碼當中作修改,註釋比較詳細。
Mainactivity.java的代碼如下:
package com.example.lenovo.expresslove; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.os.Handler; import android.support.v7.app.ActionBar; import android.support.v7.app.AppCompatActivity; import android.view.WindowManager; import android.webkit.WebViewClient; import com.tencent.smtt.sdk.WebView; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ActionBar actionBar=getSupportActionBar();//後面幾行都用於隱藏標題欄 if(actionBar !=null) { actionBar.hide(); } getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); getSupportActionBar().hide();
new Handler().postDelayed(new Runnable(){ // 為了減少代碼使用匿名Handler創建一個延時的調用 public void run() { Intent i = new Intent(MainActivity.this,Main2Activity.class);//延時之後跳轉到活動2,main2activity.java MainActivity.this.startActivity(i); MainActivity.this.finish(); } }, 3000);//3000表示的是延時3秒 } }
二.首頁佈局代碼:activity_main.xml(不需要改)
在文件夾:ExpressLove\app\src\main\res\layout下的activity_main.xml 當中
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="@drawable/timg"> </LinearLayout>
三.進入第二個活動:(安卓程式員可以在這裡進入騰訊X5內核)
main2activity.java,和Mainactivity.java在同一個文件夾下,這個活動就引入了我們的心形動態圖的界面:
這部分代碼由幾個部分組成:
1.安卓程式員可以在加入騰訊X5內核,由於我們這個活動後面的背景動態是通過Webview來載入的,第一次打開軟體的速度會偏慢,如果去掉註釋刪除webview控制項的調用,使用X5則會提高載入速度。下麵的註釋也比較詳細。
2.由於背後的動態是html5文件,這個文件是放置在筆者已經創建好的asset文件夾下的,如果想要更改後面的背景動態,則可以直接到ExpressLove\app\src\main\assets文件夾下查看我們已經給出的html5背景動態,如果不滿意可以自己更替,筆者已經往裡面註入了index.html index2.html index3.html index4.html 四個背景動態,效果可以自行在電腦瀏覽器當中查看,可以在webview代碼實現處更改。如果想要本動態的背景文字,稍後我會詳細解釋。
3.再引入文字動畫,但是動畫就需要我們創建新的xml文件來完成這個動畫了,這個活動里僅僅是Java代碼對xml動畫進行的調用,實現的是頂部標題欄文字的漸變動畫,代碼從animation處開始,使用的是補間動畫的知識,稍後我們會給出新xml文件的代碼。
4.流氓式表白過程,主要使用了對話框的技術,如果用戶首先點擊了軟體上的button“點我啦”,則會跳轉到一個對話框,而對話框又只有一個按鈕,代碼當中利用對話框的嵌套,從而實現點了對話框當中按鈕之後又會出現新的對話框。直到點擊完對話框。
5.無法返回到桌面的精美對話框dialog製作:如果用戶點擊了手機上的返回按鈕,則會出現:“小姐姐求求你別離開我好嗎?”,不管是點擊確定還是返回都會返回到第二個活動當中,並不會退出軟體。
ackage com.example.lenovo.expresslove; import android.app.Dialog; import android.content.DialogInterface; import android.content.Intent; import android.os.Build; import android.os.Handler; import android.support.v7.app.ActionBar; import android.support.v7.app.AlertDialog; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.KeyEvent; import android.view.View; import android.view.Window; import android.view.WindowManager; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.webkit.WebViewClient; import android.widget.Button; import android.widget.TextView; import android.widget.Toast; import android.net.http.SslError; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.webkit.SslErrorHandler; import android.webkit.WebSettings; import android.webkit.WebView; import android.webkit.WebViewClient; /*import com.tencent.smtt.sdk.WebSettings; import com.tencent.smtt.sdk.WebView;*/ public class Main2Activity extends AppCompatActivity { // private WebView mWebView; private WebView webView; AlertDialog builder=null;//進入流氓式表白 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main2);
//下麵被註釋掉的這幾行代碼完全看程式員的個人意願了,如果想要用騰訊X5內核的,就把後面的註釋符號刪除就可以了,同時還需要把我們的webview控制項相關的 /* mWebView = (com.tencent.smtt.sdk.WebView) findViewById(R.id.webView2); mWebView.loadUrl("file:///android_asset/index3.html"); if (Build.VERSION.SDK_INT >= 21) {//設置頂部狀態欄為半透明 getWindow().setFlags( WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); }*/ final TextView textView=(TextView)findViewById(R.id.textview); //下麵是運用的webview來載入我們的h5動畫,如果想使用x5的可以把下麵的這些刪掉,再利用上面已經註釋過的代碼即可。 webView = (WebView) findViewById(R.id.webView); //需要載入的網頁的url webView.loadUrl("file:///android_asset/index3.html");//這裡寫的是assets文件夾下html文件的名稱,需要帶上後面的尾碼名,前面的路徑是安卓系統自己規定的android_asset就是表示的在assets文件夾下的意思,如果想要其他動態背景,更改index文件名即可。 webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);//自適應屏幕 webView.getSettings().setLoadWithOverviewMode(true);//自適應屏幕 webView.getSettings().setSupportZoom(true); webView.getSettings().setUseWideViewPort(true);//擴大比例的縮放 // webView.getSettings().setBuiltInZoomControls(true);//設置是否出現縮放工具,這裡我想就不出現了,影響效果 WebSettings settings = webView.getSettings(); // 如果訪問的頁面中要與Javascript交互,則webview必須設置支持Javascript settings.setJavaScriptEnabled(true); webView.setWebViewClient(new WebViewClient(){ public boolean shouldOverrideUrlLoading(WebView view, String url){ view.loadUrl(url); return true; } });
//下麵這裡引入的是動畫,在標題欄上方的文字漸變效果,從“正在載入當中”漸變到“還愣著幹嘛?” Animation scaleAnimation = AnimationUtils.loadAnimation(this, R.animator.anim); textView.startAnimation(scaleAnimation);
//這裡是隱藏安卓系統本身的標題欄 ActionBar actionBar=getSupportActionBar(); if(actionBar!=null) { actionBar.hide(); }
//這裡是設置安卓頂部狀態欄為半透明狀態,和我們的頂部標題欄顏色相呼應,不然的話顯示時間的狀態欄就是深藍色,看起來會很煩 if (Build.VERSION.SDK_INT >= 21) {//設置頂部狀態欄為半透明 getWindow().setFlags( WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);} getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); getSupportActionBar().hide();
new Handler().postDelayed(new Runnable(){ // 為了減少代碼使用匿名Handler創建一個延時的調用 public void run() { textView.setText("<----還愣著幹嘛??"); } }, 4500);//文字漸變的時間為4500ms Button button=(Button)findViewById(R.id.button); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { AlertDialog.Builder b = new AlertDialog.Builder(Main2Activity.this); //2.設置屬性 b.setTitle("每天做飯給你吃?"); b.setPositiveButton("好呀", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { AlertDialog.Builder c = new AlertDialog.Builder(Main2Activity.this); c.setTitle("小姐姐:"); c.setMessage("每個月生活費全都給你"); c.setPositiveButton("好鴨", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { AlertDialog.Builder d = new AlertDialog.Builder(Main2Activity.this); d.setTitle("小姐姐:"); d.setMessage("房產證寫你名字"); d.setNegativeButton("好鴨", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { AlertDialog.Builder y = new AlertDialog.Builder(Main2Activity.this); y.setTitle("小姐姐"); y.setMessage("每天都陪你逛街"); y.setNegativeButton("好呀", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { Intent intent=new Intent(Main2Activity.this,Main3Activity.class); startActivity(intent); } }); y.create(); y.show(); } }); d.create(); d.show(); } }); c.create();//創建 c.show();//show } }); b.create();//創建 b.show();//show } }); //這裡是外面的括弧了 } //下麵是點擊返回,跳出精美對話框的按鈕,不管確定還是取消都不會退出軟體 public boolean onKeyUp(int keyCode, KeyEvent event) { if(keyCode == KeyEvent.KEYCODE_BACK){ new CommomDialog(this, R.style.dialog, "求求你別離開我好嗎?", new CommomDialog.OnCloseListener() { @Override public void onClick(Dialog dialog, boolean confirm) { if(confirm){ dialog.dismiss(); } } }) .setTitle("小姐姐:").show(); } return true; }}
四.index3.html
如果想要修改背景動態後面的文字:“Dear love”為你想要Dear的那個人,則可以在這個網頁文件裡面進行修改:
如果不知道怎樣自己創建asset目錄的同學可以參見我的前幾篇博文,傳送門:https://www.cnblogs.com/geeksongs/p/10673133.html 文件目錄在這兒:ExpressLove\app\src\main\assets
代碼如下:
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>愛你</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <link href='https://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'> <canvas id="canvas" width="800" height="500"></canvas> <div class="title"><b>Dear Love</b></div><!--在這裡修改背景當中的文字--> <script src='js/FastBlur.js'></script> <script src='js/jquery.min.js'></script> <script src="js/index.js"></script> </body> </html>
從代碼當中我們可以看到這裡引用了不少的js文件,相關的js文件夾我已經放到了asset文件夾之下,所以就可以進行正確的調用了。如果想引入新html5動畫背景的程式員,請一定要註意您html5網頁所對應的javascript文件和css文件所對應的文件夾名不要和筆者這裡的重覆了,不然會引起一些不必要的麻煩。
五.anim.xml
這個文件是我們補間動畫所用到的xml文件,首前面的scale屬性被我註釋掉了,這個表示的是文字或者圖片的縮放,但是實際在android軟體當中運行的效果不太理想,就僅僅使用了alpha的漸變屬性,對文字進行漸變。創建anim.xml需要特定的方式才能夠創建,而不是直接在我們的layout文件夾之下進行創建。 同學們可以自行百度/谷歌一下。
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <!--<scale android:duration="1000" android:startOffset ="0" android:fillBefore = "true" android:fillAfter = "false" android:fillEnabled= "true" android:repeatMode= "restart" android:repeatCount = "0" android:fromXScale="0.0" android:toXScale="2" android:fromYScale="0.0" android:toYScale="2" android:pivotX="50%" android:pivotY="50%" />--> <alpha android:duration="2000" android:startOffset ="0" android:fillBefore = "true" android:fillEnabled= "true" android:repeatMode= "restart" android:repeatCount = "0" android:fromAlpha="0.0" android:toAlpha="1.0" /> </set>
六.第二個活動的佈局activity_main2.xml
這個佈局略顯複雜了一點,但是細細看看其實也不太難。主要是在整個佈局的最上方我們引入了一個嵌套的相對佈局,這樣才可以起到替換安卓自帶的標題欄的作用。如果想使用X5內核的話,直接把我已經註釋掉的X5控制項的主食刪掉,再刪除WEBVIEW的佈局就好了,但是不管如何其id一定要對才行,因為我們會在第二個活動當中引入它的id!!
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".Main2Activity"> <RelativeLayout android:background="@color/mainColor" android:layout_width="match_parent" android:layout_height="17dp"> </RelativeLayout> <RelativeLayout android:background="@color/mainColor" android:layout_width="match_parent" android:layout_height="42dp"> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="match_parent" android:text="點我啦"/> <TextView android:id="@+id/textview" android:textSize="23dp" android:layout_alignParentRight="true" android:textColor="@color/white" android:layout_width="250dp" android:layout_height="match_parent" android:text="正在載入中,稍等....."/> </RelativeLayout> <!-- <com.tencent.smtt.sdk.WebView android:id="@+id/webView2" android:layout_width="match_parent" android:layout_height="match_parent"/>--> <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent"></WebView> </LinearLayout>
最後的佈局的效果如下:(真機運行出來的效果),可以看到上面的狀態欄是沒有藍色的,藍色的標題欄也被我們隱藏了,因為我們在第二個活動當中已經隱藏了這些。只是需要註意將狀態欄變為半透明需要將安卓軟體的API提升到21以上,沒有在21以上的可以直接在gradle文件裡面進行修改,修改之後在點擊android studio 右上方的syic now ,再等待電腦運行一段時間就可以了。
除此之外,我們在點擊返回按鈕的時候會跳出一個仿微信的對話框,如下:
在第二個活動當中已經觸發了這個事件,因此我們還需要在xml文件當中做一些美工,下麵是我們需要編輯的第一個xml文件:
七.dialog_commom.xml
這個佈局直接創建到我們的layout文件夾之下就可以了.
代碼如下:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/bg_round_white" android:orientation="vertical" > <TextView android:id="@+id/title" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:padding="12dp" android:layout_marginTop="12dp" android:text="提示" android:textSize="20sp" android:textColor="@color/black"/> <TextView android:id="@+id/content" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:layout_gravity="center_horizontal" android:lineSpacingExtra="3dp" android:layout_marginLeft="40dp" android:layout_marginTop="20dp" android:layout_marginRight="40dp" android:layout_marginBottom="30dp" android:text="簽到成功,獲得200積分" android:textSize="16sp" android:textColor="@color/font_common_1"/> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/commom_background"/> <LinearLayout android:layout_width="match_parent" android:layout_height="50dp" android:orientation="horizontal"> <TextView android:id="@+id/cancel" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/bg_dialog_left_white" android:layout_weight="1.0" android:gravity="center" android:text="確定" android:textSize="12sp" android:textColor="@color/font_common_2"/> <View android:layout_width="1dp" android:layout_height="match_parent" android:background="@color/commom_background"/> <TextView android:id="@+id/submit" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/bg_dialog_right_white" android:gravity="center" android:layout_weight="1.0" android:text="取消" android:textSize="12sp" android:textColor="@color/font_blue"/> </LinearLayout> </LinearLayout>
八.colors.xml
values下的文件,必須的
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> <color name="mainColor">#573567</color> <color name="white">#FFFFFF</color> <color name="black">#000000</color> <color name="font_gray_b">#d4d4d3</color> <color name="font_tab_1">#42369a</color> <color name="font_tab_0">#b1b1b1</color> <color name="font_common_1">#424242</color> <color name="font_common_2">#a1a1a1</color> <color name="font_blue">#42369a</color> <color name="font_green">#00cccc</color> <color name="commom_background">#f3f3f3</color> </resources>
九.styles.xml
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> <style name="dialog" parent="@android:style/Theme.Dialog"> <item name="android:windowFrame">@null</item> <!--邊框--> <item name="android:windowIsFloating">true</item> <!--是否浮現在activity之上--> <item name="android:windowIsTranslucent">false</item> <!--半透明--> <item name="android:windowNoTitle">true</item> <!--無標題--> <item name="android:windowBackground">@android:color/transparent</item> <!--背景透明--> <item name="android:backgroundDimEnabled">true</item> <!--模糊--> </style> <style name="AppTheme.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> </style> <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" /> <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" /> </resources>
為了能夠在點擊的時候跳出這個彈框,我們還需要編寫新的Java類:
九.CommomDialog.java
package com.example.lenovo.expresslove; import android.app.Dialog; import android.content.Context; import android.os.Bundle; import android.text.TextUtils; import android.view.View; import android.widget.TextView; public class CommomDialog extends Dialog implements View.OnClickListener { private TextView contentTxt; private TextView titleTxt; private TextView submitTxt; private TextView cancelTxt; private Context mContext; private String content; private OnCloseListener listener; private String positiveName; private String negativeName; private String title; public CommomDialog(Context context) { super(context); this.mContext = context; } public CommomDialog(Context context, int themeResId, String content) { super(context, themeResId); this.mContext = context; this.content = content; } public CommomDialog(Context context, int themeResId, String content, OnCloseListener listener) { super(context, themeResId); this.mContext = context; this.content = content; this.listener = listener; } protected CommomDialog(Context context, boolean cancelable, OnCancelListener cancelListener) { super(context, cancelable, cancelListener); this.mContext = context; } public CommomDialog setTitle(String title){ this.title = title; return this; } public CommomDialog setPositiveButton(String name){ this.positiveName = name; return this; } public CommomDialog setNegativeButton(String name){ this.negativeName = name;