我们今天来学习各种布局吧，好看的界面都离不开布局和控件，之前我们学习了一些常用的控件，那么也来学习布局吧。布局其实并不难，记住一些关键点都能够设计一个漂亮的界面。
LinearLayout（线性布局）
线性布局是我们最常用的布局之一。在之前的代码中，都是把所有的其他控件放置在线性布局中的。不过既然是线性布局，那么肯定就不止一个方向。系统默认的是android:orientation="vertical"。那么都是什么意思呢。orientation表示设置排列的方向，vertical是垂直排列，horizontal是水平排列。
在前面我们提到了android:gravity="center"，在这我们提一下android:gravity_layout="center"。这两者用法差不多，前者是用于指定文字在控件中的对齐方式，后者是用于指定控件在布局中的对齐方式。
最重要的是android:layout_weight="1"这个权重。那么什么是权重（layout_weight）呢？通俗地讲，权重（layout_weight）就是对线性布局指定方向（水平或垂直）上剩余空间分配的一个规则。慢慢体会这个权重的意义吧。
RelativeLayout(相对布局)
relativelayout也是一种常用的布局。它和线性布局的排列规则不同，相对布局更加随意，不过属性却比线性布局多很多，不过都是有规律可循的。
FrameLayout(帧布局)
由于framelayout相比前面两种布局简单得很多，因此它应用的场景也少了很多。这种布局没有方便的定位方式，所有的控件都会默认摆放在布局的左上角。总之，由于其定位方式的欠缺，导致它的应用场景也比较少，不过在碎片那可以用到。
百分比布局
为了解决相对布局和帧布局无法使用wrap_content和match_parent的问题，android为我们引入了一种全新的布局方式——百分比布局。由于LinearLayout本身已经支持按比例指定控件大小了，因此百分比布局只为FrameLayout和RelativeLayout进行功能拓展，提供PercentFrameLayout和PercentRelativeLayout这两种全新的布局。
百分比布局属于新增布局，那么要怎么才能让新增布局在所以的android版本使用呢？为此，android团队将百分比布局定义在了support库中，我们只需要在项目的build.gradle中增加百分比布局库的依赖，就能保证百分比布局的兼容性啦。
打开app/build.gradle文件，在dependencies闭包中添加如下内容（加粗字段）：
dependencies {
compile fileTree(dir:'libs',include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
excludegroup:'com.android.support',module:'support-annotations'
})
compile'com.android.support:appcompat-v7:24.2.1'
compile'com.android.support.percent:24.2.1'
testCompile'junit:junit:4.12'
}
每当修改了gradle文件时，都会弹出如下图：
修改gradle后的提示
这里需要点击Sync Now就可以了。接下来修改布局文件也就是xml文件。
<com.support.percent.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/but_1"
android:text="Button 1"
android:layout_gravity="left|top"
app:layout_widthPercent="50%"
app:layout_heightPercnet="50%"/>
android:id="@+id/but_2"
android:text="Button 2"
android:layout_gravity="left|top"
app:layout_widthPercent="50%"
app:layout_heightPercnet="50%"/>
android:id="@+id/but_3"
android:text="Button 3"
android:layout_gravity="left|bottom"
app:layout_widthPercent="50%"
app:layout_heightPercnet="50%"/>
android:id="@+id/but_4"
android:text="Button 4"
android:layout_gravity="right|bottom"
app:layout_widthPercent="50%"
app:layout_heightPercnet="50%"/>
</com.support.percent.PercentFrameLayout>
你自己可以试试。看看运行出来的效果是什么样的。
创建自定义控件
引入布局：
先创建一个新的布局title.xml，代码如下：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#838181">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/but_return"
android:layout_gravity="center"
android:layout_margin="5dp"
android:text="back"
android:textColor="#fff"
android:background="#9b9999"/>
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="@+id/title_text"
android:layout_weight="1"
android:layout_gravity="center"
android:gravity="center"
android:text="Title Text"
android:textColor="#fff"
android:textSize="24dp"
android:background="#9b9999"/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/but_edit"
android:layout_gravity="center"
android:layout_margin="5dp"
android:text="EDIT"
android:textColor="#fff"
android:background="#9b9999"/>
</LinearLayout>
你可以将background的颜色更改成图片，更形象好看。接下来就是在另一个布局文件里添加如下代码：<include layout="@layout/title"/>，最后别忘了在该布局文件对应的activity中添加将系统自带的标题栏隐藏掉。代码如下所示：
public class MainActivityextends AppCompatActivityimplements View.OnClickListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//隐藏系统自带的标题栏
ActionBar actionBar=getSupportActionBar();
if(actionBar!=null){
actionBar.hide();
}
}
}
运行一下看看效果吧。
标题栏
创建自定义控件
引入布局的技巧确实解决了重复编写布局（xml）代码的问题，但是如果布局中有一些控件要求能够响应事件，我们还是需要每个活动中为这些控件单独编写一次事件注册的代码。比如说标题栏中的返回按钮，其实不管是在哪个活动中，这个按钮的功能都是相同的，即销毁当前活动。
如果在每一个活动都需要重新注册一遍返回按钮的点击事件，无疑会增加很多重复代码，这 种情况最好是使用自定义控件的方法来解决。
新建TitleLayout继承LinearLayout，让它成为我们自定义的标题栏控件，代码如下所示：
public class TitleLayout extends LinearLayout {
public TitleLayout(Context context, AttributeSet attris){
super(context,attris);
LayoutInflater.from(context).inflate(R.layout.title,this);
}
}
我们分析一下上面的代码吧，首先我们重写了Linearlayout中带有两个参数的构造函数，在布局中引入TitleLayout控件就会调用这个构造函数。然后在构造函数中需要对标题栏布局进行动态加载，这就要借助LayoutInflater来实现了。通过LayoutInflater的from（）方法可以构建出一个Layoutinflater对象，然后调用inflate（）方法就可以动态加载一个布局文件,它（inflate（）方法）接收两个参数，第一个参数要加载的布局文件id，我们传入R.layout.title，第二个参数是给加载好的布局在添加一个父布局，这里我们想要指定为TitleLayout，于是就直接传入this。
然后我们在布局文件中添加这个自定义控件，修改activity_main.xml中的代码，如下所示：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.dell.uiwidgettext.TitleLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
添加自定义控件和添加普通控件方法基本一样，只不过在添加自定义控件时，我们需要指明控件的完整类名，包名是不可省略的。比如上面的（com.example.dell.uiwidgettext.TitleLayout）。
最后的话，我们修改TitleLayout中的代码，如下所示：
public class TitleLayoutextends LinearLayout {
public TitleLayout(Context context, AttributeSet attris){
super(context,attris);
LayoutInflater.from(context).inflate(R.layout.title,this);
Button back=(Button)findViewById(R.id.but_back);
Button edit=(Button)findViewById(R.id.but_edit);
back.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
((Activity)getContext()).finish();
}
});
edit.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getContext(), "You clicked Edit button", Toast.LENGTH_SHORT).show();
}
});
}
}
好啦，运行一下试试吧。我们后面单独用一天来学习ListView吧。因为这个控件很重要，也很常用。
网友评论