布局与样式
16lz
2021-01-23
关于布局的理论讲解
- 相对布局 RelativeLayout
- 线性布局LinearLayout
- 表格布局TableLayout
- 网格布局GridLayout
- 帧布局FrameLayout
布局组件Layout
线性布局LinearLayout
框架布局FrameLayout
相对布局 RelativeLayout
表格布局TableLayout
绝对布局AbsoluteLayout
LinearLayout线性布局
<?xml version="1.0" encoding="utf-8"?><LinearLayout android:layout_height="300dp" android:layout_width="300dp" android:orientation="horizontal" android:layout_gravity="center" android:gravity="center|top" xmlns:android="http://schemas.android.com/apk/res/android"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按钮1" android:layout_weight="1" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按钮2" android:layout_weight="1" /> <!-- 循环嵌套 --> <LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content" android:orientation="vertical"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="按钮3" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按钮4" /> </LinearLayout> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按钮5" /></LinearLayout>
FrameLayout帧布局
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".FrameLayoutActivity"> <FrameLayout android:id="@+id/myframe" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"> <TextView android:layout_width="200dp" android:layout_height="200dp" android:background="#4CAF50" /> <TextView android:layout_width="100dp" android:layout_height="100dp" android:background="#fff" android:text="桂林电子科技大学" android:textColor="#f00" android:textSize="20sp" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/yuanbiao"></ImageView> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="next" android:layout_gravity="right"></Button> </FrameLayout></androidx.constraintlayout.widget.ConstraintLayout>
RelativeLayout相对布局
<?xml version="1.0" encoding="utf-8"?><RelativeLayout android:layout_height="wrap_content" android:layout_width="wrap_content" xmlns:android="http://schemas.android.com/apk/res/android" > <TextView android:id="@+id/label" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="相对布局" android:textSize="50sp" > </TextView> <EditText android:id="@+id/et1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/label" > </EditText> <Button android:id="@+id/OK" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/et1" android:layout_alignParentRight="true" android:layout_marginTop="1dp" android:layout_marginRight="10dp" android:text="OK" > </Button> <Button android:id="@+id/cancel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/et1" android:layout_toLeftOf="@id/OK" android:layout_marginRight="10dp" android:layout_marginTop="@id/OK" android:text="Cancel"> </Button></RelativeLayout>
GridLayout 网格布局
<?xml version="1.0" encoding="utf-8"?><GridLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:rowCount="6" android:columnCount="4" xmlns:android="http://schemas.android.com/apk/res/android"> <TextView android:text="0" android:layout_height="wrap_content" android:layout_width="wrap_content" android:textSize="50sp" android:layout_columnSpan="4" > </TextView> <Button android:text="清除" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_columnSpan="4" > </Button> <Button android:text="1" android:textSize="26sp"/> <Button android:text="2" android:textSize="26sp"/> <Button android:text="3" android:textSize="26sp"/> <Button android:text="+" android:textSize="26sp"/> <Button android:text="4" android:textSize="26sp"/> <Button android:text="5" android:textSize="26sp"/> <Button android:text="6" android:textSize="26sp"/> <Button android:text="-" android:textSize="26sp"/> <Button android:text="7" android:textSize="26sp"/> <Button android:text="8" android:textSize="26sp"/> <Button android:text="9" android:textSize="26sp"/> <Button android:text="*" android:textSize="26sp"/> <Button android:text="." android:textSize="26sp"/> <Button android:text="0" android:textSize="26sp"/> <Button android:text="=" android:textSize="26sp"/> <Button android:text="/" android:textSize="26sp"/></GridLayout>
引入外部布局
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:orientation="vertical"> <!--引入提取出去的代码段,即引入外部布局 --> <include layout="@layout/layout_text"></include> <include layout="@layout/layout_text"></include> <include layout="@layout/layout_text"></include> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="OK"> </Button></LinearLayout>
样式和主题(Style and Theme)
不同点:
- Theme 是应用于Activity或者整个Application的,作用于单个Activity或者所有Activity,不能作用于某个控件的
<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.styledemo"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <!-- 调用主题 --> <!-- 调用主题 --> <activity android:name=".MainActivity" android:theme="@style/blueTheme"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application></manifest>
- Style是应用于某个(些)控件,作用于控件级别
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content"> <!-- 为TextView调用样式 --> <TextView style="@style/myfont" android:text="Hello World!" /></LinearLayout>
相同点:
- 都位于values文件夹下的style.xml中,定义的方法一样,都死控制UI的一堆属性
总结:相对而言Theme是作用于全局的,而Style是作用于局部的。定义方式一样,使用的地方不一样
注意点:当一个Activity中的控件应用了Theme中的样式又应用了Style中的样式,那么Style中的样式优先于Theme.
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style><!-- 绿色主题 --> <style name="blueTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary_blue</item> <item name="colorPrimaryDark">@color/colorPrimaryDark_blue</item> <item name="colorAccent">@color/colorAccent</item> </style><!-- 样式 --> <style name="myfont" parent="TextAppearance.AppCompat.Medium"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:textSize">20sp</item> <item name="android:textColor">#F00</item> </style>
屏幕适配
为不同的屏幕尺寸提供不同的位图
系统会根据屏幕的dpi选择适当的位图
所有mipmap目录都会保留在APK中
替换app logo
根据不同的屏幕分辨率,去找到或生成对应的logo,放在不同的文件夹下
图片的拉伸——点九图
智能手机中有自动横屏的功能,同一幅界面会在随着手机(或平板电脑)中的方向传感器的参数不同而改变显示的方向,在界面改变方向后,界面上的图形会因为长宽的变化而产生拉伸,造成图形的失真变形。
对比很明显,使用点九后,仍能保留图像的渐变质感,和圆角的精细度。
从中我们也可以理解为什么叫“点九PNG”,其实相当于把一张png图分成了9个部分(九宫格),分别为4个角,4条边,以及一个中间区域,4个角是不做拉伸的,所以还能一直保持圆角的清晰状态,而2条水 平边和垂直边分别只做水平和垂直拉伸,所以不会出现边会被拉粗的情况,只有中间用黑线指定的区域做拉伸。结果是图片不会走样。
更多相关文章
- Android 学习笔记--android――listview的多种行布局的复用
- android常用布局设置
- [Android] Json格式解析和文字图片传输
- Android SimpleAdapter自定义布局显示本地资源
- Android 之 四大组件、六大布局、五大存储
- Android 图片的浏览、缩放、拖动和自动居中
- android 从matrix获取处理过的图片的实际宽度
- Android 拍照 录音 拍视频 旋转 裁剪 压缩图片
- Android横竖屏加载不同布局的适配方案