Android开源:BlurLockView - 带毛玻璃效果的锁屏控件
LeeHoadley
8年前
<h2>BlurLockView</h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/accb95d0c02e4cd6efe285c9bd9f0d8e.png"> <img src="https://simg.open-open.com/show/28b79755392f697f07fbdd514b01951d.png"> <img src="https://simg.open-open.com/show/3572e793775256552d27e2b30985b70f.png"> <img src="https://simg.open-open.com/show/08b9b84eed4b7d00f37945f8038f6ca4.png"> <img src="https://simg.open-open.com/show/4322bd8bfb925cad38fb7fabd728db4f.png"> <img src="https://simg.open-open.com/show/4e4b58d6bc23a794ce37b2185bf5c9e7.png"> <img src="https://simg.open-open.com/show/6a2dc27453dcf6607863903cb27a15f0.png"> <img src="https://simg.open-open.com/show/d8b7ff01db57e9eec461c399fd7d00db.png"></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/0ec9638a214cda8f8c7c2cb377b15ccd.gif"></p> <p>Lock view with blur effect. Easy to customise.</p> <h2><a href="/misc/goto?guid=4959729946460467358" rel="nofollow,noindex">中文文档</a></h2> <h2>Note</h2> <ol> <li>The blur effect comes from500px-android-blur.</li> <li>More animations for showing or hiding the BlurLockView will be added.</li> <li>In the demo, I useMaterial-Dialogs for convenient.</li> </ol> <h2>Usage</h2> <p><a href="/misc/goto?guid=4959729946557701496" rel="nofollow,noindex">Demo</a></p> <p><a href="/misc/goto?guid=4959729946641995468" rel="nofollow,noindex">Gradle</a></p> <p><a href="/misc/goto?guid=4959729946722466556" rel="nofollow,noindex">Easy to Use</a></p> <p><a href="/misc/goto?guid=4959729946805331785" rel="nofollow,noindex">Show and Hide</a></p> <p><a href="/misc/goto?guid=4959729946898150912" rel="nofollow,noindex">Listeners</a></p> <p><a href="/misc/goto?guid=4959729946982633398" rel="nofollow,noindex">Blur Effect</a></p> <p><a href="/misc/goto?guid=4959729947070052059" rel="nofollow,noindex">Keyboard</a></p> <p><a href="/misc/goto?guid=4959729947147022381" rel="nofollow,noindex">Text</a></p> <p><a href="/misc/goto?guid=4959729947237522614" rel="nofollow,noindex">Font</a></p> <p><a href="/misc/goto?guid=4959729947321340270" rel="nofollow,noindex">Style</a></p> <p><a href="/misc/goto?guid=4959729947405353147" rel="nofollow,noindex">Incorrect Password</a></p> <h3>Demo</h3> <p>Try demo here:</p> <p><a href="/misc/goto?guid=4959729947487424868" rel="nofollow,noindex">Download from Fir</a></p> <p><a href="/misc/goto?guid=4959729947558000243" rel="nofollow,noindex">Download from Github</a></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/730dd5cba5d4f098218de1518f8a1055.png"></p> <p>You can get all about BlurLockView from the demo.</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/d09b66f6d30cf01f4bf2544537b8777a.png"> <img src="https://simg.open-open.com/show/ad13cd506da5721bd74b8dff70eb5fa7.png"></p> <h3>Gradle</h3> <p>Add this to build.gradle:</p> <pre> <code class="language-java">dependencies { ... compile 'com.nightonke:blurlockview:1.0.0' ... }</code></pre> <h3>Easy to Use</h3> <p>Add the xml code:</p> <pre> <code class="language-java"><com.nightonke.blurlockview.BlurLockView android:id="@+id/blurlockview" android:layout_width="match_parent" android:layout_height="match_parent" /></code></pre> <p>Notice that you should set the BlurLockView to cover the view than need to be blured.</p> <p>Add this to initialize the BlurLockView:</p> <pre> <code class="language-java">// Set the view that need to be blurred blurLockView.setBlurredView(imageView1); // Set the password blurLockView.setCorrectPassword(getIntent().getStringExtra("PASSWORD"));</code></pre> <h3>Show and Hide</h3> <p>You can choose duration, direction and ease type to show or hide the BlurLockView. For instance, the gif at the start of readme shows as ShowType.FADE_IN with 1000ms and HideType.FADE_OUT with 1000ms. You can check all the directions and ease types in the demo above.</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/f94829122ea93fc8cfc14e4ba3df759e.gif"></p> <h3>Listeners</h3> <p>BlurLockView.OnPasswordInputListener</p> <pre> <code class="language-java">@Override public void correct(String inputPassword) { // the input password is correct // you can hide the BlurLockView, for example } @Override public void incorrect(String inputPassword) { // the input password is incorrect } @Override public void input(String inputPassword) { // the password is being input }</code></pre> <p>BlurLockView.OnLeftButtonClickListener</p> <pre> <code class="language-java">@Override public void onClick() { // The left button is being clicked }</code></pre> <p>Implements the listeners above and then:</p> <pre> <code class="language-java">blurLockView.setOnLeftButtonClickListener(this); blurLockView.setOnPasswordInputListener(this);</code></pre> <p>Notice that the right button is set as "Backspace" usually, so there is not OnRightButtonClickListener.</p> <h3>Blur Effect</h3> <p>You can set the effect of blur with 3 parameters.</p> <p>1. <strong>DownsampleFactor</strong> , with setDownsampleFactor(int downsampleFactor) , the smaller, the clearer.</p> <p>2. <strong>BlurRadius</strong> , with setBlurRadius(int blurRadius) , the smaller, the clearer.</p> <p>3. <strong>OverlayColor</strong> , with setOverlayColor(int color) , to change the overlay color of BlurLockView.</p> <p>Examples:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/5f3fa1d7936207832a30e4e40f53600f.png"> <img src="https://simg.open-open.com/show/ce75daaa5d750edc453cd478577c01d5.png"></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/d00836ddd6e99b1b59f197c59ffe7e0f.png"> <img src="https://simg.open-open.com/show/5f25f028d0f7e9d35e5e6675e1545eb5.png"></p> <h3>Keyboard</h3> <p>You can use different keyboard to get different password.</p> <pre> <code class="language-java">setType(Password type, boolean smoothly);</code></pre> <p>Choose Password.NUMBER (default) or Password.TEXT and whether change password type smoothly. Notice that the password with text is case-insensitive(I will improve this).</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/d587cfb1acef56ddf6fad8eee3cf8a38.gif"></p> <h3>Text</h3> <ol> <li>Set the text of title with setTitle(String string) .</li> <li>Set the text of left button with setLeftButton(String string) .</li> <li>Set the text of right button with setRightButton(String string) .</li> </ol> <h3>Font</h3> <p>You can set all the font of text with setTypeface(Typeface typeface) .</p> <h3>Style</h3> <p>1.Set the background of buttons in Password.TEXT with setSmallButtonViewsBackground(int id) . The default resource drawable is:</p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="true" > <shape android:shape="oval" > </shape> </item> <item android:state_focused="true"> <shape android:shape="oval" > <stroke android:width="1dip" android:color="@color/default_button_press" /> <solid android:color="@android:color/transparent"/> </shape> </item> <item > <shape android:shape="oval" > <stroke android:width="1dip" android:color="@color/default_button_press" /> <solid android:color="@android:color/transparent"/> </shape> </item> </selector></code></pre> <p>2.Set the click effect of buttons in Password.TEXT with setBigButtonViewsClickEffect(int id) . The default resource drawable is:</p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item > <shape android:shape="oval" > <solid android:color="@color/default_button_press"/> </shape> </item> </selector></code></pre> <p>3.When you click the buttoms in Password.TEXT, the effect above will disappear and you can set the duration by setSmallButtonViewsClickEffectDuration(int duration) .</p> <p>4.Similarly, you can set the 3 styles of buttons in Password.NUMBER like above with setBigButtonViewsBackground(int id) , setBigButtonViewsClickEffect(int id) and setBigButtonViewsClickEffectDuration(int duration) .</p> <p>5.Try to set the color of all the text with setTextColor(int color) .</p> <p>6.You can get the widgets in BlurLockView by:</p> <p>1. public TextView getTitle() {return title;} to get the title.</p> <p>2. public TextView getLeftButton() {return leftButton;} to get the left button.</p> <p>3. public TextView getRightButton() {return rightButton;} to get the right button.</p> <p>4. public BigButtonView[] getBigButtonViews() {return bigButtonViews;} to get the 10 number buttons in array.</p> <p>5. public SmallButtonView[][] getSmallButtonViews() {return smallButtonViews;} to get all the text buttons in array. Notice that some buttons in the array is null. you can find all the real buttons by this:</p> <pre> <code class="language-java">private final char CHARS[][] = { {'1', '2', '3', '4', '5', '6', '7', '8', '9', '0'}, {'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'}, { 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L' }, { 'Z', 'X', 'C', 'V', 'B', 'N', 'M' } };</code></pre> <h3>Incorrect Password</h3> <p>BlurLockView counts for incorrect input times. You can use getIncorrectInputTimes() to get the times and use setIncorrectInputTimes(int incorrectInputTimes) to reset the times.</p> <h2>Versions</h2> <h3>1.0.0</h3> <h2>Todo</h2> <ol> <li>More animations.</li> <li>Change the Password.TEXT to case-sensitive with other signals.</li> </ol> <h2>License</h2> <pre> <code class="language-java">Copyright 2016 Nightonke Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.</code></pre> <p> </p> <p> </p>