5.UI设置
<br/><p>
* 在项目中,对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);
~~~