【Android】 레이아웃을 접는 View를 만들었다 - ExpandableLayout

11676 단어 안드로이드도서관자바ExpandableLayout

개요



최근에 View 클래스를 만들어 놀고 있습니다.

하나 전 정도의 GooglePlay의 앱 설명문으로 사용되고 있었던,
접이식 레이아웃이 어떤 느낌으로 구현할 수 있을지 흥미가 있었으므로, 시험에 만들어 보았다.

demo

소개



ExpandableLayout

레이아웃의 요소를 접을 수 있는 View
  • Github
  • htps : // 기주 b. 코 m / 츄로 s / 에 x 팬더 b ぁ

  • YouTube
  • htps //w w. 요츠베. 이 m/와 tch? v = 에7 와 zMRv


    • 특징


  • 접을 때 ExpandableLayout의 높이를 지정할 수 있습니다
  • ExpandableLayout가 포함 된 View의 ID를 지정하면 ID로 지정된 View까지 접을 수 있습니다.
  • 접을 때 높이 여백을 지정할 수 있습니다
  • 접는 애니메이션의 시간을 지정할 수 있습니다
  • 접을 때/열 때 콜백을 지정할 수 있습니다
  • 접을 때/열 때 애니메이션을 지정할 수 있습니다

    • 사용법



    Gradle 종속성에 ExpandableLayout 추가


    repositories {
    maven {
        url 'http://chuross.github.com/maven-repository/'
    }
}

dependencies {
    compile 'com.github.chuross:expandablelayout:1.0.3'
}

    GithubPage의 개인 maven-repository에 올리고 있기 때문에, repositories에의 추가도 잊지 않고

    XML 레이아웃에 작성


    <dev.chuross.library.ExpandableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <!-- ExpandableLayoutの中に自由なViewを入れる -->
</dev.chuross.library.ExpandableLayout>

    기본 이것만으로 사용할 수 있습니다.

    ExpandableLayout에 속성 추가




    이름
    금형
    설명
    보충


    exl_collapse_height
    dimention
    접을 때 ExpandableLayout의 높이 지정
    exl_collapse_target_id와 함께 사용할 수 없습니다.

    exl_collapse_target_id
    참조
    접을 때 ExpandableLayout의 높이를 계산할 ViewID 지정
    지정하면 ID로 지정한 View까지를 자동 계산하여 축소

    exl_collapse_padding
    dimention
    접을 때 ExpandableLayout의 높이에 여백 추가

    exl_duration
    integer
    접을 때/열 때 애니메이션의 시간 지정

    exl_expanded
    부울
    View 생성시에 열린 상태로 한다



    접는 작업


    @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    ExpandableLayout expandableLayout = (ExpandableLayout)findViewById(R.id.layout_expandable);

    expandableLayout.expand();// 開く
    expandableLayout.collapse();// 折りたたむ

    expandableLayout.expand(false);// アニメーション無しで開く
    expandableLayout.collapse(false);// アニメーション無しで折りたたむ
}

    보충



    exl_collapse_height와 exl_collapse_target_id의 차이



    exl_collapse_height


  • 접을 때 ExpandableLayout의 높이를 고정하려는 경우에 사용합니다.
  • 어느 정도의 높이로 접을지 정해져 있으면 속성을 지정하는 것이 좋다

    • exl_collapse_target_id


  • ExpandableLayout이 포함하는 View의 위치에서, 접을 때의 ExpandableLayout의 높이를 조정하고 싶은 경우에 사용합니다.
  • TextView의 layout_height=WRAP_CONTENT의 경우와 같이, 가변하는 요소를 대상으로 접을 때의 높이를 조정하고 싶을 때에 사용하면 좋다

    • exl_collapse_padding의 사용 장소


  • 주로 exl_collapse_target_id를 사용하는 것과 같은 장면에서 사용된다
  • 접을 때 ExpandableLayout의 높이를 ViewID로 지정하면서 View의 일부를 표시 한 상태에서 접을 때 사용하는 것이 좋습니다.

    exl_collapse_target_id의 예



    이런 식으로 지정하면 @+id/two의 View의 선두까지가 접혀진다
    <dev.chuross.library.ExpandableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:exl_collapse_target_id="@+id/two">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <View
            android:id="@+id/one"
            android:layout_width="match_parent"
            android:layout_height="120dp" />
        <View
            android:id="@+id/two"
            android:layout_width="match_parent"
            android:layout_height="200dp" />                
    </LinearLayout>
</dev.chuross.library.ExpandableLayout>

    exl_collapse_target_id의 예 (exl_collapse_padding과 결합 된 예)



    이런 느낌으로 쓰면 @+id/two의 View가 절반 보이는 상태로 접히게 된다
    (@+id/two의 View의 선두로부터 100dp 더한 위치까지를 접도록 계산하기 위해서)
    <dev.chuross.library.ExpandableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:exl_collapse_target_id="@+id/two"
    app:exl_collapse_padding="100dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <View
            android:id="@+id/one"
            android:layout_width="match_parent"
            android:layout_height="120dp" />
        <View
            android:id="@+id/two"
            android:layout_width="match_parent"
            android:layout_height="200dp" />                
    </LinearLayout>
</dev.chuross.library.ExpandableLayout>

    접을 때 애니메이션 변경



    demo2

    내부적으로는 애니메이션 동작에 Scroller를 사용하고 있으므로, Interpolator 를 변경하는 것으로 동작을 변경할 수 있다
    @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    ExpandableLayout expandableLayout = (ExpandableLayout)findViewById(R.id.layout_expandable);
    expandableLayout.setInterpolator(new BounceInterpolator());
}

    커스터마이즈도 가능하지만, 표준으로 준비되어 있는 것은 이쪽에서 확인하면 좋을 것 같다
  • htps // dl. d로 p 보세 r 콘텐트 t. 코 m/우/6685256/안 d로이ぢ테 r포ぁ치온/이여 x. HTML

    • 라이센스



    Apache License 2.0
    JitPack.io를 사용하면 쉽게 자체 제작 Android 라이브러리를 배포 할 수있어서 매우 편리했습니다.
    [Swift] [iOS] 차트 표시 라이브러리 [ios-charts]

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage