布局与样式

关于布局的理论讲解

相对布局 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条水平边和垂直边分别只做水平和垂直拉伸，所以不会出现边会被拉粗的情况，只有中间用黑线指定的区域做拉伸。结果是图片不会走样。