finsh ConstraintLayout

6 years ago · ccad53b5b6
parent ab74a1bbb0
commit ccad53b5b6
4 changed files with 336 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -21,6 +21,7 @@ Android Notes
 1. [WebView](https://github.com/Omooo/Android-Notes/blob/master/blogs/Android/WebView.md)
 2. [RecyclerView](https://github.com/Omooo/Android-Notes/blob/master/blogs/Android/RecyclerView.md)
 3. [ViewPager](https://github.com/Omooo/Android-Notes/blob/master/blogs/Android/ViewPager.md)
+4. [ConstraintLayout](https://github.com/Omooo/Android-Notes/blob/master/blogs/Android/ConstraintLayout.md)

 ##### 其他

--- a/blogs/Android/ConstraintLayout.md
+++ b/blogs/Android/ConstraintLayout.md
@ -0,0 +1,234 @@
+---
+ConstraintLayout 一篇就够了～
+---
+
+#### 目录
+
+1. 基本使用
+   1. 相对位置
+   2. 设置边距
+   3. 水平/垂直偏移量
+   4. 按比例设置
+   5. 链
+   6. GuideLine
+2. 代码设置约束以及动画
+3. 优势
+4. 注意事项
+   1. 可见性
+   2. margin 负值问题
+   3. 区分 0dp 、match_parent、warp_content
+5. 参考
+
+#### 前言
+
+对于 ConstraintLayout，最开始看的郭大叔的 [Android新特性介绍，ConstraintLayout完全解析](https://blog.csdn.net/guolin_blog/article/details/53122387)，但是由于自身原因更倾向于直接在 xml 里面写。之后又看了鸿洋的 [ConstraintLayout 完全解析 快来优化你的布局吧](https://blog.csdn.net/lmj623565791/article/details/78011599?utm_source=tuicool&utm_medium=referral)，还不错，但是有些知识的遗漏。
+
+如果你一点没接触过约束布局，以上两篇是不错的选择。
+
+本文把 ConstraintLayout 的使用细分了一下，**对于控件的学习，一定要自己动手写！**
+
+看完自己动手敲一遍，基本上就可以在项目中尝试用了～
+
+本文偏总结，想要看每个属性的预览图，可以参考：[ConstraintLayout在项目中实践与总结](https://www.jianshu.com/p/f110b4fcfe93)
+
+我也是看了这篇文章受益匪浅，在这里诚谢作者的无私奉献～
+
+最后，直接 fork [https://github.com/googlesamples/android-ConstraintLayoutExamples](https://github.com/googlesamples/android-ConstraintLayoutExamples)
+
+#### 基本使用
+
+##### 相对位置
+
+```java
+layout_constraintLeft_toLeftOf
+layout_constraintLeft_toRightOf
+...
+layout_constraintBaseline_toBaselineOf	//文字的 baseline 对齐    
+```
+
+这一部分的使用和 RelativeLayout 使用一致，设置控件的相对位置。
+
+##### 设置边距
+
+边距分为普通边距和依赖控件被 Gone 掉后的边距属性：
+
+```java
+//普通边距
+android:layout_marginStart
+android:layout_marginLeft
+...
+//依赖控件被 GONE 掉后的边距属性
+android:layout_goneMarginStart
+android:layout_goneMarginLeft	
+```
+
+#####  水平/垂直偏移
+
+```java
+//值为 0~1 之间
+layout_constraintHorizontal_bais	//水平偏移
+layout_constraintVertical_bais		//垂直偏移
+```
+
+##### 按比例设置
+
+```java
+//设置控件宽高比，前提是至少有一个尺寸是 0dp
+//值可以是 float，比如 0.5，表示宽高比
+//也可以是形如：5:3，表示宽高比
+layout_constraintDimentionRatio
+```
+
+如果宽高都设置了 0dp，那么控件会在满足比例的情况下尽可能填满父布局。
+
+##### 链
+
+```java
+//链提供了在一个维度上管理一组控件的方式，链的属性由链头控制
+//它有三个值: spread、spread_inside、packed，默认值是 spread
+layout_constraintHorizontal_chainStyle
+layout_constraintVertical_chainStyle
+```
+
+至于不同的样式会是什么效果，这里直接盗官网图说明：
+
+![](https://i.loli.net/2019/02/16/5c68174a11cd1.png)
+
+##### Guideline
+
+Guideline 可以理解为布局辅助线。
+
+```java
+    <android.support.constraint.Guideline
+        android:id="@+id/vertical_line"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.5"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content" />
+
+    <android.support.constraint.Guideline
+        android:id="@+id/horizontal_line"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.5"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content" />
+```
+
+它有垂直和水平两个方向，垂直宽度为 0，高度为父容器；水平高度为 0，宽度为父容器。
+
+放置 Guideline 的三种方式：
+
+1. layout_constraintGuide_begin
+
+   给定左边或顶部一个固定距离
+
+2. layout_constraintGuide_end
+
+   给定距离右边或底部一个固定距离
+
+3. layout_constraintGuide_percent
+
+   给定宽高一个百分比距离
+
+#### 代码设置约束
+
+用代码设置约束着实是一个坑！
+
+通过 ConatraintSet，允许在代码中进行设置约束，进行布局变换。
+
+这里，可以直接看前言给的官方示例了，效果如下：
+
+![](https://i.loli.net/2019/02/17/5c690298ad70f.gif)
+
+代码两三行就完了，就是两个布局，布局里面的 View id 一致，添加过渡效果只需要一行代码：
+
+```java
+TransitionManager.beginDelayedTransition(mConstraintLayout);
+```
+
+就不多说了，直接 fork Simples 吧。
+
+#### 优势
+
+约束布局减少了布局嵌套，在绘制渲染上提供了更好的性能。根据 Google 提供的数据表明，ConstraintLayout 在测量/布局阶段的性能比 RelativeLayout 大约高 40%。
+
+同时，由于各种百分比的属性，适配性比传统布局好。
+
+#### 注意事项
+
+1. 可见性
+
+   约束布局中的可见性和其他布局相比不太一样，当控件设为 gone 时，被认为尺寸为 0，可以理解为布局上的一个点。若 gone 的控件对其它控件有约束，约束保留并生效，但是所有边距会清零。
+
+2. margin 负值问题
+
+   在其他布局中，可以设置 margin 负值来达到布局重叠的效果，而在约束布局中设置 margin 负值不生效，那如何才能实现布局重叠的效果呢？
+
+   可以通过辅助线和 1dp View 来实现，内在思想都是一样的。
+
+   ```java
+   <android.support.constraint.ConstraintLayout
+       xmlns:android="http://schemas.android.com/apk/res/android"
+       android:layout_width="match_parent"
+       android:layout_height="match_parent"
+       xmlns:app="http://schemas.android.com/apk/res-auto">
+       <Button
+           android:id="@+id/btn"
+           android:text="按钮"
+           app:layout_constraintLeft_toLeftOf="parent"
+           app:layout_constraintRight_toRightOf="parent"
+           app:layout_constraintTop_toTopOf="parent"
+           android:layout_width="0dp"
+           android:layout_height="200dp" />
+   
+       //辅助 View
+       <View
+           android:id="@+id/view"
+           app:layout_constraintBottom_toBottomOf="@id/btn"
+           android:layout_marginBottom="40dp"
+           android:visibility="invisible"
+           android:layout_width="match_parent"
+           android:layout_height="1dp" />
+       <Button
+           app:layout_constraintTop_toBottomOf="@+id/view"
+           app:layout_constraintLeft_toLeftOf="parent"
+           app:layout_constraintRight_toRightOf="parent"
+           android:text="按钮"
+           app:layout_constraintWidth_max="200dp"
+           android:layout_width="0dp"
+           android:layout_height="100dp" />
+   
+   </android.support.constraint.ConstraintLayout>
+   ```
+
+3. 0dp、match_parent、warp_content 区别
+
+   当设置 0 dp 的时候，它会基于约束最终确定大小。而设置 match_parent 充满父布局，此时设置的约束都不会生效。
+
+   基于约束确定大小有三种：
+
+   ```java
+   //设置约束宽/高最小值
+   layout_constraintWidth_min
+   layout_constraintHeight_min
+   //设置约束宽/高最大值
+   layout_constraintWidth_max
+   layout_constraintHeight_max
+   //根据百分比设置
+   //需要现开启百分比模式
+   layout_constraintWidth_default = "percent"
+   layout_constraintHeight_default = "percent"  
+   layout_constraintWidth_percent = "0.5"  
+   layout_constraintHeight_percent = "0.5"    
+   ```
+
+   对于 warp_content，它会根据内容计算合适大小，所以添加约束是不起效果的，但是我们也可以强制约束：
+
+   ```java
+   layout_constraintWidth = "true"
+   layout_constraintHeight = "true"
+   ```
+
+#### 参考
+
+[ConstraintLayout在项目中实践与总结](https://www.jianshu.com/p/f110b4fcfe93)
--- a/blogs/Android/Fragment.md
+++ b/blogs/Android/Fragment.md
@ -22,7 +22,8 @@ Fragment
   5. 回退栈的理解
   6. Fragment 重叠
   7. onActivityResult()
-9. 参考
+9. 源码分析
+10. 参考

 #### 思维导图

@ -235,6 +236,105 @@ Activity 也可以使用 findFragmentById 或 findFragmentByTag 来获取 Fragme

   但是仍要注意的一点是，嵌套的 Fragment 需要一级一级的分发。

+#### 源码分析
+
+##### FragmentManager
+
+我们通过在 Activity 在 getSupportFragmentManager 获取的 FragmentManager 其实是 FragmentManagerImpl，它也是抽象类 FragmentManager 的唯一实现类。
+
+FragmentManagerImpl 里面有两个重要方法：
+
+1. beginTransaction()
+
+   ```java
+   public FragmentTransaction beginTransaction() {
+   	return new BackStackRecord(this);
+   }
+   ```
+
+   这里 BackStackRecord 也是抽象类 FragmentTransaction 的唯一实现。
+
+2. popBackStack()
+
+   ```java
+   	public void popBackStack() {
+   		enqueueAction(new PopBackStackState(null, -1, 0), false);
+   	}
+       public void enqueueAction(OpGenerator action, boolean allowStateLoss) {
+           if (!allowStateLoss) {
+               checkStateLoss();
+           }
+           synchronized (this) {
+               if (mPendingActions == null) {
+                   mPendingActions = new ArrayList<>();
+               }
+               mPendingActions.add(action);
+               scheduleCommit();
+           }
+       }
+   ```
+
+##### BackStackRecord
+
+```java
+final class BackStackRecord extends FragmentTransaction implements
+        FragmentManager.BackStackEntry, FragmentManagerImpl.OpGenerator {
+
+    final FragmentManagerImpl mManager;
+	// 构造 Op 的标识位
+    static final int OP_NULL = 0;
+    static final int OP_ADD = 1;
+    static final int OP_REPLACE = 2;
+    static final int OP_REMOVE = 3;
+	//...
+
+    static final class Op {
+        //add、replace、remove 标志位
+        int cmd;
+        Fragment fragment;
+        //进入退出动画
+        int enterAnim;
+        int exitAnim;
+        int popEnterAnim;
+        int popExitAnim;
+
+        Op() {
+        }
+		
+        Op(int cmd, Fragment fragment) {
+            this.cmd = cmd;
+            this.fragment = fragment;
+        }
+    }
+	//操作集合
+    ArrayList<Op> mOps = new ArrayList<>();
+}    
+```
+
+我们通过 FragmentTransaction add Fragment 时：
+
+```java
+    	public FragmentTransaction add(int containerViewId, Fragment fragment){
+        	doAddOp(containerViewId, fragment, null, OP_ADD);
+        	return this;
+    	}
+
+        private void doAddOp(int containerViewId, Fragment fragment, String tag, int opcmd) {
+        fragment.mFragmentManager = mManager;
+        addOp(new Op(opcmd, fragment));
+    	}
+
+    	void addOp(Op op) {
+        	mOps.add(op);
+            op.enterAnim = mEnterAnim;
+            op.exitAnim = mExitAnim;
+        	op.popEnterAnim = mPopEnterAnim;
+        	op.popExitAnim = mPopExitAnim;
+    	}
+```
+
+
+
 #### 参考

 [Fragment 官方文档](https://developer.android.com/guide/components/fragments?hl=zh-cn)
--- a/images/Android/Constraint.gif
+++ b/images/Android/Constraint.gif