我们今天来学习各种布局吧,好看的界面都离不开布局和控件,之前我们学习了一些常用的控件,那么也来学习布局吧。布局其实并不难,记住一些关键点都能够设计一个漂亮的界面。
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文件时,都会弹出如下图:
这里需要点击Sync Now就可以了。接下来修改布局文件也就是xml文件。
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%"/>
你自己可以试试。看看运行出来的效果是什么样的。
创建自定义控件
引入布局:
先创建一个新的布局title.xml,代码如下:
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"/>
你可以将background的颜色更改成图片,更形象好看。接下来就是在另一个布局文件里添加如下代码:
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中的代码,如下所示:
android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent"> android:layout_width="match_parent" android:layout_height="wrap_content"/>
添加自定义控件和添加普通控件方法基本一样,只不过在添加自定义控件时,我们需要指明控件的完整类名,包名是不可省略的。比如上面的(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吧。因为这个控件很重要,也很常用。