弹性布局和AndroidAutoSize屏幕适配

导言:
技术在不断的革新,需要有新的技术代替老的方案,老的不再维护,新的一直推荐,作为技术也不能一直停滞不前

概念:
弹性布局(约束布局): ConstraintLayout可以算是RelativeLayout的升级版
屏幕适配: 百分比和最小宽度从px的AndroidAutoLayout方案到dp,pm等主副单位AndroidAutoSize方案

案例步骤:
1:ConstraintLayout(弹性布局(约束布局)):
基本属性:crr,clr,ctb等等,按照400x640设计图dp编写

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="@dimen/dp400"
    android:layout_height="wrap_content"
    tools:context="MainActivity">

    <com.youth.banner.Banner
        android:id="@+id/main_banner"
        android:layout_width="wrap_content"
        android:layout_height="315dp"
        android:layout_alignParentTop="true"
        android:background="#fff"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_alignParentTop="true"
        android:alpha="0.2"
        android:background="#FFFFFF"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:layout_width="100dp"
        android:layout_height="17dp"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="7dp"
        android:src="@drawable/logo_main"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/main_exit_dialog_iv"
        android:layout_width="28dp"
        android:layout_height="18dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="4dp"
        android:src="@drawable/back_button_main"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/main_notice_iv"
        android:layout_width="18dp"
        android:layout_height="10dp"
        android:layout_marginLeft="@dimen/dp16"
        android:layout_marginTop="@dimen/dp10"
        android:background="@drawable/notice"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/main_banner" />

    <TextView
        android:id="@+id/main_notice_detail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/dp10"
        android:layout_marginTop="@dimen/dp5"
        android:text="@string/lottery_notice"
        android:textSize="12sp"
        app:layout_constraintLeft_toRightOf="@+id/main_notice_iv"
        app:layout_constraintTop_toBottomOf="@+id/main_banner" />

    <ImageView
        android:id="@+id/main_image_iv"
        android:layout_width="171dp"
        android:layout_height="256dp"
        android:layout_marginLeft="@dimen/dp16"
        android:layout_marginTop="@dimen/dp5"
        android:src="@drawable/main_image"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/main_notice_iv" />

    <Button
        android:id="@+id/main_p3_bt"
        android:layout_width="55dp"
        android:layout_height="@dimen/dp32"
        android:layout_marginLeft="12dp"
        android:layout_marginTop="@dimen/dp5"
        android:background="@drawable/button_select_p3"
        tools:layout_editor_absoluteX="200dp"
        tools:layout_editor_absoluteY="346dp"
        app:layout_constraintLeft_toRightOf="@+id/main_image_iv"
        app:layout_constraintTop_toBottomOf="@+id/main_notice_detail"/>

    <Button
        android:id="@+id/main_p5_bt"
        android:layout_width="@dimen/dp55"
        android:layout_height="32dp"
        android:layout_marginLeft="12dp"
        android:layout_marginTop="@dimen/dp5"
        android:background="@drawable/button_select_p5"
        app:layout_constraintLeft_toRightOf="@+id/main_p3_bt"
        app:layout_constraintTop_toBottomOf="@id/main_notice_iv" />

    <Button
        android:id="@+id/main_p10_bt"
        android:layout_width="55dp"
        android:layout_height="32dp"
        android:layout_marginLeft="12dp"
        android:layout_marginTop="@dimen/dp5"
        android:background="@drawable/button_select_p10"
        app:layout_constraintLeft_toRightOf="@id/main_p5_bt"
        app:layout_constraintTop_toBottomOf="@id/main_notice_iv" />

    <TextView
        android:id="@+id/main_ten_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/dp17"
        android:layout_marginTop="@dimen/dp13"
        android:text="bbbbbbbbb"
        android:textSize="12sp"
        app:layout_constraintLeft_toRightOf="@id/main_image_iv"
        app:layout_constraintTop_toBottomOf="@id/main_p3_bt" />

    <TextView
        android:id="@+id/main_ticket_num_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/dp19"
        android:layout_marginRight="@dimen/dp19"
        android:includeFontPadding="false"
        android:text="0"
        android:textColor="@color/result_view"
        android:textSize="80sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toRightOf="@+id/main_image_iv"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/main_ten_tv" />

    <Button
        android:id="@+id/main_sub_bt"
        android:layout_width="@dimen/dp60"
        android:layout_height="@dimen/dp60"
        android:layout_marginLeft="@dimen/dp13"
        android:layout_marginTop="@dimen/dp63"
        android:background="@drawable/button_select_sub"
        app:layout_constraintLeft_toRightOf="@+id/main_image_iv"
        app:layout_constraintTop_toBottomOf="@id/main_ten_tv" />

    <Button
        android:id="@+id/main_add_bt"
        android:layout_width="@dimen/dp60"
        android:layout_height="@dimen/dp60"
        android:layout_marginLeft="@dimen/dp13"
        android:layout_marginRight="@dimen/dp13"
        android:layout_marginTop="@dimen/dp63"
        android:background="@drawable/button_select_add"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/main_ten_tv" />

    <TextView
        android:id="@+id/main_xjf_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/dp22"
        android:layout_marginTop="5dp"
        android:text="xxx"
        android:textColor="@color/result_view"
        android:textSize="12sp"
        app:layout_constraintLeft_toRightOf="@+id/main_image_iv"
        app:layout_constraintTop_toBottomOf="@id/main_sub_bt" />

    <TextView
        android:id="@+id/main_payment_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="0"
        android:textColor="@color/color_006"
        android:textSize="12sp"
        app:layout_constraintLeft_toRightOf="@+id/main_xjf_tv"
        app:layout_constraintTop_toBottomOf="@id/main_sub_bt" />

    <TextView
        android:id="@+id/main_yuan_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="aaa"
        android:textColor="@color/result_view"
        android:textSize="12sp"
        app:layout_constraintLeft_toRightOf="@+id/main_payment_tv"
        app:layout_constraintTop_toBottomOf="@id/main_sub_bt" />

    <TextView
        android:id="@+id/main_yuxia_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/dp15"
        android:layout_marginTop="5dp"
        android:text="yyyyy:"
        android:textColor="@color/result_view"
        android:textSize="12sp"
        app:layout_constraintLeft_toRightOf="@+id/main_yuan_tv"
        app:layout_constraintTop_toBottomOf="@id/main_sub_bt" />

    <TextView
        android:id="@+id/main_ticket_surplus_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="0"
        android:textColor="@color/color_006"
        android:textSize="12sp"
        app:layout_constraintLeft_toRightOf="@+id/main_yuxia_tv"
        app:layout_constraintTop_toBottomOf="@id/main_sub_bt" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="aaa"
        android:textColor="@color/result_view"
        android:textSize="12sp"
        app:layout_constraintLeft_toRightOf="@+id/main_ticket_surplus_tv"
        app:layout_constraintTop_toBottomOf="@id/main_sub_bt" />

    <Button
        android:id="@+id/main_go_payment_bt"
        android:layout_width="186dp"
        android:layout_height="43dp"
        android:layout_marginLeft="@dimen/dp13"
        android:layout_marginTop="@dimen/dp5"
        android:background="@drawable/go_buy"
        app:layout_constraintLeft_toRightOf="@+id/main_image_iv"
        app:layout_constraintTop_toBottomOf="@id/main_xjf_tv" />

    <TextView
        android:id="@+id/main_device_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/dp15"
        android:layout_marginTop="@dimen/dp10"
        android:text="aaaaa: "
        android:textSize="11sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/main_image_iv" />

    <TextView
        android:id="@+id/main_device_serial_num_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dp10"
        android:text="00000000"
        android:textSize="11sp"
        app:layout_constraintLeft_toRightOf="@+id/main_device_tv"
        app:layout_constraintTop_toBottomOf="@+id/main_image_iv" />

</android.support.constraint.ConstraintLayout>

2:AndroidAutoSize
2.1:导包

implementation 'me.jessyan:autosize:1.1.0'

2.2:配置androidmainfest,这个是按照UI给的设计图

 <meta-data
            android:name="design_width_in_dp"
            android:value="400" />
        <meta-data
            android:name="design_height_in_dp"
            android:value="640" />

2.3:其他API
CustomAdapt:修改当前页面的设计图尺寸

public class MainActivity extends AppCompatActivity  implements CustomAdapt  {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);
    }
     // @return {@code true} 为按照宽度进行适配, {@code false} 为按照高度进行适配
    @Override
    public boolean isBaseOnWidth() {
        return true;
    }
//根据上面这个赋值,比如原图是宽度400适配,这个改成360宽度
    @Override
    public float getSizeInDp() {
        return 360;
    }
}

CancelAdapt :保存原样,放弃自动适配

ok,结束,以后就用这个.

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
弹性布局中,实现适配的方法有多种。首先是使用align-items属性来设置子元素在交叉轴上的对齐方式。align-items属性可以取值为flex-start、flex-end、center、baseline和stretch,分别表示子元素在交叉轴上从起始位置对齐、从末尾位置对齐、居中对齐、基线对齐和拉伸对齐。 另外,可以使用flex属性来控制子元素在主轴上的伸缩性。flex属性是flex-grow、flex-shrink和flex-basis的简写,默认值为0 1 auto。其中,flex-grow表示子元素在剩余空间上的放大比例,flex-shrink表示子元素在空间不足时的缩小比例,flex-basis表示子元素在未设置宽度时的基准宽度。通过调整这些属性的值,可以实现子元素的适配效果。 此外,还可以使用align-self属性来单独调整某个子元素在交叉轴上的对齐方式。align-self属性可以取值为auto、flex-start、flex-end、center、baseline和stretch,与align-items属性类似,但是它作用于单个子元素,可以覆盖align-items的设置。 最后,可以使用flex-flow属性来同时控制flex-direction和flex-wrap两个属性。flex-direction用于设置主轴的方向,可以取值为row、row-reverse、column和column-reverse,分别表示主轴从左往右、从右往左、从上往下和从下往上。flex-wrap用于设置子元素是否换行,可以取值为nowrap、wrap和wrap-reverse,分别表示不换行、换行和反向换行。通过调整这两个属性的值,可以实现适应不同屏幕尺寸的布局效果。 综上所述,通过调整align-items、flex属性、align-self和flex-flow等属性的值,可以实现flex弹性布局适配效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值