[Android] 取得網址連結預覽資訊 Url preview

今天來筆記一下因工作需求我所開發的Library

BahaUrlPreview - 取得網址預覽資訊

這個功能隨處可見，當今天在facebook,messanger,line之類的App貼上網址連結時，

會顯示出該連結的預覽資訊，預覽圖/標題/描述之類的，

讓使用者可以在點擊連結前，得知該連結大概是甚麼網址

那介紹一下使用方法~

於gradle中設定

Kotlin使用方法

覺得好用的，可以至Github給個星星，有任何建議或需要的功能，歡迎發Issue或PR!

Read More

[Android] TextInputLayout 末端清除Icon點擊清空資料

最近Material Design Components更新至了1.1.0，其中TextInputLayout新增了不少功能，要怎麼確切使用可以看這篇TextInputLayout，版本記得升級到1.1.0。

今天要記錄的是輸入框末端有一個叉叉圖案，點擊下去，輸入框的文字皆會被清空的效果。

效果如圖

Read More

[Android] TextInputLayout 末端眼睛Icon密碼明碼切換顯示

 最近Material Design Components更新至了1.1.0，其中TextInputLayout新增了不少功能，要怎麼確切使用可以看這篇TextInputLayout，版本記得升級到1.1.0。

今天要記錄的是可以在輸入框EditText輸入框的末端有一個眼睛的Icon，點擊該眼睛，可以切換密碼明碼顯示，記得TextInputLayout的endIconMode與TextInputEditText的inputType都要設定。

效果如圖

Read More

[Android] TextIntputLayout 輸入框開頭加上Icon

最近Material Design Components更新至了1.1.0，其中TextInputLayout新增了不少功能，要怎麼確切使用可以看這篇TextInputLayout，版本記得升級到1.1.0，今天要記錄的是可以在輸入框EditText開頭加上Icon的功能，

效果如圖

Read More

[Android] API 29 Android Q 以上 官方ImageSapn垂直置中 (ALIGN_CENTER)

 前幾天Android Q正式上線了，在API 29中，ImageSpan的VerticalAlignment多了一個Align_Center，也就是之前這篇文章所記錄的功能，可讓ImageSpan在TextView文字中垂直置中，如果Compile SDK設定29或以上，現在可以不用自己寫一個ImageSpan了，直接設定VerticalAlignment為ALIGN_CENTER，就可以囉!

不過如果你的專案Compile SDK還為升級到29的話，想要有這樣的效果的話，可以參考該篇，實現理論方法與在API 29的ImageSpan設定VerticalAlignment為ALIGN_CENTER的源碼是一樣的。

Read More

[Android] TextInputLayout 下方顯示字數限制與提醒文字

之前記錄過TextInputLayout這篇，除了有打字時，hint文字可以跑到EditText上方的功能，還有幾個小功能，今天就來記錄這兩個小功能 ↓

• EditText下方顯示輔助字眼提示

• EditText下方右方出現字數限制提示

xml寫法如下，各設定含意寫在註解

當這樣設定完後，可以發現下方提示與字數限制提示有正常顯示，但當超過字數時，下方提示字眼要怎麼換成錯誤題示字眼呢?

這邊就需要在程式端設定TextInputLayout，在TextInputEditText加上afterTextChanged Listener，當字數超過5或小於5就進行TextInputLayout的error設定，如下

就可以達成上面圖片的效果囉~

Read More

[Android] TextInputLayout 當有文字輸入，hint文字自動跑到上方

Material Design Components正式的1.0.0推出了，來看看其中的TextInputLayout，其中最顯著的效果就是當使用者在EditText輸入文字時，原先hint的文字會跑到較上方的位置，如下圖↓

首先要使用的話，在build.gradle(app)中加上

再來這layout的xml中加上然後打個字就可以有上圖的效果了。

Read More

[Android] 字與字的間距設定 TextView letterSpacing

今天紀錄一下要怎麼調整TextView每個字與字之間的間距呢？
用TextView所提供的letterSpacing即可。

letterSpacing預設為0，最多可設定到小數點第二位，如：0.05，數值越大，間隔越大，也可以設定負數，負數的話，字與字越靠近。

可以透過XML設定或程式碼直接設定

Read More

[Android] Instagram愛心/FB按讚點擊效果實現 (Icon放大旋轉)

 這次來記錄IG 按愛心或FB按讚時，Icon會有動畫效果的模仿，效果以Icon放大並旋轉一點角度的動畫為目標，核心概念透過StateListAnimators來實現這個效果，如下圖。

StateListAnimators可以設定當view是checked/enable/focused/pressed...要呈現的效果，這邊我以最簡單的checked來做，先建立一個CheckBox且放上一個因應checked狀態顯示不同Icon的Selector。

寫一個StateListAnimators的xml，裡面包含了放大與旋轉的數值設定，有需要的可以自行更改動畫時間或數值。

最後，將CheckBox的StateListAnimators指定我們所寫的StateListAnimators，就大功造成了!

資料參考:Creating an Instagram “Like” Animation With StateListAnimators

Read More

[Android] ImageSpan 實現圖示在文字中垂直置中效果

 今天來寫寫關於ImageSpan，透過ImageSpan可以簡單做到在TextView文字中插入圖片。

最簡單的用法如下

可以發現，Icon是貼齊在TextView該行的底部，這邊ImageSpan有verticalAlignment屬性可以設定，預設是ALIGN_BOTTOM，另外一個是ALIGN_BASELINE

效果就如同ALIGN_BASELINE的字面意思，以文字的基底為準，可以看圖明顯看到Icon是貼齊文字的底部。

但屬性就只有這兩種可以設定，那如果想要實現Icon位置處在該行的正中間，該怎麼做呢?

簡單的想法，就是繪製Icon的時候，其位置調整到該行的中間，因此這邊繼承ImageSpan並重寫draw這個function

再來將原本使用ImageSpan改為所寫的VerticalImageSpan，就可以做到ImageSpan垂直置中的效果囉

Read More

[Android] 狀態欄(Status Bar)文字與圖示轉換成灰色

應該有許多人有遇到這樣的問題，UI/UX設計師所設計的畫面中，有時為了配合設計，最上方狀態欄(Status Bar)背景設計為淺色系的，這時狀態欄中的文字與圖示(時間、網路訊號等)系統預設是白色的，會變得十分不顯眼。

在Android 6.0(API 23)之後，有兩種方法可以使狀態欄中的文字與圖示變成灰色的，以配合淺色系的背景色，如下圖↓

第一種方法：透過styles.xml，<item name="android:windowLightStatusBar">true</item>

第二種方法：透過SYSTEM_UI_FLAG_LIGHT_STATUS_BAR，由程式端改變顏色

這邊也寫一個非常簡單的小程式，透過按鈕Button隨即切換狀態欄的背景顏色以及文字、圖示顏色，深色背景搭配預設圖示顏色，淺色背景搭配灰色圖示顏色。

完成圖↓

MainActivity.java
參考資料：Change status bar text color when primaryDark is white
                    Android 6.0狀態欄使用灰色文字與圖示
                    Android M Light and Dark status bar programmatically
完整專案：Solinari GitHub　　　　　

Read More

[Android] SwipeRefreshLayout實現使用者垂直滑動時進行更新

上一次我們透過Volley來取得臺北捷運列車到站資訊，此公開資料是每30秒就更新，我們要如何讓它更新呢?

在許多App上，使用者只須要到頁面的頂端，由上往下滑動，即可進行資料更新的動作，今天我們就來記錄一下，該如何做到這樣的效果。

完成圖↓

透過官方的SwipeRefreshLayout可以很輕鬆地做到這樣的功能，使用上一次的專案，將SwipeRefreshLayout加到「fragmentlist_one.xml」。

fragmentlist_one.xml

然後，修改「FragmentList_One.java」，為SwipeRefreshLayout設置OnRefreshListener，就大功造成啦!

FragmentList_One.java

參考資料：SwipeRefreshLayout
　　　　　Adding Swipe-to-Refresh To Your App
　　　　　Responding to a Refresh Request
完整專案：Solinari GitHub　　　　　

Read More

[Android] 透過Volley發送HTTP Request(使用政府公開資料-臺北捷運資訊)

目前各縣市政府都有提供許多各式各樣的公開資料，那要如何在App上，得到這些資料呢? 

原理與網頁相似，發送Request並接收Response，Android提供了許多方法，像是HttpURLConnection、Volley等，這邊我使用Volley，可以省去一些繁瑣的撰寫，公開資料我使用了臺北市政府資料開放平台-台北捷運列車到站站名，可以得知目前列車進站的站名、該列車終點站更新時間等資訊。

完成圖↓

一樣拿之前專案來繼續實作，要使用Volley我們需要在build.gradle中增加

dependencies {
    ...
    compile 'com.android.volley:volley:1.0.0'
}

修改我們之前RecyclerView放資料的容器「recycler_textview.xml」，改為「recycler_metroinfo.xml」，並新增多個TextView，用來顯示資訊。

recycler_metroinfo.xml

修改「fragmentlist_one.xml」，新增一個ProgressBar，當在請求資料時，有一個loaing圖示，當資料處理完畢，再將資料RecyclerView顯現出來。

fragmentlist_one.xml

再來修改FragmentList_One.java，使用Volley來獲取臺北捷運列車到站資訊。

FragmentList_One.java

最後，修改Adapter「RecyclerViewAdapter.java」。

RecyclerViewAdapter.java

資料來源：Sending a Simple Request
                    Making a Standard Request
完整專案：Solinari GitHub

Read More

[ANDROID] DownloadManager下載APK並自動開啟安裝畫面(Android 6.0 , 7.0皆可運作)

最近在工作上遇到一個需求，供內部使用的APP，由於沒有上架至Google Paly，App有改版或者Bug修復時，使用者無法透過Google Play更新，因此有了App自行下載APK檔並自動開啟安裝畫面的需求(下載的權限驗證不再這裡討論)。

先看完成圖(系統Android 7.0, API 24)↓

在這裡練習的APK(此專案的apk檔-VersionCode為2)下載網址為
https://github.com/SolinariWu/AutomaticallyOpenApk/raw/master/Solinari.apk

上一個例子有一個About的頁面，關於此APP的資訊，我們新增一個Update的按鈕。
about.xml

Android Manifest中加入權限

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

我們透過DownloadManager這個System Service來進行下載的動作，將路徑設置於外部公開空間(Public external storage)，並針對Andriud 6.0以上版本的系統，檢查是否有讀取的權限。
About.java

執行效果如下(可以注意到左上角有下載圖示)↓

這時候，當左上角的下載圖示消失時，我們如果至我們設定下載路徑底下可以發現，APK檔已被成功下載下來了，但這距離我想要的效果還差了許多，在下載過程中，我想要使用者能直接一目瞭然目前的下載進度，而不需要拉下提示欄觀看，那要怎麼實現呢?

先設計一個進度對話框，download_apk_dialog.xml

撰寫一個DialogFragmentHelper.java，用來呼叫DialogFragment
再來，於About.java中撰寫一個類別DownloadObserver，繼承ContentObserver，用來觀察下載進度的變化 再來於About.java中DownloadNewVersion()，開啟進度對話框，並於DownloadManagerEnqueue()註冊ContentObserver(CONTENT_URI的值不能改變)

讓我們來看看效果↓

進度提示框完成了，再來就剩下自動開啟APK安裝畫面了，這裡我們可以選擇當ContentObserver觀察到100%時開啟APK檔，亦或者是設定一個BroadcastReceiver，當收到「ACTION_DOWNLOAD_COMPLETE」即開啟APK安裝畫面，我選擇後者，要選擇後者的話，我們需要暫存DownloadManager下載時所產生的DownloadID，這個ID可以讓我們在Android 6.0以上版本的手機，順利取得APK的Uri，，我們使用SharedPreferences來儲存這個ID值。

撰寫SharedPreferencesHelper.java
撰寫BroadcastReceiver之前，針對7.0以上版本的手機，在取得APK檔的Uri時，需要透FileProvider，才可以正常運作，先在Android Manifest中加入
並於res目錄底下新增一個xml資料夾並新增一個file_paths.xml
撰寫DownloadCompleteReceiver.java
最後，在DownloadManagerEnqueue()中註冊BroadcastReceiver並儲存DownloadID
大功造成!

參考文獻：DownloadManager+MaterialDialog下載進度和6.0安裝APK和"程式未安裝"問題
                    解決 Android N 上 錯誤：android.os.FileUriExposedException
                    Android 6.0 儲存權限
完整專案：Solinari GitHub

Read More

[Android] 撰寫Navigation View(側選單)父類別，應用在所需要的Activity

Google推出Android Design Support Library有非常久的一段時間了，要設計有Material Design的APP也不是一件難事。有許多APP都有使用到Navigation View，中文有人稱為側選單，Play商店、巴哈姆特APP、Twitch App等都有使用，如下圖 ↓

如圖上所顯示的，導覽列有著許多的項目，如果每個項目都要重複寫一次Navigation View的程式碼，重新撰寫Item被點擊的事件，不覺是一件很浪費時間的事嗎?

今天來記錄一個Navigation View的父類別，有需要的使用Navigation View的Activity，繼承這個類別即可。

按慣例，拿上一個專案來進行修改。

先創建一個navigation_drawer.xml

側選單中需要有一些項目，所以我們在menu底下創建一個menu_navigation.xml

其中navItemOne就使用我們之前的ViewPager，第二個About-呈現此APP的資訊，第三個則為出現AlertDialog詢問是否確定登出
為About，創建一個about.xml
要呈現的畫面準備好了，再來就是我們的重點，創建一個父類別，Navigation_BaseActivity.java 在這個BaceActivity中撰寫將側邊欄放入，並針對NavigationItemClick事件進行撰寫
修改MainActivity.java繼承Navigation_BaseActivity，並設置ToolBar標題以及目前位於哪一個項目

創建About.java 讓我們來看看目前的效果

恩..看起還少了點甚麼，Navigation View通常在上方都會有一個區塊顯示帳戶ID或該APP的全名之類的，要做出那樣效果也十分容易。
設計一個navigation_drawer_header.xml
並在Navigation View中加入app:headerLayout="@layout/navigation_drawer_header"
完整效果:

參考文獻：android-navigation-drawer-with-multiple
                    Android帶側滑菜單和ToolBar的BaseActivity

完整專案：Solinari GitHub

Read More

[Android] RecyclerView畫面滑動時，隱藏ToolBar [使用CoordinatorLayout]

有些APP在使用時，當你往下滑動，ToolBar就會隨之隱藏，往上滑時又會出現，這樣的好處是使用者在瀏覽時可以有更大的可視空間。

實做畫面如下圖↓

要呈現這樣的效果，依靠的是Design Support Library中的「CoordinatorLayout」，CoordinatorLayout簡易來說就是當一個View變動的時候，其餘的View也會有特定的移動。

我們拿上一次的專案來進行這次的實做，原先三個Fragment都只有一個輸入框，無法上下滑動，需要來修改一下使其可以進滑動的動作，這裡我使用大多數APP使用來呈現資料的RecyclerView，並搭配CardView來呈現較為特殊的效果。

在Gradle中加入以下:

創建一個recycler_textview.xml，透過Cardview使Textview有不一樣的效果，用來當作RecyclerView放資料的容器，可以自行設計樣式

fragmentlist_one.xml也進行修改，使用RecyclerView元件，並將Fragment的Backgroud改為白色 要使用RecyclerView，需要一個Adapter，建立一個RecyclerViewAdapter.java 修改FragmentList_One.java，使其RecyclerView擁有資料

將原先activity_main.xml的LinearLayout轉換成CoordinatorLayout

如果你直接就這樣執行的話，會發現ToolBar以及TabLayout消失了，我們還需要使用AppBarLayout(一個垂直的LinearLayout，實現了不少關於app bar material design的概念)將ToolBar與TabLayout包覆起來，使其成為AppBarLayout的Children。

並在ToolBar中使用「app:layout_scrollFlags="scroll | enterAlways | snap"」，scrollFlags有「ENTER_ALWAYS」、「ENTER_ALWAYS_COLLAPSED」、「EXIT_UNTIL_COLLAPSED」、「SNAP」等，詳細介紹可至官方文件查看。

以為這樣就完成了嗎?  執行的話你會發現ViewPager有上面有一部分被擋住了，如下圖

原因是因為我們沒有對CoordinatorLayout中的Child view-ViewPager設置Behaviors，於ViewPager中設置「app:layout_behavior="@string/appbar_scrolling_view_behavior"」，activity_main.xml就完整了，趕快執行起來看看成果吧!

參考文獻：How to hide/show Toolbar when list is scrolling (part 3)

　　　　　官方文件-CoordinatorLayout

完整專案：Solinari GitHub

Read More

[ASP.NET][C#] 卡牌記憶遊戲-MemoryGame (結合AngularJS、MS SQL)

今天來展示一個ASP.NET結合AngularJS所寫出來的一個小網頁遊戲，AngularJS程式碼來源主要參考MemoryGame，將其程式碼結合ASP.NET連結MS SQL Server，做出具有排名功能的卡牌記憶遊戲。

這邊就不放上程式碼，有興趣的可至我的GitHub查看。

參考資料：MemoryGame

網頁圖片設計：小橘仔

Read More

[Android] 實現ToolBar依據ViewPager選取的頁面呈現不同的Title與MenuItem

延續上一篇TabLayout的文章，今天要說的是ToolBar，ToolBar前身是ActionBar，比ActionBar來的更加彈性、靈活，ToolBar可以說是每個APP都會使用到的元件，

而部分的APP的ToolBar跟TabLayout一樣會隨著ViewPager所在的功能頁面，呈現不同標題與選項按鈕，我們就沿用上次TabLayout專案，來接著實現這個功能。

先上實作畫面

ToolBar的xml檔
include到要ToolBar出現的畫面中，activity_main.xml
ToolBar中呈現的選項按鈕，於res目錄底下創建menu資料夾，並創建menu的xml檔，這裡我貼出其中一個，可以自行發揮或至底下的GitHub連結有完整專案
那要如何在切換時改變選項按鈕呢?  於TabSelectedListener中，進行判斷即可，透過「getMenu().clear();」、「inflateMenu()」來做切換的動作
MainActivity.java
完整專案:Solinari GitHub

Read More

[Android] 實現TabLayout依據ViewPager選取的頁面呈現不同的Icon

有許多APP都會使用ViewPager，使用者僅需螢幕左右滑動，就可以切換不同的功能需求，而絕大多數的都會有一個Tab列，來提示使用者目前於哪個功能區塊，如圖

Tab列的圖示會根據當前是否選取，而呈現不同的圖示，今天就來紀錄一下如何實做這個功能。

實作畫面

主要使用到ViewPager以及Google所提供的Design Support Library中提供的TabLayout。

要使用TabLayout，首先要在Gradle中加入Design Support Library。

此專案的Gradle文件

主畫面的Layout檔，ViewPager以及TabLayout

那要如何讓Icon隨著是否選取而改變呢? 透過Selector中的「android:state_selected」屬性可以輕鬆做到這項效果，當為true就是被選取時的狀態，要呈現的圖片，透過drawble來設置圖片的路徑，反之，flase就是為非選取的狀態。這邊只貼出一個的程式碼，大家可以舉一反三。
selector_one.xml

ViewPager所使用的Fragment Layout檔，這裡我使用三個不同的Fragment，由於十分類似，所以只貼出其中一個，而在真正實作上，各個Fragment所呈現的畫面大多都是不相同的。

ViewPager與Fragment做搭配所需要的FragmentAdapter，這邊我選擇使用FragmentPagerAdapter
FragmentList_One.java 如想要在各個Fragment實作各項功能，可以自行增加 MainActivity.java
完整專案:Solinari GitHub

Read More

[Android] Activity傳值給DialogFragment、自定義DialogFragment

DialogFragment在Android APP上可以時常看到，常以提視窗、警示窗等樣式出現，今天來紀錄一下在Activity使用DialogFragment要如何傳值並使其呈現在DialogFragment上，以及如何使用自定義的Dialog樣式。

自定義Dialog樣式 .xml  (參考:stackoverflow custom Dialog)

其中ImageView中使用的Icon來自於Google Icon，此網站有許多Icon，並有為各個平台做處理，Android的話就有提供hdpi、mdpi、xhdpi等解析度的圖片。

DialogFragmentHelper.java

MainActivity.java

Read More