配色: 字号:
Android之UI设计技巧
2012-11-19 | 阅:  转:  |  分享 
  
AndroidUI设计技巧1、页面设计1.1、TabHost以及TabActivity的使用使用RadioGroup和RadioButton
替换默认的选项卡1.1.1TabHost第一中使用方法1、定义一个Activity继承于TabActivity2、定义布局文件的
根标签为(id的定义可以参考TabHost.java)标签的id为@android:id/
tabhost在标签内有两个的子标签1)、,id必须为@android:id/tabs,T
abWidget就是显示的标签切换按钮,如果不显示切换按钮,而是利用RadioGroup和RadioButton来代替的话,可以设
置TabWidget的android:visibility=”gone”2)、,id必须为@androi
d:id/tabcontent3、添加标签页,每一个标签页可以利用tabhost.TabSpec对象,创建TabSpec对象的方法
:tabhost.newTabSpec,指定tabspec名字属性setIndicator(Stringlabel)指定标签页的
名字;指定标签页内容:setContent(Intentintent)使用TabHost各个Activity的生命周期:1、先初
始化默认的第一个tabSpec中的ContentActivity2、初始化主TabHost(例如:MainUI)3、点击那个标签
就对于初始化那个标签页中的Activity4、当各个标签页中的Acitivty都已经初始化后,再点击切换标签只会掉用onResum
e()方法,这说明离开某个标签的话,这个标签页中的Activity是处于暂停状态的标签页布局文件:.0"encoding="utf-8"?>oid.com/apk/res/android"android:id="@android:id/tabhost"android
:layout_width="fill_parent"android:layout_height="fill_parent"a
ndroid:orientation="horizontal"android:background="@drawable/sp
lash_background">oid:layout_width="fill_parent"android:layout_height="wrap_conten
t"android:visibility="gone"/>:id/tabcontent"android:layout_width="fill_parent"android:layou
t_height="fill_parent"/>roid:layout_width="fill_parent"android:layout_height="wrap_conte
nt"android:background="@drawable/main_bar_bg"android:orientatio
n="horizontal"android:layout_gravity="bottom">droid:id="@+id/rbtnHome"android:layout_width="fill_parent"andro
id:layout_height="wrap_content"android:drawableTop="@drawable/ma
in_home_icon"android:text="@string/main_home"style="@style/mai
n_rbtn_style"/>ayout_width="fill_parent"android:layout_height="wrap_content"an
droid:drawableTop="@drawable/main_msg_icon"android:text="@string
/main_msg"style="@style/main_rbtn_style"/>oid:id="@+id/rbtnUserinfo"android:layout_width="fill_parent"and
roid:layout_height="wrap_content"android:drawableTop="@drawable/
main_userinfo_icon"android:text="@string/main_userinfo"style="
@style/main_rbtn_style"/>e"android:layout_width="fill_parent"android:layout_height="wrap
_content"android:drawableTop="@drawable/main_more_icon"android:
text="@string/main_more"style="@style/main_rbtn_style"/>dioGroup>
用到的样式文件:
ton">@null@drawable/main_r
btn_dcenter"android:layout_weight">1ng">2dp4dpe="android:textSize">8dp
对于的Activity:/
主窗口UI@authorYJ/publicclassMainUIextendsTabActivity
{privatefinalstaticStringTAB_HOME="homeTab";privatefinal
staticStringTAB_MSG="msgTab";privatefinalstaticStringTAB
_USERINFO="userinfoTab";privatefinalstaticStringTAB_MORE=
"moreTab";privateTabHosttabHost;privateRadioGrouprgBar;@O
verrideprotectedvoidonCreate(BundlesavedInstanceState){super.
onCreate(savedInstanceState);setContentView(R.layout.main);init(
);//初始化}/初始化操作/privatevoidinit(){TabHost.TabSpectab
Spec;tabHost=this.getTabHost();//添加首页tabtabSpec=tabHost.new
TabSpec(TAB_HOME).setIndicator(TAB_HOME).setContent(newIntent(th
is,HomeUI.class));tabHost.addTab(tabSpec);//添加信息tabtabSpec=t
abHost.newTabSpec(TAB_MSG).setIndicator(TAB_MSG).setContent(newI
ntent(this,MsgUI.class));tabHost.addTab(tabSpec);//添加用户信息tabta
bSpec=tabHost.newTabSpec(TAB_USERINFO).setIndicator(TAB_USERINF
O).setContent(newIntent(this,UserInfoUI.class));tabHost.addTab
(tabSpec);//添加更多信息tabtabSpec=tabHost.newTabSpec(TAB_MORE).setI
ndicator(TAB_MORE).setContent(newIntent(this,MoreUI.class));ta
bHost.addTab(tabSpec);this.rgBar=(RadioGroup)this.findViewByI
d(R.id.rgBar);this.rgBar.setOnCheckedChangeListener(newRadioGro
up.OnCheckedChangeListener(){@OverridepublicvoidonCheckedChang
ed(RadioGroupgroup,intcheckedId){switch(checkedId){caseR.i
d.rbtnHome://首页tabHost.setCurrentTabByTag(TAB_HOME);break;case
R.id.rbtnMsg://信息tabHost.setCurrentTabByTag(TAB_MSG);break;case
R.id.rbtnUserinfo://用户信息tabHost.setCurrentTabByTag(TAB_USERINFO
);break;caseR.id.rbtnMore://更多tabHost.setCurrentTabByTag(TAB_M
ORE);break;default:break;}}});//默认选中首页//tabHost.setCurrentTabBy
Tag(TAB_HOME);rgBar.check(R.id.rbtnHome);}}1.1.2TabHost第二种使用方法
(不继承于TabActivity)标签的id自定义在标签内有两个的子标签(这两个子标签的id,
在预览显示效果的时候eclipse会提示该设置什么id)1)、,id必须为@android:id/tabs,
TabWidget就是显示的标签切换按钮,如果不显示切换按钮,而是利用RadioGroup和RadioButton来代替的话,可以
设置TabWidget的android:visibility=”gone”2)、,id必须为@andro
id:id/tabcontent定义一个Activity使用该布局文件,利用findViewById方法查找到TabHost1.2
、顶部导航栏滑动效果例子程序E:\AppsDevelop\Resources\Android\UI设计\顶部导航滑动效果1.3、V
iewPager实现页面滑动效果E:\AppsDevelop\Resources\Android\UI设计\ViewPager实现
页面滑动效果1.4、布局文件包含在定义布局文件的时候,可能有好几个页面都用到了相同的topBar或者footerBar,这时候就可
以定义两个模板布局文件,在需要的布局中进行包含布局文件的包含
类似于jsp中的页面包含,用layout属性指定要包含页面的layoutid1.4.1ViewStub、requestFocu
s、marge、includeViewStub此标签可以使用UI在特殊的情况下,直观效果类似于设
置View的不可见性,但是其更大的意义在于被这个标签所包裹的View在默认的情况下不会占用任何内存空间。ViewStub通过inc
lude从外部导入View元素。用法通过android:layout来指定所包含的内容,默认情况下ViewStub所包含的标签都属
于visibility=GONE,ViewStub通过方法inflate(),来召唤系统加载其内部的View.../>可以通过这个标签直接加载外部的xml到当前结构中,是复用UI资源的常用标签,用法是将需要复用的xml文件路径赋予inc
lude标签的layout属性用于指定屏幕内的焦点View,用法是将标签至于View标签
的内部1.5布局1.5.1两个控件:一个居右对
齐,另一个居左对齐使用RelativeLayout并设置并设置相对于父容器的对齐方法左对齐:android:layout_ali
gnParentLeft="true"右对齐:android:layout_alignParentRight="true"1.5.
2实现控件集合居中(居底部都可以)1、控件集合要用一个布局包含(例如LinearLayout)2、设置父容器的对齐方式为居中就可
以了(居底部就设置:android:gravity="bottom")utf-8"?>pk/res/android"android:layout_width="fill_parent"android:layout
_height="fill_parent"android:gravity="center"android:orientatio
n="vertical"android:padding="20dp">t_width="fill_parent"android:layout_height="wrap_content"androi
d:orientation="vertical">l_parent"android:layout_height="wrap_content"/>ndroid:id="@+id/etUsername"android:layout_width="fill_parent"an
droid:layout_height="wrap_content"android:hint="@string/login_us
ername"android:drawableRight="@drawable/ic_launcher"/>android:id="@+id/etPassword"android:layout_width="fill_parent"a
ndroid:layout_height="wrap_content"android:hint="@string/login_p
assword"android:drawableRight="@drawable/ic_launcher"/>eLayoutandroid:layout_width="fill_parent"android:layout_height=
"wrap_content"android:orientation="horizontal">roid:id="@+id/cbRemeberPwd"android:layout_width="wrap_content"
android:layout_height="wrap_content"android:layout_alignParentLe
ft="true"android:layout_gravity="center_vertical"android:text="
@string/login_remeber_password"/>ogin"android:layout_width="wrap_content"android:layout_alignPa
rentRight="true"android:layout_height="wrap_content"android:lay
out_gravity="center_vertical"android:text="@string/login_button_
login"/>1.6设置Ac
tivity背景透明方法一只要在配置文件内activity属性配置内加上android:theme="@android:sty
le/Theme.Translucent"就好了。这样就调用了android的透明样式!方法二1、在res/values下建c
olors.xml文件,写入:s>#9000这个值设定了
整个界面的透明度,为了看得见效果,现在设为透明度为56%(9/16)左右。2、在res/values/下建styles.xm
l,设置程序的风格tylename="Transparent">@c
olor/transparent
true@+android:s
tyle/Animation.Translucent
当然在定义主
题的时候还可以继承Android系统自定义的主题,指定parent属性即可log"parent="android:style/Theme.Dialog">owBackground">@color/transparentIsTranslucent">truee">@+android:style/Animation.Translucent3、把这个style
s.xml用在相应的Activity上。即在AndroidManifest.xml中的任意标签中添加and
roid:theme="@style/transparent"如果想设置所有的activity都使用这个风格,可以把这句标签语句
添加在中。最后运行程序,哈哈,是不是发现整个界面都被蒙上一层半透明了。最后可以把背景色#9000换成#
0000,运行程序后,就全透明了,看得见背景下的所有东西可以却都操作无效。1.7横竖屏切换1、禁止横竖屏切换不想横竖屏之间切换,
最简单的办法就是在项目的AndroidManifest.xml中找到你所指定的activity中加上android:screen
Orientation属性,他有以下几个参数:"unspecified"默认值由系统来判断显示方向.判定的策略是和设备相关的,所
以不同的设备会有不同的显示方向."landscape"横屏显示(宽比高要长)"portrait"竖屏显示(高比宽要长)"user"
用户当前首选的方向"behind"和该Activity下面的那个Activity的方向一致(在Activity堆栈中的)"sens
or"有物理的感应器来决定。如果用户旋转设备这屏幕会横竖屏切换。"nosensor"忽略物理感应器,这样就不会随着用户旋转设备而更
改了("unspecified"设置除外)。也可以在Java代码中通过setRequestedOrientation(Act
ivityInfo.SCREEN_ORIENTATION_LANDSCAPE);来设置2、如果要让软件在横竖屏之间切换,由于横竖屏
的高宽会发生转换,有可能会要求不同的布局。可以通过以下方法来切换布局:1)、在res目录下建立layout-land和layout
-port目录,相应的layout文件不变,比如main.xml。layout-land是横屏的layout,layout-por
t是竖屏的layout,其他的不用管,模拟器会自动寻找。2)、通过this.getResources().getConfigura
tion().orientation来判断当前是横屏还是竖屏然后来加载相应的xml布局文件。因为当屏幕变为横屏的时候,系统会重新呼
叫当前Activity的OnCreate方法,你可以把以下方法放在你的OnCreate中来检查当前的方向,然后可以让你的SetC
ontentView来载入不同的Layoutxml.if(this.getResources().getConfigurati
on().orientation==Configuration.ORIENTATION_LANDSCAPE){Log.i("
info","landscape");}elseif(this.getResources().getConfiguratio
n().orientation==Configuration.ORIENTATION_PORTRAIT){Log.i("in
fo","portrait");}2、使用自定义样式替换系统默认的ProgressBar显示图片1、定义一个样式style,继承
于android:style/Widget.ProgressBar.Large;覆盖属性android:indeterminate
Drawable,将该属性指定一个rotate动画,该图片动画定义在drawable资源文件夹下0"encoding="utf-8"?>le"parent="android:style/Widget.ProgressBar.Large">android:indeterminateDrawable">@drawable/progressbar_rotate>2、定义rotate动画f-8"?>apk/res/android"android:drawable="@drawable/progress"android:pi
votX="50%"android:pivotY="50%"/>3、ListView美化用心的朋友应该会发现,listview
中在设置了背景之后。会有些问题。1.、listview在拖动的时候背景图片消失变成黑色背景。等到拖动完毕我们自己的背景图片才显示出
来。问题1有如下代码结解决android:scrollingCache="false"2、listview的上边和下边有黑色
的阴影。问题2用如下代码解决:android:fadingEdge="none"3、lsitview的每一项之间需要设置一个
图片做为间隔。问题3用如下代码解决:android:divider="@drawable/list_driver",其中@dr
awable/list_driver是一个图片资源总体如下ew01"android:layout_width="fill_parent"android:layout_height="2
87dip"android:fadingEdge="none"android:divider="@drawable/lis
t_driver"android:scrollingCache="false"android:background="@dra
wable/list">4.自定义listview的时候,当你不使用android:cacheColor
Hint=“#00000000”会出现下面选中一个空间黑色底色的情况,破坏整体美观度:5.当你不使用android:listSe
lector属性,默认会显示选中的item为橙黄底色,有时候我们需要去掉这种效果。listview.setSelector()6.
scrollbars属性,作用是隐藏listView的滚动条,android:scrollbars="none"与setVerti
calScrollBarEnabled(true);的效果是一样的,不活动的时候隐藏,活动的时候也隐藏7.fadeScrollba
rs属性,android:fadeScrollbars="true"配置ListView布局的时候,设置这个属性为true就可
以实现滚动条的自动隐藏和显示。8.stackFromBottom属性,设置该属性之后你做好的列表就会显示你列表的最下面,值为tru
e和falseandroid:stackFromBottom="true"9.transciptMode属性,需要用ListV
iew或者其它显示大量Items的控件实时跟踪或者查看信息,并且希望最新的条目可以自动滚动到可视范围内。通过设置的控件transc
riptMode属性可以将Android平台的控件(支持ScrollBar)自动滑动到最底部。android:transcript
Mode="alwaysScroll"2.1自定义ListView的分割线ListView设定分割线的样式和宽度用到两个属性an
droid:divider设定分割线来自图片或者是颜色,没有分割线可设置:android:divider=”@drawable/
@null”android:dividerHeight设定分割线的高度1、选定一个要作为分割线的图片2、在/drawable资源
文件夹下定义一个divider_line的资源文件,文件内容如下:android:tileMode=”repeat”:表示图片
平铺tp://schemas.android.com/apk/res/android"android:src="@drawable/
dot_bg"android:tileMode="repeat"/>3、在ListView中指定分割线属性android:d
ivider=”@drawable/divider_line”2.2自定义ListView的背景,而且拖动的时候不会出现黑色背景
改变背景最简单的方法就是找一张图片,然后指定ListView的android:background=”@drawable/xxx”
就可以了,但是这样做背景是改变了,但是当你拖动或者点击ListView空白的位置的时候发现ListItem都变成了黑色,破坏了整体
效果,如下图这是因为ListView的效果默认ListView的item的背景是透明的,而ListView的北京是固定不变的,所以
在滚动条滚动的过程中会实时的去将当前的item的显示内容跟背景进行混合运算,所以android系统为了优化这一过程,就使用了一个叫
做android:cacheColorHint属性,在黑色主题下默认颜色为#191919,所以就出现了刚才的画面,有一半是黑色的解
决方案:1、如果你只是想要换掉背景颜色的话,那么直接指定android:cacheColorHint为你所要的颜色就可以了2、如果
要用图片做背景的话那么就将android:cacheColorHint指定为透明(#00000000)就可以了,当然美化是要牺牲一
些效率的。美化后:2.3ListView中Button点击无响应解决方案AndroidListView添加按钮后自身无响应。在
ListView上加了个Button后就只响应Button而不响应ListView的单击了。后来终于解决了。是因为Butto
n获取了焦点,导致ListView没有了焦点,所以响应不了。我们只要在Button上加上两句Xml的属性即可。android:
focusable="false"android:focusableInTouchMode="false"listView异步更
新完后,不能点击条目的问题希望对今后碰到此问题的哥们提个醒,listview需要重新获得焦点request.requestFocu
sFromTouch();4控件共同特性美化3.1、控件中文字和图片的排列文本框和单选按钮在文本框中也可以直接设置图片和文字,
具体用到属性为:android:drawableTopandroid:drawableBottomandroid:drawable
Leftandroid:drawableRightandroid:drawablePadding//图片和文字之间的间隙用到的属
性:android:drawableLeft="@drawable/comment_icon"//图片在文字的什么位置,这里是文
字的左边android:drawablePadding="2dp"//图片和文字之间的距离EditText控件实现图文混排方式<
EditTextandroid:id="@+id/etPassword"android:layout_width="fill_
parent"android:layout_height="wrap_content"android:hint="@strin
g/login_password"android:drawableRight="@drawable/ic_launcher"/>3
.2、单选按钮去掉默认样式单选按钮去掉默认样式:android:button=”@null”复选框?5ProgressBar
&SeekBar美化1、准备图片(背景、进度背景(、拖动条))2、定义ProgressBar样式第一个条目:ProgressBar背景第二个条目:走过的进度条背景2、主要修改如下属性进度条样式:android:progressDrawable="@drawable/seekbar_img"@drawable/seekbar_img样式是在drawable中定义的拖动按钮样式(只在SeekBar):android:thumb="@drawable/media_player_progress_button"下面修改为ProgressBar也可以
献花(0)
+1
(本文系Go_Ahead首藏)