Android的学习第六章(布局一LinearLayout)

今天我们来说一下Android五大布局-LinearLayout布局(线性布局)

  含义:线性布局,顾名思义,指的是整个Android布局中的控件摆放方式是以线性的方式摆放的,

  主要作用:主要对整个界面进行基本设置使用

  重要属性:android:orientation 值:horizontal 元素水平摆放  |  vertical 元素垂直摆放

  看代码:

 

 1 <!-- 
 2     第一个线性布局, 我们可以视为html中的div,用于对于整个界面进行布局
 3     这里面 xmlns:android和xmlns:tools指定的是xml文件的命名空间,不是对布局的主要设置
 4     但是要有
 5     android:layout_width="match_parent"指的是当前的线性布局宽度占整个父元素,这里相对于
 6     当前的线性布局父元素为当前的窗体,所以宽度占满窗体
 7     android:layout_height="match_parent"指的是当前的线性布局高度占整个父元素,这里相对于
 8     当前的线性布局父元素为当前的窗体,所以高度占满窗体
 9     tools:context="com.example.activitylife.MainActivity":用于指定渲染上下文
10     android:orientation="vertical":指的是当前控件为垂直摆放
11 -->
12 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
13     xmlns:tools="http://schemas.android.com/tools"
14     android:layout_width="match_parent"
15     android:layout_height="match_parent"
16     tools:context="com.example.activitylife.MainActivity"
17     android:orientation="vertical">
18     <!-- 
19         第二个线性布局,这里我们放置在大的线性布局中,作为子布局使用,设置背景颜色为蓝色 
20         这里面android:layout_width="match_parent"指的是宽度占满父元素LinearLayout的宽度
21             android:layout_height="100dp"高度占100dp
22             android:background="@android:color/holo_blue_bright"设置背景色
23     -->
24     <LinearLayout 
25         android:layout_width="match_parent"
26         android:layout_height="100dp"
27         android:background="@android:color/holo_blue_bright">
28     </LinearLayout>
29     <!-- 
30         第三个线性布局,这里我们放置在大的线性布局中,作为子布局使用,设置背景颜色为绿色
31         这里面android:layout_width="match_parent"指的是宽度占满父元素LinearLayout的宽度
32             android:layout_height="200dp"高度占200dp
33             android:background="@android:color/holo_green_light"设置背景色
34      -->
35     <LinearLayout 
36         android:layout_width="match_parent"
37         android:layout_height="200dp"
38         android:background="@android:color/holo_green_light">
39     </LinearLayout>
40 </LinearLayout>

整段代码界面效果图是:

    

只是一段代码和效果图我们不知道怎么做到对一个Android界面的绘制,根据我对线性布局的简单理解,我认为是想用线性布局作出较好的布局效果主要可以这样用

使用线性布局特效对整体的元素进行布局,至于元素与元素之间的微调我们可以通过Margin属性进行微调

下面是一个简答的线性布局模仿微信界面的案例,希望大家能够有所收获

需要用到的字符串资源定义到string.xml文件中

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <resources>
 3 
 4     <string name="app_name">我的微信布局</string>
 5     <string name="hello_world">Hello world!</string>
 6     <string name="action_settings">Settings</string>
 7 
 8     
 9     <!-- 微信第三面板使用 -->
10     <string name="friendcacl">朋友圈</string>
11     <string name="saoyisao">扫一扫</string>
12     <string name="yaoyiyao">摇一摇</string>
13     <string name="aroundperson">附近的人</string>
14     <string name="piaoping">漂流瓶</string>
15     <string name="shop">购物</string>
16     <string name="game">游戏</string>
17     
18 
19 </resources>

我们需要用到颜色的自定义:在color.xml文件中可以自定义我们需要的颜色

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <resources>
 3     <!-- 淡灰 -->
 4     <color name="dangrey">#CCCCCCCC</color>
 5     <!-- 灰色 -->
 6     <color name="grey">#999999</color>
 7     <!-- 浅灰,不清楚,大家自己可以去找颜色的定义 -->
 8     <color name="grey2">#888888</color>
 9     <!-- 绿色 -->
10     <color name="green">#07bb07</color>
11     
12 </resources>

这里我们要用到样式文件先看样式文件中的定义,打开value中的styles.xml文件

 1 <resources xmlns:android="http://schemas.android.com/apk/res/android">
 2 
 3     <!--
 4         Base application theme for API 11+. This theme completely replaces
 5         AppBaseTheme from res/values/styles.xml on API 11+ devices.
 6     -->
 7     <style name="AppBaseTheme" parent="android:Theme.Holo.Light">
 8         <!-- API 11 theme customizations can go here. -->
 9     </style>
10 
11     <!-- 以下是样式的主要布局代码 -->
12     <!-- 
13         myteststyle样式中声明了要用到的样式
14         android:layout_width:match_parent元素占满父元素
15         android:layout_marginTop顶部外边距15dp
16         android:background:背景色为白色
17      -->
18     <style name="myteststyle">
19         <item name="android:layout_width">match_parent</item>
20         <item name="android:layout_marginTop">15dp</item>
21         <item name="android:background">@android:color/white</item>
22     </style>
23     <!-- 
24         对图片控件的样式设置
25         android:layout_width:设置宽度
26         android:layout_height:设置高度
27         android:background:引入color中的声明为grey的颜色
28         android:layout_gravity:设置当前元素在父元素的位置为水平居中
29     -->
30     <style name="imagestyle">
31         <item name="android:layout_width">295dp</item>
32         <item name="android:layout_height">0.5dp</item>
33         <item name="android:background">@color/grey</item>
34         <item name="android:layout_gravity">center_horizontal</item>
35     </style>
36     <!-- 
37         android:layout_width:设置宽度占满父元素
38         android:layout_height:设置高度40dp
39         android:background:引入Android内置白色
40         android:orientation:设置内容水平摆放
41     -->
42     <style name="innerstyle">
43         <item name="android:layout_width">match_parent</item>
44         <item name="android:layout_height">40dp</item>
45         <item name="android:background">@android:color/white</item>
46         <item name="android:orientation">horizontal</item>
47     </style>
48 </resources>

布局代码:

  1 <!-- 
  2     外层的线性布局设置为元素垂直摆放
  3     那么当前线性布局中的内容都是垂直的
  4     这里引入了color.xml文件中的淡灰色背景色
  5  -->
  6 <?xml version="1.0" encoding="utf-8"?>
  7 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  8     android:layout_width="match_parent"
  9     android:layout_height="match_parent"
 10     android:orientation="vertical"
 11     android:background="@color/dangrey">
 12     
 13     <!-- 
 14         第一个线性布局
 15         style="@style/myteststyle" 引入了我们声明的一个样式
 16         使得这个线性布局是--宽度占满父元素,顶部外边距15dp,背景色白色
 17         而线性布局也有独有的一些属性高度为40dp,内容水平摆放
 18     -->
 19     <LinearLayout 
 20         style="@style/myteststyle"
 21         android:layout_height="40dp"
 22         android:orientation="horizontal">
 23         <ImageView
 24             android:layout_width="20dp"
 25             android:layout_height="20dp"
 26             android:layout_margin="10dp"
 27             android:layout_gravity="center_vertical"
 28             android:src="@drawable/sendmessage"/>
 29         <TextView
 30             android:layout_width="wrap_content"
 31             android:layout_height="wrap_content"
 32             android:text="@string/friendcacl"
 33             android:layout_gravity="center_vertical"/>
 34         <TextView
 35             android:layout_height="wrap_content"
 36             android:layout_width="match_parent"
 37             android:layout_weight="1"/>
 38         <ImageView 
 39             android:layout_width="30dp"
 40             android:layout_height="30dp"
 41             android:layout_margin="8dp"
 42             android:layout_gravity="center_vertical"
 43             android:src="@drawable/ic_launcher"/>
 44     </LinearLayout>
 45     
 46     
 47     <!-- 
 48         第二个线性布局也是引入了之前的myteststyle样式,但是这里高度设置为81dp,里面放置俩个线性布局 
 49         内容设置设置为垂直摆放
 50     -->
 51     <LinearLayout 
 52         style="@style/myteststyle"
 53         android:layout_height="81dp"
 54         android:orientation="vertical">
 55         <!-- 扫一扫 -->
 56         <!-- 
 57             引入了style中的innerstyle样式 意思就是
 58             设置宽度占满父元素,设置高度40dp,引入Android内置白色,设置内容水平摆放
 59          -->
 60         <LinearLayout style="@style/innerstyle">
 61             <ImageView
 62                 android:layout_width="20dp"
 63                 android:layout_height="20dp"
 64                 android:layout_margin="10dp"
 65                 android:layout_gravity="center_vertical"
 66                 android:src="@drawable/sendmessage"/>
 67             <TextView
 68                 android:layout_width="wrap_content"
 69                 android:layout_height="wrap_content"
 70                 android:text="@string/saoyisao"
 71                 android:layout_gravity="center_vertical"/>
 72             <TextView
 73                 android:layout_height="wrap_content"
 74                 android:layout_width="match_parent"
 75                 android:layout_weight="1"/>
 76         </LinearLayout>
 77         
 78         <!-- 中间线条 -->
 79         <!-- 
 80             这里一个ImageView控件用来代替扫一扫和摇一摇中间的线条,引入了imagestyle样式
 81             设置宽度 295dp设置高度0.5dp,引入color中的声明为grey的颜色
 82             设置当前元素在父元素的位置为水平居中
 83          -->
 84         <ImageView style="@style/imagestyle"/>
 85         <!-- 摇一摇 -->
 86         <!--
 87              与上面的扫一扫同样,引入了innerstyle样式
 88             设置宽度占满父元素,设置高度40dp,引入Android内置白色,设置内容水平摆放
 89          -->
 90         <LinearLayout style="@style/innerstyle">
 91             <ImageView
 92                 android:layout_width="20dp"
 93                 android:layout_height="20dp"
 94                 android:layout_margin="10dp"
 95                 android:layout_gravity="center_vertical"
 96                 android:src="@drawable/sendmessage"/>
 97             <TextView
 98                 android:layout_width="wrap_content"
 99                 android:layout_height="wrap_content"
100                 android:text="@string/yaoyiyao"
101                 android:layout_gravity="center_vertical"/>
102             <TextView
103                 android:layout_height="wrap_content"
104                 android:layout_width="match_parent"
105                 android:layout_weight="1"/>
106         
107         </LinearLayout>
108         
109     </LinearLayout>
110    
111     
112     <!-- 
113         第三个与上面的线性布局大致都相同了,打击如果能看懂上面的,下面的布局都是相差无几的
114     -->
115     <LinearLayout
116         style="@style/myteststyle"
117         android:layout_height="81dp"
118         android:orientation="vertical">
119         <!-- 附近的人 -->
120         <LinearLayout style="@style/innerstyle">
121             <ImageView
122                 android:layout_width="20dp"
123                 android:layout_height="20dp"
124                 android:layout_margin="10dp"
125                 android:layout_gravity="center_vertical"
126                 android:src="@drawable/sendmessage"/>
127             <TextView
128                 android:layout_width="wrap_content"
129                 android:layout_height="wrap_content"
130                 android:text="@string/shop"
131                 android:layout_gravity="center_vertical"/>
132             <TextView
133                 android:layout_height="wrap_content"
134                 android:layout_width="match_parent"
135                 android:layout_weight="1"/>
136         
137         </LinearLayout>
138         <!-- 中间线条 -->
139         <ImageView style="@style/imagestyle"/>
140         <!-- 漂流瓶 -->
141         <LinearLayout style="@style/innerstyle">
142             <ImageView
143                 android:layout_width="20dp"
144                 android:layout_height="20dp"
145                 android:layout_margin="10dp"
146                 android:layout_gravity="center_vertical"
147                 android:src="@drawable/sendmessage"/>
148             <TextView
149                 android:layout_width="wrap_content"
150                 android:layout_height="wrap_content"
151                 android:text="@string/game"
152                 android:layout_gravity="center_vertical"/>
153             <TextView
154                 android:layout_height="wrap_content"
155                 android:layout_width="match_parent"
156                 android:layout_weight="1"/>
157         
158         </LinearLayout>
159         
160     </LinearLayout>
161     
162     <!-- 第四个 -->
163     <LinearLayout
164         style="@style/myteststyle"
165         android:layout_height="81dp"
166         android:orientation="vertical">
167         <!-- 附近的人 -->
168         <LinearLayout style="@style/innerstyle">
169             <ImageView
170                 android:layout_width="20dp"
171                 android:layout_height="20dp"
172                 android:layout_margin="10dp"
173                 android:layout_gravity="center_vertical"
174                 android:src="@drawable/sendmessage"/>
175             <TextView
176                 android:layout_width="wrap_content"
177                 android:layout_height="wrap_content"
178                 android:text="@string/aroundperson"
179                 android:layout_gravity="center_vertical"/>
180             <TextView
181                 android:layout_height="wrap_content"
182                 android:layout_width="match_parent"
183                 android:layout_weight="1"/>
184         
185         </LinearLayout>
186         <!-- 中间线条 -->
187         <ImageView style="@style/imagestyle"/>
188         <!-- 漂流瓶 -->
189         <LinearLayout style="@style/innerstyle">
190             <ImageView
191                 android:layout_width="20dp"
192                 android:layout_height="20dp"
193                 android:layout_margin="10dp"
194                 android:layout_gravity="center_vertical"
195                 android:src="@drawable/sendmessage"/>
196             <TextView
197                 android:layout_width="wrap_content"
198                 android:layout_height="wrap_content"
199                 android:text="@string/piaoping"
200                 android:layout_gravity="center_vertical"/>
201             <TextView
202                 android:layout_height="wrap_content"
203                 android:layout_width="match_parent"
204                 android:layout_weight="1"/>
205         </LinearLayout>
206         
207     </LinearLayout>
208      
209     
210 
211 
212 </LinearLayout>
posted @ 2018-04-13 10:24  心泪无恒  阅读(751)  评论(0编辑  收藏  举报