Android布局ConstraintLayout代碼修改約束及輔助功能
實踐過程
代碼修改約束
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/idConstraintLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/idTxt" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/color_00ff00" android:padding="10dp" android:text="芝麻粒兒" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" /> <Button android:id="@+id/idBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="變化" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
public class ActivityJavaConstraintLayout extends AppCompatActivity { @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_java_constraint); ConstraintLayout idConstraintLayout = findViewById(R.id.idConstraintLayout); findViewById(R.id.idBtn).setOnClickListener(v -> { ConstraintSet constraintSet = new ConstraintSet(); constraintSet.clone(idConstraintLayout); //設置相對父布局劇中 constraintSet.centerHorizontally(R.id.idTxt, ConstraintSet.PARENT_ID); constraintSet.centerVertically(R.id.idTxt, ConstraintSet.PARENT_ID); //可以添加動畫 TransitionManager.beginDelayedTransition(idConstraintLayout); constraintSet.applyTo(idConstraintLayout); }); //還有其他形式 控件A底部和空間B頂部對其 等同于xml中屬性 app:layout_constraintBottom_toTopOf // constraintSet.connect(R.id.idTxtA, ConstraintSet.BOTTOM, R.id.idTxtB, ConstraintSet.TOP); } }
除了上面的效果,我們還能實現(xiàn)切換布局的時候,相同控件動畫化。我們準備兩個布局,布局內id一致,但是位置不同。
布局A如下:
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/idConstraintLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/idTxt" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/color_00ff00" android:padding="10dp" android:text="芝麻粒兒" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" /> <Button android:id="@+id/idBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="變化" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" /> <Button android:id="@+id/idBtnBack" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="回去" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
布局B如下:
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/idConstraintLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/idTxt" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/color_00ff00" android:padding="10dp" android:text="芝麻粒兒" app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent" /> <Button android:id="@+id/idBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="變化" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" /> <Button android:id="@+id/idBtnBack" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="回去" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
public class ActivityJavaConstraintLayout extends AppCompatActivity { @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_java_constraint); ConstraintLayout idConstraintLayout = findViewById(R.id.idConstraintLayout); //變化 findViewById(R.id.idBtn).setOnClickListener(v ->{ ConstraintSet constraintSet = new ConstraintSet(); constraintSet.clone(this,R.layout.activity_java_constraint_b); TransitionManager.beginDelayedTransition(idConstraintLayout); constraintSet.applyTo(idConstraintLayout); }); //恢復 findViewById(R.id.idBtnBack).setOnClickListener(v->{ ConstraintSet constraintSet = new ConstraintSet(); constraintSet.clone(this,R.layout.activity_java_constraint); TransitionManager.beginDelayedTransition(idConstraintLayout); constraintSet.applyTo(idConstraintLayout); }); } }
??輔助功能
Guideline
表示輔助線,需要使用單獨的不是你實際布局的View控件來做,因為是輔助工具,所以真實運行的時候不會繪制,僅在你寫布局的時候幫助你繪制,輔助你完成布局,有三個相關屬性:
app:layout_constraintGuide_percent=“0.5” 在父布局的百分比位置。
app:layout_constraintGuide_begin=“10dp” 距離父布局開始位置,橫向為左,縱向為頂部。
app:layout_constraintGuide_end=“10dp” 距離父布局末尾位置。
需要和android:orientation結合使用,vertical是縱輔助線,horizontal是橫向輔助線。
Barrier
寓意屏障,比如我們有幾個不固定寬度或高度的控件,而有一個控件想一直在這幾個中的最長的那個控件邊緣對其,按照以前我們是將這幾個控件包裹嵌套一層來實現(xiàn)。但是ConstraintLayout可以使用Barrier輔助工具實現(xiàn)。重點有兩個屬性app:barrierDirection表示屏障在目標控件的哪個方向,app:constraint_referenced_ids指定目標控件,注意多個逗號隔開。
<TextView android:id="@+id/idTxt1" ... /> <TextView android:id="@+id/idTxt2" app:layout_constraintTop_toBottomOf="@+id/idTxt1" ... /> <androidx.constraintlayout.widget.Barrier android:id="@+id/idBarrier" android:layout_width="wrap_content" android:layout_height="wrap_content" app:barrierDirection="right" app:constraint_referenced_ids="idTxt1,idTxt2" /> <TextView android:id="@+id/idTxt3" app:layout_constraintLeft_toRightOf="@id/idBarrier" ... />
Flow
這是網(wǎng)格布局,不具體介紹了,就說一下屬性吧。
- app:flow_wrapMode="aligned":有3個值:aligned-絕對對齊(和網(wǎng)格對齊類似);none-默認方式,成為一排,寬度不夠,從兩邊出去;chain-和絕對對齊有點出入的是,比如6個元素,第一排4個,第二排是2個,這2個元素會平分橫屏寬度
- app:flow_verticalGap和app:flow_horizontalGap:表示豎直間距或橫向間距
- android:orientation="horizontal":水平方向的流式還是豎直方向的流式
- app:flow_maxElementsWrap="":表示一行幾個元素
- app:flow_verticalAlign="top":有四個值:top,bottom,center,baseline。每一行元素的對齊方式
- app:flow_horizontalBias="float":low的bias偏移,只在style為packed時生效
- app:flow_horizontalStyle="spread|spread_inside|packed":當wrapMode為chain或ALIGNED時生效
Placeholder
這節(jié)其實算是和小重點,感興趣的自己去搜索吧,主要作用是占位功能,占位之后其他控件可以通過setContentId移動到該位置。
Group和Layer
能很好的控制多個控件的顯示和隱藏。app:constraint_referenced_ids指定目標控件的id,多個逗號隔開。
<androidx.constraintlayout.widget.Group android:id="@+id/idGroup" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="visible" app:constraint_referenced_ids="idTxt,idBtn" />
Layer不僅能實現(xiàn)Group的隱藏,還能修改背景,使用方式和Group一致。
以上就是Android布局ConstraintLayout代碼修改約束及輔助功能的詳細內容,更多關于Android ConstraintLayout 布局約束的資料請關注腳本之家其它相關文章!
相關文章
Android編程UI設計之GridView和ImageView的用法
這篇文章主要介紹了Android編程UI設計之GridView和ImageView的用法,結合實例形式較為詳細的分析了Android中GridView和ImageView組件的相關方法使用技巧,需要的朋友可以參考下2016-01-01Android 自定義 HorizontalScrollView 打造多圖片OOM 的橫向滑動效果(實例代碼)
這篇文章主要介紹了Android 自定義 HorizontalScrollView 打造多圖片OOM 的橫向滑動效果(實例代碼),需要的朋友可以參考下2017-10-10Intel HAXM為Android 模擬器加速解決模擬器運行慢的問題
Android 模擬器一直以運行速度慢著稱, 本文介紹使用 Intel HAXM 技術為 Android 模擬器加速, 使模擬器運行度媲美真機, 徹底解決模擬器運行慢的問題,感興趣的朋友可以了解下哦2013-01-01Android Studio 運行時出現(xiàn)的警告信息解決辦法
這篇文章主要介紹了Android Studio 運行時出現(xiàn)的警告信息解決辦法的相關資料,需要的朋友可以參考下2017-06-06Android開發(fā)設計nowinandroid構建腳本學習
這篇文章主要為大家介紹了Android開發(fā)設計nowinandroid構建腳本學習,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11Android網(wǎng)絡工具類NetworkUtils詳解
這篇文章主要為大家詳細介紹了Android網(wǎng)絡工具類NetworkUtils,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-04-04