zoukankan      html  css  js  c++  java
  • 相对布局和帧布局(2017年10月31日)

    2017.10.31

    1、相对布局——RelativeLayout

    当前布局由其他参照物来确定。参照物:

    1)父级元素作为参照物——例如父容器

    2)同级元素作为参照物——例如并列的元素

    相对位置确定涉及到的属性:

    含义:类似于“它(A)在它(B)的左边”词语

    父级元素作为参照物:

    alignParentLeft

    alignParentTop

    alignParentRight

    alignParentBottom

    layout_centerInParent

    同级元素作为参照物:

    toRightOf

    toLeftOf

    above

    below

    同级元素作为参照物(表示两两之间):

    alignBaseLine

    alignLeft

    alignRight

    alignTop

    alignBottom

    【案例】点赞+1

     

     

    MainActivity.java

     

    效果:

     

    【案例】在适应不同屏幕大小时,选择相对布局

    activity_main2.xml

     

    效果:

     

    或者

     

     

    【案例】如果在logo右侧添加文字,如何处理?

     

     

     

    效果:

     

     

    2、帧布局——FrameLayout

    每一个帧布局内部的元素,处于不同层次中,层次可以互相覆盖。也就是一个元素一个层次。

    【案例】3个按钮,叠加。

     

    效果:

     

    【案例】使用FrameLayout模拟广告的出现,点击空白区域,广告消失。

     

    Main4Activity.java

     

    效果:

     

    3、表格布局——TableLayout

    其中间部分划分为行TableRow

    TableLayout的属性:

    stretchColumns表示拉伸某些列,填满剩余空间。0,表示第一列,1表示第二列,可以多列,用逗号隔开。

    shrinkColumns,表示收缩列,子元素超出空间,收缩适应剩余空间。填列号。

    collapseColumns,表示隐藏某些列,填列号。

    【案例】登录界面设计

     

    效果:

     

    【注意】去掉界面标题栏

    public class Main6Activity extends AppCompatActivity {

        @Override

        protected void onCreate(Bundle savedInstanceState) {

            requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题栏,必须写在oncreate的第一行,满屏

            super.onCreate(savedInstanceState);

            setContentView(R.layout.activity_main6);

            if (getSupportActionBar() != null){//如果有actionbar,也需要去掉,满屏

                getSupportActionBar().hide();

            }

        }

    }

    【作业】

    http://www.zcool.com.cn/work/ZMTIzNTE4NTY=.html

    使用布局设计“图1,2,3,4

     

     

     

     

  • 相关阅读:
    vue中Axios的封装和API接口的管理
    解决Vue报错:TypeError: Cannot read property 'scrollHeight' of undefined
    JS-scrollTop、scrollHeight、clientTop、clientHeight、offsetTop、offsetHeight的理解
    理解Vue中的ref和$refs
    理解Vue中的nextTick
    CSS——overflow的参数以及使用
    JS数据结构——队列
    Vue中实现聊天窗口overflow:auto自动滚动到底部,实现显示当前最新聊天消息
    Vue中无法检测到数组的变动
    JS-观察者模式
  • 原文地址:https://www.cnblogs.com/sanshengshitouhua/p/14577168.html
Copyright © 2011-2022 走看看