彈性佈局和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,結束,以後就用這個.

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章