Android UI

可视化编辑器的缺点

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

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

常见属性总结

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的排列方向

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

效果如图：

百分比布局

百分比布局的兼容性

打开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%

自定义控件

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

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();
            }});
    }
}