在有些开发中需要做到头像和姓名一起移动缩小到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); 方法来设置状态栏的高度。
网友评论