* 在項目中,對UI的控件大小、顏色、背景樣式做了一些定義,在app/src/main/res目錄下。以下是一些常用的UI設置值。
1. 大小(../values/dimens.xml)
~~~
<!--距離 new standard-->
<dimen name="resp_stroke_width">2dp</dimen>
<dimen name="mini_margin">4dp</dimen>
<dimen name="smaller_margin">6dp</dimen>
<dimen name="base_margin_padding">8dp</dimen>
<dimen name="dialog_margin">10dp</dimen>
<dimen name="small_margin">12dp</dimen>
<dimen name="normal_margin">16dp</dimen>
<dimen name="large_margin">24dp</dimen>
<dimen name="bigger_margin">32dp</dimen>
<dimen name="dialog_left_right_margin">36dp</dimen>
<dimen name="call_item_height">40dp</dimen>
<dimen name="biggest_margin">48dp</dimen>
<dimen name="item_height">56dp</dimen>
<dimen name="item_chatlist_margin">80dp</dimen>
<dimen name="dialog_normal_width">280dp</dimen>
<!--側邊導航欄icon大小-->
<dimen name="design_navigation_icon_size">20dp</dimen>
<!-- 字體大小 -->
<dimen name="mini">10sp</dimen>
<dimen name="smaller">12sp</dimen>
<dimen name="md_small">13sp</dimen>
<dimen name="small">14sp</dimen>
<dimen name="regular">15sp</dimen>
<dimen name="medium">16sp</dimen>
<dimen name="md_big">17sp</dimen>
<dimen name="big">18sp</dimen>
<dimen name="bigger">22sp</dimen>
<dimen name="large">24sp</dimen>
<dimen name="biggest">32sp</dimen>
<dimen name="small_title_size">21sp</dimen>
~~~
2. 顏色(../values/color.xml)
~~~
//主色
<color name="base_blue">#33A868</color>
<color name="bar_color">#FF128446</color>
<color name="base_blue_translucent">#a033A868</color>
<color name="base_blue_qtr_transparent">#4033A868</color>
//輔主色
<color name="second_base_color">#FFA300</color>
//字體顏色
<color name="new_text_color_first">#DD000000</color>
//字體輔色
<color name="new_text_color_second">#8A000000</color>
//黑色下劃線
<color name="new_line_black_border">#1f000000</color>
<color name="new_line_white_border">#1fFFFFFF</color>
<color name="status_bar_bg">#33000000</color>
<color name="forbid_click_color">#61000000</color>
<color name="input_bg">#3AC077</color>
<color name="progressbar_bg">#E2F5EA</color>
<color name="progressbar_progress">#8ADBAE</color>
<color name="progressbar_thumb_first">@color/progressbar_progress</color>
<color name="progressbar_thumb_second">#808ADBAE</color>
<color name="sliding_menu_bg">#373E39</color>
~~~
3. 背景樣式(../drawable、../drawable-v21)
① drawable
| 引用文件 | 釋義 |
| --- | --- |
| account_btn.xml | 主色弧角背景 |
| circle_translucent_bg.xml | 圓形主色半透明背景 |
| white_oval_bg.xml.xml | 圓形白色背景 |
| green_et_border.xml | 白黃下劃線selector |
| seekbar_music_style.xml | 歌曲進度條樣式 |
| seekbar_style.xml | 其他SeekBar進度條樣式 |
| seekbar_thumb.xml | SeekBar拖動點樣式 |
| c_back_down.xml | 回退鍵樣式 |
②drawable-v21,該目錄下是針對Android 5.0+做的設配
| 引用文件 | 釋義 |
| --- | --- |
| selector_view_bg.xml | 半透明主色矩形波紋效果 |
| selector_view_bg_white.xml | 白色矩形波紋效果 |
| selector_circle_view_bg.xml | 半透明主色圓形波紋效果 |
| selector_white_circle_view_bg.xml | 白色圓形波紋效果 |
* 另外,還有一些常用的自定義View放在`com.lingju.assistant.view`包下。
| 名稱 | 釋義 |
| --- | --- |
| VoiceWaveComponent | 主界面話筒 |
| VoiceInputComponent | 備忘、提醒功能頁話筒 |
| VoiceComponent | 導航頁面話筒 |
| CommonDialog | 通用對話框 |
| CommonEditDialog | 編輯對話框 |
| LingjuSwipeRefreshLayout | 上、下拉刷新控件 |
| com.lsjwzh.widget.materialloadingprogressbar.CircleProgressBar | 環形進度條 |
| com.wdullaer.materialdatetimepicker.date.DatePickerDialog | 日期選擇器 |
| com.wdullaer.materialdatetimepicker.time.TimePickerDialog | 時間選擇器 |
* * * * *
* **關于手機頭部狀態欄**
由于在values-v21/styles.xml設置了`<item name="android:windowTranslucentStatus">true</item>`, 會使頁面內容延伸到狀態欄。所以當開發者新建一個Activity頁面時,若頁面浸入了狀態欄,需要在Activity的布局文件中,在最頂部設置一個View。
~~~
<View
android:id="@+id/status_bar"
android:layout_width="match_parent"
android:layout_height="25dp"
android:background="@color/bar_color"/>
~~~
然后在Activity的onCreate( )中,setContentView( )之后,動態設置該View的高度模擬狀態欄。
~~~
//設置模擬狀態欄的高度
ViewGroup.LayoutParams layoutParams = mStatusBar.getLayoutParams();
layoutParams.height = ScreenUtil.getStatusBarHeight(this);
mStatusBar.setLayoutParams(layoutParams);
~~~