（原創）高仿360雲盤android端的UI實現

前些日子幾大互聯網巨頭展開了一輪網盤空間大戰。一會兒從G級別提升到了T級別。之後誰的空間沒有1T估計都很差意思開口了~~~

 

試用了一下360雲盤的客戶端，比較小清新（不是給360打廣告~~~）。恰好UI這一塊是我最不擅長的，因而萌發了練習模仿它的UI的念頭~~~順便把複習一下自定義控件的使用。

如下是完成的效果圖，左邊是官方的，右邊是我模仿的：

 

    

   

還挺像的吧~~~

先介紹一個神器：UI Automator Viewer

這個SDK的tools文件夾或DDMS中均可以找到。

它能夠很方便地查看UI的視圖層級和UI控件的具體位置與實現。至關好用，有了它咱們就不用去猜官方究竟是怎麼實現的、使用什麼佈局了。

 

具體實現

先從登陸頁面開始： 

這個頁面是比較簡單的，從工具來看它的輸入框是這麼實現的：

 

一會兒就清晰了。邊框的線能夠用一個「NinePath」圖片來作：

 

關於NinePath的用法，能夠查看官方教程：

http://developer.android.com/intl/zh-cn/tools/help/draw9patch.html

 

接下來第就是自動定義按鈕樣式了。

首先，直接用一個背景圖片確定是不夠的，由於這樣就沒有按下的效果了。也就是說咱們要把一系列的圖片組成起來，讓它們根據控件的不一樣狀態去選擇。好比咱們能夠這麼寫：

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/btn_add_accounts_pressed" android:state_pressed="true"/>

    <item android:drawable="@drawable/btn_add_accounts_normal"/> 

</selector>

 

仍是比較好理解的，但有一點要注意，通常要在最後給一個沒有android:state_xxx的item。這個item表示當前面的狀態都不匹配時，使用這個item。

這個xml通常放在res/drawable目錄下。而後咱們就它設置到按鈕的背景上便可。

 

關於style的使用：

之前我寫佈局的時候是比較少用style的，但這顯然是不利的。由於android引入style的目的就在於，提供一個相似於HTML的編寫方式，讓樣式能夠重複使用，減小重複代碼。並且對於樣式的修改，只須要改動一處便可。

我我的的以爲，若是一個樣式只用到一次就不必把它抽到styles.xml文件中，由於抽出樣式會大大妨礙咱們閱讀佈局文件的。但若是這個樣式被重複使用了，那就頗有必要了。

好比剛剛的邊框，就能夠寫到一個style裏面：

<style name="accountInputBorder">

         <item name="android:layout_width">match_parent</item>

         <item name="android:layout_height">36dp</item>

         <item name="android:layout_marginLeft">18dp</item>

         <item name="android:layout_marginRight">18dp</item>

         <item name="android:background">@drawable/login_border</item>

         <item name="android:gravity">center_vertical</item>

         <item name="android:paddingLeft">10dp</item>

         <item name="android:orientation">horizontal</item>

</style>

 

接下來是重點：

    

用到了SlidingMenu能夠github上的一個開源項目：

https://github.com/jfeinstein10/SlidingMenu

 

左右切換能夠用android-support-v4.jar提供的ViewPager，配合Fragment。

 

上邊的指示器，360是這麼實現的：

 

我估計它是把下邊的藍色指示條用一個RelativeLayout來盛放了。但這個是能夠不用的。好比個人實現：

 

能夠用一個TextView就實現，對於要讓文字居中，只須要一個android:gravity=」center」便可。根據Android官方文檔，減小視圖的層級有利於程序的性能。

 

至於標識的切換，咱們只須要給ViewPager設置一個OnPageChangeListener，而後在具體的方法中判斷當前頁面的編號，並改變相應的title顏色。

 

接下來我遇到的第一個麻煩，我該如何肯定

 

的高度呢？（百度一下「gridview 高度」，發現好多人遇到這個問題）

顯然我是沒有辦法使用「硬編碼」的方式來實現的，由於android設備的屏幕分辨率太多，屏幕比例也不少奇葩的。

最後我只能經過動態計算的方式來實現：

第一個dp與px的轉化，dp（也叫dip density-independent pixels），引入這個單位的緣由應該是考慮到屏幕分辨率的緣由，好比同一個100px * 100px的控件，在相同尺寸分辨率爲320p和1080p上看，大小相差不少的。而px與dp是存在必定的比例關係的，若是分辨率爲160，那麼就是1px = 1dp。若是分辨率爲240，就是1.5px = 1dp。具體的換算和理詳細的介紹，請自選百度。

在代碼在，咱們只須要getResources().getDisplayMetrics().density，就能夠得到這個比例係數了。

 

ListView其實沒什麼好說的，基本上都是經過的寫法了，寫過一次就知道怎麼用了~~~

 

SlidingMenu的使用，github上的SlidingMenu是很容易用的，官方的Demo也至關給力。看一下再試一下，基本知道怎麼用了。好比在個人工程中：

slidingMenu = new SlidingMenu(this);

slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE); // 滑動方式

slidingMenu.setShadowDrawable(R.drawable.shadow_right); // 陰影

slidingMenu.setShadowWidth(30); // 陰影寬度

slidingMenu.setBehindOffset(80); // 前面的視圖剩下多少

slidingMenu.setMode(SlidingMenu.RIGHT); // 左滑出不是右滑出

slidingMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);

slidingMenu.setMenu(R.layout.menu_frame); // 設置menu容器

FragmentManager fm = getSupportFragmentManager();

fm.beginTransaction().replace(R.id.menu_frame, new MenuFragment()).commit();

自定義進度條：

進度條和按鈕不一樣，它是有兩層的，使用的是layer-list這種drawable文件。它根據id來設置到不一樣的位置：

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item

        android:id="@android:id/background"

        android:drawable="@drawable/progress_bar_bg">

    </item>

    <item

        android:id="@android:id/progress"

        android:drawable="@drawable/progress_bar_progress"/>

</layer-list>

 

關於SlidingMenu的使用：

SlidingMenu是一個庫項目，在咱們的項目中引用，只須要在Properties中Add便可。

 

源碼下載：

http://pan.baidu.com/share/link?shareid=1000621439&uk=1812042723