Coder Social home page Coder Social logo

03050903 / collapserelativebar Goto Github PK

View Code? Open in Web Editor NEW

This project forked from seiginonakama/collapserelativebar

0.0 2.0 0.0 159 KB

CollapseRelativeBar extends RelativeLayout, you only need to define child collapsed state, CollapseRelativeBar can auto handle the anim of child in expanding or collapsing process.

License: Apache License 2.0

Java 100.00%

collapserelativebar's Introduction

#CollapseRelativeBar


CollapseRelativeBar继承于RelativeLayout,展开时的子view布局同RelativeLayout一致,扩展时的子view状态用CollapseRelativeBar自定义属性定义。折叠和展开过程中,CollapseRelativeBar可以自动处理子view的过渡动画。

![animated gif demo](http://o7ilr4hyc.bkt.clouddn.com/collapse_relative_bar_demo.gif) *** *** ##引入库 ```gradle repositories { jcenter() } dependencies { compile 'me.touko:CollapseRelativeBarLib:0.9.0' } ``` ***

##Usage ###1. xml布局 CollapseRelativeBar可用自定义属性:

    <declare-styleable name="CollapseRelativeBar">
        <attr name="clBarHeight" format="dimension"/> <!-- 折叠时高度,可选,默认系统ActionBar高度 -->
        <attr name="clStatusBarScrim" format="reference|color"/> <!-- 折叠时状态栏遮罩,只在api 19及以上有效果,并且需要在设置android:windowTranslucentNavigation=true,android:windowTranslucentStatus=true -->
        <attr name="clAnimDuration" format="integer"/> <!-- 折叠动画时间长度,单位毫秒,可选,默认250毫秒 -->
    </declare-styleable>

展开时,子view完全按照RelativeLayout的布局方式布局。折叠时,子view的状态用自定义属性定义。相邻的滑动view需要定义app:layout_behavior="@string/CollapseRelativeBarScrollViewBehavior"

<android.support.design.widget.CoordinatorLayout
    ......>
    <me.touko.library.ui.CollapseRelativeBar
        android:layout_width="match_parent"
        android:layout_height="300dp"
        app:clBarHeight="50dp"
        app:clStatusBarScrim="@android:color/holo_blue_dark">

        ......

        <TextView
            展开状态下布局方式同RelativeLayout一样
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello"
            android:textSize="30sp"
            android:textColor="@android:color/holo_orange_light"
            android:layout_toLeftOf="@id/icon"
            android:layout_centerVertical="true"
            android:layout_marginRight="20dp"

            折叠状态下的布局用自定义属性定义
            app:clMarginLeft="20dp"
            app:clTextColor="@android:color/white"
            app:clMode="center"
            app:clScale="0.7"
            />

        ......
    </me.touko.library.ui.CollapseRelativeBar>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        滑动view需要设置app:layout_behavior
        app:layout_behavior="@string/CollapseRelativeBarScrollViewBehavior">
        ......
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

####注意: CollapseRelativeBar依赖CoordinatorLayout,如果CollapseRelativeBar不是CoordinatorLayout的直接子view,将不会正常工作。

###2. 子view可用自定义属性

    <declare-styleable name="CollapseLayout_LayoutParams">
        <attr name="clScaleX" format="float"/> <!-- 折叠时scaleX, 默认初始状态的scaleX -->
        <attr name="clScaleY" format="float"/> <!-- 折叠时scaleY, 默认初始状态的scaleY -->
        <attr name="clScale" format="float"/> <!-- 折叠时scale, 默认初始状态的scaleX -->
        <attr name="clWidth" format="dimension"/> <!-- 折叠时宽度, 默认初始状态的width -->
        <attr name="clHeight" format="dimension"/> <!-- 折叠时高度, 默认初始状态的height -->
        <attr name="clMarginLeft" format="dimension"/> <!-- 折叠时,相对左边界的margin -->
        <attr name="clMarginRight" format="dimension"/> <!-- 折叠时,相对右边界的margin -->
        <attr name="clMarginTop" format="dimension"/> <!-- 折叠时,相对于上边界的margin -->
        <attr name="clMarginBottom" format="dimension"/> <!-- 折叠时,相对于展开状态下边界的marigin -->
        <attr name="clAlpha" format="float"/> <!-- 折叠时的alpha, 默认初始状态的alpha -->
        <attr name="clScrim" format="reference|color"/> <!-- 折叠时的遮罩,默认空 -->
        <attr name="clTextColor" format="color"/> <!-- 折叠时TextView字体颜色,只对TextView有效 -->
        <attr name="clMode"> <!-- 默认折叠模式为center-->
            <flag name="center" value="0"/> <!-- 折叠时view竖直居中 -->
            <flag name="out" value="1"/> <!-- 折叠时view从上边界离开 -->
            <flag name="none" value="2"/> <!-- 折叠时view竖直位置只由clMarginBottom或clMarginTop决定 -->
        </attr>
        <attr name="clInterpolator" format="reference"/> <!-- 折叠时动画插值器 -->
        <attr name="clScaleXInterpolator" format="reference"/> <!-- 折叠时ScaleX动画插值器 -->
        <attr name="clScaleYInterpolator" format="reference"/> <!-- 折叠时ScaleY动画插值器 -->
    </declare-styleable>

###3. API

  /**
   * 展开CollapseRelativeBar
   *
   * @param duration 动画时长
   */
  public void runAutoExpand(long duration)

  /**
   * 折叠CollapseRelativeBar
   *
   * @param duration 动画时长
   */
  public void runAutoCollapse(long duration)

  /**
   * 是否已折叠
   *
   */
  public boolean isCollapsed()

  /**
   * 是否已展开
   *
   */
  public boolean isExpanded()

  /**
   * 增加折叠过程动画处理者,可完全自定义折叠动画
   *
   * @param collapseHandler 折叠过程动画处理者
   */
  public void addCollapseHandler(CollapseHandler collapseHandler)

  /**
   * 移除CollapseHandler
   *
   * @param collapseHandler 折叠过程动画处理者
   */
  public void removeCollapseHandler(CollapseHandler collapseHandler)

  /**
   * 折叠动画处理者,可以自定义折叠过程动画
   */
  public interface CollapseHandler {
    /**
     * 折叠过程回调,处理折叠动画
     *
     * @param parent  CollapseRelativeBar
     * @param child   需处理的子view
     * @param percent 目前折叠进度的百分比
     * @return 如果return true, CollapseRelativeBar会认为你已经处理了折叠变换,不会自动对child进行折叠处理。
     */
    boolean onCollapseTransition(CollapseRelativeBar parent, View child, float percent);

    /**
     * 监听折叠过程
     *
     * @param parent  CollapseRelativeBar
     * @param child   处理后的子view
     * @param percent 目前折叠进度的百分比
     */
    void afterCollapseTransition(CollapseRelativeBar parent, View child, float percent);
  }

collapserelativebar's People

Contributors

seiginonakama avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.