CollapsingImgText 头像和姓名移动、缩小，固定在title上

andnroid1.jpg

在有些开发中需要做到头像和姓名一起移动缩小到title上。大家可能会想到使用design架包中的 CollapsingToolbarLayout来实现，但很遗憾，这个控件只支持文字移动缩小。

当然现在我们可以使用 CollapsingImageText控件来实现，这个控件可以支持头像和名字一起移动，效果图：

collapsing.gif

导入架包：

compile 'com.yahui:collapsingImageText:0.1.4'

使用方法：

该控件必须嵌套在AppBarLayout中使用，否则没有效果。
由于这个控件继承了RelativeLayout实现，所以你可以使用相对布局的任何属性。

<android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:theme="@style/AppTheme.AppBarOverlay">

        <com.yahui.collapsingimagetext.CollapsingImageTextLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title_id="@+id/test_title"
            app:text_id="@+id/test_text"
            app:text_scale="0.6"
            app:text_margin_left="50dp"
            app:img_id="@+id/test_img"
            app:img_margin_left="10dp"
            >
            <TextView
                android:id="@+id/test_title"
                android:layout_width="match_parent"
                android:layout_height="45dp"
                android:background="@android:color/holo_blue_light"
                android:gravity="center"
                android:text="title is here"
                />

            <ImageView
                android:id="@+id/test_img"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:scaleType="fitXY"
                android:src="@mipmap/ic_launcher"
                android:layout_centerVertical="true"
                android:layout_marginTop="30dp"
                android:layout_marginLeft="20dp"
                />

            <TextView
                android:id="@+id/test_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/test_img"
                android:text="MoveText"
                android:textSize="20sp"
                android:layout_marginTop="30dp"
                android:layout_marginLeft="30dp"
                android:layout_centerVertical="true"
                />

        </com.yahui.collapsingimagetext.CollapsingImageTextLayout>
       
    </android.support.design.widget.AppBarLayout>

Xml配置说明

    app:title_id="@+id/test_title"  //指定title View
    app:text_id="@+id/test_text"    //指定姓名view
    app:text_scale="0.6"            //姓名view缩小的倍数
    app:text_margin_left="50dp"     //姓名view在titleView 中的左边距
    app:text_margin_top="10dp"      //姓名view在titleView 中的上边距
    app:img_id="@+id/test_img"      // 指定头像View
    app:img_scale="0.6"             //头像View缩小的倍数
    app:img_margin_left="10dp"      //头像View在titleView 中的左边距
    app:img_margin_top="10dp"       //头像View在titleView 中的上边距

java 调用方法

setImgTitleMarginTop(int top)
    
 setImgTitleMarginLeft(int left)
    
 setTextTitleMarginTop(int top) ;
    
 setImgTextMarginLeft(int left) ;

 setStateBarHeight(int stateBarHeight)；//设置状态栏高度

如果你在 AppBarLayout 中的xml文件中指定了android:fitsSystemWindows="true"，
这个时候你也许需要调用setStateBarHeight(int stateBarHeight)；方法来设置状态栏的高度。

GitHub地址

https://github.com/hu5080126/CollapsingImgText