您的位置:首页 > 产品设计 > UI/UE

Android UI设计技巧

2014-04-19 12:14 302 查看
原创:山岭巨人博客

1.使用include标签实现包含共享UI设计

(1)创建新的布局文件 title_layout.xml,里面包含共享内容的布局

(2)layout属性:其对应抽取出来的共享的布局内容




<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:background="@drawable/share_background"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">
   <include layout="@layout/title_layout"></include>
</LinearLayout>





2.使用shapes实现渐变效果

(1)创建新的drawable的xml文件




<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
   <gradient android:startColor="#FFFF0000" android:endColor="#80FF00FF" 
            android:angle="270"/> 
   <padding android:left="50dp" android:top="20dp" 
            android:right="7dp" android:bottom="7dp" /> 
   <corners android:radius="8dp" /> 
</shape>





gradient 产生颜色渐变 android:angle 从哪个角度开始变 貌似只有90的整数倍可以

android:shape="rectangle" 默认的也是长方形

corners表示是有半径

(还有很多其它参数)

(2)设置android:background属性

android:background="@drawable/share_background"


3.灵活使用styles.xml

(1)在res/values目录下新建一个style.xml,增加<resource>根节点




<?xml version="1.0" encoding="utf-8"?>
<resources>
 <style name="SpecialText" parent="@style/Text">
   <item name="android:textSize">18sp</item>
   <item name="android:textColor">#008</item>
 </style>

 <style name="button_style">
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">#FFFFFFFF</item>
    <item name="android:layout_width">100.0dip</item> </style>
</resources>





(2)设置style属性

<EditText id="@+id/text1"
 style="@style/SpecialText"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="Hello, World!" />


现在这个EditText组件的所表现出来的风格就为我们在上边的XML文件中所定义的那样。
(补充:主题(theme)和style一样,也是在style.xml内申明,也是同样方式引用,不同的是通过在AndroidManifest.xml中定义的<application>和<activity>元素中使用到整个程序或者某个activity,但是主题不能用到某一个单独的view里。)

4.自定义按钮显示效果

(1)在drawable中创建新的xml文件--mybutton.xml文件。




<item android:state_window_focused="false" android:drawable="@color/transparent" /> 

    <!-- Even though these two point to the same resource, have two states so the drawable will invalidate itself when coming out of pressed state. 注意这句话--> 

    <item android:state_focused="true" android:state_enabled="false" 
        android:state_pressed="true" 
        android:drawable="@drawable/selector_background_disabled" /> 
    <item android:state_focused="true" android:state_enabled="false" 
        android:drawable="@drawable/lselector_background_disabled" /> 

    <item android:state_focused="true" android:state_pressed="true" 
        android:drawable="@drawable/selector_background_transition" /> 
    <item android:state_focused="false" android:state_pressed="true" 
        android:drawable="@drawable/selector_background_transition" /> 

    <item android:state_focused="true" 
        android:drawable="@drawable/selector_background_focus" /> 

</selector>





(2)在构造的layout中引用这个xml

<ImageButton 
android:id="@+id/ImageButton01" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:background="@drawable/mybutton"> 
</ImageButton>


5.实现无失真图片拉伸(NinePatch图片处理)

使用draw9patch.bat工具创建 .9.png图片
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: