Android基础知识

Android中将控件放到线性布局的任意位置(四)

2018-06-26  本文已影响2人  野岗狼沟兜

1、 先来分析尝试下下

Android中将控件放到线性布局的任意位置(三)中,我们学习了解了线性布局中常用属性layout_gravityorientation之间相“冲突”的地方,以及其为何会有这个“冲突”揣测。在其末尾,我们提出一个需求,详见上文。

  1. 先用layout_gravity练练手
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    tools:context=".MainActivity"
    android:orientation="horizontal"
    >
    <TextView
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:text="第一个TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />

    <TextView
        android:layout_gravity="bottom"
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#555555"
        android:text="第二个TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />
</LinearLayout>

看效果:


1.png
  1. 那么用gravity属性来控制。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:gravity="bottom"
    >
    <TextView
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:text="第一个TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />

    <TextView
        android:layout_gravity="bottom"
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#555555"
        android:text="第二个TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />
</LinearLayout>

我们将orientation改为竖直方向,并在线性布局中设置android:gravity="bottom"
看效果:

2.png
这个结果你也应该预料到的,否则请细看前面三篇文章。(在zhiqian设置android:gravity="bottom"之前,两者从上到下,排在屏幕顶部的),现在效果是从上到下,排在底部。

先认识认识layout_weight

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:gravity="bottom"
    >
    <TextView
        android:layout_weight="1"
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:text="第一个TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />

    <TextView
        android:layout_weight="1"
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#555555"
        android:text="第二个TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />
</LinearLayout>

效果:

3.png
就是酱紫,属性layout_weight就是布局在父布局所提供的空间中所占的比例,上面代码将父布局提供的空间(所有红色部分)以一比一平分,我们两个TextView宽度都是只有内容宽(包裹内容),并未占满屏幕(所以蓝色、灰色只占了屏幕从上到下的、与其内容宽的部分)。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:gravity="bottom"
    >
    <TextView
        android:layout_weight="1"
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:text="第一个TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />

    <TextView
        android:layout_weight="1"
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#555555"
        android:text="第二个TextView"
        android:textColor="#ffffff"
        android:textSize="25sp"
        android:gravity="bottom"/>
</LinearLayout>

效果:

4.png
在上一步情况下,用gravity属性修改第二个TextView中内容的位置就OK了。

正确的姿势是

废话不多,上代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:gravity="bottom"
    >
    <TextView
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:text="第一个TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />
    <TextView
        android:textSize="25sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#00ff00"
        android:text="我就只想占个位置"/>

    <TextView
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#555555"
        android:text="第二个TextView"
        android:textColor="#ffffff"
        android:textSize="25sp"
        android:gravity="bottom"/>
</LinearLayout>

效果:

5.png
看,既然在父布局是竖直方向布局的情况下,我是不能通过子控件的gravity属性指定该子控件位置,那么我就依你的规则(从上到下排),在需要分别在顶部、底部显示内容的空间之间,添加一个占位置的空间,并让这个控件占满屏幕剩余空间就可以了。layout_weight属性有这么一个巧用:

巧用layout_weight属性,填满空白空间

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    tools:context=".MainActivity"
    android:orientation="horizontal"
    android:gravity="bottom"
    >
    <TextView
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:text="第一"
        android:textColor="#ffffff"
        android:textSize="25sp" />
    <TextView
        android:textSize="25sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#00ff00"
        android:text="只想占个位置"/>

    <TextView
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#555555"
        android:text="第二"
        android:textColor="#ffffff"
        android:textSize="25sp"
        android:gravity="bottom"/>
</LinearLayout>

效果:


6.png
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="horizontal"
    >
    <TextView
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一"
        android:textSize="25sp" />
    <TextView
        android:gravity="center"
        android:textSize="25sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="只想占个位置"/>

    <TextView
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二"
        android:textSize="25sp"
        android:gravity="bottom"/>
</LinearLayout>

效果:


7.png

代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    >
    <TextView
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一"
        android:textSize="25sp" />
    <TextView
        android:gravity="center"
        android:textSize="25sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="只想占个位置"/>

    <TextView
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二"
        android:textSize="25sp"
        android:gravity="bottom"/>
</LinearLayout>
8.png

我做了些小小的改动,大家可以结合图片代码,体会下这几篇文章我们所学得东西。如果你在线性布局中还有什么问题,欢迎留言讨论,我会尽我所能回答问题
over.

上一篇 下一篇

猜你喜欢

热点阅读