可视化编辑器的缺点

Android Studio和Eclipse中都提供了相应的可视化编辑器，但不推荐使用，原因如下：

不利于你去真正了解界面背后的实现原理。
屏幕适配性一般不好
很难胜任复杂的界面

常见属性总结

common

属性	说明
android:id="@+id/text_view"
android:layout_weight="1"	(线性布局)在排列方向上所占比例，有了它，对应的width 或height 失效
android:layout_width="match_parent"	与父元素一致
android:layout_height="wrap_content"	刚好包住里面的内容
android:gravity="center"	文字在控件中的对齐方式
android:textColor="#19835a"
android:text="This is TextView"
android:textAllCaps="false"
android:textSize="24sp"

位置控制

属性	所在布局	说明
android:layout_gravity="top"	线性/帧/百分比	控件在布局中的对齐方式
android:layout_alignParentLeft="true"	相对布局	控件在父布局的对齐方式
android:layout_alignParentTop="true	相对布局
android:layout_alignParentBottom="true"	相对布局
android:layout_alignParentRight="true"	相对布局
android:layout_centerInParent="true"	相对布局
android:layout_above="@id/button3"	相对布局	控件相对另一控件的位置
android:layout_toLeftOf="@id/button3"	相对布局
android:layout_below="@id/button3"	相对布局
android:layout_toRightOf="@id/button3"	相对布局
android:layout_alignLeft	相对布局	让控件的左边缘和另一个对齐
android:layout_alignRight	相对布局
android:layout_alignTop	相对布局
android:layout_alignBottom	相对布局
android:layout_gravity="left\|top"	百分比布局	指定位置
app:layout_widthPercent="50%"	百分比布局	指定所占比例
app:layout_heightPercent="50%"	百分比布局

注意，当一个控件去引用另一个控件的id时，该控件一定要定义在引用控件的后面，不然会出现找不到id的情况。

EditText

属性	说明
android:hint="type something here"
android:maxLines="2"

ProgressBar

属性	说明
style="?android:attr/progressBarStyleHorizontal"	长条形
android:max="100"	进度最大值

ImageView

属性	说明
android:src="@drawable/img_1"

LinearLayout

属性	说明
android:orientation="vertical"	LinearLayout的排列方向

一个元素保持大小，另一个占满剩余空间：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="@+id/input_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Type something"
/>
<Button
android:id="@+id/send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Send"
/>
</LinearLayout>

效果如图：

百分比布局

百分比布局的兼容性

打开app/build.gradle文件，在dependencies 闭包中添加百分比布局库的依赖。教程里是这样的：

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:24.2.1'
compile 'com.android.support:percent:24.2.1'  //百分比布局库的依赖
testCompile 'junit:junit:4.12'
}

实际根据版本我加完是这样的：

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    implementation 'com.android.support:percent:28.0.0' //百分比库的依赖
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

}

改完保存后，会出现提示：

这个提示告诉我们， gradle文件自上次同步之后又发生了变化，需要再次同步才能使项目正常工作。这里只需要点击Sync Now就可以了，然后gradle会开始进行同步，把我们新添加的百分比布局库引入到项目当中。

百分比布局的用法

android:layout_gravity="left|top"
app:layout_widthPercent="50%"
app:layout_heightPercent="50%"
这三句表示在左上，长宽各占50%

<android.support.percent.PercentFrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/button1"
        android:text="Button 1"
        android:layout_gravity="left|top"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        />
    <Button
        android:id="@+id/button2"
        android:text="Button 2"
        android:layout_gravity="right|top"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        />
    <Button
        android:id="@+id/button3"
        android:text="Button 3"
        android:layout_gravity="left|bottom"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"/>
    <Button
        android:id="@+id/button4"
        android:text="Button 4"
        android:layout_gravity="right|bottom"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        />
</android.support.percent.PercentFrameLayout>

自定义控件

新建layout.xml和activity，
activity中用Layoutinflater.from方法获得layout
activity中注册按钮的onclick函数
要引用它的xml中加上如下内容：

<com.example.uiwidgettest.TitleLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

activity示例如下：

public class TitleLayout extends LinearLayout {
    public TitleLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.title, this);
        /*inflate() 方法接收两个参数，
        第一个参数是要加载的布局文件的id， 这里我们传入R.layout.title，
        第二个参数是给加载好的布局再添加一个父布局， 这里我们想要指定为TitleLayout， 于是直接传入this 。*/
        Button titleBack = (Button) findViewById(R.id.title_back);
        Button titleEdit = (Button) findViewById(R.id.title_edit);
        titleBack.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                ((Activity) getContext()).finish();
            }
        });
        titleEdit.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getContext(), "You clicked Edit button",
                        Toast.LENGTH_SHORT).show();
            }});
    }
}