Android——界⾯(简易版)
前⾯我们简单的介绍了⼀下android的五⼤布局,那么现在我们来实践⼀下,写⼀个简单的界⾯
⾸先,我们新建⼀个l的linnerlayout布局
我们⽇常使⽤的,从简单的⽅⾯来说我可⼀分成三个内容,头部标签栏,中间显⽰信息栏,还有⼀个底部。那么我们就按照这个来先建⼀个页⾯
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="schemas.android/apk/res/android"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 android:orientation="vertical" >
6 <!-- head -->
7 <LinearLayout
8 android:layout_width="match_parent"
9 android:layout_height="wrap_content" >
10 </LinearLayout>
11
12 <!-- 中间 -->
13 <LinearLayout
14 android:layout_width="match_parent"
15 android:layout_height="wrap_content"
16 </LinearLayout>
17
18 <!-- 底部 -->
19 <LinearLayout
20 android:layout_width="match_parent"
21 android:layout_height="wrap_content" >
22 </LinearLayout>
23
24 </LinearLayout>
效果如下:
这是完成后的显⽰
那么要怎么实现到这个效果,
1.先创建⼀个标题栏的layout⽂件
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="schemas.android/apk/res/android"
3 android:layout_width="match_parent"
4 android:layout_height="50dp"
5 android:orientation="horizontal"
6 android:background="#21292c">
7
8 <TextView
9 android:id="@+id/textView1"
10 android:layout_width="wrap_content"
11 android:layout_height="wrap_content"
12 android:text="@string/weixin"
13 android:textColor="#ffffff"
14 android:textSize="20sp"
15 android:layout_gravity="center"
16 android:padding="10dp"/>
17
18 <TextView
19 android:layout_width="wrap_content"
20 android:layout_marginTop="20dp"
21 android:layout_height="30dp"
22 android:layout_weight="1"
23 android:gravity="bottom" />
24
25 <LinearLayout
26 android:layout_width="wrap_content"
27 android:layout_height="match_parent"
28 android:gravity="bottom">
29
30 <ImageView
31 android:id="@+id/imageView2"
32 android:layout_width="40dp"
33 android:layout_height="30dp"
34 android:src="@drawable/fdj"
35 android:layout_marginRight="10dp"/>
36
37 <ImageView
38 android:id="@+id/imageView1"
39 android:layout_width="40dp"
40 android:layout_height="30dp"
41 android:src="@drawable/barbuttonicon_add" />
42
43 </LinearLayout>
44
45 </LinearLayout>
然后我们在创建⼀个底部的⽂件的
1 <?xml version="1.0" encoding="utf-8"?>android radiogroup
2 <LinearLayout xmlns:android="schemas.android/apk/res/android"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 android:orientation="horizontal" >
6
7 <RadioGroup
8 android:id="@+id/radioGroup1"
9 android:layout_width="match_parent"
10 android:layout_height="60dp"
11 android:orientation="horizontal"
12 android:background="@drawable/group_buton_nomal"
13 android:gravity="center">
14
15 <RadioButton
16 android:id="@+id/radio0"
17 android:layout_width="wrap_content"
18 android:layout_height="wrap_content"
19 android:checked="true"
20 android:text="@string/weixin"
21
22 android:drawableTop="@drawable/tab_weixin"/>
23
24 <RadioButton
25 android:id="@+id/radio1"
26 android:layout_width="wrap_content"
27 android:layout_height="wrap_content"
28 android:text="@string/addressList"
29
30 android:drawableTop="@drawable/tab_address"/>
31
32 <RadioButton
33 android:id="@+id/radio2"
34 android:layout_width="wrap_content"
35 android:layout_height="wrap_content"
36 android:text="@string/find"
37
38 android:drawableTop="@drawable/tab_find"/>
39
40 <RadioButton
41 android:id="@+id/radio3"
42 android:layout_width="wrap_content"
43 android:layout_height="wrap_content"
44 android:text="@string/set"
45
46 android:drawableTop="@drawable/tab_set"/>
47 </RadioGroup>
48
49 </LinearLayout>
底部⽂件采⽤的是单选按钮组,这⾥我就不过多解释了,跟HTML的单选按钮类似
上⾯的⽤到的style是⾃⼰设计的⼀个按钮样式,放在l的⽂件⾥,具体代码如下
1 <style name="radioStyle">
2 <item name="android:button">@null</item>
3 <item name="android:layout_weight">1</item>
4 <item name="android:gravity">center</item>
5 <item name="android:textColor">@drawable/text_color</item>
6 </style>
为了让让底部的显⽰效果更加的接近我们⽇常使⽤的,我们对按钮做了⼀个判断,就是使⽤selector(不懂的请看下⼀章)
代码如下:
1 <?xml version="1.0" encoding="utf-8"?>
2 <selector xmlns:android="schemas.android/apk/res/android" >
3 <item android:state_checked="true"
4 android:drawable="@drawable/tabbar_contacts_hl"></item>
5 <item
6 android:drawable="@drawable/tabbar_contacts"></item>
7
8 </selector>
就是通过焦点是否在该按钮上,在的化显⽰有颜⾊的图⽚,不在的化显⽰没颜⾊的。对其他桑按钮同样的操作,代码⼀样,只是把图⽚换⼀下就OK了。
还有⽂字也进⾏了相同的操作
1 <?xml version="1.0" encoding="utf-8"?>
2 <selector xmlns:android="schemas.android/apk/res/android" >
3 <item android:state_checked="true"
4 android:drawable="@drawable/tabbar_contacts_hl"></item>
5 <item
6 android:drawable="@drawable/tabbar_contacts"></item>
7
8 </selector>
好了,⼀切准备,就绪,我们只需要将⼀切和起来就可以了。我们可以在l通过include的标签把这些包含进来
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="schemas.android/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- head -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<include layout="@layout/head"/>
</LinearLayout>
<!-- 中间 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
</LinearLayout>
<!-- 底部 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<include layout="@layout/bottom"/>
</LinearLayout>
</LinearLayout>
这样⼀个简单的界⾯就准备h好了
但是你运⾏的时候是不是觉得不对劲,跟我们的实际⽤的不⼀样,那是因为多了⼀个系统默认的标题栏,我们把他去掉就可以了。
在l的作⼀下的修改即可
那样⼀个见到你布局就完成了.
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论