Android CoordinatorLayout 상세 정보 및 인스턴스 코드

13951 단어
Android CoordinatorLayout 상세 정보
1. CoordinatorLayout의 역할
Coordinator Layout은'슈퍼-powered FrameLayout'으로서 기본적으로 두 가지 기능을 실현한다. 첫째, 맨 윗부분 레이아웃 둘째, 스케줄링 조화 서브 레이아웃CoordinatorLayout 。CoordinatorLayout View Behaviors View。 (Support V7) AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior, FloatingActionButton.Behavior, SwipeDismissBehavior
CoordinatorLayout을 사용하려면 Gradle에 Support Design Library를 추가해야 합니다.compile 'com.android.support:design:22.2.1'
2. Coordinator Layout과 Floating Action Button
레이아웃 파일을 정의하려면 다음과 같이 하십시오.





  


CoordinatorLayout은'슈퍼-powered FrameLayout'으로서 하위 보기를 설정하는android:layoutgravity 속성 제어 위치.
Activity:

public class MainActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {

        Snackbar.make(view,"FAB",Snackbar.LENGTH_LONG)
            .setAction("cancel", new View.OnClickListener() {
              @Override
              public void onClick(View v) {
                //             Action      

              }
            })
            .show();
      }
    });
  }
}

효과:FloatingActionButton CoordinatorLayout ,FloatingActionButton FloatingActionButton.Behavior。
3. Coordinator Layout과 AppBarLayout3.1 AppBarLayout 중첩TabLayout
레이아웃 파일 코드:



  

    

    

  

  

  


효과: , ,Toolbar , Android Support Library , CoordinatorLayout, AppBarLayout 。 AppBarLayout 。 AppBarLayout ,Toobar app:layout_scrollFlags , 。app:layout_scrollFlags :
1.scroll: 화면을 스크롤하려는view는 모두 이 flag를 설정해야 합니다. 이 flag을 설정하지 않은view는 화면 맨 위에 고정됩니다.예를 들어 TabLayout은 이 값을 설정하지 않고 화면 맨 위에 머물게 됩니다.
2. enterAlways: 이 flag를 설정할 때 아래로 스크롤하면 이view가 보이게 되고 빠른 '되돌아오기 모드' 를 사용합니다.
3. enter Always Collapsed: 보기가minHeight 속성을 설정하고 이 로고를 사용할 때, 보기는 최소 높이로만 들어갈 수 있고, 스크롤 보기가 정상에 도달할 때만 전체 높이로 확대됩니다.
4.exitUntilCollapsed: 화면을 스크롤하여 종료하고 맨 위에 접습니다.
ToolBar가 굴러갈 수 있도록 Coordinator Layout에 굴러갈 수 있는 View를 넣습니다.위의 예와 같이 ViewPager를 넣었고 ViewPager는 RecylerView를 넣었습니다. 즉, 스크롤할 수 있는 View입니다.CoordinatorLayout에 포함된 하위 뷰에 스크롤 속성이 있는 View를 설정하려면 app:layoutbehavior 속성입니다.예를 들어, 예제에서 Viewpager에서 이 속성을 설정했습니다.app:layout_behavior="@string/appbar_scrolling_view_behavior"
 
 

为了使得Toolbar有滑动效果,必须做到如下三点:
1. CoordinatorLayout作为布局的父布局容器。
2. 给需要滑动的组件设置 app:layout_scrollFlags=”scroll|enterAlways” 属性。
3. 给滑动的组件设置app:layout_behavior属性

3.2 AppBarLayout嵌套CollapsingToolbarLayout





  

    

      

      

    

  

  

    

      

        

          

          

        

      
     ……
    

  

  


효과:
이런 효과는 상세한 페이지에 많이 사용되고 개성화된 내용을 보여주며 이미지가 강한 흡인력을 가진다.이 효과는 CollapsingToolbarLayout을 중점적으로 사용했다.CollapsingToolbarLayout은 Toolbar을 축소할 수 있습니다.CollapsingToolbarLayout의 하위 보기는 LinearLayout과 수직 방향으로 배출됩니다.
CollapsingToolbarLayout은 다음과 같은 속성과 방법을 제공합니다. 1.Collapsing title: Tool Bar의 제목입니다. Collapsing ToolbarLayout 전체 화면이 접히지 않았을 때 title는 큰 글씨체를 보여줍니다. 접는 과정에서 title는 일정한 크기의 효과로 계속 작아집니다.setTitle 방법을 사용하여 title을 설정할 수 있습니다.2. Content scrim: Tool Bar가 맨 위에 접혀서 고정된 배경입니다. set Content Scrim (Drawable) 방법으로 배경을 바꾸거나 속성에서 app: content Scrim = "을 사용할 수 있습니다.attr/colorPrimary로 배경을 변경합니다.3. Status bar scrim: 상태 표시줄 배경, 호출 방법 set Status BarScrim(Drawable).아직 연구를 못했지만, 이것은 안드로이드 5에서만 가능합니다.0 이상의 시스템이 효과가 있습니다.4. Parallax scrolling children: CollapsingToolbarLayout이 미끄러질 때 하위 보기의 시각적 차이는 속성 app:layoutcollapseParallaxMultiplier="0.6"변경 내용값 de의 범위는 [0.0,1.0]이고 값이 클수록 시찰이 크다.5.CollapseMode: 하위 보기의 접기 모드, 하위 보기 설정에 두 가지'pin'이 있습니다. 고정 모드는 접을 때 맨 위에 고정됩니다."parallax": 시차 모드로 접을 때 시차 접는 효과가 있습니다.레이아웃에서 속성 app:layout 을 사용할 수 있습니다collapseMode="parallax"로 변경합니다.
CoordinatorLayout은 layout도 제공합니다.anchor의 속성,layoutanchorGravity와 함께 다른 보기와 연결된 플로팅 보기 (예: 플로팅 Action Button) 를 놓을 수 있습니다.이 예에서는 FloatingActionButton을 사용합니다.
아래의 매개 변수를 통해 FloatingActionButton의 위치를 설정하였으며, 두 속성이 공통적으로 작용하여 FAB 부동 버튼도 축소하여 사라지게 하여 나타낼 수 있다.app:layout_anchor="@id/appbar" app:layout_anchorGravity="bottom|right|end"
CollapsingToolbarLayout을 사용하여 접기 효과를 실현하려면 3가지 주의가 필요합니다.AppBarLayout의 높이 고정 2.CollapsingToolbarLayout의 하위 보기 설정layoutcollapseMode 속성 3.연결 플로팅 보기 설정 app:layoutanchor,app:layout_anchorGravity 속성
4. 사용자 정의 behavior
Coordinator Layout의 기능이 이렇게 강력한데 그의 신기한 점은 Behavior 대상이다. Coordinator Layout 자체가 View를 제어하지 않고 모든 통제권이 Behavior에 있다.앞에 Floating Action Button이라고 쓰여 있습니다.Behavior,AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior. App Bar Layout에는 두 개의 Behavior가 있는데, 하나는 자기가 쓰는 것이고, 다른 하나는 형제의 결점을 주는 것이다.이러한 Behavior는 복잡한 제어 기능을 제공합니다.시스템의 Behavior는 한계가 있기 때문에 우리는 사용자 정의 방식을 통해 자신의 Behavior를 실현할 수 있다.
Coordinator Layout을 통해서.Behavior(Your View.Behavior.class)는 자신의 Behavior를 정의하고 layout 파일에 app:layout 을 설정합니다.behavior=”com.example.app.YourView$Behavior를 선택하면 효과를 볼 수 있습니다.
Behavior를 사용자 정의하려면 다음 두 가지 방법을 재작성해야 합니다.

public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) 

public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency)

아래의 예와 같이 FloatingActionButton을 누르면 90도 회전을 하고 Snackbar와 어울린다.

public class RotateBehavior extends CoordinatorLayout.Behavior {
  private static final String TAG = RotateBehavior.class.getSimpleName();

  public RotateBehavior() {
  }

  public RotateBehavior(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  @Override
  public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
    return dependency instanceof Snackbar.SnackbarLayout;
  }

  @Override
  public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
    float translationY = getFabTranslationYForSnackbar(parent, child);
    float percentComplete = -translationY / dependency.getHeight();
    child.setRotation(-90 * percentComplete);
    child.setTranslationY(translationY);
    return false;
  }

  private float getFabTranslationYForSnackbar(CoordinatorLayout parent,
                        FloatingActionButton fab) {
    float minOffset = 0;
    final List dependencies = parent.getDependencies(fab);
    for (int i = 0, z = dependencies.size(); i < z; i++) {
      final View view = dependencies.get(i);
      if (view instanceof Snackbar.SnackbarLayout && parent.doViewsOverlap(fab, view)) {
        minOffset = Math.min(minOffset,
            ViewCompat.getTranslationY(view) - view.getHeight());
      }
    }

    return minOffset;
  }
}


  

효과:
기본적으로 CoordinatorLayout의 사용 방식을 덮어씁니다.
읽어주셔서 감사합니다. 여러분께 도움이 되었으면 좋겠습니다. 본 사이트에 대한 지지에 감사드립니다!

좋은 웹페이지 즐겨찾기