自学Android第七天——布局

我们今天来学习各种布局吧,好看的界面都离不开布局和控件,之前我们学习了一些常用的控件,那么也来学习布局吧。布局其实并不难,记住一些关键点都能够设计一个漂亮的界面。

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文件。

    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的颜色更改成图片,更形象好看。接下来就是在另一个布局文件里添加如下代码:,最后别忘了在该布局文件对应的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中的代码,如下所示:

    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吧。因为这个控件很重要,也很常用。

你可能感兴趣的:(自学Android第七天——布局)