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小时内删除。