Android UI之原生——(1)、Android UI入门及常见属性与现象

Android UI之原生——(1)、Android UI入门及常见属性与现象

导读 :Android UI入门,对于很多人来讲都是比较简单的,教程也多如牛毛,但是这篇绝对和其他的不一样。从接触android开发就注定UI开发是一个一直需要研究的课题,简单的原生UI使用可能你已经掌握,也可能发现某些组件有着一些不爽,但是只要你搞懂原因,就可以了。实在觉得用着不爽,那么就让自己的UI开发能力变强,然后自己写个好点的。android UI开发需要先学会使用原生UI,然后在学会使用开源UI,最后才是自定义UI。按照这个顺序才会不断提升android UI开发的能力,一定要循序渐进。


一、一起来看看android UI

1、xml和code分别画出UI

  1. xml的UI示例(必须了解XML知识)

    示例:res/layout/activity_main.xml

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
         <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:text="这是一个TextView" />
    </LinearLayout>
    

    1、layout的组成:跟标签可以是任意组件,但是只有继承ViewGroup的组件才能包含子控件

    2、命名空间:android自带的命名空间,当然自定义组件的时候,需要自定义命名空间

    3、android的组件属性:基本上都是按照英文单词定义的,所以大部分都是很好理解,只需要多多练习就会记住

  2. code的UI示例(必须熟悉java语言)

    示例:com/snicesoft/testlayout/MainActivity.java

    public class MainActivity extends Activity{
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            //setContentView(R.layout.activity_main);
            LinearLayout layout = new LinearLayout(this);
            setContentView(layout);
            TextView textView = new TextView(this);
            textView.setText("我是代码创建的TextView");
            layout.addView(textView);
        }
    }
    

    这里只是简单的例子。当然一般情况,xml实现的布局都可以通过java代码实现,但是尽管这样,还是推荐使用xml控制布局,这样灵活性比较好,能够分离UI。

    可能大家忽略一个问题,eclipse、android studio等IDE都提供了可视化界面开发,为啥没提到。这里说明下,可视化操作往往不能满足更加细致的UI制作,只能简单生成控件的轮廓代码,如果需要制作精细的UI,那么建议还是手动编写xml,当然也不是很难,毕竟代码提示还是很方便的。

2、怎么给UI上色及资源适配

  1. color的使用

    color基本上都需要存放在res\values\colors.xml或者res\color\

    colors.xml

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    
        <color name="menu_txt_default">#333333</color>
        <color name="menu_txt_checked">#48D1CC</color>
    
    </resources>
    
  2. drawable的使用
    1. drawable

      只需要将图片copy到res/drawable-xxxx目录下

      xml中使用@drawable/xxx

      java中使用R.drawable.xxx

    2. drawable适配:drawable-xxx

      ldpi:240x320

      mdpi:320x480

      hdpi:480x800、480x854

      xhdpi:至少960*720

      xxhdpi:1280×720

      注意:图片仅支持png和jpg

  3. 国际化处理(多语言)

    国际化处理主要体现在res上,解决办法

    values文件夹:values-国家语言

    比如:

    美国英文环境:values-en-rUS

    中文环境为:values-zh

    大陆地区中文环境: values-zh-cn

    具体更多的请查询Locale这个类

    图片资源以及其他资源也相同的配置

2、分辨率有大有小,怎么办

分辨率适配是android开发必备的技能。

一般的处理方式是:一份layout,通过不同分辨率的values中定义dimens处理不同分辨率需要的组件尺寸。

1. 常用布局

LinearLayout:线性布局,垂直和水平设置,使用比较多

RelativeLayout:相对布局,使用比较多

FrameLayout:层布局,多层View叠加处理。

TableLayout:表格布局,就像html中的table一样

2. 多使用dimens

3、UI开发最佳规范

  • layout尽量用最少的控件完成需求,避免重复
  • 布局复杂,多使用<inflate>
  • id命名规范:组件缩写+业务名,下面是部分组件缩写
    • LayoutView:lv
    • RelativeView:rv
    • TextView:tv
    • ImageView:iv
    • ImageButton:im
    • Button:btn
  • 多使用style,学会在layout中提取相同的style
  • .9图的制作
  • 杜绝使用px
  • layout中多使用strings.xml、dimens.xml、colors.xml中的值

二、常用的组件属性手册

1、通用属性

android命名空间常用属性

- 宽度:layout_width

取值:wrap_parent(根据内容动态计算)、match_parent(占满父布局)和具体的dp

平台 android iOS html
layout_width width width

- 高度:layout_height

取值:wrap_parent、match_parent和具体的dp

平台 android iOS html
layout_height height height

- layout_gravity

平台 android iOS html
layout_gravity

- gravity

平台 android iOS html
gravity

- 距离自身控件间距:padding

平台 android iOS html
padding padding

- paddingLeft

平台 android iOS html
paddingLeft padding

- paddingTop

平台 android iOS html
paddingTop padding

- paddingRight

平台 android iOS html
paddingRight padding

- paddingBottom

平台 android iOS html
paddingRight padding

- 距离父控件间距:margin

平台 android iOS html
margin margin

- marginLeft

平台 android iOS html
marginLeft margin

- marginTop

平台 android iOS html
marginTop margin

- marginRigth

平台 android iOS html
marginRigth margin

- marginBottom

平台 android iOS html
marginBottom margin

2、LinearLayout

  • 方向:orientation

    取值:vertical或horizontal

平台 android iOS html
orientation

3、RelativeLayout

RelativeLayout主要属性配置其实是在其子控件中配置,一下是常用的属性

  • align系列

    layout_alignParentLeft:相对父控件左边,取值true或false

    layout_alignParentTop:相对父控件顶部,取值true或false

    layout_alignParentRight:相对父控件右边,取值true或false

    layout_alignParentBotton:相对父控件底部,取值true或false

    layout_alignLeft:相对哪一个控件的左边,取值id

    layout_alignTop:相对哪一个控件的顶部,取值id

    layout_alignRight:相对哪一个控件的右边,取值id

    layout_alignBottom:相对哪一个控件的底部,取值id

  • center系列

    layout_centerHorizontal:水平居中,取值true或false

    layout_centerVertical:垂直居中,取值true或false

    layout_centerInParent:水平和垂直居中,等价于上面两个都为true,取值true或false

三、自定义组件属性使用

1、自定义组件

  • 组合控件:将现成的控件绑定一起组合成新的组件,最简单的方式是通过inflate layout实现
  • 自定义属性控件:为了完善自定义组件的可配置性,通过定义属性,可以在layout中实时看到想要的效果。

2、自定义组件的打包

  • 纯java编写的组件:直接打包jar
  • 组件包含layout布局:lib方式或者(jar+res)

四、原生组件常见现象

1、Adapter的getView重复调用

比如ListView:当ListView的height设置为wrap_parent,则会出现getView重复执行;设置match_parent则正常

2、ScrollView、ListView、GridView之间的嵌套

嵌套常会出现ListView或者GridView的高度只显示一行,需要重写onMeasure方法

3、ListView、GridView等滑动View的overScrollMode

默认overScroll是有颜色动画,本身是实现了类似iOS的反弹效果,但是为了避让iOS的反弹效果专利,将其隐藏了。

五、最后

此博文将会不定期更新,因时间和思考不全面,当考虑到了将会添加进来,希望大家多多提意见。

时间: 2024-08-05 11:12:10

Android UI之原生——(1)、Android UI入门及常见属性与现象的相关文章

android内存优化5—对界面UI的优化(2)

在一个应用程序中,一般都会存在多个Activity,每个Activity对应着一个UI布局文件.一般来说,为了保持不同窗口之间的风格统一,在这些UI布局文件中,几乎肯定会用到很多相同的布局.如果我们在每个xml文件中都把相同的布局都重写一遍,一个是代码冗余,可读性很差:另一个是修改起来比较麻烦,对后期的修改和维护非常不利.所以,一般情况下,我们需要把相同布局的代码单独写成一个模块,然后在用到的时候,可以通过<include /> 标签来重用layout的代码. 常见的,有的应用在最上方会有一个

Android:日常学习笔记(8)———探究UI开发(5)

Android:日常学习笔记(8)---探究UI开发(5) ListView控件的使用 ListView的简单用法 public class MainActivity extends AppCompatActivity { private String[] data={"Apple","Banana","Orange","Watermelon","Pear","Grape","

android内存优化4—对界面UI的优化(1)

在Android应用开发过程中,屏幕上控件的布局代码和程序的逻辑代码通常是分开的.界面的布局代码是放在一个独立的xml文件中的,这个文件里面是树型组织的,控制着页面的布局.通常,在这个页面中会用到很多控件,控件会用到很多的资源.Android系统本身有很多的资源,包括各种各样的字符串.图片.动画.样式和布局等等,这些都可以在应用程序中直接使用.这样做的好处很多,既可以减少内存的使用,又可以减少部分工作量,也可以缩减程序安装包的大小. 下面从几个方面来介绍如何利用系统资源. 1)利用系统定义的id

android内存优化6—对界面UI的优化(3)

本篇博文主要讨论一下复杂界面中常用的一种技术--界面延迟加载技术. 有时候,我们的页面中可能会包含一些布局,这些布局默认是隐藏的,当用户触发了一定的操作之后,隐藏的布局才会显示出来.比如,我们有一个Activity用来显示好友的列表,当用户点击Menu中的"导入"以后,在当前的Activity中才会显示出一个导入好友的布局界面.从需求的角度来说,这个导入功能,一般情况下用户是不使用的.即大部分时候,导入好友的布局都不会显示出来.这个时候,就可以使用延迟加载的功能. ViewStub是一

Android性能调优篇之UI布局优化

详细内容请查看我的简书地址:Android性能调优篇之UI布局优化 或者我的个人博客地址:Android性能调优篇之UI布局优化

看大家android界面设计是拿Android Design UI Kit设计的,不直接在eclipse里设计,但是UI KIT怎么用呢

============问题描述============ Android 4.4 Design UI Kit (Nexus 4 version)打开十psd格式的,看网上说吧psd里面自己需要用到的东西保存为png格式,然后是要把png格式的图片当做android控件的背景使用? 其他类似的工具呢? ============解决方案1============ 一切不问是不是就问为什么的都是耍流氓,不知道你是怎么得出"android界面设计是拿Android Design UI Kit设计的,不直

Android 模仿QQ空间风格的 UI

本文内容 环境 演示模仿QQ空间风格的UI 虽然这个 UI 跟现在的QQ空间有点差别,但是也能学到很多东西. 下载 Demo 环境 Windows 7 64 位 Eclipse ADT V22.6.2,Android 4.4.3 SAMSUNG GT-I9008L,Android OS 2.2.2   演示模仿QQ空间风格的UI 虽然这个 UI 跟现在的QQ空间有点差别,但是也能学到很多东西.比如, 当点击"加号"时的效果是如何实现的: 当点击"我的空间动态"时的效

Android:日常学习笔记(8)———探究UI开发(2)

Android:日常学习笔记(8)---探究UI开发(2) 对话框 说明: 对话框是提示用户作出决定或输入额外信息的小窗口. 对话框不会填充屏幕,通常用于需要用户采取行动才能继续执行的模式事件. 提示: Dialog 类是对话框的基类,但您应该避免直接实例化 Dialog,而是使用下列子类之一: AlertDialog此对话框可显示标题.最多三个按钮.可选择项列表或自定义布局. DatePickerDialog 或 TimePickerDialog此对话框带有允许用户选择日期或时间的预定义 UI

Android学习路线(二十二)运用Fragment构建动态UI——构建一个灵活的UI

先占个位置,下次翻译 :p When designing your application to support a wide range of screen sizes, you can reuse your fragments in different layout configurations to optimize the user experience based on the available screen space. For example, on a handset devi